[JavaScript] ES6이후 문법 정리
ECMAScript6 이후 update항목 정리 및 핵심 요약
ES6 이후 많은 문법들이 Internet Explorer에서 지원이 되지 않으니 주의
shorthand property names
객체 초기자는 0개 이상인 객체 속성명 및 관련값 쌍 목록이 콤마로 분리되어 중괄호
{}
로 묶인 형태
- key와 value로 이루어진 object정의 시 기존에 정의되었던 key, value와 동일한 이름을 사용할 경우 아래와 같이 간소화 가능
const movie1 = {
name : "The Dark Knight",
age : "18"
};
const name = "The Dark Knight";
const age = "18";
const movie2 = {
name : name,
age : age
};
const movie3 = {
name,
age
};
console.log(movie1,movie2,movie3);
Destructuring assignment
구조 분해 할당 구문은 배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식
- object의 key와 value에 접근하기 위해
.
을 사용해왔으나, 아래와 같이 object의 key의 이름을{ }
안에 작성해주면 해당 object의 key와 value가 할당됨 - 배열에도 적용 가능 (
[]
배열의 괄호 사용)
const movie1 = {
name : "The Dark Knight",
age : "18"
};
const {name : movieName, age : movieAge} = movie1;
console.log(movieName, movieAge);
const animals = ['dog','cat']
const [first, second] = animals
console.log(first,second)
// dog cat
Spread syntax
전개 구문을 사용하면 배열이나 문자열과 같이 반복 가능한 문자를 0개 이상의 인수(함수로 호출할 경우) 또는 요소(배열 리터럴의 경우)로 확장해 0개 이상의 키-값의 쌍으로 객체를 확장시킬 수 있음
- object들을 담고있는 배열을 복사
- key가 동일하다면 제일 마지막 key가 덮어씌움
const animal1 = {key : 'dog', key : 'lion'}
const animal2 = {key : 'cat', key : 'pig'}
const array = [animal1,animal2]
const arrayCopy = [...array,{key : 'tiger'}]
console.log(array)
console.log(arrayCopy)
const animal1 = ['dog', 'lion']
const animal2 = ['cat', 'pig']
const array = [...animal1,...animal2]
const arrayCopy = [...array,{key : 'tiger'}]
console.log(array)
console.log(arrayCopy)
- !! object가 들어있는 메모리의 주소값만 복사하기에 원래의 object를 변경하게 되면 전부 변경됨
const animal1 = {key : 'bullDog'}
const animal2 = {key : 'cat'}
const array = [animal1,animal2]
const arrayCopy = [...array,{key : 'tiger'}]
console.log(array)
console.log(arrayCopy)
Default parameters
기본값 매개변수를 사용하면 값이 없거나 undefined가 전달될 경우 이름붙은 매개변수 기본값으로 초기화 할 수 있음
//기존
const Print = (message) => {
if(message == null){
message = 'default message';
}
console.log(message);
}
Print('hi');
//default parameters사용
const Print = (message = 'default message') => {
console.log(message);
}
Print('hi');
Print();
//hi
//default message
Ternary Operator
삼항 연산자는 세 개의 피연산자를 취할 수 있는 유일한 연산자로 맨 앞에 조건문 ? 참이라면 실행할 식 : 거짓이라면 실행할 식 으로 이루어짐
function getFee(isMember) {
console.log(isMember ? '$2.00' : '$10.00');
}
getFee(true)
///$2.00
Template Literals
Template literals는 내장된 표현식을 허용하는 문자열 리터럴로 여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있음
const weather = 'sunny'
const temp = '16℃'
console.log('Today weather is' + weather + 'and Temperature is' + temp)
console.log(`Today weather is ${weather} and Temperature is ${temp}`)
//Today weather is sunny and Temperature is 16℃
Optional Chaining(ES11)
Optional Chaining 연산자
?.
는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있음
const person1 = {
name : 'Tim',
job : {
title : 'Engineer',
manager:{
name : 'Bob'
}
}
}
const person2 = {
name : 'Max'
}
const Manager = (person) => {
console.log(person.job?.manager?.name)
//console.log(person.job && person.job.manager && person.job.manager.name)
}
Manager(person1)
Manager(person2)
Nullish Coalescing Operator
널 병합 연산자
??
는 왼쪽 피연산자가 null또는 undefined일 때 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자
- false : false, ‘’, 0, null, undefined 로 간주됨
- 특정한 값이 할당되지 않은 null값이라면 or연산자를 이용해 기본값을 할당해왔으나
''
문자열 공백 또는0
이 할당되어 있는 경우를 위해 사용
const name1 = 'MJ'
const useName1 = name1 || 'Guest'
console.log(useName1)
//MJ
const name2 = ''
const useName2 = name2 ?? 'Guest'
console.log(useName2)
//
const name3 = 0
const useName3 = name3 ?? 'Guest'
console.log(useName3)
//0
댓글남기기