ES5 클래스 상속, 콜백함수 활용 그리고 재귀

오늘은 HA를 문제를 풀었다. 일단 이전에 배웠던것을 혼자 다시 풀어보는 느낌이라서 엄청 어렵지는 않았지만, 아직 코드에 익숙하지 않아서 그런지 시간이 많이 오래걸렸다. 빨리 익숙해져야하는데....

일단 오늘 6시에 딱 다 풀어서 기분은 좋지만, 좀 더 열심히 복습 했더라면... 일찍 풀었을텐데하는 마음도 있다. 그래서! 오늘 하면서 오래 걸렸던 문제에 대해서 다시 복습했다.

첫번째로, ES5에서 클래스를 만들고, 메소드를 상속받는것에 다시 공부할 필요가 있었다.

1. 상속할때, call과 apply를 사용하여 this값을 지정해주는것
2. 상위 객체에서 가지고 있던 메소드를 재정의하고, 또 상위 객체가 가지고있던 메소드도 사용하고 싶을때.

이 두부분에서 많이 시간을 빼았겼다.
직접 코드로 보면서, 오래 기억해두자 !(완벽한 코드는 아니지만, 내 수준에서는 괜찮은듯!!?)

var Horse = function(name) {
  //TODO:
  this.name = name;
};
Horse.prototype.goSomewhere = function(destination) {
  return this.name + " is galloping to " + destination + "!";
};

위와 같이 Horse라는 class를 만들었다. 이 만든 클래스를 상속받는 인스턴스를 만들때, 위의 2가지 문제점을 잘 기억해두자.

var FlyingHorse = function(name, color) {
  this.color = color;
  Horse.call(this, name);
  // call을 사용하여, Horse의 name을 
  // FlyingHorse의 this값으로 지정.
};
FlyingHorse.prototype = Object.create(Horse.prototype);
// 이것은 공식처럼 외워두자.
// 첫번째줄은, FlyingHorse의 프로토타입에 Horse의 프로토타입을
// 할당해주는것이다. 고로, FlyingHorse는 Horse의 프로토타입을 사용할 수 있다.
FlyingHorse.prototype.constructor = FlyingHorse;
// 두번째줄은 생성자를 FlyingHorse의 생성자로 지정해주는 코드다.
//
// 이 밑에 코드는  goSomewhere의 메소드를 다시 재정의하는것이다. 사실 확장하는것이다.
// FlyingHorse.prototype.goSomewhere 를 사용하고, 밑에 새로운 함수를 적어주면 goSomewhere를 재정의하는것이지만,
// 여기서는 Horse.prototype.goSomewhere.call(this, destination);를 사용하여, 기존Horse의 메소드도 사용이 가능하다
FlyingHorse.prototype.goSomewhere = function(destination, milesToDestination) {
  if (milesToDestination < 10) {
    return Horse.prototype.goSomewhere.call(this, destination);
  } else {
    return this.name + " is flying to " + destination + "!";
  }
};

외워도 좋을 3가지.

1. FlyingHorse.prototype = Object.create(Horse.prototype);
   FlyingHorse.prototype.constructor = FlyingHorse;
   //이건 정말 공식처럼 외우기

2. Horse.call(this, name);
   // 상속받을때, this를 지정해주는것 잊지말자

3. Horse.prototype.goSomewhere.call(this, destination);
  // 기존의 메소드를 사용하고 싶다면 !

두번째는 , forEach .

forEach는 오래전에 봤었지만, 사용해본적은 극히 드물다. 중요했지만, 아직 콜백함수에 익숙하지않다.

forEach란,
: 주어진 callback을 배열에 있는 각 요소에 대해 오름차순으로 한 번씩 실행합니다. 삭제했거나 초기화하지 않은 인덱스 속성에 대해서는 실행하지 않습니다.(MDN)

forEach의 특징
1. 일단 forEach함수는 배열에서만 사용이 가능하다.
2. 3가지를 인자로 받는다.

• 첫번째 인자 === 요소 값
• 두번째 인자 === 요소 인덱스
• 세번째 인자 === 순회 중인 배열

  let arr = ['a','b','c','d']
  arr.forEach(function(item,index,arr2){
    console.log(item,index); 
  })
  // a 0 
  // b 1 
  // c 2 
  // d 3

forEach에 대해서 어느정도알겠으나, 아직 3번째인자를 활용하는 것은 어렵다. 잘 모르겠다. 또한 이렇게 간단한 예제는 금방 들어왔으나, 배열 안 객체같은것은 좀 더 연습이 필요하다.
이번 HA에서도 이와관련한 문제가 나왔었다. forEach는 아니였지만, 같은 종류인 콜백함수....

var sport = {
  name: "basketball",
  players: [
    { name: "LeBron James", age: 31 },
    { name: "Kevin Durant", age: 28 }
  ],
  playerNames: function() {
    // YOUR CODE HERE
    return this.players.map(player =>
    `${player.name} plays ${this.name}`);
    }
  };

처음에 이 코드를 보고도 이해가 안갔지만, 지금은 😎

세번째, 재귀함수......

이놈의 재귀는 문제를 풀때마다 헷갈리고, 어렵고, 뭐가 하나 빠져있다. 이번에도 문제를 풀다가 하나가 잘 되었었다. 그것만 고치는데 시간을 많이 소비했다....

재귀에서는 항상 돌긴 돌지만, 결과값을 다른곳에 담아야했지만 그러지못하고 자꾸 초기화가 되는 현상을 겪었다.

아래는 처음에 작성했었던 코드

var printArray = function(array) {
  function recursive(arr) {
    let result = "";
    for (let el of arr) {
      if (el === undefined) {
        result = result;
      } else {
        if (!Array.isArray(el)) {
          result = result + el;
        }
      }
      if (Array.isArray(el)) {
        recursive(el);
      }
    }
  }
  recursive(array);
  console.log(result);
}

여기서 문제점은 result의 위치였다. 재귀가 실행될때마다 result 를 생성하고, 거기에 담고 밖으로 배출 하지못해서, result의 값을 완성시키지 못했다.

var printArray = function(array) {
  let result = "";
  function recursive(el) {
    if (array.length === 0) {
      return;
    }
    el.forEach(function(arrInArr) {
      if (!Array.isArray(arrInArr)) {
        result = result + arrInArr;
      } else if (Array.isArray(arrInArr)) {
        recursive(arrInArr);
      }
    });
  }
  recursive(array);
  console.log(result);
};

이번엔 다시 공부좀하고 리팩토링한 결과. result가 recursive함수 밖에 위치해 있다. 이렇게 할 경우 저 결과값을 result에 담을 수 있었다.