[모던 자바스크립트] 12장 함수

* 본 블로그 글은 모던 자바스크립트를 읽으며 진행했음을 밝힙니다.

* 개인적인 공부 기록용이, 상업적으로 사용하지 않으며 문제가 있을 시 즉시 글을 내리도록 하겠습니다.

 

1. 함수란?

const add = (x, y) => {
	return x + y;
}

add(2, 5) // 7

프로그래밍 언어에서 함수란,

일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

함수를 호출하고 ( ) 에는 인자를 넣고, 함수는 (x, y) 매개변수를 받는다.

🎈 처음 프로그래밍을 할 때, 가장 많이 하는 실수가 있는데, 바로 함수를 만들고 호출을 하지 않는 것이다.

🎈 함수는 가독성좋고, 유지보수가 용이하게 만들어야 한다.

🎈 때문에 이름도 잘 지어야하고, 함수 내부의 코드도 잘 만들어야 한다.

🎈 함수는 객체이다. 따라서, 함수 리터럴로 생성할 수 있다.

let result = function add(x, y) {
	return x + y;
}

 

2. 함수 정의

함수를 정의하는 방법은 총 4가지가 있다.

🥚 함수 선언문

function add(x, y) {
	return x + y;
}

🍳 함수 선언문은 이름을 생략할 수 없다. (저 add 지우면 오류난다.)

🍳 이 친구는 표현식이 아닌 문이다. (개발자도구에서 undefined 나온다.)

 

🥚 함수 표현식

let add = function(x, y) {
	return x + y;
}

🍳 이 친구는 표현식인 문 이라고 한다.

 

** 함수 선언문과 함수 표현식은 생성 시점이 다르다.

🍳 호이스팅이 발생할 때, 함수 선언문은 함수 자체가 선언 되어 있기 때문에 undefined로 평가 되지만,

🍳 함수 표현식은 add라는 변수가 평가 되기 때문에 생성 시점이 다르다고 한 것이다.

 

🥚 Function 생성자 함수

let add = new Function('x', 'y', 'return x + y';

🍳 이 친구는 한번도 써본 적이 없다.

🍳 일반적인 방법은 아니며, 클로저를 생성하지 않기에 위에 것과 다르게 작동한다.

 

🥚 화살표 함수

let add = (x, y) => {
	return x + y
}

// 위와 같이 바로 return 하는 경우는 축약 가능
let add = (x, y) => x + y;

🍳 ES6에 도입된 방식이다. 제일 많이 쓰는 것 같다.

🍳 하지만, 이 친구라고 만능은 아니다.

🍳 기존 함수와 this 바인딩 방식이 다르고, 프로토타입 프로퍼티가 없으며, arguments 객체를 생성하지 않는다.

 

3. 함수 호출

함수를 실행시키기 위해서는 먼저 함수를 호출해야한다.

함수를 호출하면서 필요한 인자를 넘겨야한다.

필요한 인자는 함수에 명시되어 있는 파라미터를 확인하면 된다.

function add(x, y) {
	return x + y;
}

// 1. 적절한 인자
add(1, 2) // 3

// 2. 부족한 인자
add(1) // NaN

// 3. 넘치는 인자
add(1, 2, 3) // 3

🍳 인자가 부족하면 보낸 값 +  undefined 이기 때문에 NaN이 나온다.

🍳 인자가 필요 이상이면 나머지는 무시된다.

🍳 무시된다고 해서 버려지는 것은 아니다.

🍳 암묵적으로 arguments 객체의 프로퍼티로 보관된다.

 

** 함수는 가급적 한 가지 일만 해야한다. 그리고 작게 만들어야 한다.

🍳 그래야 받는 매개변수도, 보내는 인자도 보기 좋아진다 :)

 

4. 반환문

반환문은 딱 하나만 기억하면 된다.

return 문 이후의 것은 TDZ(Temporal Dead Zone)라고 해서 실행되지 않는다.

🍳 그렇기에 return문 뒤에 코드를 넣지 말자.