[내배캠] 001. [JS] 변수 (let, const, var) 와 스코프, 호이스팅

변수란?

변수의 필요성

데이터를 저장하고 관리하기 위해. 데이터를 저장해서 다른 코드에서 재사용할 수 있다.

let numberOfusers = 50;
numberOfusers = numberOfusers + 5;
console.log(numberOfusers); // 55

위의 예제에서는 1번 재사용했지만, 실제로 코드를 작성하다 보면 수 십, 수 백 군데에서 재사용 하기도 한다. 이 때 원본 데이터가 변경되면 그 부분을 모두 수정해주어야 하는데, 변수에 할당해서 재사용하는 경우 변수의 값만 바꾸어 주면 되기 때문에 효율적.

변수의 특징

변수 선언문의 스코프

변수 선언문	스코프	설명
var	함수 스코프	선언된 함수 내에서 접근 가능
let, const	블록 스코프	코드 블록 내에서만 접근 가능

• 변수 선언문에는 let, const, var가 존재한다.
• 변수가 선언되는 위치에 따라 다른 스코프(유효범위)를 가진다.
  • 글로벌 스코프 : 전체 코드에서 접근 가능
  • 블록 스코프 : { 중괄호 안에 있는 스코프 }
  • 함수 스코프 : function a() { 이 안의 스코프 }
• let과 const는 블록 내에서만 접근할 수 있고, var는 선언된 함수 내에서 유효하다.
• const와 let은 블록 스코프를 갖기 때문에 해당 변수가 어디에서 쓰이는 건지 명확하게 코드만 보더라도 알 수 있다. 하지만 var는 어디에서나 쓰일 수 있기 때문에 지금 선언한 변수를 어디에서 사용할 지 변수 선언문만 보고는 알기가 어렵다.

if ( true ) {
    let a = 'let 변수입니다.'
    console.log(a);
} // 'let 변수입니다.'

if ( true ) {
    let a = 'let 변수입니다.'
}
console.log(a); // 에러

if ( true ) {
    var a = 'let 변수입니다.'
}
console.log(a); // 'let 변수입니다.'

재할당 가능성에 따른 분류

변수 선언문	재할당 가능 여부
const	X
let, var	O

const a = 1;
a = 2; // 불가

let b = 1;
b = 2; // 가능

var c = 1;
c = 2; // 가능

• const는 상수라고도 부르며 한 번 선언하면 재할당이 불가능 하기 때문에 코드가 길어지거나 협업 시 변수의 값이 의도치 않게 변경되어 발생하는 오류를 막아준다.

const와 let을 고르는 방법

일단 const로 변수 선언하는 것을 default로 생각하고, 재할당이 필요한 변수일 때만 let으로 바꿔주는 것이 좋다.

var는 안 쓴다고 생각하면 좋다.

function myFunction() {
    let test = "첫번째 값입니다."
    if (true) {
        let test = "두번째 값입니다."
    }
    console.log(test);
}
myFunction(); // '첫번째 값입니다.'

위 예제에 대한 설명

• let은 블록 스코프를 갖는다. myFunction 함수 선언 이후 바로 선언된 첫번째 let test는 myFunction이라는 큰 틀에서의 코드 블록 {} 내에서 접근이 가능하다. 그런데 이 코드 내에서는 크게 세 가지 코드가 사용 됐다.
  • let test 변수 선언
  • if 조건문
  • console.log
• if문 안에서도 let test라고 같은 이름의 변수가 선언되었는데, 이 역시 블록 스코프이기 때문에 if문 안에서 선언된 let test 변수는 if문 안의 블록에서만 접근 가능하다.
• 즉 콘솔 출력 함수는 if문 내부의 블록에는 접근할 수 없고, myFunction 내부에서 같은 코드 블록인 첫번째 let test를 출력하게 된다.

function myFunction() {
    var test = "첫번째 값입니다."
    if (true) {
        var test = "두번째 값입니다."
    }
    console.log(test);
}
myFunction(); // '두번째 값입니다.'

위 예제에 대한 설명

• var는 함수 스코프를 갖는다. 즉 지금 사용된 코드 블럭 내에서만 접근 가능한 것이 아니라 함수 전체에서 접근이 가능하다.
• var는 같은 함수 안에서 다시 선언해도 된다.
• 즉 위의 예제는 let처럼 변수명은 같아도 다른 변수를 두 개 선언하는 개념이 아니라 첫번째 let 변수와, if문 내에서의 let 변수는 서로 통한다.
• 결론적으로 var를 사용하면 이처럼 난해하기 때문에 코드만 읽어서는 코드 작성 의도가 잘 파악되지 않고 실행 기댓값을 예측하기도 어렵기 때문에 사용하지 않는 것이 좋다.

호이스팅

호이스팅이란? 원래 코드는 위에서 아래로 읽어 내려가며 순서대로 실행되지만 var로 선언된 변수가 모든 코드를 무시하고 코드의 가장 최상단으로 끌어 올려지는 것처럼 실행되는 것을 의미함.

중요한 것은 변수 선언만 끌어 올려진다는 것이고 변수에 할당된 값까지 끌어 올려 지지는 않음.

console.log(myName); // undefined
var myName = '호이스팅'

console.log는 에러가 나야 하는 코드이지만, 컴퓨터는 var 변수를 아래와 같이 호이스팅하여 해석함.

var myName;
console.log(myName); // undefined
myName = '호이스팅';

var뿐만 아니라 함수도 호이스팅이 된다.