[JavaScript] 4. 함수(Functions)

개인적으로 JavaScript를 공부하고 그 흔적을 남기는 곳입니다.

 

 

1. 함수 선언식과 함수 표현식

• 함수(function)는 참조 타입 중 하나로써 "function 타입"에 속한다.
• "함수 선언식 & 함수 표현식" 이렇게 두가지 방법으로 함수를 정의할 수 있다.
• 자바스크립트의 함수는 일급객체에 해당한다.
  • 일급객체란? 1) 변수에 할당 가능하고, 2) 함수의 매개변수로 전달 가능하고, 3) 함수의 반환 값으로 사용가능 한 객체를 뜻한다.

 

함수 선언식 : 함수의 이름과 함께 정의하는 방식 (이름, 매개변수, 중괄호 내부 로 구분된다.)

* 함수 선언식으로 선언한 함수는 var로 정의한 변수처럼 호이스팅이 발생한다. (선언 전 사용 가능)

add(1, 2) // 3

function add(num1, num2) {
	return num1 + num2
}

add(1, 2) // 3

 

함수 표현식 : 함수를 표현식 내에서 정의하는 방식 (이름을 생략하고 익명 함수로 정의 가능하다.)

* 함수 표현식으로 선언한 함수는 함수 선언식과 다르게, 함수를 정의 전에 호출하면 에러가 발생한다.

* 그러나 var를 통해 함수 표현식을 선언했다면, var의 특성에 의해 호이스팅이 일어나면서 undefined가 할당된다.

add(1, 2) // ReferenceError

const add = function (num1, num2) {
	return num1 + num2
}

add(1, 2) // 3

 

기본 인자 : 인자를 작성할 때 = 를 이용하여 인자의 기본 값을 선언할 수도 있다. (=의 양쪽은 한칸씩 띄운다)

const greeting = function (name = '홍길동') {
	console.log(`Hello! ${name}!`)
}

greeting() // Hello! 홓길동!

 

---

 

2. 화살표 함수 (Arrow Function)

• 함수를 비교적 간결하게 정의할 수 있는 문법
• "function" 키워드를 생략할 수 있다.
• 함수의 매개변수가 단 하나라면 소괄호 () 도 생략할 수 있다.
• 함수 몸통 부분의 표현식이 하나라면 중괄호 {}와 return문도 생략할 수 있다.

// 1) function 키워드를 삭제할 수 있다.
const arrow = (name) => {
	return `Hello! ${name}!`
}

// 2) 매개변수가 하나라면 소괄호를 생략할 수 있다.
const arrow = name => {
	return `Hello! ${name}!`
}

// 3) 몸통 부분의 표현식이 하나라면 중괄호와 return을 생략할 수 있다.
const arrow = name => `Hello! ${name}!`