[코드잇 스프린트] 0402 데일리 퀴즈

 

 

1. <보기>를 실행하였을 때, 오류가 일어난다. 오류가 발생하는 이유와 해결 방법에 대해 설명하시오.

// 1번 직원 정보
const p1 = fetch('<https://learn.codeit.kr/api/members/1>').then((res) => res.json());
// 2번 직원 정보
const p2 = fetch('<https://learn.codeit.kr/api/members/2>').then((res) => res.json());
// 3번 직원 정보
const p3 = fetch('<https://learnnnnnn.codeit.kr/api/members/3>').then((res) => res.json());

Promise
  .all([p1, p2, p3])
  .then((results) => {
    console.log(results); // Array : [1번 직원 정보, 2번 직원 정보, 3번 직원 정보]
  });

답: Promise 객체가 하나라도 rejected 상태가 되는 경우에 대비해서 catch 메소드를 붙여주면 된다.

// 1번 직원 정보
const p1 = fetch('https://learn.codeit.kr/api/members/1').then((res) => res.json());
// 2번 직원 정보
const p2 = fetch('https://learn.codeit.kr/api/members/2').then((res) => res.json());
// 3번 직원 정보
const p3 = fetch('https://learnnnnnn.codeit.kr/api/members/3').then((res) => res.json());

Promise
  .all([p1, p2, p3])
  .then((results) => {
    console.log(results); // Array : [1번 직원 정보, 2번 직원 정보, 3번 직원 정보]
  })
  .catch((error) => {
    console.log(error);
  });

 

2. 비동기 실행에 관련된 문법으로는 전통적인 비동기 실행 함수, Promise, async/await가 있다. 그 중 async/await는 Promise 이후에 나온 문법인데, 나오게 된 이유와 async/await의 장점을 설명하시오.

 

 

답:

기존의 전통적인 비동기 실행함수는 비동기 코드를 작성할 때 콜백지옥이 발생하는 문제가 있었다. 따라서 콜백지옥을 해결하기 위해 Promise가 탄생했다. 하지만 프로미스 체인이 길어지면서 가독성이 떨어지는 문제와 에러처리가 번거로운 단점이 있었는데 이러한 문제를 해결하기 위해 async/await가 도입되었다.

 

async/await는 비동기 처리 코드를 동기식으로 작성할 수 있어서 가독성이 향상되고 에러처리도 try-catch문으로 간단하게 처리가 가능한 장점이 있다.

 

3. 함수 스코프와 블록 스코프에 대해 설명하고, var이 사용되지 않는 이유에 대해 설명하시오.

 

답:

함수 스코프와 블록 스코프는 변수가 접근 가능한 범위를 정의하는데 사용되는 스코프의 종류다.

 

먼저 함수 스코프는 변수가 선언된 함수 내에서만 접근 가능한 스코프를 말하고 var 키워드로 선언된 변수는 함수 스코프를 갖는다.

블록 스코프는 변수가 선언된 중괄호({}) 블록 내에서만 접근 가능한 스코프를 말한다. (대표적으로 if문. for 문, while 문 등의 블록이 해당한다.)블록 스코프는 let과 const 키워드가 도입되면서 생겼고 따라서 let 과 const로 선언된 변수는 블록 스코프를 가진다.

 

var이 사용되지 않는 이유는 크게 세가지 문제가 있다.

1. 같은 이름의 변수를 중복해서 선언해도 정상적으로 동작한다는 것

2. 함수 레벨 스코프이기 때문에 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다는 것

3. 변수 호이스팅에 의해 변수 선언문이 스코프의 선두로 끌어 올려진 것 처럼 동작하는 것

 

4. <보기>의 코드에서, 에러가 나타나는 곳과 나타나는 이유를 설명하시오.

const latte = {  
  esspresso: '30ml',
  milk: '150ml'
};

const cafeMocha = {
  ...latte,
  chocolate: '20ml',
}

[...latte];

(function (...args) {
  for (const arg of args) {
    console.log(arg);
  }
})(...cafeMocha);

 

답: [...latte];

해설: 스프레드 연산자를 사용하여 객체인 latte를 배열로 변환하려고 시도했기 때문이다. 객체를 배열로 변환하는 메소드를 사용해야 한다.