최신 JavaScript, CSS, HTML

JavaScript

ES2016

Array.prototype.includes

[1, 2, 3].includes(2);

지수 연산자

2 ** 3; // 8

ES2017

Async/Await

Object.entries() & Object.values()

객체를 배열로 변환

const obj = { a: 1, b: 2 };
Object.entries(obj); // [['a', 1], ['b', 2]]
Object.values(obj); // [1, 2]

padStart & padEnd

'5'.padStart(3, '0'); // '005'

ES2018

Rest, Spread 연산자

const { a, ...rest } = { a: 1, b: 2, c: 3 }; // rest = { b: 2, c: 3 }
const newObj = { ...rest, d: 4 }; // { b: 2, c: 3, d: 4 }

ES2019

Array.prototype.flat()

[1, [2, 3]].flat(); // [1, 2, 3]

Object.fromEntries()

키-값 배열을 객체로 변환

Object.fromEntries([['a', 1], ['b', 2]]); // { a: 1, b: 2 }

ES2020

Optional Chaining

값이 null 또는 undefined일 때 안전하게 속성에 접근할 수 있다.

const obj = { a: { b: 2 } };
console.log(obj?.a?.b); // 2
console.log(obj?.a?.c); // undefined

Nullish coalescing operator (??)

let value = null ?? 'default'; // 'default'

Promise.allSettled

ES2021

String.prototype.replaceAll()

이전엔 replace() + 정규 표현식으로 모든 foo를 bar로 바꿨다.

'foo foo'.replaceAll('foo', 'bar'); // 'bar bar'

ES2023

Array.findLast() & findLastIndex()

배열의 마지막에서부터 탐색을 시작

[1, 2, 3, 4].findLast(x => x % 2 === 0); // 4

CSS3

Grid Layout
Flexbox
미디어 쿼리
Transforms
Animations
계산 함수 (calc())
Variables
Clip-Path
Aspect Ratio

HTML

시맨틱 요소 추가
input type 추갸
웹 스토리지
video, audio, canvas, svg 요소 추가