HHyo814
발행일

[ZBF] 2주차 멘토링 01

기술노트면접

[ZBF] 2주차 멘토링 01

이 글은 네이버 블로그에 2024년 5월 26일에 올렸던 것을 그대로 옮겨온 것입니다.

var g1 = 1;
const c2 = 2;

function gfn(x) {
  var v1 = 3;
  const c2 = 4;
  g1 = 11;
  function fn(y) {
    const c2 = 5;
    console.log(x + v1 + g1 + c2 + y);
  }
  fn(6);
}

gfn(100);

if (g1 > 10) {
  let g1 = 100;
}

console.log(g1);

변수 선언 및 스코프

코드에서는 var, let, const 세 가지 키워드를 사용하여 변수를 선언합니다. 각각의 스코프와 특징을 이해하는 것이 중요합니다.

  • var로 선언된 변수는 함수 스코프(function scope)를 가집니다.
  • let과 const로 선언된 변수는 블록 스코프(block scope)를 가집니다.

호이스팅(hoisting)

호이스팅은 자바스크립트에서 변수와 함수 선언이 해당 범위의 최상단으로 끌어올려지는 현상을 의미합니다. 하지만, var로 선언된 변수는 선언만 끌어올려지고 초기화는 끌어올려지지 않습니다.

var g1 = 1; // g1은 전역 변수
const c2 = 2; // c2는 전역 상수

function gfn(x) {
  var v1 = 3; // v1은 gfn 함수 내에서만 유효
  const c2 = 4; // c2는 gfn 함수 내에서만 유효, 상수

  g1 = 11; // 전역 변수 g1의 값을 변경
  function fn(y) {
    const c2 = 5; // c2는 fn 함수 내에서만 유효, 상수
    console.log(x + v1 + g1 + c2 + y); 
    // x: gfn 함수의 매개변수
    // v1: gfn 함수 내에서 선언된 변수
    // g1: 전역 변수, 11로 변경된 상태
    // c2: fn 함수 내에서 선언된 상수
    // y: fn 함수의 매개변수
  }
  fn(6);
}

gfn(100); // gfn 함수 호출, 결과: 100 + 3 + 11 + 5 + 6 = 125

if (g1 > 10) {
  let g1 = 100; // if 블록 내에서 유효한 g1, 전역 변수 g1과는 다른 변수
}

console.log(g1); // 전역 변수 g1 출력, 결과: 11

클로저(closure)

클로저는 함수가 자신이 선언된 환경(렉시컬 환경, lexical environment)의 변수를 기억하고 접근할 수 있는 특성을 말합니다. 위 코드에서 fn 함수는 gfn 함수 내에서 선언되었기 때문에 gfn 함수의 변수들에 접근할 수 있습니다.

스코프(scope)

  • g1은 전역 변수로, 어디서든 접근할 수 있습니다.
  • c2는 전역 상수로, 어디서든 접근할 수 있지만 재할당할 수 없습니다.
  • v1은 gfn 함수 내에서만 유효합니다.
  • c2는 gfn 함수 내에서 또 다른 블록에 재선언되었고, fn 함수 내에서 다시 선언되었습니다. 각 선언은 각각의 스코프를 가집니다.
  • let g1은 if 블록 내에서만 유효하며, 전역 변수 g1과는 다른 변수입니다.
  1. gfn 함수가 호출되면, g1의 값이 11로 변경됩니다.
  2. fn 함수가 호출되며 console.log는 x + v1 + g1 + c2 + y를 출력합니다.
  3. gfn(100) 호출 시 100 + 3 + 11 + 5 + 6이 출력됩니다.
  4. if 블록 내 g1 변수는 전역 g1과 다른 변수이므로, **console.log(g1)**는 11을 출력합니다.
var g1 = 1;

function gfn(x) {
  var v1 = 3;
  const c2 = 4;
  g1 = 11;
  function fn(y) {
    const c2 = 5;
    console.log(x + v1 + g1 + c2 + y);
  }
  fn(6);
}

var로 선언된 g1은 전역 스코프에서 선언되어 호이스팅됩니다. 선언만 최상단으로 끌어올려지고 초기화는 나중에 이루어집니다.

함수 gfn 내에서 var v1은 함수의 최상단으로 호이스팅되지만 초기화는 원래 위치에서 이루어집니다. const로 선언된 c2는 블록 스코프 내에서 호이스팅되지만, 선언 이전에 접근하면 ReferenceError가 발생합니다.

클로저가 무엇이며, 이 코드에서 클로저의 예를 설명해 주세요.

클로저는 함수가 자신이 선언된 환경(렉시컬 환경)의 변수를 기억하고 접근할 수 있는 특성을 말합니다. 클로저는 함수와 그 함수가 선언된 어휘적 환경의 조합입니다.

이 코드에서 클로저의 예는 다음과 같습니다:

function gfn(x) {
  var v1 = 3;
  const c2 = 4;
  g1 = 11;
  function fn(y) {
    const c2 = 5;
    console.log(x + v1 + g1 + c2 + y);
  }
  fn(6);
}

fn 함수는 gfn 함수 내에서 선언되었기 때문에 gfn 함수의 변수 x, v1, g1에 접근할 수 있습니다. fn 함수는 gfn 함수의 렉시컬 환경을 기억하는 클로저입니다.

이 코드에서 전역 변수와 블록 스코프 변수의 차이점을 설명해 주세요.

전역 변수와 블록 스코프 변수의 차이점은 다음과 같습니다:

  • 전역 변수:
  • 전역 스코프에 선언된 변수로, 코드의 어디서든 접근할 수 있습니다.
  • 이 코드에서 **var g1 = 1;**은 전역 변수입니다. 따라서 함수 내에서 g1을 변경하면 전역 변수 g1의 값이 변경됩니다.
  • 블록 스코프 변수:
  • let이나 const로 선언된 변수로, 해당 블록 내에서만 유효합니다.
  • 이 코드에서 if (g1 > 10) 블록 내의 **let g1 = 100;**은 블록 스코프 변수로, 블록 내에서만 유효하며 전역 변수 g1과는 다른 변수입니다. 따라서 블록 밖에서는 전역 변수 g1의 값이 유지됩니다.

블록 스코프 변수를 사용하면 변수의 유효 범위를 블록 내로 한정하여 변수 충돌을 방지할 수 있습니다.

← 글 목록으로