[TIL] Javascript 변수와 상수

javascript logo

1. let(block scope)

◎ es6 이후로 변수를 선언할 때는 let 키워드를 사용한다.

변수는 바뀔 수 있는 값을 의미한다.

1-1. let의 특징

• 변수에 재할당이 가능하다.

 처음에 value를 1로 선언하였고 콘솔로 value를 확인해 보면

 

선언한 value 값이 잘 나오는 걸 확인할 수 있다.

재할당이 가능한 특징을 이용하여 value 값을 다른 값으로 바꾸고 싶을 때는

 

value 값을 원하고 싶은 값으로 할당해 준다.

 

그리고 콘솔을 확인해 보면

처음에 설정한 value 값은 1이 나오고 두 번째로 재할당한 value 값은 2로 잘 찍혀 나온다.

 

• 변수의 재선언은 불가하다.

let은 재할당은 가능하지만 재선언은 불가능하다. 다음 코드를 보고 확인해보자.

 

let value = 1; 을 선언하고, 다시 let value = 2; 로 재선언 하였다. 코드를 보면 빨간 줄로 밑줄이 그어져 있다.

에러를 나타내는 것이다. 그럼 콘솔에 나오는 에러 메시지를 한번 확인해보자.

 

에러 메시지를 해석하면 value는 이미 선언되어있다고 알려준다.

이처럼 let을 사용할 때 조심해야 하는 부분이 재할당은 가능해도 재선언은 안된다.

 

• 다른 블록 범위에서는 똑같은 이름을 선언할 수 있다.

위에서 let은 재선언이 불가능하다고 배웠다.

하지만 다른 블록 범위에서는 재선언이 가능하다. 왜냐하면 let은 블록 스코프이기 때문이다.(scope에 대해서는 배우고 정리하겠다.)

말로는 이해하기 힘들기 때문에 코드를 직접 작성해 보았다.

 

코드를 보면 

처음에 let value는 1로 선언되어 있다.

호출되기 전, changeValue 함수 외부에 콘솔을 찍어보았고,

changeValue( )로 changeValue 함수가 호출된다.

함수 내부에 let value를 2로 재선언하고, 콘솔을 찍어보았다.

어떤 결과가 나올지 확인해보자.

 

함수가 호출되기 전 콘솔에는 value 가 1이 나왔고,

함수가 호출되고 함수 내부의 콘솔에는 value 값이 2로 바뀌어 있다.

이처럼 let은 다른 블록 범위에서는 재선언이 가능하다.

2. const(block scope)

◎ es6 이후로 상수를 선언할 때는 const 키워드를 사용한다.

상수는 한번 값을 설정하면 바꾸지 못하는 값을 의미한다.

2-1. const의 특징

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

먼저 재선언 했을 때의 코드를 봐보자.

 

처음에 const value = 1; 로 선언하고 const value= 2; 로 바꾸려고 하는데 빨간 밑줄이 나온다.

 

콘솔을 열어 에러 메시지를 확인해보면 value는 이미 선언되어 있다고 말한다.

let과 마찬가지로 const는 재선언이 불가능하다.

let은 재할당! 은 되지만 const는 재할당도 불가능 하자.

다음 코드를 봐보자.

 

처음에 value 값을 1로 설정하고  다시 value 값을 2로 재할당 하려고 했으나 빨간 밑줄이 나온다.

 

콘솔을 열어 확인해 보았다.

처음 설정한 value 값은 잘 나오는 걸 확인할 수 있다.

하지만 value 값을 2로 재할당 할 때는 value는 읽기 전용이다.라고 에러 메시지를 던져준다.

이처럼 const는 재선언 및 재할당이 불가능하다.

 

• 다른 블록 범위에서는 똑같은 이름을 선언할 수 있다.

const는 재할당 및 재선언이 불가능하다고 배웠다.

하지만 const도 다른 블록 범위에서는 똑같은 이름을 선언할 수 있다.(let과 같이 블록 스코프이다.)

다음 코드를 보면서 확인해보자.

 

함수 바깥쪽 name을 wecode라 설정하고 함수 내부의 name은 일레븐으로 설정하였다.

같은 블록이면 에러를 던져야 하지만 지금은 함수 내부, 외부 다른 블록 범위에서 재선언이 되었다.

그럼 콘솔을 열어 확인해 보자.

 

역시 설정한 값은 잘 나온다.

이처럼 const 도 블록 스코프 이기 때문에 다른 블록 범위에서는 재선언이 가능하다.

3. var (function scope)

◎ es6 이전에는 var 키워드를 이용하여 변수를 선언하였다.

하지만 이제는 별로 권장하지 않는다고 하여 간단히 특징만 정리하고 넘어가겠다.

3-1. var의 특징

• 할당되는 값이 유동적으로 변경될 수 있는 단점을 가지고 있다.

• 구형 브라우저에서 사용한다.

• let과 비슷하지만 사용할 수 있는 범위가 다르다.

4. 느낀점

◎ let과 const를 상황에 맞게 잘사용하여야 할 거 같다.

특징들을 잘기억하여 실전에 막힘없이 사용하자.