[React.js 2팀] 2장. 자바스크립트 실전 - 구조 분해 할당 ~ 비동기 처리

 

1. 구조 분해 할당

 배열의 각 요소나 객체의 프로퍼티나 값을  따로 변수에 담아 사용해야 할 때가 있다. 이때 배열이나 객체의 구조를 분해하여 할당하는 문법을 구조 분해 할당이라고 한다. 배열이나 객체의 요소를 각각의 변수에 담을 수 있어 코드가 더욱 간결해진다.

 

[ 배열의 구조 분해 할당 ]

  아래는 배열의 요소를 일일이 변수에 할당하는 예시이다.

let arr = [1, 2, 3];

let one = arr[0];
let two = arr[1];
let three = arr[2];

console.log(one, two, three); // 1 2 3

 

 이 코드를 구조 분해 할당을 사용하면 아래와 같이 간결하게 작성할 수 있다.

let arr = [1, 2, 3];
let [one, two, three] = arr; ①

console.log(one, two, three); // 1 2 3

 

 위와 같이 배열을 구조 분해 할당하면, 변수 선언과 동시에 배열에 저장된 요소를 순서대로 할당한다.

 

 아래와 같이 배열의 길이와 할당할 변수가 일치하지 않아도 오류 없이 완료된다.

let [one, two] = [1, 2, 3]; //요소가 3개인 배열을 2개의 변수에 할당
console.log(one, two); // 1 2

 

let [x, y, z] = [1, 2]; //요소가 2개인 배열을 3개의 변수에 할당
console.log(x, y, z); // 1 2 undefined

 

 그러나 위와 같이 배열의 길이보다 할당할 변수의 개수가 더 많으면 길이 외의 변수에는 undefined가 할당되니 주의하여야 한다.

 

[ 객체의 구조 분해 할당 ]

 객체에서도 배열과 유사한 방식으로 구조 분해 할당을 사용할 수 있다. 객체는 요소의 순서 대신 키(key)를 기준으로 사용하여 값을 할당한다.

let person = { name: "이정환", age: 25, location: "경기도" };
let { name, age, location } = person;
console.log(name, age, location); // 이정환 25 경기도

 

[ 함수 매개변수로서의 객체 구조 분해 할당 ]

 

 객체를 함수의 매개변수에 전달할 때 아래와 같이 구조 분해 할당을 사용할 수 있다. 다음과 같이 객체를 분해하여 함수에 전달하면 특정 속성만 이용할 수 있어 코드가 간결해진다.

function func({ name: n, age: a, location: l }) {
  console.log(n, a, l);
}

let person = {
  name: "이정환",
  age: 25,
  location: "경기도"
};

func(person);

// 이정환 25 경기도

 

 매개변수의 이름은 객체의 프로퍼티 이름과 동일하게 사용하거나 새 변수명을 사용한다. 위와 같이 기존 변수 이름에  :새 변수명을 추가하면 매개변수의 이름을 변경할 수 있다.

 

2. 스프레드 연산자와 rest 매개변수

 스프레드 연산자와 rest 매개변수는 반복 가능한 객체를 조작한다.

 스프레드 연산자는 배열이나 객체의 값을 개별 요소로 펼쳐서 분리하고, rest 매개변수는 개별 요소들을 다시 배열로 묶는다.

[ 스프레드 연산자 ]

스프레드 연산자는 ... 으로 표기한다. 배열, 문자열, 객체 등의 값을 개별 요소로 펼쳐서 분리하여 사용할 수 있다.

[ 스프레드 연산자와 배열 ]

스프레드 연산자는 배열의 요소를 확장할 수 있다. 기존 배열의 요소들을 새로운 배열에 추가하고 싶을 때 아래와 같이 배열 자체를 그대로 복사하면 배열 자체가 삽입된다.

let arrB = [arrA, 4, 5, 6];
console.log(arrB); // [[1, 2, 3], 4, 5, 6]

 

 다음과 같이 스프레드 연산자를 사용하면 배열의 각 요소를 펼쳐서 복사하므로 기존 배열을 새로운 배열로 확장할 수 있다.

let arrA = [1, 2, 3];
let arrB = [...arrA, 4, 5, 6];
console.log(arrB); // [1, 2, 3, 4, 5, 6]

 

 

[ 스프레드 연산자와 객체 ]

 

스프레드 연산자는 객체에서도 유사하게 사용할 수 있다. 아래와 같이 스프레드 연산자를 사용하면 객체의 각 프로퍼티를 개별 요소로 펼쳐서 저장할 수 있다.

let objA = {
  a: 1,
  b: 2
};

let objB = {
  ...objA,
  c: 3,
  d: 4
};

console.log(objB); // {a: 1, b: 2, c: 3, d: 4}

 

[ 스프레드 연산자와 함수 ]

 

스프레드 연산자는 함수 호출 시 인수를 삽입할 때도 사용할 수 있다. 아래는 배열의 요소를 분리하여 함수의 인수로 전달하는 예시이다.

function func(a, b, c) {
  console.log(a, b, c);
}

let arr = [1, 2, 3];
func(...arr); // 1 2 3

 

 함수의 인수로 스프레드 연산자를 사용할 때에는 객체가 각 요소로 분리되어 개별 매개변수로 전달된다는 점에 주의하여야 한다. 구조 분해 할당을 사용하면 인수는 객체만 1개의 매개변수에 전달된다.

[ rest 매개변수 ]

 rest 매개변수는 스프레드 연산자와 같은 ... 기호를 사용한다. 스프레드 연산자와 반대로, 개별 요소들을 배열로 묶을 수 있다.

function func(param, ...rest) {
  console.log(param);
  console.log(rest);
}

func(1, 2, 3, 4);

// 1
// [2, 3, 4]

 

아래와 같이 여러 개의 인수를 전달할 때 먼저 선언한 매개변수에 할당된 인수를 제외한 나머지 인수들을 배열 형태로 전달받는다. 따라서 반드시 매개변수에서 마지막에 선언되어야 한다는 점에 주의하여야 한다.

 

3. 배열과 메서드

 객체는 값인 프로퍼티와 함수인 메서드를 포함하는 개념이다. 배열이라는 객체는 요소를 추가, 삭제, 수정할 수 있는 다양한 메소드를 제공하고 있다.

 

[ 요소의 추가 및 삭제 메서드 ]

 push는 배열의 끝에 요소를 추가하고 배열의 새로운 길이를 반환한다. 여러 요소를 추가하려면 인수를 ,로 구분하여 전달한다.

let food = ["짜장면", "피자", "치킨"];
const newLength = food.push("탕수육"); ①

console.log(food); // ["짜장면", "피자", "치킨", "탕수육"]
console.log(`새로운 배열의 길이: ${newLength}`); // 새로운 배열의 길이: 4

 

 pop은 배열의 끝에서 요소를 제거하고 그 요소를 반환한다.

let food = ["짜장면", "피자", "치킨"];
const removedItem = food.pop(); // ①

console.log(removedItem); // 치킨
console.log(food); // ["짜장면", "피자"]

 

 

shift는 배열의 첫 번째 요소를 제거하고, 그 요소를 반환한다.

let food = ["짜장면", "피자", "치킨"];
const removedItem = food.shift(); // ①

console.log(removedItem); // "짜장면"
console.log(food); // ["피자", "치킨"]

 

 

 unshift는 배열의 앞에 요소를 추가하고 배열의 새로운 길이를 반환한다.

let food = ["짜장면", "피자", "치킨"];
const newLength = food.unshift("갈비찜"); // ①

console.log(food); // ["갈비찜", "짜장면", "피자", "치킨"]
console.log(`새로운 배열의 길이: ${newLength}`); // 새로운 배열의 길이: 4

 

 

 slice는 배열의 일부분을 잘라내어 새로운 배열을 반환한다. 이때 범위를 지정하는 두 개의 인수가 n, k일 경우 n부터 k-1의 범위까지 잘라낸다는 점과 원본 배열은 유지한다는 점에 주의하여야 한다.

const arr = [1, 2, 3];
const sliced = arr.slice(0, 2); // ①

console.log(arr); // [1, 2, 3]
console.log(sliced); // [1, 2]

 

 concat은 두 개 이상의 배열을 합쳐 새로운 배열을 반환한다. 객체를 전달받을 경우 객체 자체를 하나의 요소 취급한다.

let arrA = [1, 2];
let arrB = [3, 4];
let arrC = arrA.concat(arrB); ① // 

console.log(arrC);    // [1, 2, 3, 4]
console.log(arrA); ② // [1, 2]

 

[ 순회 메서드 ]

  forEach는 인수로 콜백 함수를 전달받아 배열의 모든 요소에 대해 반복적으로 함수를 실행한다. 콜백 함수는 매개변수로 배열 요소인 item, 현재 배열 인덱스인 idx, 현재 배열 arr를 전달받아 사용할 수 있다.

function cb(item, idx) {// ②
  console.log(`${idx}번째 요소: ${item}`);
}

const arr = [1, 2, 3];
arr.forEach(cb); // ①

// 0번째 요소: 1 
// 1번째 요소: 2 
// 2번째 요소: 3

 화살표 함수나 함수 표현식으로도 전달되는 콜백 함수를 작성할 수 있다.

 

[ 탐색 메서드 ]

 indexOf는 배열에서 특정 값의 첫 번째 인덱스를 반환한다. 매개변수로는 탐색 시작 인덱스와 끝 인덱스를 전달받는다.

 값을 찾지 못하거나 두 번째 인수의 값이 배열의 길이 이상이면 반환값은 -1이 된다. 또한 === 연산자로 비교하기 때문에 객체의 값을 찾을 수 없다는 점에 주의하여야 한다.

let arr = [1, 3, 5, 7, 1];

console.log(arr.indexOf(1, 0)); ① // 0

 

 includes는 배열에 특정 값이 존재하는지 확인하여 true 또는 false를 반환한다.

let arr = [1, 3, 5, 7, 1];

console.log(arr.includes(3)); // true
console.log(arr.includes("생선")); // false

 

 findIndex는 배열에서 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다. 이때 판별 함수라는 콜백 함수를 사용하여 판별 조건을 세부적으로 작성할 수 있고, 객체 요소도 탐색할 수 있다.

function determine(item, idx, arr) { ②
  if (item % 2 === 0) {
    return true;
  } else {
    return false;
  }
}

let arr = [1, 3, 5, 6, 8];
let index = arr.findIndex(determine); ①

console.log(index); // 3

 

 아래와 같이 화살표 함수와 삼항 연산자를 이용하여 간결하게 판별 함수를 작성할 수 있다.

let arr = [1, 3, 5, 6, 8];
let index = arr.findIndex((item) =>
  item % 2 === 0 ? true : false
);

console.log(index); // 3

 

 

 find는 배열에서 조건을 만족하는 첫 번째 요소를 반환한다.

let arr = [
  { name: "이종원" },
  { name: "이정환" },
  { name: "신다민" },
  { name: "김효빈" }
];

let element = arr.find((item) => item.name === "이정환"); ①
console.log(element); // {name: "이정환"}

 

 filter는 배열에서 조건을 만족하는 요소만 모아 새로운 배열로 반환한다. 아래는 화살표 함수로 판별 함수를 작성하여 콜백 함수로 사용한 예시이다.

let arr = [
  { name: "이종원", hobby: "축구" },
  { name: "이정환", hobby: "영화" },
  { name: "신다민", hobby: "축구" },
  { name: "김효빈", hobby: "노래" }
];

let filteredArr = arr.filter(
  (item) => item.hobby === "축구"
);

console.log(filteredArr);

// 출력 결과
// (2) [Object, Object]
// 0: Object
// name: "이종원"
// hobby: "축구"
// 1: Object
// name: "신다민"
// hobby: "축구"

 

 

[ 변형 메서드 ]

 map은 인수로 콜백 함수를 전달받고, 배열의 각 요소에 전달받은 콜백 함수를 적용해 새로운 배열을 반환한다.

let arr = [1, 2, 3, 4];
let newArr = arr.map((item) => item * 3); // ①

console.log(newArr); // [3, 6, 9, 12]

 map 메서드를 활용하면 객체의 각 프로퍼티 값을 추출하여 새로운 배열에 저장할 수 있어 활용도가 높다.

 

let arr = [
  { name: "이종원", hobby: "축구" },
  { name: "이정환", hobby: "영화" },
  { name: "신다민", hobby: "축구" },
  { name: "김효빈", hobby: "노래" }
];

let newArr = arr.map((item) => item.name);

console.log(newArr);

 

 

 sort는 배열을 정렬하고, 기본적으로 문자열 사전순 정렬을 수행한다. 기존 배열을 정렬하므로 배열 자체에 수정이 일어난다는 점에 주의하여야 한다.

let arr = ["b", "a", "c"];

arr.sort();

console.log(arr); // ["a", "b", "c"]

 

 인수로 전달받는 비교 함수를 통해 양수를 반환하면 b를 a 앞으로 보내고 음수를 반환하면 b를 a 앞으로 보내는 정렬을 수행하여 숫자 배열도 정렬할 수 있다.

function compare(a, b) {
  if (a > b) {
    return 1;
  } else if (a < b) {
    return -1;
  } else {
    return 0;
  }
}

let arr = [10, 5, 3];
arr.sort(compare);

console.log(arr); // [3, 5, 10]

 

 join은 배열의 요소들을 하나의 문자열로 결합하여 반환한다. 초기값인 , 이외에도 구분자를 인수로 전달하여 사용할 수 있다.

let arr = ["안녕", "나는", "이정환"];

console.log(arr.join()); // ① 안녕,나는,이정환
console.log(arr.join("-")); // ② 안녕-나는-이정환

 

 reduce은 배열의 각 요소를 누적 처리하여 하나의 값으로 반환한다. 첫 번째 인수로 리듀서라는 콜백 함수를 전달하며, 두 번째 인수로는 초깃값을 전달한다. 아래와 같이 초기값을 지정해 모든 요소를 더하는 누산기를 작성할 수 있다.

let arr = [1, 2, 3, 4, 5];
let result = arr.reduce((acc, item) => acc + item, 0);

console.log(result); // 15

 

 

4. Date 객체와 날짜

자바스크립트에서는 날짜와 시간을 다루기 위해 Date 객체를 사용한다. Date 객체를 사용하면 달력을 특정 날짜로 이동하거나 원하는 날짜만 필터링하는 등의 시간과 관련된 기능을 구현할 수 있다.

 

[ Date 객체 생성하기 ]

 현재 시간 또는 특정 시간의 Date 객체를 생성하기 위해서  new Date() 생성자를 사용한다. 아래와 같이 아무것도 전달하지 않으면 현재의 날짜와 시간을 전달하고, 인수로 현재와 다른 날짜와 시간을 전달할 수 있다.

let date = new Date();
console.log(date);
// 현재 날짜 및 시간

 

[ Date 객체와 협정 세계시 (UTC) ]

 Date 객체는 1970년 1월 1일 0시 0분 0초인 UTC(협정 세계시)를 기준으로 동작한다. Date 생성자에 UTC 이후의 밀리초인 타임 스탬프를 인수로 전달하여 다른 시간대의 시간을 표현하거나 getTime 메서드를 사용하여 객체에서 타임 스탬프를 추출할 수 있다.

let Jan02_1970 = new Date(24 * 3600 * 1000);
console.log(Jan02_1970);

// Fri Jan 02 1970 09:00:00 GMT+0900 (한국 표준시)

let Jan02_1970 = new Date(24 * 3600 * 1000);
console.log(Jan02_1970.getTime());
// 86400000

 

[ 원하는 날짜로 Date 객체 생성하기 ]

 타임 스탬프로 원하는 날짜의 Date 객체를 생성하기에는 번거로우므로 다양한 방법으로 Date 객체에 날짜를 인수로 전달한다.

 

 아래와 같이 다양한 문자열로 특정 날짜를 전달할 수 있다.

let date1 = new Date("2000-10-10/00:00:00"); ①
let date2 = new Date("2000.10.10/00:00:00"); ②
let date3 = new Date("2000/10/10/00:00:00"); ③
let date4 = new Date("2000 10 10/00:00:00"); ④

console.log("1:", date1); // 1: Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)
console.log("2:", date2); // 2: Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)
console.log("3:", date3); // 3: Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)
console.log("4:", date4); // 4: Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)

 

 아래와 같이 밀리초 단위가 아닌 숫자로 특정 날짜를 전달할 수 있다.

let date1 = new Date(2000, 10, 10, 0, 0, 0, 0);
let date2 = new Date(2000, 9, 10);

console.log("1:", date1); // 1: Fri Nov 10 2000 00:00:00 GMT+0900 (한국 표준시)
console.log("2:", date2); // 2: Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)

 

 이때, 월(month) 단위는 0부터 시작하므로 전달하려는 월보다 1 작은 값을 전달하여야 한다는 점에 주의하여야 한다.

 

 아래와 같이 타임 스탬프와 getTime 메서드를 이용하여 현재의 날짜를 생성할 수 있다.

let date = new Date(2000, 9, 10);
let timeStamp = date.getTime(); // ①
console.log(timeStamp); // 971103600000

let dateClone = new Date(timeStamp); // ②
console.log(dateClone); // Tue Oct 10 2000 00:00:00 GMT+0900 (한국 표준시)

 

 

 

[ Date 객체의 날짜 요소 얻기 ]

 Date 객체 메서드를 사용하면 생성한 날짜의 요소를 얻을 수 있다. 아래는 연, 월, 일, 요일, 시간, 분, 초를 얻는 예시이다.

let date = new Date(2000, 9, 10);
console.log(date.getFullYear()); // 2000

let date = new Date(2000, 9, 10);
console.log(date.getMonth()); // 9

let date = new Date(2000, 9, 10);
console.log(date.getDate()); // 10

let date = new Date(2000, 9, 10);
console.log(date.getDay()); // 2

let date = new Date(2000, 9, 10);
console.log(date.getHours()); // 0
console.log(date.getMinutes()); // 0
console.log(date.getSeconds()); // 0
console.log(date.getMilliseconds()); // 0

 

 

[ Date 객체의 날짜 요소 수정하기 ]

 다른 Date 객체 메서드를 사용하면 생성한 날짜의 요소를 수정할 수 있다. 아래는 연, 월, 일, 시간, 분, 초를 수정하는 예시이다.

let date = new Date(2000, 9, 10);
date.setFullYear(2021);
console.log(date); // Sun Oct 10 2021 00:00:00 GMT+0900 (한국 표준시)

let date = new Date(2000, 9, 10);
date.setMonth(10);
console.log(date); // Fri Nov 10 2000 00:00:00 GMT+0900 (한국 표준시)

let date = new Date(2000, 9, 10);
date.setDate(11);
console.log(date); // Wed Oct 11 2000 00:00:00 GMT+0900 (한국 표준시)

let date = new Date(2000, 9, 10);
date.setHours(1);
date.setMinutes(1);
date.setSeconds(1);
console.log(date); // Tue Oct 10 2000 01:01:01 GMT+0900 (한국 표준시)

 

[ Date 객체 출력하기 ]

 Date 객체는 요소를 잘라내어 출력하거나 날짜와 시간을 자동으로 알맞게 변환하여 출력할 수 있다. 아래는 시간과 날짜를 문자열로, 시간을 제외한 날짜, 현지화된 시간과 날짜, 현지화된 시간을 제외한 날짜를 출력하는 예시이다.

const today = new Date(2000, 9, 10, 22);

console.log(today.toString());             // Tue Oct 10 2000 22:00:00 GMT+0900
console.log(today.toDateString());         // Tue Oct 10 2000
console.log(today.toLocaleString());       // 2000. 10. 10. 오후 10:00:00
console.log(today.toLocaleDateString());   // 2000. 10. 10.

[ Date 객체 응용하기 ]

 Date 객체를 이용하면 날짜를 관리하고 조작하는 다양한 기능을 제공하는 코드를 작성할 수 있다.

 

 월 단위로 달력을 이동하기 위해 n월씩 이동하는 기능을 아래와 같이 구현할 수 있다.

function moveMonth(date, moveMonth) { // ①
  const curTimestamp = date.getTime(); // ②
  const curMonth = date.getMonth(); // ③

  const resDate = new Date(curTimestamp); // ④
  resDate.setMonth(curMonth + moveMonth); //⑤

  return resDate;
}

const dateA = new Date("2000-10-10");
console.log("A: ", dateA); // A : Tue Oct 10 2000 09:00:00 GMT+0900 (한국 표준시)

const dateB = moveMonth(dateA, 1);
console.log("B: ", dateB); // B : Fri Nov 10 2000 09:00:00 GMT+0900 (한국 표준시)

const dateC = moveMonth(dateA, -1);
console.log("C: ", dateC); // C : Sun Sep 10 2000 09:00:00 GMT+0900 (한국 표준시)

 

① 함수 moveMonth에는 Date 객체와 이동할 월(month)인 moveMonth라는 매개변수가 있다.

② 매개변수 date에 저장된 Date 객체의 타임 스탬프를 변수 curTimestamp에 저장한다.

③ 매개변수 date에 저장된 Date 객체에서 월을 구해 변수 curMonth에 저장한다. 

④ 변수 resDate를 만들고 ②에서 구한 타 임 스탬프값을 인수로 전달하여 date 객체와 동일한 타임 스탬프값이 들어 있는 Date 객체를 저장한다.

⑤ 변수 resDate에 저장된 Date 객체에서 setMonth 메서드를 호출해 기존 월에 moveMonth만큼 더 한 월을 새로운 월로 변경한다. 결론적으로 이 함수를 호출하면 moveMonth만큼 월을 앞으로 또는 뒤로 이동시킨다.

 

  여러 개의 Date 객체를 저장하고 있는 배열에서 이번 달에 해당하는 Date 객체만 필터링해 새 배열로 이용하는 기능을 아래 같이 구현할 수 있다.

function filterThisMonth(pivotDate, dateArray) {  // ①
  const year = pivotDate.getFullYear();
  const month = pivotDate.getMonth();

  const startDay = new Date(year, month, 1, 0, 0, 0, 0); // ②
  const endDay = new Date(year, month + 1, 0, 23, 59, 59); // ③

  const resArr = dateArray.filter(
    (it) =>
      startDay.getTime() <= it.getTime() && // ④
      it.getTime() <= endDay.getTime()
  );
  return resArr;
}

const dateArray = [
  new Date("2000-10-1"),
  new Date("2000-10-31"),
  new Date("2000-11-1"),
  new Date("2000-9-30"),
  new Date("1900-10-11")
];

const today = new Date("2000-10-10/00:00:00"); // 오늘은 2000년 10월 10일이라고 가정합니다.
const filteredArray = filterThisMonth(today, dateArray);

console.log(filteredArray);

// 0: Sun Oct 01 2000 00:00:00 GMT+0900 (한국 표준시)
// 1: Tue Oct 31 2000 00:00:00 GMT+0900 (한국 표준시)

 

① 함수 filterThisMonth에 전달된 인수 중 dateArray는 코드에 서 작성한 Date 객체 배열이며, pivotDate는 필터링할 월이 있는 Date 객체이다.

② 이번 달의 가장 빠른 시간은 1일 0시 0분 0초로 설정하여 구한다.

③ 이번 달의 가장 늦은 시간은 다음 달 0일의 23시 59분 59초(자바스크립트에서 0일은 이전 달의 가장 마지막 날을 의미)로 설정해 구한다.

④ filter 메서드를 이용해 dateArray에서 이번 달에 속하는 요소만 필터링한다. 서로 다른 Date 객체를 비교할 때는 getTime 메서드로 타임 스탬프를 기준으로 비교하여 더 큰 Date 객체를 더 나중의 시간이라고 여긴다.

 

 

5. 비동기 처리

 

[ 동기와 비동기 ]

  일의 시간에 상관없이 순서대로 일을 완료하는 것을 동기 처리라고 한다. 비동기 처리는 이와 다르게 오래 걸리는 작업을 실행하는 동안 다른 작업을 동시에 수행할 수 있도록 하여 프로그램의 성능을 향상시킬 수 있다.

이미지 출처 : https://kkhcode.tistory.com/6

 

 함수 setTimeout을 이용하면 콜백 함수와 대기 시간을 인수로 받아 여러 작업에 비동기적인 처리를 할 수 있다.

function orderCoffee(coffee, time) { ①
  setTimeout(() => {
    console.log(`${coffee} 제조 완료`);
  }, time);
}

orderCoffee("달콤한 커피", 4000);
orderCoffee("레몬 티", 2000);
orderCoffee("시원한 커피", 3000);

// 레몬 티 제조 완료 
// 시원한 커피 제조 완료 
// 달콤한 커피 제조 완료

 

[ 콜백 함수로 비동기 처리하기 ]

 

 setTimeout의 반환값은 비동기 작업의 결과(인수로 전달받은 콜백 함수의 반환값)가 아니다.

function double(num) {
  return setTimeout(() => {
    const doubleNum = num * 2;
    return doubleNum; ①
  }, 1000);
}

const res = double(10);
console.log(res);

// 알 수 없는 숫자

 

 비동기 작업의 결괏값을 이용하기 위해서는 호출하면서 전달한 콜백 함수의 인수로 전달한다.

function double(num, cb) {
  setTimeout(() => {
    const doubleNum = num * 2;
    cb(doubleNum); // ②
  }, 1000);
}

double(10, (res) => {  // ①
  console.log(res);
});

console.log("마지막"); // ③

// 마지막
// 20

 

① 함수 double을 호출하며 두 번째 인수로 화살표 함수로 만든 콜백 함수를 전달하여 함수 double의 매개변수 cb에 저장한다.

② 비동기 작업이 완료되면 콜백 함수를 호출해 연산의 결괏값을 인수로 전달한다.

 

[ 프로미스 객체로 비동기 처리하기 ]

 프로미스는 자바스크립트에서 제공하는 비동기 처리 방식이다. Pending(대기 상태), Fulfilled(성공 상태), Rejected(실패 상태) 등 3가지 상태로 비동기 작업을 관리한다.

이미지 출처 : https://buly.kr/4bgcxfD

 

 

 프로미스 객체는 아래와 같이 new Promise 생성자로 생성하고, 인수로 실행 함수라는 콜백 함수를 전달한다.

const promise = new Promise(function (resolve, reject) {
  setTimeout(() => {
    console.log("안녕");
  }, 500);
});

// 안녕

 

 실행 함수는 인수로  resolve와  reject를 전달받는다. resolve는 비동기 작업의 상태를 성공으로 바꾸는 함수이고 reject: 비동기 작업의 상태를 실패로 바꾸는 함수이다.

 

 결괏값이 resolve일 때는 아래와 같이 then 메서드를 사용하여 결괏값을 이용할 수 있다.

const promise = new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve("성공");
  }, 500);
});

promise.then(function (res) { ①
  console.log(res);
});

// 성공

 

 결괏값이 reject일 때는 아래와 같이 catch 메서드를 사용하여 실패한 경우의 콜백 함수를 설정할 수 있다.

const promise = new Promise(function (resolve, reject) {
  setTimeout(() => {
    reject("실패");
  }, 500);
});

promise.then(function (res) {
  console.log(res);
});

promise.catch(function (err) { ①
  console.log(err);
});

// 실패

 

 

 이와 같이 프로미스의 then과 catch 메서드를 사용하면 비동기 작업의 성공 또는 실패에 따라 다른 기능을 설정할 수 있다. 이를 통해 비동기 작업의 흐름을 더 명확하고 유연하게 제어할 수 있다.

---

퀴즈

1. 배열을 구조 분해 할당할 때는 배열의 길이보다 할당할 변수의 개수가 더 많아도 오류 없이 할당된다. (O/X)
2. 개별 요소들을 다시 배열로 묶는 매개변수를 (___ ____)(이)라고 한다.
3. 배열 각각의 요소에 대한 함수 호출 결과를 모아 새 배열을 만들어 반환하는 메서드는 (____)(이)다.
4. 현재 시간 또는 특정 시간의 Date 객체를 생성하기 위해서는 (___ ____) 생성자를 사용한다.
5. (___ ____)란 특정 시간이 UTC+0시인 1970년 첫날을 기준으로 흘러간 밀리초(ms)의 시간을 의미한다.
6. 작업을 비동기적으로 처리하기 위해서는 함수 (______)을 이용한다.
7. (_____) 객체는 Pending(대기 상태), Fulfilled(성공 상태), Rejected(실패 상태) 등 3가지 상태로 비동기 작업을 관리한다.

(다음 문제를 읽고 코드를 작성하시오)

1. forEach 메서드를 사용하여 배열 ["apple","banana","coconut"]의 각 과일 이름을 대문자로 변환한 후 새 배열에 저장하여 출력하는 코드를 작성하시오. (문자열 객체의 toUpperCase() 메서드를 사용하세요.)
2. 콜백 함수로 비동기적으로 작업을 처리하여 "계산하는 중..." 메시지를 먼저 출력하고, 3초 후에 1과 1을 더한 결과를 출력하는 코드를 작성하시오.

 

 

 

---

 

 

 

 

 

1. O / 2. rest 매개변수 / 3. map / 4. new Date / 5. 타임 스탬프 / 6. setTimeout / 7. 프로미스

서술형 1.

let fruits = ["apple", "banana", "coconut"];
let upperFruits = [];

fruits.forEach((item) => {
  upperFruits.push(item.toUpperCase());
});

console.log(upperFruits);

 

서술형 2.

function addNumbers(a, b, cb) {
  setTimeout(() => {
    const sum = a + b;
    cb(sum); // 더한 결과를 콜백 함수로 전달
  }, 1000);
}

console.log("계산하는 중...");

addNumbers(1, 1, (res) => {
  console.log(`더한 결과: ${res}`); // 1 + 1의 결과 출력
});

// 출력 순서:
// 계산하는 중...
// 더한 결과: 2 (1초 후)

 

출처: 이정환, 『한 입 크기로 잘라먹는 리액트』, 프로그래밍인사이트(2023), https://reactjs.winterlood.com/.
Corner React.js 2
Editor: ChaCha