[LeetCode] 2667 create-hello-world-function

✔ 문제 링크

https://leetcode.com/problems/create-hello-world-function/editorial/

✔ editorial 학습

1. 익명함수

var f = function(a, b) {
    const sum = a + b;
    return sum;
}
console.log(f(3, 4)); // 7

- 무기명 함수

 

2. 즉시 실행 함수

var res = (function () {
    var a = 3;
    var b = 5;
    return a + b;
}())

console.log(res); // 15

res = (function (a, b) {
    return a * b;
}(3, 5))

console.log(res); // 15

- 일반 함수처럼 값을 반환할 수 있으며, 인수를 전달할 수 있음.

const result = (function(a, b) {
    const sum = a + b;
    return sum;
})(3, 4);
console.log(result); // 7

- 변수 캡슐화 가능

- 함수 외부에서 sum 사용할 수 없음 → 즉시 실행 함수 내에 코드를 모아 두면, 변수나 함수 이름의 충돌을 방지할 수 있는 이유

 

3. 함수 내 함수 및 함수 호이스팅

function createFunction() {
    return f;
    function f(a, b) {
        const sum = a + b;
        return sum;
    }
}
const f = createFunction();
console.log(f(3, 4)); // 7

 

- js 특유의 함수 안 함수 기능만 봐도, 함수 호이스팅 현상을 볼 수 있음

- 호이스팅 : 함수 초기화 전에 함수 사용

 

 

4. 클로저(closure)

- 함수가 자신이 생성된 환경(또는 스코프)에 있는 변수들을 "기억"하고 접근할 수 있게 해주는 개념

- 클로저는 함수와 그 함수가 선언될 때의 렉시컬 환경이 결합된 것.

 

렉시컬 환경(Lexical Environment)이란?

렉시컬 환경은 함수가 선언된 위치에 따라 주변 변수들에 접근할 수 있도록 "기억"하는 일종의 구조체

1. 환경 레코드(Environment Record): 현재 스코프(scope)에서 선언된 변수들을 저장하는 공간. 이곳에는 함수에서 사용할 수 있는 모든 지역 변수, 상수, 매개변수 등이 저장됨.
2. 외부 렉시컬 환경 참조(Outer Lexical Environment Reference): 함수가 선언된 위치의 외부 환경을 참조하여, 바깥의 변수에도 접근할 수 있게 함.

예시)

function createAdder(a) {
    function f(b) {
        const sum = a + b;
        return sum;
    }
    return f;
}
const f = createAdder(3);
console.log(f(4)); // 7

 

단계별 설명

1. 함수 생성:
   • createAdder라는 함수가 있고, 이 함수는 매개변수 a를 받음. 이 a 변수는 createAdder 내부에서 선언된 다른 함수들이 접근할 수 있게 됨.
   • createAdder 함수가 호출되면, createAdder의 렉시컬 환경이 생성됨.
   • 이 렉시컬 환경에는 매개변수 a가 포함되고, 현재 값은 3.
   • createAdder 내부에는 f라는 함수가 정의되어 있으며, f는 매개변수 b를 받음.
2. 내부 함수 반환:
   • createAdder는 f라는 내부 함수를 반환하지만, 즉시 실행하지는 않음. createAdder가 실행되면 그 환경에서 f가 생성되며, f는 createAdder의 환경(즉, a 변수)에 접근할 수 있는 클로저를 형성. → 환경에 접근할 수 잇는 참조를 가지게 되고, f는 a라는 변수를 "기억"하게 됨.
   • f 함수는 createAdder 함수 내부에서 선언되었으므로, f의 렉시컬 환경은 createAdder의 렉시컬 환경에 연결됨. 그 결과 f 함수는 외부 렉시컬 환경을 통해 a에 접근할 수 있음.
3. 클로저 사용:
   • const f = createAdder(3); 구문이 실행되면, createAdder는 a = 3이라는 값과 함께 f라는 함수를 반환.
   • 이때 클로저가 생성되며, f 함수는 createAdder의 렉시컬 환경(즉, a = 3이라는 상태)을 기억하게 되므로, f는 매개변수 b를 전달받을 때마다, 항상 a = 3이라는 값을 사용할 수 있게 됨.
4. 반환된 함수 호출:
   • 이후 f(4)를 호출하면, f 함수가 실행되며 b에 4가 전달. 이때 f 함수 내부에서는 a 값이 3으로 유지되고 있으며, b는 현재 4.
   • const sum = a + b;는 3 + 4의 결과인 7을 계산하고 반환. 따라서 f(4)의 결과는 7이 됨.

클로저의 유용성

클로저는 함수가 자신이 생성된 환경을 "기억"함으로써, 함수 외부에서는 접근할 수 없는 변수들을 계속 사용할 수 있게 해줌.

• 데이터 캡슐화: a 변수는 createAdder 함수 내부에서만 접근 가능하며, 외부에서는 a 값에 접근할 수 없음. 이는 일종의 캡슐화로, 클로저는 변수를 은닉하여 안전하게 관리할 수 있게 해줌.
• 동적인 함수 생성: createAdder는 특정 값에 따라 다른 동작을 하는 함수를 "생성"하는 팩토리 역할을 할 수 있음. 예를 들어, const addFive = createAdder(5);를 호출하면, addFive는 항상 5를 더하는 함수가 됨.
• 상태 유지: 클로저는 외부 함수가 종료되더라도, 내부 함수가 해당 변수에 계속 접근할 수 있게 해주기 때문에, 일종의 "상태"를 유지하는 기능을 제공함.

이러한 특성 덕분에 클로저는 자바스크립트에서 비동기 작업, 콜백 함수, 함수형 프로그래밍 등 다양한 곳에서 활용됨.