[JavaScript] ES7 - 12 문법 / ECMAScript 2016 ~ 2021

Intro

---

분명 JS를 쓰고 있는데 C언어스럽게 코딩하는 내 자신을 발견하여 이렇게 최신 문법을 정리해본다 ! (주요한 것만)

 

ES7(2016)

1. Array.prototype.includes()

배열 내에 값이 있는지 없는지 확인

값이 있으면 True, 없으면 false 를 반환

assert([1, 2, 3].includes(2) === true);
assert([1, 2, 3].includes(4) === false);

assert([1, 2, NaN].includes(NaN) === true);

assert([1, 2, -0].includes(+0) === true);
assert([1, 2, +0].includes(-0) === true);

assert(["a", "b", "c"].includes("a") === true);
assert(["a", "b", "c"].includes("a", 1) === false);

 

2. Exponentiation Operator(제곱연산자)

let cubed = 2 ** 3;
// same as: 2 * 2 * 2

let a = 2;
a **= 2;
// same as: a = a * a;

let b = 3;
b **= 3;
// same as: b = b * b * b;

ES8(2017)

1.Object.values / Object.entries

values 매소드는 객체 내 모든 value 값들을 배열 형태로 반환

entries 메소드는 객체 내 key,value를 묶어서 배열 형태로 반환

const dimigoin = {
  name: "김정인",
  age: 18,
  class: 4,
};

Object.values(dimigoin); // ["김정인", 18, 4]
Object.entries(dimigoin);// [["name", "김정인"],["age", 18],["class", 4]]

 

2.String Padding

문자열에 여백 or 문자를 추가할 수 있는 메소드 padStart , padEnd

str.padStart(targetLength, padString) // 앞
str.padEnd(targetLength, padString) // 뒤
//targetLength : 목표 문자열 길이, 현자 문자열의 길이보다 작다면 값 그대로 반환
//padString: 현재 문자열에 채워넣을 다른 문자열. 기본값은 ""
//return 값 : 바뀐 문자열

'abc'.padStart(10);         // "       abc"
'abc'.padStart(10, "foo");  // "foofoofabc"
'abc'.padStart(6,"123465"); // "123abc"
'abc'.padStart(8, "0");     // "00000abc"
'abc'.padStart(1);          // "abc"

'abc'.padEnd(10);          // "abc       "
'abc'.padEnd(10, "foo");   // "abcfoofoof"
'abc'.padEnd(6, "123456"); // "abc123"
'abc'.padEnd(1);           // "abc"

 

3.Object.getOwnPropertyDescriptors

기존에 존재하던 Object.getOwnPropertyDescriptor에 s가 붙음

기존 Object.getOwnPropertyDescriptor는 객체와 속성명을 인자로 받아서 해당 속성의 속성 설명자를 반환

Object.getOwnPropertyDescriptors는 객체만 인자로 받아 해당 객체 내 자신의 모든 속성 설명자를 반환

const dimigoin = {
  name: "김정인",
  age: 18,
  class: 4,
};

console.log(Object.getOwnPropertyDescriptor(dimigoin,"name"));
//{value: "김정인", writable: true, enumerable: true, configurable: true}
console.log(Object.getOwnPropertyDescriptors(dimigoin));
//{name: {…}, age: {…}, class: {…}}
//age: {value: 18, writable: true, enumerable: true, configurable: true}
//class: {value: 4, writable: true, enumerable: true, configurable: true}
//name: {value: "김정인", writable: true, enumerable: true, configurable: true}
//__proto__: Object

 

4.Trailing commas(final commas)

javascript는 초기부터 배열에 final commas가 허용되었다 ! ES8부터는 함수의 매개변수에도 허용하기 시작함 ! 단 JSON에서는 허용되지 않음

final commas를 쓰면 새로운 엘리먼트,매개변수,속성을 추가할 때 유용하고 수정 없이 복사해서 쓸 수 있음 ! 이 외에도 버전 관리 이력이 간단하고 코드 편집이 더 편해진다는 장점이 있단다 ~

//Array
var arr = [
  1,
  2,
  3,
];

//Object
var object = {
  foo: "bar",
  baz: "qwerty",
  age: 42,
};
//function parameter, argument
//아래 묶인 코드는 모두 유효하며 서로 같음
function f(p) {}
function f(p,) {}

f(p);
f(p,);

Math.max(10, 20);
Math.max(10, 20,);

 

5.Async Functions

비동기 함수 ! , Promise를 더욱 쉽게 다루고 코드를 깔끔하게 짜기 위해 async,await 도입 ! but 이 내용은 따로 비동기 쪽에서 다루겠음 !

ES9(2018)

1.Rest/Spread Properties(객체 리터럴에서의 전개)

객체 리터럴에서도 전개 구문이 가능해짐 !

전개 구문이란?

배열이나 문자열과 같은 iterable(반복 가능)한 Object를 말 그대로 전개함 ! 코드를 보고 이해하는 게 더 빠를 듯

const num =[1,2,3]
console.log(...num) //1 2 3

//함수 호출에서의 전개
function myFunction(x, y, z) {}
var args = [0, 1, 2];
myFunction(...args);

//객체 리터럴에서의 전개(ES9 추가)
var obj1 = { foo: 'bar', x: 42 };
var obj2 = { foo: 'baz', y: 13 };

var clonedObj = { ...obj1 };
// Object { foo: "bar", x: 42 }

var mergedObj = { ...obj1, ...obj2 };
// Object { foo: "baz", x: 42, y: 13 }

 

2.Promise.prototype.finally

promise에 finally과 추가 됨 ! 기존엔 then 과 catch만 있었으나 finally는 성공 여부에 관계없이 promise 객체를 반환함.

let isLoading = true;

fetch(myRequest).then(function(response) {
    var contentType = response.headers.get("content-type");
    if(contentType && contentType.includes("application/json")) {
      return response.json();
    }
    throw new TypeError("Oops, we haven't got JSON!");
  })
  .then(function(json) { /* process your JSON further */ })
  .catch(function(error) { console.log(error); })
  .finally(function() { isLoading = false; });

 

3.Asynchronous Iteration

나중에 다시 이해해서 쓸 예정.. 너무 어렵자너,,

ES10(2019)

1.Optional catch binding

try,catch 구문을 쓸 때 원래 catch의 매개변수가 꼭 있어야 했지만 ES10 부터 선택적으로 바뀜 !

try {
  doSomethingThatMightThrow();
} catch (exception) {
  //     ^^^^^^^^^
  // We must name the binding, even if we don’t use it!
  handleException();
}
//ES10
try {
  doSomethingThatMightThrow();
} catch { // → No binding!
  handleException();
}

 

2.Symbol.prototype.description

이전에 Symbol의 내용을 보려면 이러한 코드를 짜야 됬음

const symbol = Symbol('foo');
//                    ^^^^^
symbol.toString();
// → 'Symbol(foo)'
//           ^^^
symbol.toString().slice(7, -1); // 🤔
// → 'foo'

그러나 이것은 한 눈에 봐도 별로임. 그래서 Symbol.prototype.description을 도입 !

const symbol = Symbol('foo');
//                    ^^^^^
symbol.description;
// → 'foo'

 

3.Object.fromEntries()

ES8에서 도입된 Object.entries와 호환되는 메소드임 ! entries를 통해 만들어진 배열을 인자로 받아 다시 객체로 만들어줌

const dimigoin = {
  name: "김정인",
  age: 18,
  class: 4,
};
const entries = Object.entries(dimigoin)
const fromEntries = Object.fromEntries(entries)
console.log(fromEntries) //{name: "김정인", age: 18, class: 4}

 

4.String.prototype.trimStart()/trimEnd()

문자열의 앞 , 뒤 공백을 제거해줌. trimStart는 trimLeft로, trimEnd는 trimRight라는 별칭으로 쓸 수 있음. 

const greeting = '   Hello world!   ';

console.log(greeting.trimStart());
// expected output: "Hello world!   ";

console.log(greeting.trimEnd());
// expected output: '   Hello world!';

 

5.Array.prototype.flat()

flat() 메서드는 모든 하위 배열 요소를 지정한 깊이까지 재귀적으로 이어붙인 새로운 배열을 생성합니다.

또한 배열의 구멍도 제거함

const arr1 = [1, 2, [3, 4]];
arr1.flat();
// [1, 2, 3, 4]

const arr2 = [1, 2, [3, 4, [5, 6]]];
arr2.flat();
// [1, 2, 3, 4, [5, 6]]

const arr3 = [1, 2, [3, 4, [5, 6]]];
arr3.flat(2);
// [1, 2, 3, 4, 5, 6]

const arr4 = [1, 2, [3, 4, [5, 6, [7, 8, [9, 10]]]]];
arr4.flat(Infinity);
// [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]

const arr5 = [1, 2, , 4, 5];
arr5.flat();
// [1, 2, 4, 5]

 

6.Array.prototype.flatMap()

flat와 Map 함수를 합친거라 보면 됨 ! 먼저 배열의 각 엘리먼트에 map 수행 후 위에 flat을 수행 ! (1 depth만)

let arr1 = [1, 2, 3, 4];

arr1.map(x => [x * 2]);
// [[2], [4], [6], [8]]

arr1.flatMap(x => [x * 2]);
// [2, 4, 6, 8]

// 한 레벨만 평탄화됨
arr1.flatMap(x => [[x * 2]]);
// [[2], [4], [6], [8]]

ES11(2020)

1.Optional chaining(?.)

참조를 할 때 값이 있는 지 없는 지 검증할 때 Optional chaining을 쓰면 참조가 null or undefined일 때 에러 대신 undefined를 반환해줌 ! (개인적으로 react 프로젝트 할 때 오류 안 나서 정말 요긴하게 사용 중 !)

//default
const dimigoin = {
  name: "김정인",
  age: 18,
  class:4,
  personality:{
      habit:"sports"
  }
};

const dimigoin2= {
    name:"장정인",
    age:18,
    class:4
}

function printClass(person){
    console.log(person.personality.habit)
}
printClass(dimigoin) //sports
printClass(dimigoin2) //error

//Optional Chaining

const dimigoin = {
  name: "김정인",
  age: 18,
  class:4,
  personality:{
      habit:"sports"
  }
};

const dimigoin2= {
    name:"장정인",
    age:18,
    class:4
}

function printClass(person){
    console.log(person?.personality?.habit)
}
printClass(dimigoin) //sports
printClass(dimigoin2) //undefined

 

2.Nullish coalescing Operator

주로 기본값을 할당할 떄 || 연산자를 활용했음 ! BUT, 0,' ' 같은 값들이 들어갈 때 의도대로 작동하지 않을 수 있음 !

//사용자는 익명을 원함
const name =' '
const userName = name || 'Guest'
console.log(userName) //Guest

//사용자는 0이라는 메시지를 원함
const num = 0;
const message = num || 'undefined'
console.log(message) //undefined

Nullish coalescing Operator를 이용하면 값이 Null 이나 undefined인 경우에만 기본 값을 할당해줄 수 있음 ! 앞으로 or 연산자 보다는 Nullish coalescing Operator를 애용하자 !

//사용자는 익명을 원함
const name =' '
const userName = name ?? 'Guest'
console.log(userName) //

//사용자는 0이라는 메시지를 원함
const num = 0;
const message = num ?? 'undefined'
console.log(message) // 0

 

3.globalThis

기존에는 js 실행환경에 따라서 global 객체에 접근하느 방법이 달랐음

브라우저에서는 window,self,frame 사용, 노드에서는 global, Web Worker*(Web Worker는 script 실행을 메인 쓰레드가 아니라 백그라운드 쓰레드에서 실행할 수 있도록 해주는 기술 입니다.)에서는 self를 통해서 접근했었음.*

But 이제는 globalThis를 이용하면 모든 환경에서 접근 가능

// 브라우저 실행 환경 기준
 globalThis === window // true

 

4.Dynamic import

Dynamic Import 는 일반적인 정적인 Module Import 를 필요한 시점 에 로드 할 수 있도록 도와줌 ! 웹 페이지에 성능 올리기 가능 ! react 같은 SPA에서 쓰면 좋을 듯??(주관적 생각)

 

5.BigInt

BigInt는 Number 원시 값이 안정적으로 나타낼 수 있는 최대치인 2^53 - 1보다 큰 정수를 표현할 수 있는 내장 객체입니다.

BigInt는 정수 리터럴의 뒤에 n을 붙이거나(10n) 함수 BigInt()를 호출해 생성할 수 있습니다.

const theBiggestInt = 9007199254740991n;

const alsoHuge = BigInt(9007199254740991);
// ↪ 9007199254740991n

const hugeString = BigInt("9007199254740991");
// ↪ 9007199254740991n

const hugeHex = BigInt("0x1fffffffffffff");
// ↪ 9007199254740991n

const hugeBin = BigInt("0b11111111111111111111111111111111111111111111111111111");
// ↪ 9007199254740991n

 

5.String.prototype.matchAll

정규표현식 관련인데 아직 정규표현식 공부를 안해서 모르니 추후에 쓰겠으,,

 

6.Promise.allSettled()

Promise.allSettled() 메소드는 배열이나 별도의 나열 가능한 객체를 통해 나열된 Promise모음이 모두 이행하거나 거부했을 때에 대한 대응을 할 수 있는 Promise 객체를 반환한다.

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// expected output:
// "fulfilled"
// "rejected"

ES11(2020)

1.String.prototype.replaceAll()

기존에 있던 replace에서 추가된 것으로 문자열에서 바꿀 문자를 모두 찾아 새로운 문자로 바꿔줌

const p = 'The quick brown fox jumps over the lazy dog. If the dog reacted, was it really lazy?';

console.log(p.replaceAll('dog', 'monkey'));
// expected output: "The quick brown fox jumps over the lazy monkey. If the monkey reacted, was it really lazy?"

 

2.Promise.any()

어떤 promise 하나라도 resolve 되면 resovle 됨

const promise1 = Promise.reject(0);
const promise2 = new Promise((resolve) => setTimeout(resolve, 100, 'quick'));
const promise3 = new Promise((resolve) => setTimeout(resolve, 500, 'slow'));

const promises = [promise1, promise2, promise3];

Promise.any(promises).then((value) => console.log(value));

// expected output: "quick"

 

3.WeakRef

나중에 쓸게영

 

4.Logical assignment operators

이제 (??, &&,||) 도 a += 2 처럼 할당 연산자 사용 가능함

expr1 ||= expr2 // expr1 || expr2
expr1 &&= expr2 // expr1 && expr2
expr1 ??= expr2 // expr1 ?? expr2

 

5.Separators for numeric literals

이제 큰 숫자 구분을 _를 이용하여 가능 !

const number = 1_000_000
const money = 1_000_000.123_456;
const octal = 0o123_123;

 

P.S : 노션에서는 최신 문법을 다 지원해줬는데 티스토리 코드 블럭은 지원을 안 해준다 ㅠㅜ,,