JavaScript를 향상시키는 7가지 잘 알려지지 않은 기술

Unsplash 의 KOBU Agency 사진

JavaScript는 배우기는 쉽지만 마스터하기는 어렵습니다. 한편으로 언어는 직관적입니다. 버튼 클릭 시 기능을 실행하는 것은 아마도 일반인이 30분 안에 달성할 수 있을 것입니다. 반면에 이 언어에는 오랜 사용 후에만 드러나는 잠재적인 단점과 가능성이 많이 포함되어 있습니다.

JavaScript를 작성한 지 몇 년이 지난 후에도 동일한 기능을 작성하는 새롭고 더 효과적인 방법을 여전히 정기적으로 발견합니다. "자바스크립트"라는 이름의 보물을 탐색하는 데 도움이 되도록 JavaScript 코드를 강력하게 만드는 7가지 기술이 있습니다.

1. 속기 무효 필터링

null, undefined를 사용하여 비어 있는 문자열 과 같은 null 값을 필터링 filter()하는 것은 대부분의 개발자에게 알려진 기술입니다. 그러나 이 방법을 축약할 수 있다는 것을 알고 계셨습니까?

Filter함수를 매개변수로 받아들입니다. 객체 래퍼 에서 new키워드를 내 보내면 주어진 값을 부울로 변환하는 함수로 작동합니다. 따라서 Boolean 객체 래퍼가 함수로 a 에 전달되면 모든 null 값을 로 변환 하고 목록에서 제거합니다. 너무 우아한!Boolean filterfalse

 

const groceries = ['apple', null, 'milk', undefined, 'bread', ''];

const cleanList = groceries.filter(Boolean);

console.log(cleanList);

 

2. 숫자 구분 기호로 숫자 서식 지정

코딩에는 종종 숫자 작업이 포함됩니다. 그리고 종종 많은 수로 작업해야 합니다. 1.000.000스프레드시트에서 작업할 때 큰 숫자는 가독성을 높이기 위해 점 구분 기호로 깔끔하게 스타일이 지정됩니다 . 그러나 JavaScript에서는 큰 숫자의 개별 부분이 접착제로 붙어 있는 것처럼 보입니다.

하지만 희망이 있습니다! 숫자 구분 기호 를 보십시오 . 이 4단계 제안을 사용하면 밑줄로 큰 숫자의 형식을 지정할 수 있습니다. 모호한 숫자의 시대는 지났습니다.

const bigNumber = 1_000_000;
console.log(bigNumber);
// 1000000

 

3. 결합된 배열/객체 구조 분해

디스트럭처링 그 자체는 더 이상 "숨겨진 보석"으로 분류될 수 없습니다. 이 기술을 사용하면 배열 및 개체의 값을 변수에 직접 할당할 수 있으므로 책장에 있는 코드를 절약할 수 있습니다.

그러나 배열과 객체의 구조 분해가 하나의 할당으로 결합될 수 있다는 것을 알고 계셨습니까? people객체 배열이 있다고 가정 합니다. 배열에 있는 첫 번째 사람의 나이에만 관심이 있습니다. 두 가지 유형의 분해를 결합하면 필요한 정보를 쉽게 얻을 수 있습니다.

const people = [
  {
    name: "Lisa",
    age: 20,
  },
  {
    name: "Pete",
    age: 22,
  },
  {
    name: "Caroline",
    age: 60,
  }
];

const [{age}] = people;

console.log(age);

// 20

4. 배열 구조화에서 값 무시

배열 분해를 사용하여 배열 값을 변수에 직접 할당할 수 있습니다. 그러나 때때로 배열의 모든 구성원이 필요한 것은 아닙니다. 사용하지 않는 변수에 할당하는 대신(나쁜 습관) 간단한 쉼표로 무시할 수 있습니다.

const people = [
  {
    name: "Lisa",
    age: 20,
  },
  {
    name: "Pete",
    age: 22,
  },
  {
    name: "Caroline",
    age: 60,
  }
];

const [, , caroline] = people;

console.log(caroline);

//  {
//     name: "Caroline",
//     age: 60,
//   }

5. 객체 분해 중 변수 이름 바꾸기

객체를 구조화할 때 변수 이름은 기본적으로 객체 키와 일치해야 합니다. 개체 키가 명확하고 명명 충돌이 없는 경우 이 솔루션으로 충분합니다. 그러나 때때로 개체 키가 퍼지하거나 동일한 이름을 가진 변수가 현재 범위에 이미 존재합니다.

이러한 종류의 문제는 Destructuring 할당에서 변수의 이름을 변경하여 쉽게 해결할 수 있습니다. 이것은 원래 키의 이름 다음에 새로운 이름이 오는 콜론을 작성함으로써 달성됩니다.

const caroline = {
  firstNm: 'Caroline',
  ag: 27,
};

const {firstNm: firstName, ag: age } = caroline;

console.log(firstName, age);

// Caroline, 27

6. await 절을 직접 연결하기

연결은 새로운 변수를 호출하지 않고 여러 순차 방법을 적용하는 기술입니다. 예를 들어, 두 작업 사이에 새 변수를 유추하지 않고 a filter및 map메서드를 배열에 적용합니다.

나는 약속이 경기장에 들어올 때 종종 이 사슬이 끊어지는 것을 봅니다. 약속의 결과를 기다려야 하는 새 변수가 호출되어 새 체인의 시작점 역할을 합니다.

그러나 Promise로 작업할 때 새로운 체인을 시작할 필요는 없습니다. 단순히 await중괄호 안에 명령문을 래핑하면 약속의 결과에 직접 액세스할 수 있습니다.

const chainDirectly = (await fetch('https://www.people.com'))
  .filter(person => age > 20)
  .filter(person => nationality === 'NL')

7. 화살표 함수에서 직접 객체 반환

JavaScript의 화살표 함수는 한동안 사용되었습니다. 그들의 적응은 지금까지 널리 퍼져 있습니다. return또한 대부분의 사람들은 실제 명령문 이 필요 없이 화살표 함수의 결과를 직접 반환할 수 있다는 것도 알고 있습니다 . 함수 본문에서 중괄호를 생략하면 결과가 암시적으로 반환됩니다.

그러나 이 기술은 객체를 반환해야 하는 화살표 함수에 어떻게 적용됩니까? 객체는 중괄호로 묶이기 때문에 함수 본문에서 객체를 생략하면 오류가 발생합니다.

걱정 마세요. 이 문제에 대한 우아한 솔루션이 있습니다. 단순히 중괄호 안에 개체를 래핑하여 암시적으로 반환할 수 있습니다.

 

const createPerson = (age, name, nationality) => ({
  age,
  name,
  nationality,
});

const caroline = createPerson(27, 'Caroline', 'US');

console.log(caroline);

// {
//   age: 27,
//   name: 'Caroline'
//   nationality: 'US',
// }

 

기차가 최종 목적지에 도착했습니다. JavaScript를 향상시키기 위해 7개의 스테이션을 통과했습니다. 바라건대, 당신은 그 과정에서 뭔가를 배웠습니다! 글 잘 보셨나요? 더 흥미로운 내용을 위해 저를 따르 십시오 .