ch27-해설.md

Chapter27

📌문제1

다음 문장을 보고 true, false를 판단하세요.

(1) : JS에서 배열 타입은 존재하지 않는다.
(2) : 배열의 length 프로퍼티의 값은 배열 요소를 추가, 삭제하면 자동 갱신된다.
(3) : push, pop, unshift, shift, concat, splice 메서드는 원본 배열을 변경한다.
(4) : find, filter 메서드는 배열을 반환한다.

답안 작성

(1) : true
(2) : true
(3) : false - concat은 원본 배열을 변경하지 않습니다.
(4) : false - find 메서드는 요소를 반환한다. (교재 549p)

📌문제2

다음 함수를 실행하였을 때, 출력 결과를 작성하시오.

function func() {
  const arr = [1, 2, 3, 4, 5];

  arr.forEach((item) => {
    if(item === 2) return ;
    console.log(item);
  })
}

정답 및 해설

출력 결과 : 1 3 4 5

교재에서 forEach문의 내에서 순회를 제어하기위해 `break`, `continue`를 사용한다면 에러가 나옵니다.
하지만 return문을 사용한 경우 에러가 나오지 않지만, 순회를 멈추지는 않습니다.
그 이유는 forEach가 매번 콜백함수 실행을 통해 순회하기 때문입니다.
따라서 각 순회의 실행은 함수의 실행으로 볼 수 있고, 함수 내 `return`은 함수 종료로 이어집니다.

추가로 MDN에서 순회를 제어하기 위해서는 for, for...of, for...in 등과 같은 반복문을 권장합니다.

• P536 ~ P537
• 🔗Array.prototype.forEach() (MDN)

📌문제3

true or false를 고르세요

1) Array.prototype.splice는 원본 배열을 변환시키고, Array.prototype.slice는 변환시키지 않는다. 
2) new Array(a)는 Array(a)와 동작 방식이 같다. 
3) [1, 2, 3, 4, 100, 5].sort() === [1, 2, 3, 4, 5, 100] 이다. 
4) array의 sort 메서드는 quicksort를 사용한다. 
5) forEach는 for에 비해 성능이 좋다.

정답 및 해설

1) true
2) true
Array 생성자 함수는 new 연산자와 함께 호출하지 않더라도, 즉 일반함수로서 호출해도 Array 생성자 내부에서 new.target을 확인하기 때문에 array가 생성된다. 
3) false
js의 sort함수는 유니코드 기준이기 때문에, 요소들을 문자열로 바꾸고 유니코드 기준으로 정렬한 뒤 다시 변환해 반환한다. 따라서 값을 통해 정렬하고 싶으면 별도의 함수를 지정해야 한다.
4) false
이전에는 quicksort를 이용했지만 동일한 값의 요소가 중복되어 있을 때 초기 순서와 변경될 수 있는 불안정성 때문에 현재는 timesort를 이용한다.
5) false
성능이 떨어지지만 가독성이 좋다. for은 함수형 프로그래밍이 추구하는 방식과 맞지 않기 때문에 일반적으로 for 대신 forEach를 쓰는 것을 권장한다. 

• 🔗Performance of JavaScript .forEach, .map and .reduce vs for and for..of

📌문제4

다음의 출력 결과를 쓰시오.

console.log(Array('hello')); // (1)
console.log(Array.from('hello')); // (2)

const arrayLike = { 
    '0' : 'a',
    '1' : 'b',
    '2' : 'c',
    length : 4
}

console.log(Array.from(arrayLike)); // (3)

const arrayUnlike = {
    '0' : 'a',
    '1' : 'b',
    '2' : 'c', 
}
console.log(Array.from(arrayUnlike)); //(4)

정답 및 해설

(1) ['hello']
Array는 문자열을 입력받으면 문자열을 포함한 배열을 반환한다.
(2) [ 'h', 'e', 'l', 'l', 'o' ]
Array.from은 유사 배열 객체를 배열로 만든다.
(3) [ 'a', 'b', 'c', undefined ]
(4) []
length를 가지고 있지 않아서 배열이 생성되지 않는다. 

📌문제5

다음의 출력 결과를 쓰시오.

  const arr = [1, 2, 3];
      const arr1 = [0, ...arr];
      const arr2 = [...arr, 4];
      console.log(arr); // 1

      const arr4 = [1, 2, 3];
      arr4.push(4);
      arr4.unshift(0);
      console.log(arr4); // 2

답안 작성

(1) : [1,2,3] // spread문법은 원본배열을 수정하지않고 얕은복사를통해 새로운 배열을 생성한다.
(2) : [0,1,2,3,4] // push,unshift는 원본배열을 수정한다.

📌문제6

다음의 출력 결과를 쓰시오.

  const arr = [NaN, 1, 2, 3, 4];
      console.log(arr.includes(NaN)); // 1
      console.log(arr.indexOf(NaN)); // 2 

답안 작성

(1) : true // inclues는 NaN이 배열에 포함되어있는지 확인 가능.
(2) : -1 // indexOf는 불가.

📌문제7

다음의 출력 결과로 화면에 보이는 숫자를 작성해주세요.

   <div id="app">
      <div class="box">1</div>
      <div class="box">2</div>
      <div class="box">3</div>
      <div class="box">4</div>
      <div class="box">5</div>
      <div class="box">6</div>
    </div>
    <script>
      const $boxes = document.querySelectorAll(".box");
      const $newBoxes = $boxes.filter((box) => box.innerText % 2 === 0);
      const $app = document.querySelector("#app");
      $app.innerHTML = "";
      $newBoxes.forEach((box) => $app.appendChild(box));
    </script>

답안 작성

1
2
3
4
5
6
$boxes.filter is not a function 
-> NodeList는 유사배열이기 때문에 배열의 메서드인 filter를 사용할 수 없다.