JavaScript - ES6 - 11 최신문법

Shorthand Properties (프로퍼티 축약)

const name = “Mia”;
const age = “28”;

위와 같이 변수가 미리 정의 되어있다면 아래의 방식처럼 object의 key값을 변수의 이름을 넣어 설정 할 수 있다.

const Mia = {
	name: name;
	age: age;
}

변수의 이름과 key값이 같다면 굳이 두 번 적지 않고 변수 이름만 적어도 값이 할당된다.

const Mia = {
	name,
	age;
}

Destructuring Assignment (구조 분해 할당)

const student = {
	name: ‘Mia’,
	level: 9,
};

위의 object에 접근하기 위해서는 아래와 같이 해야한다.

const name = student.name;
const level = student.level;
console.log(name, level);
// Mia 9

아래와 같이 object의 name과 level 값을 각각 가지고 올 수 있다.

const {name, level} = student;
console.log(name, level);
// Mia 9

만약 다른 이름으로 선언하여 가져오고 싶을 때에는 아래와 같이 하면 된다.

const {name: studentName, level: studentLevel} = student;
console.log(studentName, studentLevel);
// Mia 9

배열 또한 가능하다.
원래 배열에 접근하기 위해서는 아래와 같이 인덱스 번호를 가지고 접근했었다.

const animals = [‘🐶’, ‘🐱’];
const first = animals[0];
const second = animals[1];
console.log(first, second);
//🐶 🐱

하지만 이 또한 쉽게 가져올 수 있는데 배열의 순서에 맞게 변수 이름이 할당된다.

const [first, second] = animals;
console.log(first, second);
// 🐶 🐱

배열은 []괄호를, object는 {}괄호를 사용한다.

Spread Syntax

const obj1 = {key: ‘key1’};
const obj2 = {key: ‘key2’};
const array = [obj1, obj2];

배열을 복사할 때에는 map이나 forEach함수를 사용할 수도 있지만 스프레드 문법을 활용하면 편리하다.
스프레드문법은 배열에 있는 아이템 하나하나를 낱개로 복사해온다.

const arrayCopy = […array];
console.log(arrayCoppy);
// 0: {key: ‘key1’}
   1: {key: ‘key2’}

배열을 복사하면서 새로운 배열의 요소를 추가하고 싶다면

const arrayCopy2 = […array, {key: ‘key3’}];
console.log(arrayCopy3);
// 0: {key: ‘key1’}
   1: {key: ‘key2’}
   2: {key: ‘key3’}

💡 spread는 객체 주소의 참조값만 복사해오기 때문에 원래의 객체값을 변경하게 되면 전부 영향을 미치게 된다.

const obj3 = {…obj1};
console.log(obj3);
// {key: ‘key1’}

배열 합치기도 가능하다.

const fruits1 = [‘🍎’, ‘🍊’];
const fruits2 = [‘🍌’, ‘🥝];
const fruits = […fruits1, …fruits2];
console.log(fruits);
// 🍎 🍊 🍌 🥝

객체도 합칠 수 있다.

const dog1 = {dog1: ‘🐕’};
const dog2 = {dog2: ‘🐩’};
const dog = {…dog1, … dog2};
console.log(dog);
// {dog1: ‘🐕’, dog2: ‘🐩’}

💡 주의사항 💡
key의 이름이 같은 객체를 병합한다면 뒤에 있는 value의 값이 앞의 value를 덮어버린다.

const dog1 = {dog: ‘🐕’};
const dog2 = {dog: ‘🐩’};
const dog = {…dog1, … dog2};
console.log(dog);
// {dog: ‘🐩’}

Default Parameters

function printMessage(message){
	console.log(message);
}

printMessage(‘hello’);
printMessage();

// hello
// undefined

빈값이 들어왔을 때 default값을 정하기 위해 보통 아래와 같이 했다.

function printMessage(message){
	if (message == null) {
		message = ‘default message’;
	}
	console.log(message);
}

printMessage(‘hello’);
printMessage();

// hello
// default message

인자 다음에 초기값을 지정해줌으로써 인자가 전달된다면 인자의 값을, 인자가 없다면 default값을 보내줄수 있도록 default parameter를 지정해주면 훨씬 코드가 깔끔해진다.

function printMessage(message = ‘default message’) {
	console.log(message);
}

printMessage(‘hello’);
printMessage();

// hello
// default message

Optional Chaining

const person1 = {
	name: ‘Mia’,
	job: {
		title: ’S/W Engineer’,
		manager: {
			name: ‘bob’,
		},
	},
};

const person2 = {
	name: ‘bob’,
};

위와 같은 객체들이 있다고 가정할 때, manager의 이름을 묻는 함수를 만들게 되면 person1은 bob을, person2는 에러 메세지가 뜰 것이다. 이를 방지하기 위해 if문이나 삼항연산자를 사용, 또는 and 연산자를 활용할 수도 있다.
하지만 코드가 중복되기 때문에 optional chaining을 통해 직업이 있으면? > 매니저가 있으면? > 매니저의 이름을 반환하기. 이런식으로 작성 할 수 있다.

function printManager(person) {
	console.log(person.job?.manager?.name);
}

printManager(person1);
printManager(person2);

// bob
// undefined

Nullish Coalescing Operator (병합 연산자)

보통 or연산자를 이용할 경우 깔끔하게 코딩을 할 수 있다.

const name = ‘Elie’;
const userName = name || ‘Guest’;
console.log(userName);
// name이 있으면 name을, 없으면 Guest를 출력!

다만 false의 특성상 false처럼 취급하는 값들이 있다.
false: false, "", 0, null, undefined
위와 같은 값이 올 경우 or 연산자는 false의 값으로 인지하고 위의 값을 출력하고 싶어도 false일 때의 값을 출력하게 된다.
그래서 나온 것이 Nullish Coalescing Oprator이다. 아무런 값이 없을 때만 false로 넘어간다.

const num = 0;
const message = num ?? ‘undefined’;
console.log(message);
// 0