[Js 딥다이브] 12. 함수 (1)

📌 Js 에서 함수

스코프, 실행 컨텍스트, 클로저, 생성자 함수에 의한 객체 생성, 메서드, this 바인팅, 프로토타입, 모듈화와 깊은 관련이 있기 때문에 js 함수는 정말 중요한 개념이다!

 

프로그래밍에서 함수를 사용하는 이유?

 

var x = prompt();
var y = prompt();

if (Number(x) === Number(y)){
    console.log(true)
}else{
    console.log(false)
}

function is_same(a, b){
    return Number(a) === Number(b)
}
console.log(is_same(x, y))

 

함수의 가장 큰 장점은 코드의 재사용이다.

함수 없이 두개를 비교해보는 경우를 생각해보면 if / else 를 반복적으로 써야하지만 

함수를 한번 생성하기만 한다면 비교를 해야하는 상황에서 만들어둔 함수를 호출하고 매개변수 x, y 를 넘겨주기만 하면 된다.

 

1.  함수 리터럴

자바스크립트의 함수는 객체 타입의 값이다.
표현식을 통해서 평가 되고, 그 평가의 결과로 객체 타입의 값이 할당된다.
따라서 함수도 변수에 리터럴로 값을 할당하는 것 처럼, 함수 리러털로 생성할 수 있다.
일반 객체는 생성 후 호출할 수 없지만 함수는 호출할 수 있다.

 

📌 변수에 함수 리터럴 할당

var my_function = function(x, y){
	return x + y;
}

var new_function = my_function();
console.log(new_function(2, 4)); // 6

 

2. 함수 정의

함수를 정의하면, 자바스크립트 엔진에 의해서 평가가 되고 함수 객체 값이 된다.
함수 선언문이 평가 되면 식별자가 생성되고 함수 객체가 할당된다
변수는 선언되고, 함수는 정의 된다.

 

1️⃣  함수 선언문

 

// 함수 선언문은 이름을 생략할 수 없다.
function (x, y){
	return x + y;
}

function add(x, y){
	return x + y;
}
// 함수 리터럴은 이름을 생략할 수 있다.
var my_function = function(x ,y){
	ruturn x + y;
}

 

함수 선언문은 변수 선언문과 동일하게 표현식이 아닌 문이다.

즉, 함수 선언문 하나로는 값을 평가할 수 없다는 것이다

 

 

표현식인 문과 표현식이 아닌문을 구별하기 가장 쉬운 방법은,

변수에 할당해보는 것이다.

아래의 예시 둘다 표현식의 아닌 문이고, 값으로 평가되지 않기 때문에 변수에 할당할 수 없다.

 

// 변수에 표현식을 통해 평가되지 않은 값 할당, 잘못된 방법
var num = var x; 
// 변수에 함수 리터럴 표현식이 아닌 표현식이 아닌 문인 함수 선언문을 할당
var new_function = function add(x, y){
    return x + y;
}
console.log(new_function(2, 4)); // 6

변수에 표현식이 아닌 문 즉, 값으로 평가될 수 없는 문을 할당했는데 정상적으로 동작한다.

 

🧐 왜 정상적으로 동작할까?

{} 와 이름이 있는 함수 리터럴이 중의적 표현이기 때문이다

 

// 이름이 있는 함수 리터럴
function add(x, y){
	return x + y;
}

 

코드의 문맥에 따라서 이름이 있는 함수 리터럴이 함수 선언문 또는 함수 리터럴 표현식으로 해석될 수 있기 때문이다.

{} 와 이름 있는 함수 리터럴이 단독으로 쓰이는 문맥에서는, 함수 선언문으로 해석된다.

{} 와 이름 있는 함수 리터럴이 값으로 평가되어야 하는 문맥(할당 연산자의 우변인 피연산자) 에서는, 함수 리터럴 표현식으로 해석된다.

 

// 값으로 평가되어야 하는 문맥에서는 자바스크립트 엔진에 의해서 우변에 있는 함수 선언문이 함수 리터럴 표현식으로 해석된다.
var new_function = function add(x, y){
    return x + y;
}

// 이렇게 작성한것과 동일하게 해석된다.
var new_function = function (x, y){
    return x + y;
}

이러한 이유로 표현식이 아닌 문을 할당해도 정상적으로 동작하는 것이다.

 

📌 선언문과 리터럴 표현식의 중요한 차이

 

function say_hello(){
	console.log("hello!");
}

say_hello(); // hello!

(function say_hello(){ console.log("hello!"); })

say_hello(); // ReferenceError : say_hello is not defined

 

그룹 연산자 () 내에 있으므로 함수 선언문은 피연산자로 해석되어 함수 리터럴 표현식으로 해석된다. 

피연산자는 값으로 평가될 수 있어야 한다.

하지만 위에서 살펴 봤듯이 함수 선언문은 표현식이 아닌 문이라서 값으로 평가되지 않기 때문에 undefined 를 호출하는 것과 마찬가지이다

 

📌 함수 이름의 역할

 

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

console.log(add(2, 4)); // ReferenceError : add is not defined

 

"함수 이름은 함수 몸체 내부에서만 참조할 수 있는 식별자이다."

따라서 함수 외부에서는 호출할 수 없다.

리터럴 표현식으로 사용된 add 함수를 가르키는 식별자가 없다는 뜻이다.

 

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

console.log(add(2, 4)); // 6

하지만 함수 선언문으로 정의된 함수 add 는 외부에서 호출할 수 있다.

자바스크립트 엔진이 런타임 시점 이전에 평가를 할때 함수 선언문을 해석하고 함수 객체를 생성하고, 그 객체의 시작 주소를 가르키는 식별자 add 를  암묵적으로 생성하기 때문이다.

함수 이름으로 함수를 호출하는 것이 아니라, 함수 객체를 가르키는 식별자를 통해서 함수를 호출하는 것이다 !

 

2️⃣ 함수 표현식

 

자바스크립트 함수는 객체이지만 값의 성질을 갖기때문에 여기저기서 자유롭게 사용할 수 있다.

따라서 일급 객체라고 불린다.

 

함수 리터럴로 생성한 함수 객체를 변수에 할당하는 방식을 함수 표현식 이라고 한다.

함수 표현식은 익명 함수(이름이 없는 함수)를 사용한다.

 

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

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

// 함수를 호출 할 때는, 함수 이름이 아닌 함수 객체를 가르키는 식별자를 사용한다
var sub = function minus(x, y){
	return x - y;
}

console.log(minus(6, 2)); // ReferenceError
console.log(sub(6, 2)); // 4

 

📌 함수 호이스팅

 

console.log(add(2, 4)); // 6
console.log(sub(6, 4)); // TypeError : sub is not function

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

var sub = function(x ,y){
    return x - y;
}

 

함수 선언문 

 

함수 선언문으로 함수를 정의하면, 코드가 한줄씩 실행되는 런타임 시점 이전에 자바스크립트 엔진에 의해서 함수 객체가 생성되고 그 객체를 가르키는 식별자도 암묵적으로 생성된다.

런타임 시점에는 이미 함수 선언문으로 정의한 함수가 생성되어 있고, 그 함수 객체를 가르키는 식별자도 생성 되있는 것이다.

이를 함수 호이스팅이라고 한다.

 

함수 표현식

 

함수 표현식은 변수에 할당하는 값이 함수 리터럴이다

변수를 선언하고 변수에 원시 값을 할당하는 것과 동일하게 동작한다. 

// 함수 표현식은 이와 동일하게 동작
var x; // 변수 선언문
x = 10; // 변수 값 할당문
var x = 10; // 축약

var sub; // 변수 선언문
sub = function(x, y){ // 함수 리터럴 표현식
	return x - y;
}

 

변수 값 할당문은 런타임 이전이 아닌, 런타임 시점에 값으로 평가 되므로 함수 리터럴도 마찬가지로 런타임 시점에 평가되어 함수 객체가 된다. 

함수 표현식 이전에 함수를 참조하려고 하면 undefined 를 호출하는 것과 마찬가지 이므로, TypeError 이 발생한다.

 

📌 변수 호이스팅 vs 함수 호이스팅

 

호이스팅	변수	함수
공통점	런타임 이전에 식별자를 생성한다
차이점	undefined 로 평가	함수 객체로 평가, 선언문 이전에 호출 가능

 

 

3️⃣ Function 생성자 함수

 

var add = new Function('x', 'y', 'return x + y');
console.log(add(2, 4));

이 방식은 일반적이지 않고, 선언문이나 표현식으로 정의한 함수들과 다르게 동작하고 클로저를 생성하지 않는다.

 

4️⃣ 화살표 함수

 

const add = (x, y) => x + y;
console.log(add(2, 4)); // 6

 

Es6 부터는 함수 정의하는데 필요한 표현을 간략히 하기 위해서 화살표 함수를 사용한다.

표현 뿐만 아니라, 함수의 내부동작 또한 간략화 되어있다.