[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