[JavaScript] ES6 문법 정리

 

1. let, const

var 과 let 은 뭐가 다른가?

자바스크립트를 쓰면서 항상 궁금했는데, 이번에 그 궁금증이 풀렸다.

 

const num = 100;
var flag = false;

if (num > 90) {
	var flag = true;	// 재할당
}

console.log(flag)	// true

 

const num = 100;
let flag = false;

if (num > 90) {
	let flag = true;	// 존재범위 {}
}

console.log(flag)	// true

 

1. let, const 는 변수를 재선언 할 수 없다. -> 변수명의 중복을 막을 수 있다.

- var 은 같은 이름으로 재선언을 자유롭게 할 수 있다. 그러면 나중에 뭐가 뭔지 헷갈리겟져?

 

2. var 변수의 존재 범위는 function 단위이고, let, const 의 범위는 {} 단위이다.

 

3. const 는 값을 재할당 할 수 없다.

- 하지만, const 로 선언한 obj 의 내부 값은 변경할 수 있다.

 

즉, let 은 var 보다 최근에 나왔으며, 존재범위가 좁고 중복선언이 제한되어 있기 때문에

let 으로 변수를 선언해 사용하는 것이 변수사용의 명확도를 높일 수 있다. let 추천~

 

const a = 1;	
a = 100;		// 재할당 불가능

const human = { name : "mimi" }
human.name = "mickey";		// 재할당 가능

Object.freeze(human)
human.name = "park";		// 재할당 불가능

 

 

 

 

2. Destructing

const person = {
    firstName : "John",
    lastName  : "Doe",
    age       : 50,
    eyeColor  : "blue"
};

const { firstName, lastName, age, eyeColor } = person

console.log(firstName);		// "John"

 

var firstName = person.firstName;

이렇게 일일이 할당하지 않아도 한번에 할당할 수 있다!

대신, 변수명이 키값과 같아야 함.

 

반대로, obj 에 담으려는 값의 변수명이 키값과 같으면 생략해서 적을 수 있다.

let a = 'test';
let b = true;
const c = 789;

// var okObj = {
//   a: a,
//   b: b,
//   c: c
// };

const okObj = { a, b, c }

 

 

 

3. => arrow

 

function 대신 변수선언 형태로 간단하게 함수를 선언할 수 있다.

만약 파라메터값에 빈값이 들어올 경우 디폴트 값을 선언할 수 있다.

const whereAmI = (username, location) => {
    if (username && location) {
        return "I am not lost";
    }
    return -1
}

whereAmI("Jennie", "Seoul");	// "I am not lost"


const isValidAge = (age = 10) => age;
isValidAge();	// 10
isValidAge(20); // 20

 

 

4. `` backtick

이건 익숙한거.

"hi" + name + "!"

`hi ${name} !`

이렇게, 귀찮은 +를 쓰지 않을 수 있다.

const sendMessate = (firstName = '', city = 'Seoul') => {
    return `Hello ${firstName}! Have I met you before? I think we met in ${city} last summer no???`;
}

 

 

5. Symbol

 

Number, String, Boolean, Undefined, Null, Object 다음으로

ES6 에서 처음 도입된 타입이다.

변경 불가능하고 다른 값과 중복되지 않는 유일무이한 값이다.

따라서, 주로 이름의 충돌 위험이 없는 유일무이한 프로퍼티 키를 만들기 위해 사용한다고 한다.

 

고유성을 보장하고, 이름 충돌을 방지하며, 의미를 부여할 수 있다.

 

언제 쓰일지는 모르겠지만, 이런게 있다는 사실을 알고 넘어가자!

 

const symbol = Symbol('kakaotalk')

const Direction = {
    EAST: Symbol('east'),
    WEST: Symbol('west'),
    SOUTH: Symbol('south'),
    NORTH: Symbol('north')
};

 

 

 

자바스크립트 symbol은 언제 사용하면 좋을까?

 

변수 신문법 총정리 1. var let const와 선언,할당,범위 - 코딩애플 온라인 강좌