[JS ES6]-[5] 변수(var, let, const) 핵심만 이해하기

안녕하세요

이번 글에서는 자바스크립트에서의  변수(var, let, const) 핵심만 알려드리겠습니다.

 

1. 변수를 사용하는 방법

var name = 'kim';

1. 변수는 선언과 할당을 이용해 만들 수 있습니다.
   a. 선언 ⇒ var name
   b. 할당 => name = ‘kim’  
2. 변수를 사용할 때는 var, let, const 3개의 키워드를 사용 가능합니다.
   a. 3개 키워드는 선언, 할당, 범위에서 차이가 있습니다.

 

1.1 선언

var 키워드는 재선언이 가능하고

let, const 키워드는 재선언이 불가능합니다.

 

var data;
var data;

const age
const age  //err

let, const는 이렇게 같은 이름의 변수를 두 번 이상 재선언할 수 없습니다.

그러다 보니, 변수 이름의 중복을 막아 에러를 방지해 줄 수 있겠죠?

 

 

2.2 할당

할당이란?

할당의 뜻은 만들어 놓은 변수에 값을 집어넣는다는 의미입니다.

var age;
age= 10;

첫째줄에서 값을 선언하고

둘째 줄에서 값을 할당했습니다.

(만들어둔 name 변수에, kim이란 값을 집어넣습니다.)

 

선언과 할당을 같이 할 수도 있습니다.

var age= 10;

 

 

var, let 키워드는 재할당이 가능하고

const 키워드는 재할당이 불가능합니다.

 

let age = 10;
age = 10;  

const age= 40;
age = 50; //err

let은 등호를 써서 값 변경이 가능한 게 보이시죠?

 

 

3.3 범위

변수에는 유효 범위라는 게 존재합니다.

 

var 키워드는 유효범위가 function입니다.

let, const 키워드는 유효범위가 대부분의 중괄호 (”{}”)입니다.(for, if, function 등)

 

function say_name (){
  var name= 'kim';
  console.log(name);  //kim
}

console.log(name);  //err

var 키워드의 유효범위가 function 이기 때문에,

function 바깥에서 부르면 에러가 납니다.

 

블록 유효 범위는 거의 모든 중괄호라고 생각하시면 됩니다. (if, function, for, 등등)

if(true){
	let name= 'kim';
  console.log(name);  //kim
}

console.log(name); //err

if안에 있는 name변수는 중괄호 안에 있어서 값이 잘 출력되지만

중괄호 밖에 있는, name은 에러가 납니다.

 

 

그러나 블록 유효 범위는 대부분의 중괄호에 해당하지만 모든 중괄호는 아닙니다.

예를 들어 함수 선언식이나, 객체가 있습니다.

그러나 대부분 중괄호는 블록 유효범위를 가지니 크게 신경 쓰시지 않아도 됩니다.

function myFunction() {
  let name= 'kim';
    console.log(name);  //kim
}
console.log(name)  //kim

함수 선언식 안에 let으로 선언한 변수는 외부에서 참조 가능한 모습

 

 

2. 결론

3개 변수 중에 뭘 쓰실지 모르겠으면 const를 사용하세요.

const는 constant의 약자로 바뀌지 않는 일정한 값을 뜻합니다.

변수는 값이 바뀌면 추적이 어려우니 바뀌지 않는 게 대부분 좋습니다.

그리고 코드에서 실제로 재할당이 필요한 경우만 let을 사용하시면 더 좋은 코드를 짜실 수 있을 거예요