2021년에 알아야 할 34가지 자바스크립트 최적화 기술

최신 속기 기술, 팁, 트릭을 사용하여 자바스크립트 코드 최적화

개발자의 삶은 항상 새로운 것을 배우고 변화를 따라가는 것이 지금보다 더 어렵지 않아야 하며, 제 동기는 프론트엔드 개발자로서 알아야 할 약식 및 기능과 같은 모든 JavaScript 모범 사례를 소개하는 것입니다. 2021년 우리의 삶을 더 편하게 하기 위해

1. 여러 조건이 있는 경우
배열에 여러 값을 저장할 수 있으며 배열 포함 메서드를 사용할 수 있습니다.

if (x === 'abc' || x === 'def' || x === 'ghi' || x ==='jkl') {
    //logic
}
//shorthand
if (['abc', 'def', 'ghi', 'jkl'].includes(x)) {
   //logic
}

2. true인 경우 ... else 속기
이것은 내부에 더 큰 논리를 포함하지 않는 if-else 조건이 있을 때 더 큰 지름길입니다. 우리는 이 속기를 달성하기 위해 단순히 삼항 연산자를 사용할 수 있습니다.

// Longhand
let test: boolean;
if (x > 100) {
    test = true;
} else {
    test = false;
}
// Shorthand
let test = (x > 10) ? true : false;
//or we can use directly
let test = x > 10;
console.log(test);

중첩 조건이 있을 때 이 방법으로 갈 수 있습니다.

let x = 300,
test2 = (x > 100) ? 'greater 100' : (x < 50) ? 'less 50' : 'between 50 and 100';
console.log(test2); // "greater than 100"

3. 변수 선언
공통 값 또는 공통 유형을 갖는 두 변수를 선언하려는 경우 이 약식을 사용할 수 있습니다.

//Longhand 
let test1;
let test2 = 1;
//Shorthand 
let test1, test2 = 1;

4. Null, 정의되지 않음, 비어 있는 수표
새 변수를 생성할 때 값에 대해 참조하는 변수가 null 또는 undefined가 아닌지 확인하고 싶을 때가 있습니다. JavaScript에는 이러한 기능을 달성하기 위한 정말 좋은 약어가 있습니다.

// Longhand
if (test1 !== null || test1 !== undefined || test1 !== '') {
    let test2 = test1;
}
// Shorthand
let test2 = test1 || '';

5. Null 값 확인 및 기본값 할당

let test1 = null,
    test2 = test1 || '';
console.log("null check", test2); // output will be ""

6. 정의되지 않은 값 확인 및 기본값 할당

let test1 = undefined,
    test2 = test1 || '';
console.log("undefined check", test2); // output will be ""
Normal Value checks
let test1 = 'test',
    test2 = test1 || '';
console.log(test2); // output: 'test'

(보너스: 이제 주제 4,5 및 6에 대해 ?? 연산자를 사용할 수 있습니다.)
Nullish 병합 연산자
무효 병합 연산자 ?? 왼쪽이 null이거나 정의되지 않은 경우 오른쪽 값이 반환됩니다. 기본적으로 왼쪽 값을 반환합니다.

const test= null ?? 'default';
console.log(test);
// expected output: "default"const test1 = 0 ?? 2;
console.log(test1);
// expected output: 0

계속 읽기 »