[Node.js로 서버만들기] 2. 자바스크립트 기본 문법(변수/호이스팅/클로저)

✅ 변수, 호이스팅, 클로저

1. 변수

- 자바스크립트는 동적 언어이기 때문에, 변수 타입을 미리 선언할 필요 없음

- 타입은 프로그램이 처리되는 과정에서 자동으로 파악함 ( typeof(변수)를 통해 확인 )

 

[ var vs let vs const ]

- var : ES6 이전 자바스크립트에서 사용

(이제는 let, const 사용을 권장함)

 

이유는?
var의 변수 호이스팅과 function-level-scope로 생기는 문제 때문!

---

2. 변수 호이스팅

 

변수 호이스팅(hoisting)이란?
변수의 선언과 초기화가 동시에 이루어져 아직 값이 없음에도 오류가 나지 않는 현상
(변수 선언 이전에 참조 가능)

* Hoisting : 끌어올리다.

 

1) var의 경우

// sample 01
console.log(puppy);
var puppy = 'cute';
console.log(puppy);

// 출력결과
/*
undefined
cute
*/

➡ 아직 puppy라는 변수를 선언하지 않은 상태에서 호출했음에도,

     오류가 나지 않고 undefined라는 값을 반환함.

💥 여기서 주의!
null vs undefined
1. null : 변수의 값을 null로 지정한 것!
➡ 즉, 변수는 null 이라는 값을 갖고 있음

2. undefined : 변수가 값을 갖고 있는 것은 아니지만, 메모리 공간은 차지하고 있는 것!
➡ 내가 아직 할당하지 않은 변수가 제 맘대로 참조할 수 있게 됨

 

2) let, const의 경우 (ES6 이후 var보다 이것을 사용하기를 권장)

// sample-02-1
let dog;
dog = 'happy';
console.log(dog);
let dog = 'happy'; // 오류 발생

// smaple 02-2
const puppy = 'cute';
const puppy = 'so cute'; // 오류 발생

 

➡ let 과 const 중복선언이 불가능하여, 변수 호이스팅 문제 해결 가능

(즉, 내가 값을 준 변수만이 제 역할을 할 수 있게 되므로 변수 호이스팅 문제로 실수할 일을 감소시킴)

---

3. 스코프 (scope)

 

스코프란?

변수에 접근할 수 있는 범위

 

1) var의 경우

함수 레벨 스코프 (function-level-scope)

: 함수의 블록 범위 내에서 선언한 변수는 함수 내에서만 인정 (함수 외부에서 선언한 변수는 모두 전역변수)

// sample 03
var puppy = 'cute';
console.log(puppy);
{
    var puppy = 'so cute';
}
console.log(puppy);

// 출력결과
/*
cute
so cute
*/

 ➡ var는 function-level-scope를 따르기 때문에, 전역변수에 원하지 않는 값을 덮을 수 있는 문제점이 있음

 

2) let 과 const의 경우

블록 레벨 스코프 (block-level-scope)

: 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며,

  코드 블록 외부에서는 참조할 수 없다. (코드 블록 내부에서 선언한 변수는 지역 변수)

// sample04
let puppy = 'cute';
{
    let puppy = 'so cute';
}
console.log(puppy); // cute

➡ 1반 이현진과 3반 이현진이 다른 사람인 것처럼,

      두 개의 puppy는 이름만 같을 뿐 다른 변수임.

---

4. let vs const

// sample05-1
const puppy = 'cute';
puppy = 'so cute!!';
console.log(puppy);
// TypeError: Assignment to constant variable.

// sample 05-2
let dog;
console.log(dog); // undefined
dog = 'so lovely';
console.log(dog); // so lovely

- let은 값을 재할당할 수 있음
- const는 재할당 불가능 (값의 변경이 불가능함)

---

5. 클로저(closure)

클로저란?

내부 함수가 외부 함수의 스코프에 접근할 수 있는 것

// sample 06
function outer(){
    var a = 'A';
    var b = 'B';
    function inner(){
        var a = 'AA';
        console.log(a); // AA
        console.log(b); // B
    }
    console.log(a); // A
    return inner;
}
var outerFunc = outer();
outerFunc();

// 출력결과
/*
A
AA
B
*/

 

자바스크립트의 스코프는 함수 단위로 생성됨.

➡ inner() 함수의 스코프가 outer()함수의 스코프를 참조함.

➡ outer()의 실행이 끝나고 소멸된 이후에도 inner()함수가 outer()함수의 스코프에 접근 ( = 클로저 )

 

위 예제의 경우,

1) outer() 가 실행되면서 var a인 'A'를 출력

2) var outerFunc에 inner()를 반환

3) outerFunc()를 실행하면 inner()가 실행되는 것과 같음

➡ outerFunc()가 실행되면서 inner()의 지역변수 a와 outer()의 지역변수 b가 출력되어 'AA', 'B'가 출력됨.

---

💡 정리 💡

대부분의 문제는 전역 변수로 인해 발생

전역 변수는 간단한 애플리케이션의 경우 사용이 편리하다는 장점이 있지만,
스코프가 넓어서 사용처를 파악하기 힘들며,
비순수 함수에 의해 의도치 않게 변경될 수도 있어 복잡성을 증가시킴.

따라서 변수의 스코프는 좁을수록 좋기 때문에
ES6는 var의 단점 보완을 위해 let과 const 키워드를 도입함.