wecode 10/19 (node.js 사전공부)

Pre-test 준비자료

Javascript

 

1. Promise

자바스크립트 비동기 처리에 사용되는 객체로, 주로 서버에서 데이터를 요청하고 받아올 때 많이 사용합니다. Promise는 Pending, Fulfilled, Rejected의 총 3가지 상태로 나누어질 수 있습니다. Pending(대기) 상태는 Promise가 처음 호출되었을 때 부여되고, Promise 내의 콜백 함수에서 resolve를 실행하면 Fulfilled 상태가 됩니다. 반대로, reject()를 실행하면 Promise는 Rejected 상태가 됩니다.

 

Promise Chaining : 한 개의 promise를 호출하여 반환되는 결과값에 여러 개의 추가 프로미스를 연결해서 사용할 수 있습니다. 자바스크립트 fetch 함수가 가장 대표적인 예입니다. 

fetch('api주소').then((res) => res.json()).then((res) => console.log(res));

 

2. async/await

자바스크립트의 또 다른 비동기 함수 처리 방법입니다. 함수의 앞에 async를 붙여서 비동기 처리 함수라는 것을 명시해주고, 내부에서 비동기 처리를 할 메서드 앞 부분에 await을 붙여서 선언할 수 있습니다. async/await을 사용하지 않는다면 위에서 나온 Promise 예시처럼, 콜백 함수 또는 .then()을 사용하여 한 메서드가 끝난 이후 다음 메서드를 실행할 수 있었을 겁니다. 하지만, async/await을 사용하면 비동기에 대한 깊게 생각할 필요 없이 함수를 정의할 수 있습니다.

 

// await 함수를 붙이는 메서드는 promise 객체를 반환해야 합니다.
function fetchItems() {
	return new Promise((resolve, reject) => {
    	const items = [1,2,3];
        resolve(items);
    });
}

// 함수 앞에 async를 선언해주고, 내부의 비동기 처리를 할 메서드 앞에 await을 붙여줍니다.
async function getItems() {
	const resultItems = await fetchItems();
    console.log(resultItems);
}

 

3. Array.map()

배열의 모든 요소에 대하여 선언된 메서드를 적용하고, 결과값을 새로운 배열로 반환합니다.

 

 

4. Array.reduce()

배열에 reducer 함수를 사용하여 배열을 단 한 개의 결과값으로 반환합니다. (reduce = 줄이다)

const array1 = [1,2,3,4];

// 리듀서 함수 정의 (이전 값과 그 다음 값을 더해줌)
const reducer = (acc, cur) => acc + cur;

// 결과값 : 10
console.log(array1.reduce(reducer));

// initialvalue = 5에 배열 값을 모두 더한 15 출력
console.log(array1.reduce(reducer, 5));

 

5. Array.filter()

filter 함수 내의 조건에 맞는 배열의 요소들만으로 이루어진 새로운 배열을 반환합니다.

const words = [1,2,3,4,5,6,7,8,9,10];

const result = words.filter((word) => word > 6);

// 결과값 : [7,8,9,10]
console.log(result);