ES6, ES11 useful latest grammers
31796 ワード
💡 ES6(2015) useful latest grammers
✍️ Shorthand property names
MDN'sオブジェクトイニシエータ(オブジェクトイニシエータ)
const something = {
name: 'juhwan', // object는 항상 key와 value로 이루어진다.
age: '20',
};
const name = 'juhwan';
const age = '20';
// 💩
const something2 = {
name: name,
age: age,
};
// ✨
const something3 = {
name,
age,
};
console.log(something1, something2, something3);
✍️ Destructuring Assignment
MDN's設計割当(割当構造分解)
// object
const student = {
name: 'Anna',
level: 1,
};
// 💩
{
const name = student.name;
const level = student.level;
console.log(name, level);
}
// ✨
{
const { name, level } = student;
console.log(name, level);
// ✨ 새로운 이름으로 선언도 가능하다.
const { name: studentName, level: studentLevel } = student;
console.log(studentName, studentLevel);
}
// array
const animals = ['🐶', '😽'];
// 💩
{
const first = animals[0];
const second = animals[1];
console.log(first, second);
}
// ✨
{
const [first, second] = animals;
console.log(first, second);
}
✍️ Spread Syntax
MDN's Spread Syntax(展開構文)
const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const array = [obj1, obj2];
// array copy
const arrayCopy = [...array];
console.log(array, arrayCopy);
const arrayCopy2 = [...array, { key: 'key3' }];
// object가 가리키고 있는 변수는 실제로 담고 있는 것이 아니라
// 들어있는 메모리의 주소를 가리킨다.
// 그러므로 원래의 오브젝트를 변환하면 모두에게 적용된다.
obj1.key = 'newKey';
console.log(array, arrayCopy, arrayCopy2);
// object copy
const obj3 = { ...obj1 };
console.log(obj3);
// array concatenation
const fruits1 = ['🍑', '🍓'];
const fruits2 = ['🍌', '🥝'];
const fruits = [...fruits1, ...fruits2];
console.log(fruits);
// object merge
const dog1 = { dog: '🐕' };
const dog2 = { dog: '🐶' };
// key가 동일하다면 뒤의 object가 앞의 object를 덮어 씌운다.
const dog = { ...dog1, ...dog2 };
console.log(dog);
✍️ Default parameters
MDN'sデフォルトパラメータ
{
function printMessage(message) {
if (message == null) {
message = 'default message';
}
console.log(message);
}
printMessage('hello');
printMessage();
}
// ✨
{
function printMessage(message = 'default message') {
console.log(message);
}
printMessage('hello');
printMessage(); // default 값을 반환한다.
}
✍️ Ternary Operator
MDN'sTernary Operator(3条件演算子)
const isCat = true;
// 💩
{
let component;
if (isCat) {
component = '😸';
} else {
component = '🐶';
}
console.log(component);
}
// ✨
{
const component = isCat ? '😸' : '🐶';
console.log(component);
// 직접적으로 작성
console.log(isCat ? '😸' : '🐶');
}
✍️ Template Literals
MDN's 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}.`);
💡 ES11(2020) useful latest grammers
✍️ Optional Chaining
MDN's Optional Chaining
const person1 = {
name: 'Ellie',
job: { // obj 안에 obj
title: 'S/W Engineer',
manager: {
name: 'Bob',
},
},
};
const person2 = {
name: 'Bob',
};
// 💩💩💩💩💩💩
{
function printManager(person) {
console.log(person.job.manager.name);
}
// 문제 없이 출력이 된다.
printManager(person1);
// manager가 없기 때문에 type error가 뜬다.
// printManager(person2);
}
// 💩💩💩
{
function printManager(person) {
console.log(
person.job
? person.job.manager
? person.job.manager.name
: undefined
: undefined
);
}
printManager(person1);
printManager(person2);
}
// 💩
{
function printManager(person) {
// code가 중복돼서 좋지 않다.
console.log(person.job && person.job.manager && person.job.manager.name);
}
printManager(person1);
printManager(person2);
}
// ✨
// kotlin이나 swift같은 최신 언어에도 포함되어 있다.
{
function printManager(person) {
console.log(person.job?.manager?.name);
}
printManager(person1);
printManager(person2);
}
✍️ Nullish Coalescing Operator
MDN's Nullish Coalescing Operator
// Logical OR operator
// false: false, '', 0, null, undefined
{
const name = 'juhwan'; // true 이므로 name 할당
const userName = name || 'Guest';
console.log(userName);
}
{
const name = null; // false 이므로 뒤의 guest 할당
const userName = name || 'Guest';
console.log(userName);
}
// 💩
{
// bug! 문자열이 비어있거나 0인 경우에도 뒤의 값이 할당된다.
// || 연산자는 false의 특지을 잘 알지 못하면 bug로 고생하게 된다.
const name = '';
const userName = name || 'Guest';
console.log(userName);
const num = 0;
const message = num || 'undefined';
console.log(message);
}
// ✨
{
const name = '';
const userName = name ?? 'Guest';
console.log(userName);
const num = 0;
const message = num ?? 'undefined';
console.log(message);
}
ソース
JavaScriptの最新の構文
Reference
この問題について(ES6, ES11 useful latest grammers), 我々は、より多くの情報をここで見つけました
https://velog.io/@leejuhwan/ES6-ES11-useful-latest-grammers
テキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol
const something = {
name: 'juhwan', // object는 항상 key와 value로 이루어진다.
age: '20',
};
const name = 'juhwan';
const age = '20';
// 💩
const something2 = {
name: name,
age: age,
};
// ✨
const something3 = {
name,
age,
};
console.log(something1, something2, something3);
// object
const student = {
name: 'Anna',
level: 1,
};
// 💩
{
const name = student.name;
const level = student.level;
console.log(name, level);
}
// ✨
{
const { name, level } = student;
console.log(name, level);
// ✨ 새로운 이름으로 선언도 가능하다.
const { name: studentName, level: studentLevel } = student;
console.log(studentName, studentLevel);
}
// array
const animals = ['🐶', '😽'];
// 💩
{
const first = animals[0];
const second = animals[1];
console.log(first, second);
}
// ✨
{
const [first, second] = animals;
console.log(first, second);
}
const obj1 = { key: 'key1' };
const obj2 = { key: 'key2' };
const array = [obj1, obj2];
// array copy
const arrayCopy = [...array];
console.log(array, arrayCopy);
const arrayCopy2 = [...array, { key: 'key3' }];
// object가 가리키고 있는 변수는 실제로 담고 있는 것이 아니라
// 들어있는 메모리의 주소를 가리킨다.
// 그러므로 원래의 오브젝트를 변환하면 모두에게 적용된다.
obj1.key = 'newKey';
console.log(array, arrayCopy, arrayCopy2);
// object copy
const obj3 = { ...obj1 };
console.log(obj3);
// array concatenation
const fruits1 = ['🍑', '🍓'];
const fruits2 = ['🍌', '🥝'];
const fruits = [...fruits1, ...fruits2];
console.log(fruits);
// object merge
const dog1 = { dog: '🐕' };
const dog2 = { dog: '🐶' };
// key가 동일하다면 뒤의 object가 앞의 object를 덮어 씌운다.
const dog = { ...dog1, ...dog2 };
console.log(dog);
{
function printMessage(message) {
if (message == null) {
message = 'default message';
}
console.log(message);
}
printMessage('hello');
printMessage();
}
// ✨
{
function printMessage(message = 'default message') {
console.log(message);
}
printMessage('hello');
printMessage(); // default 값을 반환한다.
}
const isCat = true;
// 💩
{
let component;
if (isCat) {
component = '😸';
} else {
component = '🐶';
}
console.log(component);
}
// ✨
{
const component = isCat ? '😸' : '🐶';
console.log(component);
// 직접적으로 작성
console.log(isCat ? '😸' : '🐶');
}
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}.`);
✍️ Optional Chaining
MDN's Optional Chaining
const person1 = {
name: 'Ellie',
job: { // obj 안에 obj
title: 'S/W Engineer',
manager: {
name: 'Bob',
},
},
};
const person2 = {
name: 'Bob',
};
// 💩💩💩💩💩💩
{
function printManager(person) {
console.log(person.job.manager.name);
}
// 문제 없이 출력이 된다.
printManager(person1);
// manager가 없기 때문에 type error가 뜬다.
// printManager(person2);
}
// 💩💩💩
{
function printManager(person) {
console.log(
person.job
? person.job.manager
? person.job.manager.name
: undefined
: undefined
);
}
printManager(person1);
printManager(person2);
}
// 💩
{
function printManager(person) {
// code가 중복돼서 좋지 않다.
console.log(person.job && person.job.manager && person.job.manager.name);
}
printManager(person1);
printManager(person2);
}
// ✨
// kotlin이나 swift같은 최신 언어에도 포함되어 있다.
{
function printManager(person) {
console.log(person.job?.manager?.name);
}
printManager(person1);
printManager(person2);
}
✍️ Nullish Coalescing Operator
MDN's Nullish Coalescing Operator
// Logical OR operator
// false: false, '', 0, null, undefined
{
const name = 'juhwan'; // true 이므로 name 할당
const userName = name || 'Guest';
console.log(userName);
}
{
const name = null; // false 이므로 뒤의 guest 할당
const userName = name || 'Guest';
console.log(userName);
}
// 💩
{
// bug! 문자열이 비어있거나 0인 경우에도 뒤의 값이 할당된다.
// || 연산자는 false의 특지을 잘 알지 못하면 bug로 고생하게 된다.
const name = '';
const userName = name || 'Guest';
console.log(userName);
const num = 0;
const message = num || 'undefined';
console.log(message);
}
// ✨
{
const name = '';
const userName = name ?? 'Guest';
console.log(userName);
const num = 0;
const message = num ?? 'undefined';
console.log(message);
}
ソース JavaScriptの最新の構文
Reference
この問題について(ES6, ES11 useful latest grammers), 我々は、より多くの情報をここで見つけました https://velog.io/@leejuhwan/ES6-ES11-useful-latest-grammersテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol