ES6 추가 문법

임성준·2022년 3월 24일
0
post-thumbnail

1. Shorthand property names

  • 오브젝트의 키와 값이 같으면 축약이 가능하다
const a = "안녕"
const b = "안녕"
const same1 = { a : a, b : b }
const same2 = { a, b } // same1과 same2 내용은 같다

2. Destructuring assigment

  • 오브젝트의 키를 선언후 바로 사용
const student = {
	name : 'Anna',
    level: 1,
}
const {name, level } = student;
console.log(name, level); // 출력 => 'Anna', 1
* 다른이름으로 선언 후 사용도 가능하다.
const { name: studentName, level: studentLevel } = student; 
* 배열도 가능하다.
const [first, second] = animals;
       0번째 ,  첫번째

3. Spread Syntax

  • 배열, 오브젝트의 주소 참조 복사
    💎 주소값을 참조하기 때문에 복사된 값을 변경하면 기존값도 변경된다.
const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const array = [ obj1, obj2 ];
//복사 후 값을 하나 추가한 형태
const arrayCopy = [...array, {key: 'key3' }];
console.log(arrayCopy)
// 출력 
{ key: 'key1' }
{ key: 'key2' }
{ key: 'key3' }

4. Default parameters

  • 함수의 파라미터 값이 없을때 디폴트 값 설정
function printMessage(message = 'default message') {
	console.log(message);
}
printMessage('hello'); // 출력 => hello
printMessage(); // 출력 => default message

5. Ternary Operator

  • 간단한 조건문 사용
const component = isCat ? 'a' : 'b' ;
isCate이 true 일때 'a'
isCate이 false 일때 'b'가 리턴된다.

6. Tmplate Literals

  • 문자와 변수를 그대로 사용하기
// 기존방식
const temparature = "16도"
console.log("지금 온도는 " + temparature + " 입니다."
// ES6 
console.log(`지금 온도는 ${temparature} 입니다.`);

참조 : https://www.youtube.com/watch?v=36HrZHzPeuY

profile
오늘도 공부 📖🌙

0개의 댓글