JS - 점검 3(함수에 이해와 활용)

학습 목표

1. 함수에 선언과 사용

2. 함수 표현식이란?

3. 즉시 실행 함수란?

4. 화살표 함수란?

 

 

1. 함수에 선언과 사용

 

2. 함수 표현식이란?

자바스크립트에서 "함수 표현식"은 함수를 변수에 할당하는 방식으로 정의하는 것을 의미합니다. 함수 표현식은 함수를 값으로 다루는 함수형 프로그래밍의 개념 중 하나이며, 매우 유용한 패턴 중 하나입니다.

함수 자체가 식(Expression) 이기 때문에 함수를 변수에 할당하거나 함수의 매개변수로 사용할 수 도 있음 (일급 객체)

 

3. 즉시 실행 함수란?

자바스크립트에서 즉시 실행 함수(IIFE, Immediately Invoked Function Expression)를 만들려면 함수를 정의하고 즉시 실행 연산자 ()로 둘러싸면 됩니다.

IIFE는 함수를 정의함과 동시에 즉시 실행되며, 주로 스코프를 만들거나 전역 변수 오염을 방지하기 위해 사용됩니다

 

4. 화살표 함수란?

화살표 함수(arrow function) ES6 이후 버전에서 => 표기법을 사용해서 함수 선언을 간단하게 작성 일반 함수 표현식보다 간결하고 짧은 문법을 제공하며 주로 익명 함수로 사용됩니다. 화살표 함수는 주로 함수 내부에서 this 컨텍스트가 고정되는 특성을 가지고 있습니다. 주의) 2번째 예제에서 알아 봅시다. 함수 내부에서 this 컨텍스트가 고정되는 특성이란 - 화살표 함수와 일반 함수 표현식 간의 주요 차이 중 하나입니다. - 화살표 함수는 함수를 정의할 때, 함수가 선언된 위치에서의 this 컨텍스트를 상속받습니다. 이것은 함수 내부에서 this                키워드를 사용할 때, 해당 함수가 아닌 외부 함수나 객체의 this 값을 사용한다는 것을 의미합니다.

 

예제 1

 

예제 2 - 심화

 

화살표 함수의 특성 중 하나는 함수 내부에서 this가 상위 스코프(함수가 호출되는 context)의 this를 가리키지 않고, 함수가 정의된 시점에서의 this를 유지한다는 것입니다.

 

따라서 위의 코드에서 getValue 함수 내부에서 this.value를 사용하려고 하면, this는 함수가 정의된 시점에서의 this를 참조하게 됩니다.

이 경우, obj2 객체 내부에서 정의된 것이 아니라 전역 스코프에서 정의된 함수이므로, this는 전역 객체를 가리키게 됩니다. 전역 스코프에는 value 변수가 정의되어 있지 않으므로 this.value는 undefined를 반환합니다.

 

이런 이유로 화살표 함수를 객체의 메서드로 사용할 때는 this를 사용하여 객체의 속성에 접근하는 것이 올바른 동작을 얻기 위해선 일반 함수 표현식을 사용하는 것이 더 적합합니다.

 

// 일반 함수 표현식 const obj1 = {          value: 42,          getValue: function() {               return this.value;              }          };

 

주의!

let sum = (a, b) => return a + b; // 문법 오류

// return 키워드를 사용할 려면 반드시 중괄호를 붙어 사용하자.

 

요약

매개변수와 인수에 대한 용어를 확실히 구분하고 함수를 변수에 담을 수 있다는 개념과 일반 함수 표현식보다 간결하고 짧은 문법을 사용하고 싶다면 화살표 함수를 사용해 보자.