오늘 배운 것

• 기수 이동 과제
  1. Underbar shuffle 메소드 레퍼런스 설명
  2. 코드 변환(고차함수)

기수 이동 과제

Underbar Shuffle 메소드 레퍼런스 설명

문제

아래 코드를 설명하라

_.shuffle = function (arr) { 
  let arrCloned = arr.slice();
  for (let fromIdx = 0; fromIdx < arr.length; fromIdx++) {
    const toIdx = Math.floor(Math.random() * arr.length);
    let temp = arrCloned[fromIdx];
    arrCloned[fromIdx] = arrCloned[toIdx];
    arrCloned[toIdx] = temp;
  }
  return arrCloned;
};

문제를 풀며 배운 점

1. 원본 배열 건드리면 안될 때 arr.slice()를 이용할 수 있다.
   지금까지 FP 10기를 수강하면서 배열의 원본을 건드려서 생긴 문제가 몇번 있었다. 그럴 때마다 난관에 부딪혀 편법으로 해결하곤 했는데... arr.slice()를 사용하면 원본 배열을 그대로 새 배열에 복사해 주기 때문에 원본 배열을 전혀 건드리지 않는다. 이건 정말 디테일하게 공부하지 않고 넘어간 내 잘못이었다

2. Math 메소드에 대한 공부
   Math 메소드들은 항상 MDN 검색에만 의존해 왔는데, 오늘 MDN을 검색하며 알게 된 사실은, 간단하고 자주 사용되는 메소드들은 미리 공부해두고 알아두어야 나중에 써먹기가 편하다는 것이다. 아는 만큼 보인다는 말처럼, 로직을 짤 때 이게 내장 메소드로 가능한 일인지 알면 메소드를 사용하여 금방 짤 수 있지만, 모르고 있다면 그 메소드를 코드로 일일이 구현하느라 시간을 엄청 잡아먹을 것이다.

   Math.abs(x) 숫자의 절대값을 반환한다
   Math.floor(x) 인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환한다
   Math.ceil(x) 인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환한다
   Math.pow(x, y) x의 y제곱을 반환한다
   Math.random() 0과 1 사이(0< n <1)의 난수를 반환한다
   Math.round(x) 숫자에서 가장 가까운 정수를 반환한다
   Math.sign(x) x가 양수인지 음수인지 나타내는 부호를 반환한다
   Math.sqrt(x) 숫자의 제곱근을 반환한다

3. 코드는 어렵게 생각할 것 없이 로직만 잘 생각하면 술술 써내려 갈 수 있다.
   지금까지 문제를 풀면서 항상 막히면 어디서 막혔는지 찾느라 시간을 엄청나게 소비했는데, 생각해 보면 그 모든 것들이 로직을 잘못 짰을 때 발생한 일이었다. 코드를 쓰기 전에 나만의 순서를 만들어 꼭 지키는 노력을 해야겠다.

코드 변환 (고차함수)

문제

아래 코드를 reduce를 한 번만 사용한 코드로 변경하여 작성하라

const filterMaped = arr.filter(x => x % 2 !== 0).map(x => x*2);
console.log(filterMaped) // [2, 6, 10]

문제를 풀며 배운 점

내가 예전에 코플릿을 풀며 구글링하다가 화살표 함수를 얼떨결에 쓴 적이 있었다. 지금의 내 기준으로 보면 그것 또한 치팅에 해당하는 행위였는데 그땐 빨리 풀고 싶은 마음이 앞서서 그만 ... 아무튼 코드를 변환하려면 저 코드가 무슨 역할을 하는 지 먼저 상세하게 알 필요가 있었는데, 나는 화살표 함수에 대해 잘 모르는 상태이기 때문에 MDN에 검색해서 정보를 얻고 코드를 해석할 수 있었다.
아니 근데 저렇게 화살표 함수를 쓰는게 가독성 향상을 위해 ES6에서 권장되는 문법이라고 한다. 그럼 더 집중적으로 공부해야지!!

화살표 함수

화살표 함수는 function 대신 화살표( => )를 사용하여 보다 간략한 방법으로 함수를 선언할 수 있다. 하지만 모든 경우에 사용할 수 있는 것은 아니다.

// 매개변수 지정 방법
   // 매개변수가 없을 경우
     () => { ... }
   // 매개변수가 한 개인 경우 소괄호를 생략할 수 있다.
     x => { ... }
   // 매개변수가 여러개인 경우 소괄호를 생략할 수 없다. (당연한 얘기)
     (x, y) => { ... }

// 함수 몸체 지정 방법
x => { return x * x }
x => x * x 
// 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 리턴된다. 위 표현과 동일하다.


() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

화살표 함수는 기본적으로 익명 함수로만 사용할 수 있기 때문에, 화살표 함수를 호출하기 위해서는 함수 표현식을 사용해야 한다.

const pow = x => x*x;

또는 콜백 함수로 사용할 수 있다. 이 경우 일반적인 함수 표현식보다 표현이 간결하다.

기존 함수 표현식

let arr = [1, 2, 3];
let pow = arr.map(function (x) {
              return x*x;
});

화살표 함수를 이용하여 콜백 함수로 사용할 경우

let arr = [1, 2, 3]
let pow = arr.map(x => x * x)

.