2020년 이후, 자바스크립트는 어떤 것이 변경되었을까

Urther·2022년 2월 9일

네이버d2 자바스크립트

JavaScript

목록 보기

6/8

lastUpdate: 21/ 03/ 07

Naver D2 , 2020년과 이후 JavaScript의 동향 - JavaScript(ECMAScript) 를 요약한 글입니다

네.. 저는 2020 년 글을 22년에 보고 있습니다아 ...

👩‍🌾 자바스크립트의 break point

자바스크립트는 10년마다 큰 변화가 이루어졌다.

First age , 1997 - 2007

JS 언어적 측면의 완성을 위한 노력

자바스크립트의 첫등장
DOM / helper 라이브러리( 대표적으로 , JQuery )들의 등장으로 동적인 웹개발이 가능해졌다.
언어적 표준화(ECMAScript)가 시작되었지만 실패

Second Age, 2009~2019

새로운 영역으로 확장

현재 생태계의 핵심을 이루는 Node.js, npm, 빌드/번들러, 다양한 프레임워크가 등장하며 더 큰 도약

Third Age, 2020 ~

타입사용을 통한 성능향상 (javascript 는 javascript로 개발되어야한다는 접근 방식이 typescript에 의해 깨졌다.)

🤥 JS의 종말?

어떤 유명한 개발자(소프트웨어 개발자이자 사상가이기도 한 Gary Bernhardt)가 JS의 영향력은 2035년까지일 것으로 예측했다. ⏤ 현재 배우고 있는 JS 가 마지막 주기 일수도 ..

JS 개발자는 거리에 나앉습니다 ...

차근 차근 배우면 된다잉

Deno에서는 JS가 아닌 새로운 언어 Rust 가 사용되고 있다고 한다.

물론 홈페이지에서는 다 자기 언어가 좋다고 말하지만 안정적 (?) js 개발자가 들으면 스르륵 홀릴 문구를 표지에 뒀다. ⏤ 취업하고 다음 언어로 배우기로 선정했다. 인강이 없어서 공식 문서를 보고 배워야 할 것 같은대 언넝 배워서 인강으로 돈벌자!!

📄 그래서 EcmaScript 2021 명세

The state of JavaScript & FE, 2021 Edtion

이 놈들은 최신인만큼 무적 IE 에는 지원이 안됩니당 :(

1. string.prototype.replaceAll

원래 replace 는 default 가 hello.replace(/ i /i, 'e') 라서 , l 을 모두 e로 바꾸고 싶다면 hello.replace(/(l)/g,'e') 와 같이 정규식 플래그를 썼어야 한다.
정규식도 헷갈리는데 플래그를 써야하는 귀찮음들이 많이 덜어질 것 같다.

2. Promise.any

첫 번째로 이행(fulfilled)되고 처리(resolved)된 Promise 를 반환한다.

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"

이전에 있었던 Promise.race 와 차이점은?

Promise.race 는 이행(fullfilled) 이거나 거부(rejected) 되어도 가장 먼저 처리된 Promise는 반환
=> 반면에 Promise.any 는 가장 먼저 이행(fullfilled) 된 Promise를 반환한다.

3. Logical Assignment Operators - 논리적 할당 연산자

말그대로 논리연산자 + 할당 연산자가 함께 쓰이는 것이다.

expr1 ||= expr2

이렇게 논리연산자와 할당연산자가 합쳐진게 나왔대용 ..

const a = { duration: 50, title: '' };

a.duration ||= 10;
console.log(a.duration);
// expected output: 50

a.title ||= 'title is empty.';
console.log(a.title);
// expected output: "title is empty"