[JS] 자바스크립트 최신 문법 간단정리

01. 템플릿 리터럴 (Template Literal)

- 자바스크립트에서 문자열을 입력하는 방식

- 백틱(`)이라는 기호를 사용하여 정의

let a = 'hi';

let message = a + ' 윙크';

//백틱을 이용하여 표현
let message = `${a} 윙크`;

 

 

02. 구조 분해 문법 (Destructuring)

- 구조화된 배열 또는 객체를 비구조화하여 개별적인 변수에 할당

- 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용

//배열
let arr = ['apple', 10];

let myFruit = arr[0];
let myNumber = arr[1];

//디스트럭처링을 사용하여 코드 간단화
let [myFruit, myNumber] = arr;

//객체
let josh = {
	skill : 'js',
	age : 21
}
//mySkill에 'js' , myAge에 21 선언
let mySkill = josh.skill;
let myAge = josh.age;

//디스트럭처링을 사용하여 코드 간단화
let {skill : mySkill, age : myAge} = josh;

 

 

03. 스프레드 오퍼레이터 (Spread Operator)

 - 값을 복사하거나 이동할 때 주로 사용

//배열
let arr = ['a', 'b'];
let newArr = [arr[0], arr[1]];

//연산자(...)을 사용하여 스프레드 오퍼레이터 활용
let newArr = [...arr];

//객체
let obj= {
	a: 10,
	b: 20
}

let user = {
	a: obj.a,
	b: obj.b
	c: 30
}

//스프레드 오퍼레이터를 활용하여 간단화
let user = {
	...obj,
	c: 30
}