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개의 스테이션을 통과했습니다. 바라건대, 당신은 그 과정에서 뭔가를 배웠습니다! 글 잘 보셨나요? 더 흥미로운 내용을 위해 저를 따르 십시오 .
'Study > JavaScript' 카테고리의 다른 글
마우스 클릭 좌표 (screenX, clientX, pageX, offsetX) (0) | 2022.04.12 |
---|---|
nodejs / javascript browser screen recorder (0) | 2022.03.11 |
JavaScript에서 내가 가장 좋아하는 9가지 디자인 패턴 (0) | 2022.02.26 |
Javascript Coding Convention (0) | 2022.02.25 |
Javascript 20가지 팁 || 개발시간을 줄이자 (0) | 2022.02.25 |