이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

게시글

강좌21 - EcmaScript - 일 년 전 등록

ESNext stage-3(Candidate)

조회수:
0
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ
이 블로그는 광고 클릭 수익으로 운영됩니다!
괜찮으시다면 광고 차단을 풀어주세요 ㅠㅠ

안녕하세요. 이번 시간에는 ES2018로 채택될 유력 후보인 stage-3에 대해 알아보겠습니다! 사실 다 썼는데 내용이 날아가서 눈물을 흘리며 다시 쓰는 중입니다. 날아가지 않도록 보완했습니다.

stage-3이란 이름에서 유추할 수 있듯, stage-2도 있고, stage-1도 있습니다. stage-4와 stage-0도 있습니다. 각각의 stage가 무엇을 의미하는 지 궁금하시죠? 각각의 stage에는 이름이 붙어 있습니다.

stage-4는 Finished(종료), stage-3는 Candidate(후보), stage-2는 Draft(초안), stage-1은 Proposal(제안), stage-0은 Strawman(허수아비)입니다. 허수아비라는 이름이 재미있네요. 언제든지 탈락할 위험에 처해있는 것들입니다.

stage-4는 정식 채택된 애들입니다. stage-3인 얘들이 정식 채택된다면 stage-4로 이동되어 ES2018이 될 겁니다. stage-3은 가장 유력한 후보들인 것이죠. stage-2, stage-1의 것들은 한 두 단계를 더 올라와야 가능합니다.

보시다시피 현재 어떠한 브라우저에서도 지원하지 않습니다. 따라서 이 번 시간은 콘솔에 치지 마시고 눈으로만 봐 주세요. 그냥 이런 기능이 내년에 추가되겠구나 하시면 됩니다. stage-3을 실제로 사용하고 싶으시다면 npm에서 babel-preset-stage-3을 설치하시면 됩니다.

새로운 객체

SIMD와 global 객체가 생겼습니다. SIMD는 병렬 프로그래밍에 사용할 수 있는 객체입니다. 아직까지는 쓸 수 없으니 그냥 넘어가시면 됩니다. global은 Node.js의 global과 같은 전역 객체입니다. 이게 자바스크립트에서 무슨 역할을 하고, 왜 필요한지는 아직 잘 모르겠습니다.

Object rest, spread

가장 유용한 기능입니다. 객체 해체와도 비슷한데요. 배열을 해체하던 것처럼 객체를 해체할 수 있습니다.

먼저 rest는 선택되지 않은 나머지 속성들을 모아주는 기능을 합니다. rest를 할 때 값은 복사하고, 객체는 참조합니다.

const { a, ...rest } = { a: 1, b: 2, c: 3 };
console.log(rest); // { b: 2, c: 3}
const { d, g, ...rest2 } = { d: 4, e: { f: 6 }, g: 7, h: 8 }
console.log(rest2); // { e: { f: 6 }, h: 8 } ( { f: 6 }은 복사가 아니라 참조)

spread는 Object.assign과 비슷한 기능을 합니다. 역시 값은 복사하고, 객체는 참조합니다. 만약 같은 속성명이 있다면 뒤의 것이 앞의 것을 덮어씌웁니다.

const obj = { a: 1, b: 2, c: 3 };
const spread = {
  a: 3,
  d: 4,
  ...obj,
};
console.log(spread); // { a: 1, b: 2, c: 3, d: 4 } (a: 3이 덮어씌워짐)
const spread2 = {
  a: 2,
  c: 4,
  ...obj,
  a: 3,
  b: 5
};
console.log(spread2) // 맞춰보세요

콘솔이 어떻게 나올지 맞춰보세요! 답은 { a: 3, b: 5, c: 3 }입니다.

Async iteration

async 문법을 생성기for of 문에서 사용 가능합니다. 비동기 반복 프로그래밍을 하시는 분들께는 희소식이겠네요. 지금까지는 async와 반복문을 같이 쓰기 힘들어서 그냥 프로미스로 코딩하고 Promise.all로 한 번에 처리하곤 했는데요. 생성기와 for of 문에서 사용가능할 수 있게 되면서 반복적인 비동기 작업을 쉽게 처리할 수 있게 되었습니다.

async function* gen() {
  yield 1;
  yield 2;
  yield 3;
}
const itr = gen();
itr.next().then((it) => {
  console.log(it.value); // 1
});

정규표현식

정규표현식도 강화되었습니다. lookbehind가 생기고, 캡쳐링 그룹에 이름을 정해줄 수 있습니다. 그리고 유니코드도 정규표현식으로 가능합니다.

lookbehind가 뭐냐면, 특정 문자열 뒤의 문자열을 찾는 기능입니다. 예를 들면, 바보 뒤의 제로초를 찾으라고 하면 "바보제로초 천재제로초", 이렇게 찾아줍니다. (천재 뒤의 제로초는 찾지 않습니다) 현재 자바스크립트 정규표현식은 특정 문자열 앞의 문자열만 찾을 수 있습니다. 이제 뒤의 것까지 찾아주니 참 좋죠.

캡쳐링 그룹에 이름도 붙여줄 수 있습니다. 캡쳐링 그룹이란 정규 표현식에서 괄호로 묶어준 것들을 의미합니다. 보통 괄호 순서대로 1번, 2번, 3번 이렇게 번호로 이름이 매겨지는 것을 이제 사용자가 직접 지정할 수 있습니다. 이렇게 매겨진 이름은 결과의 groups 속성으로 접근할 수 있습니다.

const result = /(?<babo>바보)(?<name>제로초)/.exec('바보제로초');
result.groups.babo; // 바보
result.groups.name; // 제로초
result.groups[1]; // 바보
result.groups[2]; // 제로초

다음 시간에는 stage-2에 대해 알아보겠습니다!

투표로 게시글에 관해 피드백을 해주시면 많은 도움이 됩니다. 오류가 있다면 어떤 부분에 오류가 있는지도 알려주세요! 잘못된 정보가 퍼져나가지 않도록 도와주세요.
Copyright © 2016- 무단 전재 및 재배포 금지

댓글

1개의 댓글이 있습니다.
10달 전
이런 정보는 어디에서 보나요??
10달 전
https://github.com/tc39/proposals 여기에 있습니다.