codeit weekly paper3

• var, let, const 를 서로 비교해 설명해 주세요.
• 자바스크립트에서 this 키워드의 사용과 그 특성에 대해 설명해 주세요.
• 렉시컬 스코프(Lexical Scope)의 개념과 그 특성에 대해 설명해 주세요.

---

1. var
   • 중복 선언 허용: var로 선언된 변수는 같은 스코프 내에서 중복 선언이 가능합니다. 이는 코드의 유지보수를 어렵게 하고 예상치 못한 버그를 발생시킬 수 있습니다.
   • Scope: var는 함수 레벨 스코프를 가집니다. 함수 내부에서 선언된 var 변수는 해당 함수 전체에서 접근할 수 있으며, 함수 외부에서 선언되면 전역 변수로 간주됩니다.
   • Hoisting: var 선언은 호이스팅 되어 스코프의 최상단으로 끌어올려집니다. 그러나 초기화는 실제 코드 위치에서 수행되므로, 선언 전에 변수를 사용하면 undefined 값을 반환합니다.
2. let
   • 중복 선언 허용: let으로 선언된 변수는 같은 스코프 내에서 중복 선언이 불가능합니다. 이미 선언된 변수 이름으로 다시 선언을 시도하면 SyntaxError를 발생시킵니다.
   • Scope: let은 블록 레벨 스코프를 가집니다. {}로 둘러싸인 어떤 블록(조건문, 반복문, 또는 단순 블록) 내에서 선언된 let 변수는 그 블록 내부에서만 유효합니다.
   • Hoisting: let 변수도 호이스팅은 발생하지만, 초기화가 선언 위치에서 이루어지므로, 초기화 이전에 변수에 접근하려고 하면 ReferenceError가 발생합니다. 이는 let 변수가 "일시적 사각지대(TDZ)"에 놓이기 때문입니다.
3. const
   • 중복 선언 허용: const로 선언된 변수도 let과 마찬가지로 같은 스코프 내에서 중복 선언이 불가능합니다. 중복 선언을 시도할 경우 SyntaxError가 발생합니다.
   • Scope: const 역시 블록 레벨 스코프를 따릅니다. 따라서 선언된 블록 내에서만 변수에 접근할 수 있습니다.
   • Hoisting: const 선언도 호이스팅이 적용되지만 TDZ에 속하기 때문에 선언 전에 접근하면 ReferenceError가 발생합니다. const는 선언과 동시에 초기화를 반드시 해야 하며, 후에 값의 재할당이 불가능합니다.

---

자바스크립트에서 this 키워드의 사용과 특성

자바스크립트에서 this 키워드는 매우 중요하면서도 혼란스러운 개념 중 하나입니다. this는 실행 컨텍스트에 따라 그 값이 결정되며, 현재 실행 중인 함수 또는 메서드의 "소유자"를 가리킵니다.

1. 전역 컨텍스트에서의 this

전역 실행 컨텍스트에서 this는 전역 객체를 가리킵니다. 브라우저 환경에서는 window, Node.js 환경에서는 global이 됩니다.

console.log(this); // 브라우저에서는 window 객체를 출력

2. 함수 내에서의 this

일반 함수에서 this의 값은 기본적으로 전역 객체를 가리킵니다. 하지만, 엄격 모드('use strict')에서는 undefined가 됩니다.

function regularFunction() {
    console.log(this); // window 또는 global 객체
}

function strictFunction() {
    'use strict';
    console.log(this); // undefined
}

regularFunction();
strictFunction();

3. 객체 메서드 내에서의 this

객체의 메서드로서 함수가 호출될 때, this는 해당 메서드를 호출한 객체에 바인딩됩니다.

const obj = {
    name: 'JavaScript',
    getName: function() {
        console.log(this.name);
    }
};

obj.getName(); // 'JavaScript'

4. 생성자 함수에서의 this

생성자 함수에서 this는 새로 생성되는 객체를 가리킵니다.

function Person(name) {
    this.name = name;
}

const person = new Person('John');
console.log(person.name); // 'John'

5. 이벤트 핸들러에서의 this

이벤트 핸들러에서 this는 이벤트를 받는 요소를 가리킵니다.

document.getElementById('myButton').addEventListener('click', function() {
    console.log(this); // 클릭된 버튼 요소
});

6. 화살표 함수에서의 this

화살표 함수는 일반 함수와는 다르게 this를 자체적으로 바인딩하지 않고, 함수가 생성된 시점의 실행 컨텍스트의 this를 "상속"받습니다.

const obj = {
    name: 'JavaScript',
    regularFunction: function() {
        setTimeout(function() {
            console.log(this.name); // undefined (전역 객체의 name 속성)
        }, 100);
    },
    arrowFunction: function() {
        setTimeout(() => {
            console.log(this.name); // 'JavaScript'
        }, 100);
    }
};

obj.regularFunction();
obj.arrowFunction();

위 예시에서 regularFunction의 setTimeout 콜백 함수는 일반 함수로서 호출되어 전역 객체의 this를 가리킵니다. 반면에 arrowFunction의 setTimeout 콜백 함수는 화살표 함수로 정의되어 arrowFunction의 실행 컨텍스트인 obj의 this를 상속받습니다.

---

렉시컬 스코프란?

렉시컬 스코프는 변수와 블록 스코프가 코드가 작성된 구조에 따라 결정되는 스코프의 한 형태입니다. 즉, 함수나 블록이 정의된 시점의 외부 환경을 기준으로 스코프가 결정됩니다. 이는 함수가 실행될 때가 아니라 선언될 때 스코프가 결정된다는 것을 의미합니다.

렉시컬 스코프의 작동 방식

렉시컬 스코프의 작동 방식은 다음과 같습니다:

1. 스코프 결정 시점: 함수가 정의된 위치를 기준으로 스코프가 결정됩니다.
2. 스코프 체인: 함수 내부에서 변수를 참조할 때, 먼저 내부 스코프에서 변수를 찾고, 없으면 외부 스코프로 이동하여 변수를 찾습니다. 이러한 과정을 스코프 체인이라고 합니다.
3. 상위 스코프 참조: 내부 함수는 자신이 정의된 외부 환경(상위 스코프)을 참조할 수 있습니다. 이를 통해 함수가 호출되는 위치와 상관없이 일관된 스코프를 유지합니다.

렉시컬 스코프 예시

const outerVar = 'I am outside!';

function outerFunction() {
    const innerVar = 'I am inside!';

    function innerFunction() {
        console.log(outerVar); // 'I am outside!'
        console.log(innerVar); // 'I am inside!'
    }

    innerFunction();
}

outerFunction();

위 예제에서 outerFunction은 outerVar 변수를 참조할 수 있습니다. 또한, innerFunction은 outerVar와 innerVar 변수를 모두 참조할 수 있습니다. 이는 innerFunction이 outerFunction 내부에서 정의되었기 때문에, innerFunction은 outerFunction의 스코프를 참조할 수 있기 때문입니다.

클로저와 렉시컬 스코프

렉시컬 스코프는 클로저(Closure)와 밀접한 관련이 있습니다. 클로저는 함수와 그 함수가 선언될 당시의 렉시컬 환경의 조합을 말합니다. 클로저는 외부 함수의 변수를 내부 함수에서 접근할 수 있도록 합니다.

javascript코드 복사
function makeCounter() {
    let count = 0;

    return function() {
        count++;
        console.log(count);
    }
}

const counter = makeCounter();
counter(); // 1
counter(); // 2

위 예제에서 makeCounter 함수는 count 변수를 가지고 있으며, 내부에 count 변수를 증가시키는 함수를 반환합니다. 반환된 함수는 makeCounter 함수의 렉시컬 환경을 기억하고 있어, count 변수를 계속해서 증가시킬 수 있습니다. 이러한 특성이 바로 클로저입니다.

결론

렉시컬 스코프는 함수나 블록이 정의된 시점의 외부 환경을 기준으로 스코프가 결정되는 개념입니다. 이는 함수가 실행될 때가 아니라 선언될 때 스코프가 결정된다는 것을 의미합니다. 렉시컬 스코프 덕분에 클로저와 같은 강력한 기능을 활용할 수 있습니다.