[JS] 실행 컨텍스트 뿌수기 #3 함수

실행 컨텍스트를 공부하면서

함수에 대한 공부도 필요하겠구나 라는 생각을 했습니다.

 

함수 코드의 평가와 실행 함수 실행 컨텍스트와 그 안에서 생성되는 렉시컬환경과 환경레코드 더 자세히 알아보고 싶기에 가장 기본이 되는 함수를 다시한번 공부해보는 시간을 갖겠습니다.

 

함수의 정의

 

함수는 마치 재료를 투입받아 제품을 생산하는 기계와 같습니다. 입력과 출력으로 새로운 값을 함수 외부로 반환해줍니다. 

함수는 일련의 과정을 문(Statement)으로 작성하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것입니다.

 

함수를 사용하는 이유

 

함수를 사용하는 이유는 정말 간단합니다. 코드의 재사용성!

바퀴를 다시 발명하지 마라는 유명한 프로그래밍 격언이 있습니다. 이미 만들어져있는 것을 다시 만들지 말라는 이야기입니다.

코드의 중복을 억제하고 재사용성을 높이며, 함수가 유지보수의 편의성을 높이고 예상치못한 동작을 예방할 수 있는 신뢰성있는 코드 

이것을 위해 우리는 함수를 사용하는 것입니다.

또한 JS에서 함수는 객체입니다. 다른 언어와 다른 JS만의 특징이기도 합니다. 함수는 객체다. 따라서 이름을 붙일 수 있습니다. 이름을 통해 이 함수가 어떤 작동을하는 함수인지 함수의 역할을 쉽게 파악할 수 있는 장점이 있습니다. 이를 통해 코드의 가독성을 높일 수 있습니다.

 

 

함수는 객체 타입이기 때문에 함수 리터럴로 생성할 수 있습니다.

// 변수에 함수 리터럴을 할당한 모습
var f = function add(x,y) {
	return x + y;
}

 

 

함수 리터럴을 통해 변수에 함수를 담아 사용이 가능합니다. 대신, 함수 호출 방식은 아래와 같습니다.

 

var f = function add(x,y) {
	return x + y;
}
console.log(f(1,2))   // 3


var f = function add(x,y) {
	return x + y;
}
console.log(add(1,2))  // Uncaught ReferenceError: add is not defined


var f = function (x,y) {
	return x + y;
}
console.log(f(1,2))   // 3

 

 

 

함수 정의 방법

 

 

 

함수 선언문

 

// 함수 선언문
function add(x,y) {
	return x + y
} 

console.log(add(2,5)); // 7

 

함수 선언문은 함수 리터럴과 형태가 동일하지만, 차이점은 있습니다. 함수 리터럴은 함수 이름을 생략할 수 있지만, 함수 선언문은 함수이름을 생략할 수 없습니다. 

함수 선언문은 표현식이 아닌 문입니다.

표현식이라면 함수를 실행시켰을 때 표현식으로써 생성된 함수가 출력되어야하지만, 선언문의 경우 함수 실행값이 undefined가 출력됩니다. 함수 선언문은 후자의 경우이기 때문에 선언 문 이라 할 수 있겠습니다.

 

 

 

 

 

 

함수 표현식

// 함수 표현식
console.log(add(2,5)); // add is not a function

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

console.log(add(2,5)); // 7

 

함수 표현식의 경우 코드 평가단계에 함수 호이스팅 (함수 내부코드까지 호이스팅) 이 아니라 변수 호이스팅이 일어납니다.

때문에 첫번째 console.log에서는 add는  undefined 상태이기 때문에 함수가 아니여서 함수가 아니라는 에러를 반환합니다.

두번째 console.log의 경우 코드 실행 단계까지 들어와 add에 함수가 "할당" 되어있는 상태이기 때문에 원하는 값을 반환하는 것을 확인할 수 있습니다.

 

Function 생성자 함수

var add = new Function ("x", "y", "return x + y);

console.log(add(2,5)); // 7

 

일반적인 함수 생성 방식도 아니며, 바람직하지 않다. Function  생성자 함수로 생성한 함수에서는 클로저도 생성되지않기 때문에 일반적인 함수 선언문, 함수 표현식과는 다른 방식으로 동작한다.

 

화살표 함수

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

console.log(add(2,5));

 

화살표 함수의 경우 일반 함수 선언문과 다른 점이 있다.

 

내부를 뜯어보면 화살표 함수의 경우

유튜브 FE재남 딥다이브 영상

add 함수는 화살표 함수로 생성하였고, add2는 함수 선언문으로 생성하였습니다.  우선 add 함수는 add2 앞에 있는 function 표시가 없고, prototype도 없기 때문에 add(화살표함수)는 생성자 함수를 사용할 수 없습니다. 또한 인수 argument와 caller의 형태도 다릅니다. 

 화살표 함수는 함수선언문에서 가볍게 쓸 수 있게 만든, 몸집을 작게만든 함수입니다. 함수의 기능에만 충실하도록 다이어트를 한 함수정의 방법입니다. 또한 this 바인딩을 하지않기때문에 외부 컨텍스트에 있는 this를 가져다 사용할 수 있는 장점이 있습니다.