Front-End/자바스크립트

[자바스크립트] let, var, const 비교

shoney9254 2022. 6. 12. 21:12
반응형

자바스크립트의 변수를 선언하기 위해서는 let, var를 사용하고, 상수를 선언하기 위해서 const를 사용한다. 

기본이지만 차이를 알고 사용하도록 하자.

 

 


 

1. let 변수

소스 코드

// 1. let 변수 알아보기

let age = 28;

console.log("나이 : " + age);

 

// 1-1. 그냥 변수로 덮어쓰는 것은 가능함

age = 27;

console.log("나이 : " + age);

결과

나이 : 28

나이 : 27

let 변수는 변수이기 때문에 덮어쓰는 것이 가능하다. 

하지만, 아래와 같이 재 선언하는 것은 불가능하다. 

 

소스 코드

// 1-2. let을 한번더 선언하는 것은 불가능함

let age = 31;

console.log("나이 : " + age);

결과

SyntaxError: /src/index.js: Identifier 'age' has already been declared (10:4)

let을 재선언해서 사용하면 위와 같이 에러가 발생하는 것을 알 수 있다. 

let은 소스코드를 작업하다가 재 선언하는 경우를 방지하도록 할 때 사용하면 된다. (휴먼 에러 방지)

 

 


 

2. var 변수 

소스 코드

// 2. var 변수 알아보기

var name = "Shoney";

console.log("이름 : " + name);

 

// 2-1. 그냥 변수로 덮어쓰는 것 가능함

name = "JY";

console.log("이름 : " + name);

 

// 2-2. var를 중복으로 선언도 가능함

var name = "JY2";

console.log("이름 : " + name);

결과

이름 : Shoney

이름 : JY
이름 : JY2

 

var 변수는 let 변수와 다르게 중복해서 사용할 수 있다.

그리고 var 변수는 포맷을 바꾸는 것도 자유롭다.

소스 코드

// 2-3. var 변수는 포맷이 바뀌는 것도 가능함 (문자 --> 숫자)
var name = 28;
console.log("이름 : " + name);

결과

이름 : 28

 

 


 

3. const

소스 코드

// 3. const 상수 선언

const height = 186;

console.log("신장 : " + height);

 

// 3-1. 상수는 한번 선언하면 바꿀수 없음

height = 187;

console.log("신장 : " + height);

 

// 3-2. 상수는 한번 선언하면 바꿀수 없음

const height = 187;

console.log("신장 : " + height);

결과

신장 : 186

TypeError: "height" is read-only

SyntaxError: /src/index.js: Identifier 'height' has already been declared (38:6)

const 상수는 한번 지정하면 바꿀 수 없다.

사람의 신장 처럼 고정 변수들을 사용하는데 적합하다.

 

 


 

let, var, const의 선언하는 차이들을 정확하게 알고 사용하는 것이 소스코드 유지 보수 측면에서 생상성이 올라간다. (사람의 실수 방지)

반응형