JavaScript - keys(), values(), entries() (22.10.18 TIL)

 오늘 피보나치 수열 알고리즘 문제를 풀던 도중 아주 좋은 배열 생성 패턴을 알게 되었다. 먼저 내 코드는 아래와 같다. 

Q. 수학에서 피보나치 수(영어: Fibonacci numbers)는 첫째 및 둘째 항이 1이며, 그 뒤의 모든 항은 바로 앞 두 항의 합인 수열이다.
숫자를 매개변수로 입력 받으면 해당 숫자의 위치에 해당하는 피보나치 수를 반환하는 fibonacciNumber 함수,
숫자를 매개변수로 입력 받으면 그 수 만큼의 피보나치 수열 배열을 반환하는 fibonacciArray 함수 만들어보자.

=> fibonacciArray(10) 이면 [ 0, 1, 1, 2, 3, 5, 8, 13, 21, 34 ] 를 반환

-----------------------------------------------------------------------------------

function fibonacciNumber(n) {
  if (n <= 1) {
    return 0;
  }

  if (n === 2) {
    return 1;
  }

  return fibonacciNumber(n - 1) + fibonacciNumber(n - 2);
}

default function fibonacciArray(n) {
  return [...Array(n).keys()]
    .map((i) => i + 1)
    .map((i) => fibonacciNumber(i));
}

-----------------------------------------------------------------------------------

//for문 사용했을 때
function fibonacciArray(n) {
  const arr = [];

  for (let i = 1; i <= n; i += 1) {
    arr.push(fibonacciNumber(i));
  }

  return arr;

 
 여기서 배열을 생성해주는 fibonacciArray() 메서드를 만들었는데, 처음에는 for 문을 사용해서 문제를 풀었다. arr 이라는 배열을 하나 생성해놓고, for문을 돌리면서 fibonacciNumber() 메서드에서 반환받은 숫자를 이 배열에 하나씩 넣어주었다. 이렇게 하니 문제는 쉽게 풀렸지만, map() 함수를 이용해서 다시 풀어보고 싶었다.

 하지만 처음에 const arr = [] 로 배열을 생성해줘서 거기에 값을 넣는 방식 말고는 도무지 생각나지 않아서 혼자 끙끙대고 있었는데 Boni 가 와서 [...Array(n).keys()] 라는 모양의 배열을 생성하는 방법을 알려주었다. 저렇게 패턴식으로 사용한다고 하니까 아예 저걸 외워버리면 사용할 일이 정말 많을 것 같다.

  keys() 라는 함수와 함께 values(), entries() 라는 함수도 같이 정리해보자.

• Object.keys() 는 객체의 key 만 담은 배열을 반환한다. 
• Object.values() 는 객체의 value 만 담은 배열을 반환한다.
• Object.entries() 는 객체의 [키, 값] 쌍을 담은 배열을 반환한다.

let user = {
  name: "John",
  age: 30
};

Object.keys(user) = ["name", "age"];
Object.values(user) = ["John", 30]
Object.entries(user) = [ ["name","John"], ["age",30] ]

 
 그래서 이 예시대로 생각해보면 [...Array(3).keys()] 같은 경우, 3칸의 배열이 생성되는데, 앞에 펼침 연산자 '...' 를 사용해서 일련의 목록을 만들어 그 곳에 배열의 key 를 넣어준다. 하지만 이 경우 배열은 empty 상태이므로 그 인덱스 값인 숫자를 넣어주는 것이다. 그리고 map() 함수를 사용해서 요소를 하나씩 넣어주는데, 그냥 i 그대로를 넣어주면 0부터 들어가게 되기 때문에 내가 원하는 모양이 아니므로 + 1 을 해주어야 한다.

 아직 자바스크립트의 함수들도 잘 모르고 모양들도 낯선 게 많지만 이렇게 동기들의 도움과 공식 문서의 description 만 있다면 해낼 수 있을 것 같기도 하다. (ㅠ_ㅠ) 우리 모두 화이탱..!

---

 ps. 오늘 1:1 spiralMatrix 강의 & 코딩쇼를 보여준 쥬쥬와 피보나치 알고리즘 관련 문제를 푸는 도중 아주 좋은 패턴을 알려준 Boni 와 나의 구몬 선생님 zzezzee, 배열 메서드 쪽집게 강의의 신 김뚜루님에게 감사의 말씀을 올립니다~! (결국 3기 모두 라는 뜻)