es6문법

민태영·2023년 5월 31일
0

es6란

  • es6는 자바스크립트버전 중 하나로 2015년에 발표
  • 많은 자바스크립트 버전 중 유독 주목받는 이유는 대규모 문법적 향상 및 변경이 있었기 때문

1. let, const

  1. let(변수), const(상수)
    const: 재할당 X
    let: 재할당 O

2. arrow function

let arrowFunc = (x) => {
	...
}

let arrowFunc = (x) => 1;

3. 삼항연산자

맨 앞의 조건이
true인 경우 ?바로 뒤의 로직이
false인 경우 : 바로 뒤의 로직이 실행된다.

true ? '참' : '거짓'
false ? '참' : '거짓'

4. 구조분해할당 (destructuring)

배열이나 객체의 속성(요소)를 각각 하나씩 떼어내어
변수에 담는다.

1) 배열의 경우

순서가 중요

let [value1, value2] = [1, "new"]

왼쪽의 배열의 요소를 각각 하나씩 오른쪽의 변수 value1과 value2에 할당한다.

(예1)

let arr = ["value", "value2", 

(예2)

// 배열을 먼저 만들고
let arr = ["value1", "value2", "value3", "valuie4"];
let [a, b, c, d] = arr;

예2-1) 만약 할당하려는 변수의 수에 비해 배열의 요소 갯수가 부족하면 default값을 설정할 수 있다.

let arr = ["value1", "value2", "value3"];
let [a, b, c, d] = arr;
// => value1, value2, value3, undefined 가 뜬다.

// default값 적용
let arr = ["value1", "value2", "value3"];
let [a, b, c, d = "value4"] = arr;
// => value1, value2, value3, value4 가 뜬다.

2) 객체인 경우

key가 중요

변수 name은 객체안의 name속성의 요소를 가지게 되고
변수 age는 객체안의 age속성의 요소를 가지게 된다.

// 구조분해시 할당하려는 변수네임과 key네임이 같아야한다.
let { name, age } = {
	name: 'abc',
    age: 30,
}

새로운 이름으로 할당

let user = {
	name: 'abc',
    age: 30,
}

let { 
	name: newName,
	age: newAge
} = user;

만약 새롭게 할당할 변수들 중 객체의 속성이 없는 경우
undefined가 저장

초기값을 설정

let { name2, age2 } = {
    name2: '태영',
    age2: 30
}
let { 
    name,
    age, 
    birthday
} = user;
=> birthday => undefined


let { 
    name,
    age, 
    birthday = "8/24"
} = user;

=> birthday => "8/24"
profile
꿈을 꾸는 개발자

0개의 댓글