/**
* Shorthand property names
* https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Object_initializer
*
*/
{
const ellie1 = {
name: 'Ellie',
age: '18',
};
const name = 'Ellie';
const age = '18';
// 💩
const ellie2 = {
name: name,
age: age,
};
// ✨
const ellie3 = {
name,
age, //value 와 key 가 같을 경우 생략이 가능하다.
};
console.log(ellie1, ellie2, ellie3);
console.clear();
}
/**
* Destructuring Assignment (비구조화 할당)
* https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
*
*/
{
// object
const student = {
name: 'Anna',
level: 1,
};
// 💩
{
const name = student.name;
const level = student.level;
console.log(name, level);
}
// ✨
{
const { name, level } = student; //object 의 key 값을 다음과 같이 표현 할 수 있다.
console.log(name, level);
const { name: studentName, level: studentLevel } = student; //override도 가능
console.log(studentName, studentLevel);
}
// array
const animals = ['🐶', '😽'];
// 💩
{
const first = animals[0];
const second = animals[1];
console.log(first, second);
}
// ✨
{
const [first, second] = animals; // array의 비구조화 할당은 []안 요소의 순서에 따라 이뤄진다.
console.log(first, second);
}
console.clear();
}
/**
* Spread Syntax (스프레드 연산자)
* https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Spread_syntax
*
*/
{
const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const array = [obj1, obj2];
// array copy
const arrayCopy = [...array]; // 배열내의 obj만 새로운 배열인 arrayCopy 에 새로 담는다.
console.log(array, arrayCopy); // 두개의 결괏값은 같다.
const arrayCopy2 = [...array, { key: 'key3' }]; //요소를 추가하는 것도 가능하다.
obj1.key = 'newKey'; //이 때의 array와 arrayCopy2는 obj1의 값을 가지는것이 아닌 "주솟값" 을 복사하기 때문에 원본의 값이 바뀌면 그 값을 담은 Copy도 모두 바뀐다.
console.log(array, arrayCopy, arrayCopy2);
// object copy
const obj3 = { ...obj1 };// obj의 copy 도 가능하다.
console.log(obj3);
// array concatenation
const fruits1 = ['🍑', '🍓'];
const fruits2 = ['🍌', '🥝'];
const fruits = [...fruits1, ...fruits2];// 다음과 같이 두개 배열의 요소를 합칠수도 있다.
console.log(fruits);
// object merge
const dog1 = { dog: '🐕' };
const dog2 = { dog: '🐶' };
const dog = { ...dog1, ...dog2 };// obj의 요소를 합치는 것도 가능하다.
console.log(dog);
console.clear();
}
/**
* Default parameters
* https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/Default_parameters
*/
{
// 💩
{
function printMessage(message) {
if (message == null) {
message = 'default message';
}
console.log(message);
}
printMessage('hello');
printMessage();
}
// ✨
{
function printMessage(message = 'default message') {
console.log(message);
} //위의 식과 로직은 같지만 훨씬 간단하다. message라는 params로 받는 인자가 없으면 default 값이 출력된다.
printMessage('hello');
printMessage();
}
console.clear();
}
/**
* Ternary Operator
* https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator
*/
{
const isCat = true;
// 💩
{
let component;
if (isCat) {
component = '😸';
} else {
component = '🐶';
}
console.log(component);
}
// ✨
{
const component = isCat ? '😸' : '🐶';
console.log(component); //isCat이 true면 '😸'를 false면 '🐶'를 출력한다.
console.log(isCat ? '😸' : '🐶');// 위와 같은 식이다.
}
console.clear();
}
/**
* Template Literals
* https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals
*/
{
const weather = '🌤';
const temparature = '16°C';
// 💩
console.log(
'Today weather is ' + weather + ' and temparature is ' + temparature + '.'
);
// ✨
console.log(`Today weather is ${weather} and temparature is ${temparature}.`);
// 위와 같이 번거롭게 + 로 연결하는 대신 백틱과 변화하는 값은 ${variable}처리하여 한줄로 식을 작성한다.
}
/**
* 관련 강의 영상: https://youtu.be/36HrZHzPeuY
*/
/**
* Optional Chaining (ES11)
* https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Optional_chaining
*/
{
const person1 = {
name: 'Ellie',
job: {
title: 'S/W Engineer',
manager: {
name: 'Bob',
},
},
};
const person2 = {
name: 'Bob',
};
// 💩💩💩💩💩💩
{
function printManager(person) {
console.log(person.job.manager.name);// 이경우 에러가 발생한다.
}
printManager(person1);
// printManager(person2);
}
// 💩💩💩
{
function printManager(person) {
console.log(
person.job
? person.job.manager
? person.job.manager.name
: undefined// name 이 없을 때 예외처리
: undefined//manager가 없을 때 예외처리
);
}
printManager(person1);
printManager(person2);
}
// 💩
{
function printManager(person) {
console.log(person.job && person.job.manager && person.job.manager.name);
// &&연산자로도 사용 가능하다.
}
printManager(person1);
printManager(person2);
}
// ✨
{
function printManager(person) {
console.log(person.job?.manager?.name);// 한 줄로 간단하게 표현할 수도 있다.
}
printManager(person1);
printManager(person2);
}
console.clear();
}
/**
* Nullish Coalescing Operator (ES11)
* https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator
*/
{
// Logical OR operator
// false: false, '', 0, null, undefined
{
const name = 'Ellie';
const userName = name || 'Guest';
console.log(userName);
}
{
const name = null;
const userName = name || 'Guest';
console.log(userName);
}
// 💩
{
const name = '';
const userName = name || 'Guest'; // '' 값이 출력되지 않는다.(false 이기 때문)
console.log(userName);
const num = 0;
const message = num || 'undefined'; //0 이 출력되지 않는다.(false 이기 때문)
console.log(message);
}
// ✨
{
const name = '';
const userName = name ?? 'Guest'; //'' 이 출력된다.
console.log(userName);
const num = 0;
const message = num ?? 'undefined'; //0이 출력된다.
console.log(message);
}
}
[출처]: 드림코딩 엘리