모든 개발자는 ES2019의 새로운 JavaScript 특성에 대해 흥분해야 한다

작성자Gbolahan Olagunju✏️
JavaScript는 탄생 초기부터 장족한 발전을 이루었고, 많은 새로운 첨가와 기능들이 이 언어를 더욱 사용자에게 친밀하고 지루하지 않게 하기 위해 설계되었다.다음은 제가 최근에 JavaScript에 추가한 재미있는 내용들입니다.
이 중 일부 기능은 이미 노드, 크롬, Firefox, Safari에서 제공되었고, 기타 기능은 아직 제안 단계에 있다.

옵션 링크

옵션 링크 사용?. 조작부호 완성.그것은 주로 물음표 앞의 값이 정의되지 않았거나 비어 있지 않았음을 확보한다.이것은 깊이 내포된 객체의 속성을 평가할 때 유용합니다.
속성을 평가하기 전에 ?. 조작부호가 존재하는지 확인해야 한다.
다음 예를 고려하십시오.

const users = [
  {
   name: "Olagunju Gbolahan",
   occupation: "Software Developer",
   sayName(){
    console.log(`my name is ${this.name}`);
   },
   address: { office: "New York" }
  },
  { name: "Olawaseyi Moses" },
  { name: "Tunde Ednut" }
];

사용자 배열의 두 번째 사용자를 생각해 보겠습니다.

const secondUser = users[1];

이 사용자의 사무실 주소를 가져와야 할 수도 있습니다.옵션 링크 조작부호가 나타나기 전에 우리는 상대적으로 비효율적인 과정을 통해 이 정보를 얻어야 한다.

const theAddress = secondUser.address && secondUser.address.office;
console.log(theAddress); // undefined

만약 우리가 매우 깊이 박힌 대상이 있다면, 우리는 모든 단계에서 && 조작부호를 사용하여 그 값이 존재하는지 확인해야 한다.
그러나 링크(옵션)를 사용하면 다음과 같은 작업을 수행할 수 있습니다.

const theAddress = secondUser?.address?.office;
console.log(theAddress); // undefined

또한 옵션 객체 메소드 링크를 사용하여 실행하기 전에 객체의 존재를 확인할 수도 있습니다.

const firstUser = users[0];
console.log(firstUser.sayName?.()); // my name is Olagunju Gbolahan

대상에 주어진 명칭을 가진 방법이 존재하지 않으면 되돌아오기만 합니다. undefined

console.log(firstUser.sayOccupation?.()); // undefined

선택할 수 있는 체인 조작부호가 자바스크립트 규범에 추가되지 않았기 때문에 proposal stage 에 있습니다.
이제 babel-plugin-proposal-optional-chaining 플러그인과 함께 사용할 수 있습니다.

캡처 바인딩(옵션)

우리가 사전에 우리의 잘못이 무엇인지 알았고, 변수의 군더더기를 사용하지 않으려고 했을 때, 이 기능은 쓸모가 있었다.
전통적인'시험해 보자'모델을 고려해 보자.

try {
  const parsedJsonData = JSON.parse(obj);
} catch (error) {
  //the variable error has to be declared weather used or unused
  console.log(obj);
}

단, 선택할 수 있는catch 연결을 추가함으로써, 우리는try 블록에 기본값이 있을 때 사용하지 않는 변수를 제공할 필요가 없습니다.

function getName () {
  let name = "Gbolahan Olagunju";
  try {
    name = obj.details.name
  } catch {}
  console.log(name);
}

파이프 운영자

이것은 자바스크립트의 새로운 내용 중 하나로 현재 1단계에 있다.
그것은 본질적으로 같은 매개 변수의 여러 함수를 호출하여 읽을 수 있도록 하는 데 도움이 된다.
그것은 표현식의 값을 매개 변수로 함수에 전달함으로써 이 점을 실현한다.파이프 조작부호|>가 없는 상황에서 다음 함수를 호출하는 것을 고려합니다.

const capitalize = (input) =>  input[0].toUpperCase() + input.substring(1);
const removeSpaces = (input) => input.trim();
const repeat = (input) => `${input}, ${input}`;

const withoutpipe = repeat(capitalize(removeSpaces('    i am gbols    ')));
console.log(withoutpipe); // I am gbols, I am gbols

그러나 파이프 조작부호를 통해 가독성을 크게 높일 수 있다.

const withpipe = '    i am gbols    '
                |> removeSpaces
                |> capitalize
                |> repeat;
console.log(withpipe); // // I am gbols, I am gbols

밧줄.시작과 꼬치.trimEnd

공식 이름은 TrimRight 및 TrimLeft이지만 ES2019에서는 사용자를 보다 직관적으로 볼 수 있도록 TrimStart 및 TrimEnd라는 별칭으로 변경됩니다.
다음 예를 고려하십시오.

let massage = "     Welcome to LogRocket      ";
message.trimStart(); // "Welcome to LogRocket      "
message.trimEnd(); // "Welcome to LogRocket";

반대, 반대하다fromEntries

상대를 이야기하기 전에.항목별로는 논의 대상이 중요하다.조목.
물체.ES2017 규범에는 대상을 같은 효과 그룹으로 변환하는 방법을 제공하여 모든 그룹에 접근할 수 있도록 하는 entries 방법이 추가되었다.
다음 객체를 고려하십시오.

const devs = {
  gbols: 5,
  andrew: 3,
  kelani: 10,
  dafe: 8,
};
const arrOfDevs = Object.entries(devs);
console.log(arrOfDevs);
//[
//  ["gbols", 5]
//  ["andrew", 3]
//  ["kelani", 10]
//  ["dafe", 8]
//]

이제 스토리지 시스템filter 방법을 사용하여 5년 이상의 경력을 가진 개발자를 확보할 수 있습니다.

const expDevs = arrOfDevs.filter(([name, yrsOfExp]) => yrsOfExp > 5);
console.log(expDevs);
//[
//  ["kelani", 10]
//  ["dafe", 8]
//]

그리고 문제가 하나 생겼다. 결과를 대상으로 바꾸는 간단한 방법이 없다.일반적으로 Dell은 자체 코드를 작성하여 객체로 변환합니다.

const expDevsObj = {};
for (let [name, yrsOfExp] of expDevs) {
expDevsObj[name] = yrsOfExp;
}
console.log(expDevsObj);
//{
 //dafe: 8
 //kelani: 10
//}

객체가 들어오면서Entries에서는 이 작업을 한 번에 생략할 수 있습니다.

console.log(Object.fromEntries(expDevs));
//{
 //dafe: 8
 //kelani: 10
//}

평면지도

일반적으로 API 호출 때문에 깊이 중첩된 배열을 처리해야 합니다.이 경우 패턴을 벤드펴기하는 것이 특히 중요합니다.
다음 예를 고려하십시오.

const developers = [
  {
    name: 'Gbolahan Olagunju',
    yrsOfExp: 6,
    stacks: ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]]
  },
  {
    name: 'Daniel Show',
    yrsOfExp: 2,
    stacks: ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]]
  },
  {
    name: 'Edafe Emunotor',
    yrsOfExp: 9,
    stacks: ['PHP', 'Lumen', ['Angular', 'NgRx']]
  }
];

const allStacks = developers.map(({stacks}) => stacks);
console.log(allStacks);
// [
// ['Javascript', 'NodeJs', ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// ['Ruby', 'Jest', ['Rails', ['JQuery', 'MySql']]]
// ['PHP', 'Lumen', ['Angular', 'NgRx']]
// ]

allstacks 변수는 깊이 있는 그룹을 포함한다.이 그룹을 평평하게 하려면, 우리는 그룹을 사용할 수 있다.원형평평했어
다음은 메서드입니다.

const flatSingle = allStacks.flat();
console.log(flatSingle);
//[
// "JavaScript",
//  "NodeJs",
// ['ReactJs', ['ExpressJs', 'PostgresSql']]]
// "Ruby",
// "Jest",
// ['Rails', ['JQuery', 'MySql']]]
// "PHP",
// "Lumen"
// ["Angular", "NgRx"]
//]

위에서 우리는 수조가 한 층 평평하게 펼쳐졌다고 추정할 수 있는데, 이것은 수조의 기본 매개 변수이다.원형평평했어
우리는 우리가 평평하게 펴고 싶은 정도를 확인하기 위해flat 방법에 매개 변수를 전달할 수 있다.
기본 매개 변수의 값은 1입니다.수조를 완전히 평평하게 하기 위해서 우리는 무한한 큰 매개 변수를 전달할 수 있다.Infinity 매개 변수는 수조를 완전히 평평하게 펴서 수조의 깊이와 무관하다.
다음은 메서드입니다.

const completelyFlat = allStacks.flat(Infinity);
console.log(completelyFlat);
//[
// "JavaScript",
// "NodeJs",
// "ReactJs",
// "ExpressJs",
// "PostgresSql",
// "Ruby",
// "Jest",
// "Rails",
// "JQuery",
// "MySql",
// "PHP",
// "Lumen",
// "Angular",
// "NgRx"
//]

평면도

FlatMap은 맵 메서드와 깊이 1을 호출하는 flat 메서드의 조합입니다.그것은 보통 매우 유용하다. 왜냐하면 매우 효율적인 방식으로 같은 일을 하기 때문이다.
다음은 맵과 flatMap을 모두 사용하는 간단한 예입니다.

let arr = ['my name is Gbols', ' ', 'and i am great developer']; 
console.log(arr.map(word => word.split(' ')));
//[
// ["my", "name", "is", "Gbols"],
// ["", ""],
// ["and", "i", "am", "great", "developer"]
//]

console.log(arr.flatMap(word => word.split(' ')));
//[ "my"
//  "name"
//  "is"
//  "Gbols"
//   ""
//   ""
//   "and"
//   "i"
//   "am"
//   "great"
//   "developer"
//]

결론

이 문서에서 JavaScript가 새로 추가한 여러 가지 이점을 계산했습니다.이러한 추가는 지루함을 줄이고 가독성을 높여 개발자의 체험을 강화한다.
다음은 소개하지 않은 몇 가지 새로운 기능입니다.
JSON.stringify
Sort stability
편집자: 이 문장에 문제가 있는 것을 보았습니까?정확한 버전here을 찾을 수 있습니다.

플러그인: LogRocket, 인터넷 애플리케이션용 DVR

 

 
LogRocket는 프런트엔드 로그 기록 도구로 문제를 자신의 브라우저에서 발생하는 것처럼 다시 재생할 수 있습니다.LogRocket은 오류의 원인을 추측하거나 화면 캡처와 로그 저장을 묻는 대신 세션을 재방송하여 오류의 원인을 신속하게 파악할 수 있습니다.프레임워크가 어떻든지 간에, 모든 프로그램과 완벽하게 사용할 수 있으며, 플러그인은 Redux, Vuex, @ngrx/store의 다른 상하문에서 기록됩니다.
 
Redux 작업과 상태를 기록하는 것 외에 LogRocket에는 콘솔 로그, JavaScript 오류, 스택 추적, 제목과 본문이 있는 네트워크 요청/응답, 브라우저 메타데이터 및 사용자 정의 로그가 기록되어 있습니다.또한 DOM은 페이지의 HTML과 CSS를 기록하여 가장 복잡한 한 페이지 프로그램의 픽셀급 완벽한 영상을 재현합니다.
 
Try it for free .
게시물New ES2019 JavaScript features every developer should be excited about이 가장 먼저LogRocket Blog에 올라왔다.