자바스크립트-선언 (변수와 상수)

원래 계획은 오늘 SASS를 좀 정리 하거나 PHP로그인 구현을 포스팅 할 계획이었는데

내가 자바스크립트의 기본 개념이 아직도 많이 부족하다는것을 깨닫게 되었다.

그래서 오늘은 한번 더 개념을 짚어보는 의미에서

자바스크립트의 변수/함수/메소드/클래스/객체 등의 기본 개념을 다시 작성해보고자 한다.

 

 

선언이란 특정 이름에 특정 값을 담는것을 의미한다.

 

코드를 작성할때 우리는 많은 변수 혹은 상수를 선언하게 될것이다. 상수와 변수에 대해 알아보도록 하자

①상수 : 바뀔 수 없는 값 [선언 키워드 : const]

②변수 : 바뀔 수 있는 값 (변하는 값) [선언 키워드 : let, var]

 

 

여기까지 확인하면 JS 내부 안에서 상수선언과 변수선언의 차이점이 무엇인지 궁금할것이다

그 차이를 설명하기 위한 간단한 예제문을 작성해보겠다

 

 

LET 변수선언

//변수선언 -let의 재할당

let value =1;
console.log(vlaue)     // -> [1]

value =2;
console.log(vlaue)     // -> [2]


// [문제 X]

//변수선언

//let의 변수명 중복

let value =1;
console.log(vlaue)     // -> [1]

let value =2;
console.log(vlaue)     // -> error!

 

위와 같이 let으로 선언한 변수는 새로운 값을 넣어줄 수 있다.

즉, '변수'란 값이 변화할 수 있는것이기 때문에 재할당이 가능하다.

하지만 같은 변수명을 let을 사용하여 두번 선언해주었을때는 값이 변하는 것이 아니라 에러메시지가 뜨게 된다.

 

 

CONST 상수선언

//상수선언 -const의 재할당

const value =1;
console.log(vlaue)     // -> [1]

value =2;
console.log(vlaue)     // -> error


// [문제 발생, 재할당 불가능]

//상수선언

//const의 변수명 중복

const value =1;
console.log(vlaue)     // -> [1]

const value =2;
console.log(vlaue)     // -> error!

위와 같이 '상수'는 변하지 않는 값이기 때문에 재할당이 불가능하다

 

 

 

지금까지 설명한 let과 const는 ES6이후에 나온 문법들이다. 현재는 대부분의 작업 시 ES6문법에 따른 코드를 쓰고있지만

IE10 이전의 브라우저에서는 사용이 되지 않는다.

 

 

이 키워드들이 사용되기 전(ES6의 등장 전)에는 var라는 키워드가 쓰였다.

//상수선언 -var의 재할당

var value =1;
console.log(vlaue)     // -> [1]

value =2;
console.log(vlaue)     // -> [2]


// [문제 발생, 재할당 불가능]

//상수선언

//var 변수명 중복

var value =1;
console.log(vlaue)     // -> [1]

var value =2;
console.log(vlaue)     // -> [2]

변수 키워드이기때문에 재할당이 된다는 점에서 let과 비슷하지만

let과의 차이점이 당연히 존재한다

 

① 동일 변수명의 중복선언도 가능하다. (좋은 코드가 아니므로 추천하지 않는다.)

② 변수의 적용 범위가 다르다 (간단하게 말해서 const, let의 사용범위는 블록스코프({ } 블록내부)이지만

var의 경우 사용범위가 함수스코프(함수내부) 이다. 이 부분에 관련해서 설명하기 위해선 함수의 개념을 설명야 하고,

hoisting 현상에 대해 설명해야하고, 일단은 이정도로 알아두어도 괜찮을 것 같기 때문에 기본 개념에 관한 포스팅들을 다 끝마친 후에 따로 적도록 하겠다.