프로그래밍 「 추천 편」모든 웹 개발자가 이해해야 할 JavaScript 아이디어

*폐쇄

*약속

* 프로토 타입 및 프로토 타입 상속

* 이벤트 루프

*모듈

*발전기

* 화살표 기능

* 비동기 반복

*대리

* 반사 API

1. 폐쇄

클로저는 일반적으로 JavaScript에서 개인 변수 및 캡슐화를 만드는 데 사용됩니다. 외부 함수 내에서 변수를 정의하고 해당 변수에 액세스하고 수정하는 내부 함수를 반환하면 데이터의 가시성과 조작을 제어할 수 있습니다. 이를 통해 정보를 숨기고 전역 네임스페이스 오염을 방지할 수 있습니다.

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

위의 예에서 outerFunction은 outerVariable을 정의하고 outerVariable을 참조하는 innerFunction을 반환합니다. outerFunction이 호출되고 closure에 할당되면 outerVariable에 대한 참조를 유지하는 클로저가 생성됩니다. 나중에 클로저가 호출될 때 여전히 outerVariable에 액세스할 수 있으며 해당 값을 기록할 수 있습니다.

클로저는 이벤트 처리기, 콜백 및 함수형 프로그래밍의 상태 유지 관리와 같은 시나리오에서 자주 사용됩니다. 변수에 대한 영구 참조를 만들고 JavaScript에서 강력하고 유연한 프로그래밍 기술을 사용할 수 있는 방법을 제공합니다.

2. 약속

Promise는 비동기 작업의 최종 결과를 나타내며, 확인된 값 또는 거부 이유일 수 있습니다. 보류 중, 이행됨(해결됨) 또는 거부됨의 세 가지 가능한 상태가 있습니다.

promise를 만들려면 resolve 및 reject라는 두 개의 매개 변수가 있는 콜백 함수를 사용하는 Promise 생성자를 사용합니다. 이 콜백 내에서 비동기 작업을 수행하고 resolve(value)를 호출하여 값으로 약속을 이행하거나 reject(reason)를 호출하여 이유(일반적으로 error 객체)로 약속을 거부합니다.

다음은 promise의 기본 사용법을 보여 주는 예제입니다.

then() 메서드는 약속의 이행을 처리하는 데 사용됩니다. 확인된 값을 인수로 받는 콜백 함수를 사용합니다. 여러 then() 호출을 연결하여 확인된 값에 대해 순차적 작업 또는 변환을 수행할 수 있습니다.

catch() 메서드는 약속 거부를 처리하는 데 사용됩니다. 거부 이유(오류)를 인수로 받는 콜백 함수를 사용합니다. 일반적으로 비동기 작업 중에 발생한 오류를 처리하기 위해 약속 체인의 끝에 사용됩니다.

Promise는 또한 promise의 이행 또는 거부 여부에 관계없이 호출될 콜백을 지정할 수 있는 finally() 및 여러 promise가 이행될 때까지 기다리는 데 사용할 수 있는 Promise.all()과 같은 추가 메서드를 제공합니다.

3. 프로토타입 및 프로토타입 상속

프로토타입은 다른 개체가 속성과 메서드를 상속하는 개체입니다. 객체에서 속성이나 메서드에 액세스하면 JavaScript는 먼저 객체 자체에 해당 속성이 있는지 확인합니다. 그렇지 않은 경우 속성을 찾거나 체인의 끝에 도달할 때까지 개체의 프로토타입을 확인한 다음 프로토타입의 프로토타입을 확인하는 방식으로 프로토타입 체인을 조회합니다.

다음은 프로토타입 상속을 설명하는 예제입니다.

이 프로그램에는 두 개의 생성자 함수와 .AnimalDog

생성자 함수는 매개 변수를 가져와서 를 사용하여 새로 만든 개체의 속성에 할당합니다.Animalnamenamethis.name

생성자 함수에서 생성된 모든 인스턴스에서 공유할 메서드를 추가합니다.greetAnimal.prototypeAnimal

생성자 함수는 생성자에서 속성을 상속하는 데 사용하여 생성자 함수를 확장합니다.DogAnimalAnimal.call(this, name)Animal

를 사용하여 새 개체를 만들고 에 할당하여 프로토타입 체인을 설정합니다. 이렇게 하면 인스턴스의 프로토타입이 에 연결되어 상속을 사용할 수 있습니다.Object.create(Animal.prototype)Dog.prototypeDogAnimal.prototype

생성자에서 생성된 인스턴스와 관련된 메서드를 추가합니다.barkDog.prototypeDog

우리는 키워드를 사용하여 인스턴스를 만듭니다. 인스턴스는 에서 상속된 메서드를 사용하는 반면, 에서 상속된 메서드와 에 정의된 메서드를 모두 사용합니다.AnimalDognewanimalgreetAnimal.prototypedoggreetAnimal.prototypebarkDog.prototype

이 프로그램을 실행할 때 콘솔에 기록된 각 출력이 표시되어야 합니다.

프로토타입 및 프로토타입 상속은 JavaScript의 기본 개념입니다. 이를 통해 개체는 다른 개체에서 속성과 메서드를 상속할 수 있으므로 코드를 다시 사용할 수 있고 개체 간의 관계를 설정할 수 있습니다.

4. 이벤트 루프

이벤트 루프는 JavaScript 런타임 환경의 고유한 부분이며 명시적 프로그래밍이 필요하지 않습니다. 그러나 비동기 동작을 시뮬레이션하여 JavaScript에서 이벤트 루프가 작동하는 방식을 보여 주는 예제를 제공할 수 있습니다.

다음은 이벤트 루프가 작동하는 것을 보여주는 프로그램입니다.

이 예제에서는 setTimeout() 및 Promise를 사용하여 예약된 여러 비동기 작업이 있습니다. 프로그램이 실행되는 방법은 다음과 같습니다.

1. 프로그램은 콘솔에 '시작'을 기록하여 시작합니다.
2. 두 개의 setTimeout() 함수가 0밀리초의 지연으로 호출됩니다. 지연은 0으로 설정되어 있지만 JavaScript는 이를 최소 지연으로 처리하여 현재 실행 컨텍스트가 완료된 후 콜백이 작업 큐에 추가되도록 합니다.
3. Promise.resolve().then() 체인이 호출되어 마이크로태스킹 대기열에 콜백을 추가합니다. 약속과 같은 마이크로 작업은 일반 작업/이벤트보다 우선 순위가 높습니다.
4. 프로그램은 콘솔에 'End'를 기록합니다.
5. 이벤트 루프는 호출 스택을 검사하고 비어 있는 것을 찾습니다.
6. 그런 다음 이벤트 루프는 작업 대기열을 확인하고 실행할 가장 오래된 작업(첫 번째 setTimeout() 콜백)을 선택합니다.
7. '시간 초과 1'이 콘솔에 기록됩니다.
8. 이벤트 루프는 호출 스택을 다시 확인하고 비어 있는 것을 찾습니다.
9. 이벤트 루프는 작업 대기열의 다음 작업으로 진행하고 두 번째 setTimeout() 콜백을 실행합니다.
10. '시간 초과 2'이 콘솔에 기록됩니다.
11. 이벤트 루프는 호출 스택을 다시 확인하고 비어 있는 것을 찾습니다.
12. 다음으로 이벤트 루프는 마이크로태스킹 대기열을 확인하고 Promise.resolve().then() 콜백을 실행합니다.
13. '약속 해결됨'이 콘솔에 기록됩니다.

프로그램의 출력은 브라우저 또는 JavaScript 환경에 따라 약간 다를 수 있지만 실행 순서는 이벤트 루프가 대기열에서 다양한 유형의 작업(콜백)의 우선 순위를 지정하는 방법을 보여줍니다.

이벤트 루프는 비동기 작업의 실행 순서를 처리하여 기본 실행을 차단하지 않고 JavaScript가 응답성을 유지할 수 있도록 합니다.

5. 모듈

다음은 JavaScript에서 모듈을 만들고 사용하는 방법을 보여주는 예제 프로그램입니다.

먼저 몇 가지 수학 함수를 내보내는 math.js라는 모듈을 만들어 보겠습니다.

다음으로 모듈에서 함수를 가져오고 사용하는 다른 파일을 만들어 보겠습니다.main.jsmath.js

이 프로그램에는 math.js 및 main.js의 두 파일이 있습니다.

math.js 파일은 더하기, 빼기, 곱하기의 세 가지 함수를 내보내는 모듈입니다. 각 함수는 export 키워드를 사용하여 정의됩니다.

main.js 파일에서 import 문을 사용하여 math.js 모듈에서 함수를 가져옵니다. 중괄호 {} 안에 가져오려는 함수의 이름을 지정합니다. import 문은 상대 경로('./math.js')를 사용하여 모듈 파일을 찾습니다.

그런 다음 가져온 함수 main.js 파일에서 add, subtract 및 multiply를 사용하여 수학 연산을 수행하고 결과를 콘솔에 기록합니다.

이 프로그램을 실행하려면 기본 모듈을 지원하는 최신 브라우저 또는 최신 버전의 Node.js(실험 모듈 플래그 포함)와 같이 ES 모듈을 지원하는 JavaScript 환경이 필요합니다.

main.js 파일을 실행할 때 콘솔에 기록된 수학 연산의 결과를 볼 수 있습니다.

JavaScript 모듈은 코드를 구성하고, 종속성을 관리하고, 코드 재사용성을 촉진하는 명확하고 표준화된 방법을 제공합니다.

6. 발전기

이 프로그램에서는 countUp이라는 생성기 함수를 정의합니다. countUp 생성기는 for 루프를 사용하여 지정된 시작 값에서 끝 값까지의 숫자를 산출합니다. yield 키워드는 생성기를 일시 중지하고 현재 값을 내보내는 데 사용됩니다.

그런 다음 원하는 인수(이 경우 1 및 5)로 countUp 함수를 호출하여 생성기 개체를 만듭니다.

생성기에서 생성된 값을 사용하기 위해 for... of 루프를 사용하여 생성기 개체를 반복합니다. 각 반복에서 루프는 생성기에서 생성된 다음 값을 검색하여 num 변수에 할당합니다. 그런 다음 num 값을 콘솔에 기록합니다.

이 프로그램을 실행할 때 콘솔에 기록된 1에서 5까지의 숫자가 표시되어야 합니다.

생성기는 지연 평가를 사용하여 반복 가능한 시퀀스를 만드는 강력한 방법을 제공합니다. 이를 통해 반복 흐름을 제어하고, 실행을 일시 중지하고, 나중에 다시 시작할 수 있습니다. 생성기는 크거나 무한한 데이터 시퀀스로 작업하거나 사용자 지정 반복 패턴을 구현하는 데 특히 유용합니다.

7. 화살표 기능

이 프로그램에는 곱하기, 나누기, 덧셈의 세 가지 기능이 있습니다.

multiply 함수는 function 키워드를 사용하여 정의된 일반 함수입니다. 두 개의 매개 변수(a와 b)를 사용하고 해당 제품을 반환합니다.

divide 함수는 arrow(=>) 구문을 사용하여 정의된 화살표 함수입니다. 또한 두 개의 매개 변수를 사용하고 해당 나눗셈을 반환합니다. 화살표 함수는 일반 함수에 비해 더 간결한 구문을 제공합니다.

add 함수는 또 다른 화살표 함수이지만 암시적 반환이 있습니다. 화살표 함수의 본문에 단일 표현식이 있는 경우 중괄호 {}와 return 키워드를 생략할 수 있습니다. 식의 결과는 암시적으로 반환됩니다.

마지막으로 다른 인수로 함수를 호출하고 결과를 콘솔에 기록합니다.

이 프로그램을 실행할 때 콘솔에 기록된 수학 연산의 결과를 볼 수 있습니다.

화살표 함수는 함수를 작성하기 위한 보다 간결하고 간결한 구문을 제공하며, 특히 짧은 함수 또는 복잡한 본문이 없는 함수의 경우 더욱 그렇습니다. 이 값을 어휘적으로 자동으로 바인딩하므로 콜백을 처리하거나 바깥쪽 컨텍스트를 유지해야 하는 함수로 작업할 때 특히 유용합니다.

8. 비동기 반복

JavaScript의 비동기 반복을 사용하면 promise 또는 비동기 생성기와 같은 비동기 데이터 소스를 반복할 수 있습니다. 다음은 for await를 사용하여 비동기 반복을 보여 주는 예제 프로그램입니다. 루프의 :

이 프로그램에서는 getData라는 비동기 생성기 함수를 정의합니다. 생성기는 시뮬레이션된 비동기 작업 후에 배열(데이터)에서 값을 생성합니다. await 키워드는 약속이 해결되기를 기다리는 동안 생성기를 일시 중지하기 위해 루프 내에서 사용됩니다.

비동기 반복을 수행하기 위해 for await... 루프의. 루프는 getData()에 의해 반환된 비동기 생성기 객체를 반복합니다. 각 반복에서 루프는 생성기에서 생성된 다음 값을 기다렸다가 value 변수에 할당합니다. 그런 다음 콘솔에 값을 기록합니다.

이 프로그램을 실행할 때 값 1, 2, 3, 4 및 5가 콘솔에 기록되고 시뮬레이션된 비동기 작업으로 인해 각 값 사이에 1초의 지연이 있는 것을 볼 수 있습니다.

비동기 반복은 비동기 데이터 원본을 처리하거나 API 요청 또는 데이터 스트림 처리와 같은 비동기 방식으로 각 항목에 대한 작업을 수행해야 하는 경우에 유용합니다.

9. 프록시

이 프로그램에는 프록시를 적용하려는 객체 대상이 있습니다. target 객체를 첫 번째 인수로 전달하고 handler 객체를 두 번째 인수로 전달하여 Proxy 객체를 만듭니다.

처리기 개체에는 프록시에서 수행되는 다양한 작업을 가로채는 다양한 트랩 또는 메서드가 포함되어 있습니다. 이 예에서는 세 가지 트랩을 정의합니다.

1. get: 이 트랩은 프록시의 속성에 액세스할 때 호출됩니다. 액세스되는 속성을 기록하고 대상 개체에서 해당 값을 반환합니다.
2. set: 이 트랩은 프록시에서 속성을 설정할 때 호출됩니다. 설정되는 속성을 기록하고 대상 개체의 해당 속성에 값을 할당합니다.
3. deleteProperty: 이 트랩은 프록시에서 속성을 삭제할 때 호출됩니다. 삭제되는 속성을 기록하고 대상 개체에서 속성을 제거합니다.

그런 다음 코드와 대상 개체 사이의 투명한 중개자 역할을 하는 프록시 개체를 만듭니다. 프록시에서 수행되는 모든 작업은 처리기 개체에 정의된 적절한 트랩 메서드를 트리거합니다.

프로그램에서 속성(이름 및 나이)에 액세스하고, age 속성에 대한 새 값을 설정하고, 이름 속성을 삭제하고, 프록시를 통해 이름 속성에 다시 액세스합니다. 각 작업은 해당 트랩을 트리거하고 연결된 로그 문이 콘솔에 인쇄됩니다.

이 프로그램을 실행할 때 콘솔에 로그 문과 해당 출력이 표시되어야 하며, 이는 대상 개체에 대한 작업을 가로채고 처리하는 프록시 개체의 동작을 보여 줍니다.

10. 리플렉트 API

이 프로그램에는 Reflect API를 사용하여 프록시를 적용하려는 obj 객체가 있습니다.

프록시에서 속성 액세스 및 할당 작업을 가로챌 트랩 메서드(get 및 set)를 포함하는 처리기 개체를 정의합니다.

get 및 set 트랩 메서드 내에서 해당 Reflect 메서드(Reflect.get 및 Reflect.set)를 사용하여 대상 개체에 대한 실제 속성 액세스 및 할당 작업을 수행합니다.

다음으로 Proxy 생성자를 사용하여 프록시 개체를 만들고 obj를 대상 개체와 처리기 개체로 전달합니다.

그런 다음 프록시를 통해 속성(이름 및 나이)에 액세스하고 age 속성에 대한 새 값을 설정합니다. 각 작업은 해당 트랩을 트리거하고 연결된 로그 문은 console.log를 사용하여 콘솔에 인쇄됩니다.

Reflect API는 속성 액세스(Reflect.get), 속성 할당(Reflect.set), 속성 삭제(Reflect.deleteProperty) 등과 같이 객체에 대해 수행되는 기본 작업을 미러링하는 유틸리티 메서드 집합을 제공합니다. 이러한 메서드를 프록시 API와 함께 사용하여 사용자 지정 동작을 제공하고 개체 작업을 세밀하게 제어할 수 있습니다.

이러한 개념은 JavaScript의 기본을 넘어 보다 발전되고 효율적인 JavaScript 코드를 작성하는 능력을 크게 향상시킬 수 있습니다.