[JavaScript] const, var, let 차이점

ES6 이후 const , let을 이용하여 새로운 변수를 정의함.

 

그 이전엔 var로 했었음.

 

var 에는 많은 문제가 있었는데

1. 정의된 변수가 함수 scope를 가짐.

function example() {

var i =1;

}

console.log(i) // 에러 

 

2. for 반복문에서 정의된 변수가 반복문이 끝난 이후에도 게속 남아있음

for(var i =0; i<10; i++) {

console.log(i);

}

console.log(i); //10 출력

 

3. var 변수는 재정의가 가능함

var a = 1;

var a = 2; 

 

const는 변수를 재할당 불가능함. 

const a = 1;

a = 2; //에러 발생

 

var a = 1;

a = 2;  //에러 없음

 

let a = 1;

a = 2; //에러없음

 

const로 정의한 객체의 내부 속성값은 수정가능

const a = {prop1 : 'a'}

a.prop1 = 'b' //에러발생하지 않음

console.log(a); // {prop1: 'b'}

 

const로 정의한 객체를 재할당은 불가능함

const a = {prop1: 'a'}

a = {prop2 : 'b'} //에러 발생

 

새로운 객체를 생성하는 기능은 필요 없고 단지 수정만 할 수 없도록 차단하고 싶다면

Object.preventExtensions

Object.seal

Object.freeze 를 사용한다.

 

콘솔 로그 출력 시 단축 속성명 활용하기

const name = 'minji'

const age= 25;

console.log('name=', name, ',age=',age); // name = minji, age=25

console.log({name, age});  // {name: 'minji', age:25}

 

계산된 속성명 사용하지 않는것 vs 사용한 것

function ex1(key, value){

const ojb = {};

obj[key] = value;

return obj;

}

 

function ex2(key, value){

return { [key]: value +1};

}

 

배열의 비구조화 

const arr = [1,2];

const [a,b] = arr;

 

console.log(a); //1

console.log(b); //2

 

배열의 비구조화 속성값 건너뛰기

const arr = [1,2,3];

const [a, , c] =arr;

 

console.log(a); //1

console.log(c); //3

 

객체 비구조화

const obj = {age : 25, name: 'minji'};

const {age, name} = obj;

console.log(age); //25

console.log(name); // 'minji'

 

매개변수 기본값을 이용해서 필숫값을 표현하는 법

function required(){

throw new Error('no parameter');

}

function printLog(a=required()){

console.log({a});

}

 

printLog(10); // {a:10}

printLog(); //에러 발생