Jae Front-end Study

• var

var 변수는 재선언(중복선언)되고, 재할당(업데이트) 된다.

// 재선언
var apple = 'apple'
apple // 'apple'

var apple = 'banana'
apple // 'banana'

// 재할당
var apple = 'apple'
apple = 'banana'
    
apple // banana

var 변수는 전역 범위 또는 함수 범위로 지정된다. (함수 레벨 스코프)

즉, 함수 밖에서 var를 사용하여 선언된 변수는 전체 윈도우에서 사용할 수 있고, 함수 안에서 선언된 변수는 함수 내에서만 사용 가능하다.

function callName(){
    var name = 'heejae'
    
    if(name === 'heejae') {
        var name = 'leeheejae'
        var nickname = 'jae'
        
        console.log(name, nickname) // leeheejae, jae
    }
    
    console.log(name, nickname) // leeheejae, jae
}

console.log(name) // ReferenceError: name is not defined
console.log(nickname) // ReferenceError: nickname is not defined

문제점

코드가 많아질 경우, 같은 변수를 중복해서 사용할 수 있고, 예상치 못하게 변수가 재선언 또는 재할당 되어 많은 버그를 발생시킬 수 있다.

• let

let 변수는 재할당은 가능하지만, 재선언은 불가능하다.

// 재할당
let apple = 'apple'
apple = 'banana'
    
apple // banana

// 재선언
let apple = 'apple'
let apple = 'banana'
    
apple // SyntaxError: Identifier 'apple' has already been declared

let 변수는 코드 블록({}, 중괄호) 내부에서만 유효하다. (블록 레벨 스코프)

function callName(){
    let name = 'heejae'
    
    if(name === 'heejae') {
        let name = 'leeheejae'
        let nickname = 'jae'
        
        console.log(name, nickname) // leeheejae, jae
    }
    
    console.log(name) // heejae
    console.log(nickname) // ReferenceError: nickname is not defined
}

• const

const 변수는 재선언, 재할당 모두 불가능하다.

// 재선언
const apple = 'apple'
const apple = 'banana'
    
apple // SyntaxError: Identifier 'apple' has already been declared

// 재할당
const apple = 'apple'
apple = 'banana'
    
apple // TypeError: Assignment to constant variable.

const 변수는 let 변수와 마찬가지로, 코드 블록({}, 중괄호) 내부에서만 유효하다. (블록 레벨 스코프)

function callName(){
    const name = 'heejae'
    
    if(name === 'heejae') {
        const name = 'leeheejae'
        const nickname = 'jae'
        
        console.log(name, nickname) // leeheejae, jae
    }
    
    console.log(name) // heejae
    console.log(nickname) // ReferenceError: nickname is not defined
}

결론

var 변수는 사용하지 말 것

재할당이 필요할 경우 let 변수를 사용하되, 변수의 스코프를 최대한 좁게 만들기

재할당이 필요없는 상수나 객체에는 const를 사용하기