TIL_20.05.12(화) - Tree-map, 다형성, rock, scissor, paper 알고리즘, 기타

Tree-map

저번주 금요일에 했던 self assessments를 잘 풀지 못했는데 reference코드를 진행되는 스프린트로 인해 코드를 이제서야 밤중에 보게 되었다. 재귀를 이용하는 방법이었고, 다시 한 번 내가 이 부분이 진짜 약하다는걸 확인했다. 알면 뭐해 다른 스프린트 공부로 정신이 없는데...

js OOP 다형성

상속된 자식 클래스는 부모클래스의 속성을 재정의 할 수 있는데 그것을 다형성이라고 한다.
다형성을 이용하여 스프린트를 작성하는 과제였다. 기본적으로 dancer라는 class를 만들어 다른 클래스들을 상속 시키며 다형성을 이용하는 과제 였다.

최종 구현한 이미지는

ㅋㅋ... CSS는 관심이 별로 안가서...
이런 이미지 이고, 돌아가는 모션과 깜빡이는 친구들...

새로운 클래스 두개를 만들어주고 DOM을 이용해서 과제를 완료하였다.

클릭이벤트를 구현하는 걸 찾는데에 생각보다 많은 시간이 소요되었다.

알고리즘

세 판의 가위 바위 보 를 할 동안 낼 수 있는 모든 경우의 수를 return 하는 문제.

수도코드

1. rock, paper, scissor를 result array에 담아둔다.
2. for of 문 사용하여 세번의 중첩 for문
3. result.push([i,j,k])

과정으로 구현 완료 하였다.

음... 비효율적인 것 같은데...

기타

function foo() {

  var data = 10;

  bar(function(players) {
    data = players;
  });

  return data;
}

function bar(callback) {
  setTimeout(function() {
    callback(20);
  }, 500);
}

var result = foo();

라는 코드가 있을때, result의 결과는 10이다 .
setTimeout으로 딜레이가 걸릴 때, bar함수는 실행이 먼저 되기 때문에

들어가서 확인하자

setTimeout(alice.sayHi())와 setTimeout(alice.sayHi)의 차이

전자는 메서드로 즉시 호출 부모가 this이므로 alice가 this

후자는 자바 스크립트에서 함수 호출 시 this는 전역객체에 바인딩 된다.