잇뉴얼 (IT_Manual)

[JavaScript] 자바스크립트 변수 선언을 위한 키워드 var, let, const 본문

Coding/JavaScript

[JavaScript] 자바스크립트 변수 선언을 위한 키워드 var, let, const

잇뉴얼 2022. 5. 30. 19:10
728x90
반응형

[JavaScript] 자바스크립트 변수 선언을 위한 키워드 var, let, const


자바스크립트(JS)에서 변수를 선언하기 위한 키워드는 3개 있습니다. 'let','const','var'이 있는데요. 예전에는 'var'키워드를 통해 변수 선언을 많이 했지만, 문제점이 많아 최근에는 'let'키워드를 많이 사용하고 있습니다. 그렇다면, 'var''let','const'의 차이는 무엇일까요?

키워드 설명
var 변수 중복선언 가능 , 함수 레벨 스코프, 변수 Hositing
let 변수 중복선언 불가능 , 블록 레벨 스코프,  변수 Hositing이 발생하지 않는것처럼 동작
const 상수로 선언 후 새로운 값 재할당 금지, 선언시 초기화 필요,
변수 Hositing이 발생하지 않는것처럼 동작

여기서 'var','let'의 경우 변수 중복선언이 가능하나, 불가능하냐의 차이점을 볼 수 있는데요.

var _var = 1+2
var _var = 3+4
console.log(_var)  // 결과 : 7

let _let = 1+2
let _let = 3+4  // 에러 발생
console.log(_let)

'VS Code'에서 코드를 작성해보면, 'var'키워드로 변수를 선언하면, 에러가 발생하지 않지만, 'let'키워드로 선언을 하면, 에러가 발생하는것을 볼 수 있습니다. 즉 'var'키워드로 변수를 선언하면, 같은 코드안에서 같은 변수이름으로 선언하고, 다른 값이 들어가게 된다면, 앞에 선언한 변수는 무시하고 앞의 값을 가져오게되, 원하는 결과값을 가져올 수 없어 코드 전체에 에러가 발생할 수 있습니다.

변수 Hoisting

자바스크립트의 독특한 동작 방식입니다. 함수 안에 있는 모든 변수를 함수 최상단으로 끌어올려 정의한 다음, 동작하는데요.

console.log(_var) // undefind
var _var = 1+2

보통은 변수를 선언하기 전에 그 변수를 사용하게 되면, 에러가 발생하지만, 'var'키워드로 변수를 아래쪽에 선언을 하게 되면, 해당 변수를 사용한 코드는 'undefind'를 받게 됩니다.

var = _var
console.log(_var)

즉, 변수 선언후 초기화를 하지 않는 코드랑 똑같이 동작하게 되지만, 코드가 길어지면서 에러가 발생할 수 있으니, 'var'변수를 될 수 있으면 사용하지 않도록 해야겠습니다.

함수 레벨 스코프 , 블록 레벨 스코프
함수 레벨 스코프

함수 내에세 선언된 변수는 함수 내에서만 유효, 함수 외부에서는 참조 불가. 함수 내부에서 선언한 변수는 지역 변수, 함수 외부에서 선언한 변수는 모두 전역 변수

블록 레벨 스코프

모든 코드 블록(함수, if문, for문, while문, try/catch문 등)내에서 선언된 변수는 코드 블록 내에서만 유효하며, 코드 불록 외부에서는 참조 불가. 코드 블록 내부에서 선언한 변수는 지역변수

반응형
Comments