프로그래밍 「 자바스크립트 편」프로그래밍 기술 수준을 높이는 10가지 고급 JavaScript 개념

님이 촬영 한 사진 마이크로소프트 365 on Unsplash

최고의 프로그래밍 회사에서 일한 노련한 Python 개발자로서 저는 프로그래밍 기술을 지속적으로 배우고 연마하는 것이 중요하다는 것을 알고 있습니다.

파이썬이 제 모국어였지만 저는 JavaScript에 도전했고 프로그래밍 능력을 진정으로 향상시킬 수 있는 몇 가지 고급 개념을 발견했습니다. 이 기사에서는 이러한 개념 중 10가지를 공유하고 예제와 코드 조각을 제공합니다. 그럼 JavaScript의 흥미진진한 세계로 뛰어들어 탐험해 봅시다!

1. 폐쇄

클로저는 외부 함수의 실행이 완료된 후에도 함수가 외부 범위에서 변수에 대한 액세스를 유지할 수 있도록 하는 JavaScript의 강력한 개념입니다. 캡슐화 및 데이터 개인 정보 보호와 같은 시나리오에서 특히 유용할 수 있습니다.

다음은 클로저를 설명하는 예입니다.

function outerFunction() {
  var outerVariable = 'I am from the outer scope';

function innerFunction() {
    console.log(outerVariable);
  }
  return innerFunction;
}
var closureExample = outerFunction();
closureExample(); // Output: I am from the outer scope

이 코드 조각에서는 실행이 완료된 후에도 에 액세스할 수 있습니다. 이 동작은 클로저를 통해 가능합니다.innerFunctionouterVariableouterFunction

2. 약속

프라미스는 자바스크립트에서 비동기 연산을 처리하는 방법으로, 콜백 지옥에 대한 더 깔끔한 대안을 제공합니다. 약속은 비동기 작업의 최종 완료 또는 실패를 나타내며 작업을 함께 연결할 수 있도록 합니다.

비동기 데이터 가져오기에 promise를 사용하는 예는 다음과 같습니다.

function fetchData() {
  return new Promise((resolve, reject) => {
    // Simulating an asynchronous API call
    setTimeout(() => {
      const data = { name: 'Jane', age: 30 };
      resolve(data);
    }, 2000);
  });
}

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.log(error);
  });

이 코드 조각에서는 시뮬레이션된 비동기 작업 후 일부 데이터로 확인되는 promise를 반환합니다. 이 방법을 사용하면 해결된 데이터를 처리할 수 있으며 프로세스 중에 발생할 수 있는 오류를 포착할 수 있습니다.fetchData.then().catch()

3. 발전기

생성기는 일시 중지하고 다시 시작할 수 있는 특별한 유형의 함수로, 반복 알고리즘을 보다 간결하고 읽기 쉬운 방식으로 작성할 수 있습니다. 구문으로 표시되며 키워드를 사용합니다.function*yield

다음은 피보나치 수의 무한 시퀀스를 생성하는 생성기 함수의 예입니다.

function* fibonacciGenerator() {
  let previous = 0;
  let current = 1;

while (true) {
    yield current;
    const next = previous + current;
    previous = current;
    current = next;
  }
}
const fibonacci = fibonacciGenerator();
for (let i = 0; i < 10; i++) {
  console.log(fibonacci.next().value);
}

이 코드 조각에서 함수는 피보나치 수열을 반복하는 데 사용할 수 있는 생성기 개체를 반환합니다. 이 키워드는 함수를 일시 중지하고 현재 값을 반환합니다.fibonacciGeneratoryield

4. 프록시

프록시는 객체에 대해 수행되는 작업을 가로채고 사용자 지정하는 방법을 제공합니다. 이를 통해 개체와 상호 작용할 때 사용자 지정 동작을 추가할 수 있습니다(예: 입력 유효성 검사, 로깅 또는 가상 속성 구현).

다음은 프록시를 사용하여 속성 할당의 유효성을 검사하는 간단한 예입니다.

const validator = {
  set(target, property, value) {
    if (property === 'age' && typeof value !== 'number') {
      throw new Error('Age must be a number');
    }

target[property] = value;
    return true;
  }
};
const person = new Proxy({}, validator);
person.age = 30; // Valid assignment
person.age = 'thirty'; // Throws an error

이 코드 조각에서 개체는 속성 할당의 유효성을 검사하기 위한 프록시로 사용됩니다. 트랩은 속성에 값이 할당될 때마다 호출됩니다. 이 경우 속성이 숫자인지 확인합니다.validatorset()age

5. 비동기/대기

Async/await는 promises 위에 있는 구문 설탕으로, 비동기 코드를 작성하는 더 읽기 쉽고 동기식과 유사한 방법을 제공합니다. 이를 통해 중첩된 콜백이나 promise 체인 없이 선형 방식으로 비동기 작업을 작성할 수 있습니다.

다음은 async/await를 사용하여 데이터를 비동기적으로 가져오는 예제입니다.

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

fetchData();

이 코드 조각에서 함수는 로 선언되어 그 안에 키워드를 사용할 수 있습니다. 코드가 더 동기적으로 읽히므로 더 쉽게 이해하고 유지 관리할 수 있습니다.fetchDataasyncawait

6. 모듈

JavaScript 모듈은 코드를 다른 파일로 분리하여 구성하고 구조화하는 방법을 제공합니다. 모듈은 관련 기능을 캡슐화하여 종속성을 더 쉽게 관리하고 코드 재사용성을 촉진합니다.

다음은 모듈 내보내기 및 가져오기의 예입니다.

모듈 A:

// moduleA.js
export function greet(name) {
  console.log(`Hello, ${name}!`);
}

모듈 B:

// moduleB.js
import { greet } from './moduleA.js';

greet('Jane'); // Output: Hello, Jane!

이 코드 조각에서 function은 에서 내보내고 로 가져옵니다. 이렇게 하면 가져온 기능으로 함수를 호출할 수 있습니다.greetmoduleA.jsmoduleB.jsgreetmoduleB.js

7. 구조화

구조화는 배열이나 객체에서 값을 추출하여 변수에 할당하는 간결한 방법입니다. 이를 통해 값의 압축을 풀고 직접 액세스할 수 있으므로 코드를 더 표현력 있고 덜 장황하게 만들 수 있습니다.

다음은 배열 및 객체 구조화의 예입니다.

// Array destructuring
const numbers = [1, 2, 3];
const [first, second, third] = numbers;
console.log(first, second, third); // Output: 1 2 3

// Object destructuring
const person = { name: 'Jane', age: 30 };
const { name, age } = person;
console.log(name, age); // Output: Jane 30

이 코드 조각에서 배열 구조화는 배열에서 값을 추출하는 데 사용되고, 개체 구조화는 개체에서 값을 추출하는 데 사용됩니다.numbersperson

8. 이벤트 기반 프로그래밍

이벤트 기반 프로그래밍은 사용자 작업 또는 시스템 이벤트와 같이 발생하는 이벤트에 의해 프로그램의 흐름이 결정되는 패러다임입니다. 브라우저에서 주로 사용되는 언어인 JavaScript는 이벤트 기반 프로그래밍에 탁월합니다.

다음은 단추 클릭 이벤트를 처리하는 간단한 예입니다.

const button = document.querySelector('button');
button.addEventListener('click', event => {
  console.log('Button clicked!');
});

이 코드 조각에서 함수는 클릭 이벤트 리스너를 요소에 연결하는 데 사용됩니다. 버튼을 클릭하면 콜백 함수가 실행되어 콘솔에 메시지를 기록합니다.addEventListenerbutton

9. 함수형 프로그래밍

함수형 프로그래밍은 선언적이고 불변 방식으로 코드를 작성하고, 고차 함수를 사용하고, 공유 가능한 변경 가능한 상태를 피하는 것을 강조하는 프로그래밍 패러다임입니다. JavaScript는 함수형 프로그래밍 개념을 지원하며 , , , 와 같은 몇 가지 기본 제공 고차 함수를 제공합니다.mapfilterreduce

함수형 프로그래밍 기술을 사용하는 예는 다음과 같습니다.

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map(num => num * 2);
console.log(doubled); // Output: [2, 4, 6, 8, 10]
const evenNumbers = numbers.filter(num => num % 2 === 0);
console.log(evenNumbers); // Output: [2, 4]

이 코드 조각에서 함수는 배열의 각 숫자를 두 배로 늘리는 데 사용되며 함수는 짝수만 유지하는 데 사용됩니다.mapnumbersfilter

10. 오류 처리

적절한 오류 처리는 강력하고 신뢰할 수 있는 JavaScript 코드를 작성하는 데 매우 중요합니다. 오류를 적절하게 처리하는 방법을 이해하면 응용 프로그램의 전반적인 품질을 향상시킬 수 있습니다.

try-catch를 사용하여 오류를 처리하는 예는 다음과 같습니다.

try {
  // Code that may throw an error
  const result = 10 / 0;
  console.log(result);
} catch (error) {
  console.log('An error occurred:', error.message);
}

이 코드 조각에서는 잠재적으로 문제가 될 수 있는 코드가 블록 내에 래핑되고 그 안에서 throw된 모든 오류가 블록에서 catch되어 처리됩니다. 개체는 오류에 대한 정보를 제공하므로 유용한 메시지를 기록할 수 있습니다.trycatcherror

결론

이 10가지 고급 JavaScript 개념을 탐색한 것을 축하합니다! 이러한 개념을 마스터하면 프로그래밍 기술을 새로운 차원으로 끌어올릴 수 있습니다. 프로그래밍은 학습과 개선의 지속적인 여정임을 기억하십시오. 도전을 받아들이고, 다양한 개념을 실험하고, 항상 깨끗하고 유지 관리 가능한 코드를 작성하기 위해 노력합니다. 즐거운 코딩 되세요!