프로그래밍 「 자바스크립트 편」모든 개발자가 알아야 할 5가지 JavaScript 트릭

님이 촬영 한 사진 포티스 포토풀로스 on Unsplash

JavaScript는 최신 웹 개발에서 중요한 역할을 하는 강력한 프로그래밍 언어입니다. 개발자로서 우리는 코딩 효율성을 개선하고 JavaScript 기술을 향상시킬 수 있는 방법을 끊임없이 찾고 있습니다.

이 게시물에서는 코딩 능력을 한 단계 끌어올릴 수 있는 상위 5가지 JavaScript 트릭을 살펴봅니다.

이러한 트릭은 코드를 단순화할 뿐만 아니라 코드를 더 우아하고 간결하게 만듭니다.

1. 구조화 과제

구조화 할당을 사용하면 배열 또는 객체에서 값을 추출하여 변수에 간결하게 할당할 수 있습니다.

이 기술은 값의 압축을 푸는 간결한 방법을 제공하며 다양한 시나리오에서 매우 유용할 수 있습니다. 구조화 할당을 활용하면 더 깔끔한 코드를 작성하고 과도한 변수 할당을 피할 수 있습니다.

예를 들어:

// Destructuring an array
const [x, y, z] = [1, 2, 3];
console.log(x); // Output: 1

// Destructuring an object
const { name, age } = { name: 'John', age: 30 };
console.log(name); // Output: 'John'

2. 구문 확산

세 개의 점(...)으로 표시되는 spread 구문을 사용하면 배열 또는 객체의 요소를 다른 배열 또는 객체로 확장할 수 있습니다.

이 강력한 기능은 배열 결합, 객체 복제 또는 함수에 여러 인수 전달과 같은 작업을 단순화합니다.

요소를 분산하면 수동 반복 또는 연결을 방지하여 더 깔끔하고 읽기 쉬운 코드를 만들 수 있습니다.

예를 들어:

// Combining arrays
const array1 = [1, 2, 3];
const array2 = [4, 5, 6];
const combinedArray = [...array1, ...array2];
console.log(combinedArray); // Output: [1, 2, 3, 4, 5, 6]

// Cloning an object
const originalObj = { x: 1, y: 2 };
const clonedObj = { ...originalObj };
console.log(clonedObj); // Output: { x: 1, y: 2 }

3. 선택적 체인

선택적 체인(?.)을 사용하면 오류를 일으키는 null 또는 정의되지 않은 값에 대한 걱정 없이 개체의 중첩된 속성에 안전하게 액세스할 수 있습니다.

속성이 null이거나 정의되지 않은 경우 식은 단락되고 undefined를 반환합니다. 잠재적인 속성 액세스 오류를 처리하는 간결한 방법을 제공하여 코드를 보다 강력하게 만들고 예기치 않은 충돌이 발생할 가능성을 줄입니다.

예를 들어:

const user = {
  name: 'Pranab',
  address: {
    street: 'Silk Board',
    city: 'Bangalore'
  }
};

// Accessing nested properties
const cityName = user.address?.city;
console.log(cityName); // Output: 'Bangalore'

// Handling undefined property
const countryName = user.address?.country;
console.log(countryName); // Output: undefined

4. Promise.allSettled()

Promise.allSettled() 메서드는 지정된 모든 약속이 이행되거나 거부된 후 확인되는 약속을 반환하여 각 약속의 상태에 대한 정보가 포함된 객체 배열을 제공합니다.

이는 여러 promise 또는 비동기 작업을 처리하고 성공 또는 실패 여부에 관계없이 각 작업의 결과를 가져오려는 경우에 유용합니다.

예를 들어:

const promise1 = Promise.resolve('Success');
const promise2 = Promise.reject('Error');
const promise3 = new Promise((resolve) => setTimeout(resolve, 1000, 'Delayed Success'));

Promise.allSettled([promise1, promise2, promise3])
  .then((results) => {
    results.forEach((result) => {
      if (result.status === 'fulfilled') {
        console.log(result.value); // Output: 'Success' and 'Delayed Success'
      } else {
        console.log(result.reason); // Output: 'Error'
      }
    });
  });

5. 템플릿 리터럴

템플릿 문자열이라고도 하는 템플릿 리터럴('')은 JavaScript에서 문자열을 연결하고 표현식을 포함하는 우아한 방법을 제공합니다.

템플릿 리터럴을 사용하면 로 표시된 자리 표시자를 사용하여 문자열 내에 직접 표현식과 변수를 포함할 수 있습니다.${}

이 기능을 사용하면 더하기(+) 연산자 또는 문자열 보간 방법을 사용하여 수동으로 문자열을 연결할 필요가 없습니다. 템플릿 리터럴은 더 깔끔한 구문을 제공하고 특히 동적 값 또는 여러 줄 콘텐츠를 포함하는 복잡한 문자열을 처리할 때 코드 가독성을 향상시킵니다.

예를 들어:

const name = 'Pranab';
const age = 26;
const message = `My name is ${name} and I am ${age} years old.`;
console.log(message); // Output: 'My name is Pranab and I am 26 years old.'

 

이러한 상위 5가지 JavaScript 트릭(구조화 할당, 스프레드 구문, 선택적 체인, Promise.allSettled() 및 템플릿 리터럴)을 마스터하면 개발자가 보다 효율적이고 간결하며 유지 관리 가능한 코드를 작성할 수 있습니다.

이러한 트릭은 일반적인 코딩 문제에 대한 우아한 솔루션을 제공하여 개발 프로세스를 간소화하고 JavaScript 프로젝트의 전반적인 품질을 향상시킬 수 있도록 합니다. 이러한 트릭을 프로그래밍 무기고에 통합하면 복잡한 문제를 해결하고 강력한 애플리케이션을 쉽게 구축할 수 있습니다. 그러니 계속해서 이 트릭을 탐색하고 JavaScript의 잠재력을 최대한 활용하십시오!