Section1 Unit9 JavaScript 핵심 개념과 주요 문법 - 자료형, 스코프, 클로저

---

Section1 Unit9 [JavaScript] 핵심 개념과 주요 문법 - 자료형, 스코프, 클로저

 

📌 Chapter1. 원시 자료형과 참조 자료형

• 원시 자료형(primitive data type) : number, string, boolean, undefined, null

  → 데이터를 복사 때 데이터값이 복사되기 때문에 기존의 데이터에 영향이 가지 않는다.

 

• 참조 자료형(reference data type) : array, object, function

  → 데이터 복사 시 주소를 복사하기 때문에 기존의 데이터에도 영향이 간다.

 

📌 Chapter2. 스코프

• 스코프(scope)는 변수와 함수가 유효한 범위를 결정하는 규칙이다. 스코프는 변수와 함수가 언제, 어디서, 어떻게 사용 가능한지를 정의한다. 

• 변수 선언시 var를 사용하지 않고 let과 const로 선언시 블록 스코프가 된다.

 블록 스코프는 모든 코드블록 내에서 선언된 변수는 코드블록 내에서만 유효하며, 외부에서는 접근할 수 없다.

// 블록 스코프(block scope)

if (true) {
  console.log("Hello");
}

{
  console.log("Hola");
}

// 화살표 함수는 블록스코프로 취급된다.
let getAge = user => {
  return user.age;
}

 반면 var는 블록 스코프는 무시하고(화살표 함수 제외) 함수 스코프만 따르니, var 사용은 지양하고 ES6 문법인 let과 const를 사용하는 것이 권장된다.

  💬 나는 ES6 문법이 등장하고도 한참 후에 웹 퍼블리싱을 배우면서 잠깐 자바스크립트를 발담그기 식으로 배웠었는데, 변수 선언을 var로 배웠던 기억이 있다. 지금은 let과 const를 사용해야 하는 이유를 알고, 사용하고 있지만 왜 굳이 그때 var로 가르쳐준건지는 의문이다. 심지어 배우기에 더 명확한 것도 let과 const인데.

 

📌 Chapter3. 클로저

• 클로저(closure)란 쉽게 말해서 함수와 그 함수가 접근할 수 있는 변수의 조합이다.

• 클로저의 함수는 어디에서 호출되느냐와 무관하게 선언된 함수 주변 환경에 따라 접근할 수 있는 변수가 정해진다.

 

 

✔️ Checkpoint 종합퀴즈

 이전 유닛까지는 종합퀴즈 문제를 무난히 이해 잘 하고 넘어갔었는데, 오늘은 개념 자체가 좀 어려워서 그런지 종합퀴즈도 어려웠다. 그래서 헷갈렸던 부분을 정리를 해봤다.

 

1. 스코프 관련 문제

// result의 값은?

let x = 10;

function outer () {
  x = 20;

  function inner () {
    let x
    x = x + 20;
    return x;
  }
  inner(); // NaN
}

outer();
let result = x; // 20

 → outer 함수는 전역 변수 x에 20을 재할당한다. outer 내부에서 inner 함수가 호출되고 있지만, inner 함수는 바깥 스코프에 아무런 영향을 미치지 않는다.

 inner 함수는 값을 할당하지 않은 x를 숫자 20과 더하고 있으므로, NaN를 반환한다.

 

 

2. 클로저 관련 문제

 이 문제는 아예 못풀고, 코드 돌려서 답을 확인했던 문제다. 다시 생각하면서 정리해보니 이해가 되었다. 

// total의 값은?

let add = function(x) {
  let sum = function(y) {
    return x + y;
  }
  return sum;
}

let foo = add(1); // foo는 sum 함수
foo(3); // x=1, y=3
let total = foo(6); // x=1, y=6 → total은 7

 → 함수 add는 x를 매개변수로 하여 sum을 반환한다.

 처음에 foo는 sum함수를 return 하고, total은 위 주석대로 7이 된다. (total의 값인 foo(6)은 add(1)(6)과 같다.)

 여기서 foo(3)은 4를 반환하지만 어떠한 변수에도 할당이 되지 않았으므로 total에 아무런 영향을 미치지 않는다.

 

---

🌙  오늘의 회고

 오늘 학습한 내용 중에 클로저의 개념과 활용이 어려웠다. 클로저를 이해하려고 렉시컬 환경을 설명하는 글도 읽었는데 읽다보니 너무 졸려서 집중도가 확 떨어졌다… 😭 그래도 계속 읽어보고, 라이브 세션때 배웠던 브라우저에서 디버거 돌리는 것도 해보고(디버거 활용법을 이제야 알았는데 사용하는게 아직 익숙치 않은 것 같다), 이래저래 이해하려고 애쓰니 조금은 이해가 된 것 같았다. 자바스크립트 기본 문법만 알았지, 이런 동작 원리? 같은건 거의 무지한 수준이었는데 공부하다보니 너무 재미있는 것 같다는 생각은 들었다. (재밌는데 졸려…🫠) 스코프든, 클로저이든 더 공부해야겠다는 생각이 들었다.

 아, 그리고 예전부터 공부할때 예제 함수 명으로 “foo”를 사용하는 걸 자주 봤었는데, foo가 왠지 어감이 바보같다는 생각이 들어서 왜 foo를 쓰지? 하고 궁금했던 적이 있었다. 오늘 드디어 쓸데없는 궁금함을 미루지 않고 ChatGPT 한테 물어봤는데 “foo”는 “function object”의 약어로 일반적인 프로그래밍 언어나 예제 코드에서 자주 사용되는 일종의 관용구라고 한다. 음, 근데 구글링 해보니 function object의 약어인지는 잘 모르겠고, 컴퓨터 프로그래밍에서 견본용 이름으로 foo, bar 등을 많이 사용한다고 한다. 나름 재밌는 히스토리가 있는것 같은데, 여튼 뭐 예시로 사용하는 컨벤션 같은 거라고 한다.