[TIL] 코드스테이츠 04주차 [Full Pre 8기]

2020.11.16

오늘 배운 것

  • 자바스크립트 배열 내장 메소드를 직접 구현하는 과제

  • .pluck은 처음 알았다.

    .pluck = function (arr, keyOrIdx) {
      // _.pluck을 _.each를 사용해 구현하면 아래와 같습니다.
      // let result = [];
      // _.each(arr, function (item) {
      //   result.push(item[keyOrIdx]);
      // });
      // return result;
      return _.map(arr, function(el) {
        return el = el[keyOrIdx] ;
      })
    };

2020.11.17

오늘 배운 것

  • Math.max.apply(null, lengthArr)
  • arguments : 매개변수 몇 개인지 모를 때
  • 풀리지 않는 문제
function intersection() {

  let result = [] ;

  each(arguments[0], function(el) {
    let count = 1 ;
    console.log(count) ; 
    console.log(el) ;
    for(let i = 1 ; i < arguments.length ; i++ ) {
      console.log(arguments[i]) ;
      for(let j = 0 ; j < arguments[i].length ; j++ ) {
        console.log(j)
        console.log(arguments[i][j])  // 이 부분에서 문제를 파악했습니다.
        if (arguments[i][j] === el) {
          count++ ;
          console.log(count) ;
          debugger
        }
      }
    }
    if ( count === arguments.length ) {
      result.push(el) ;
      console.log(result)
    }
  })
  
  return result ;
}

.intersection 메소드를 구현하기 위해 count 변수를 활용했는데 문제를 파악하기까지 한참 걸렸다. 문의에 대한 답변이 이해가 되었다.

현재 count++가 되는 조건은
if (arguments[i][j] === el)
그런데 count가 1 --> 2 --> 1 --> 2 로 찍히는 것이 보이는군요!function (el) {.... code}가 실행될때마다 (each가 arguments[0]번째의 각 요소마다 이 함수가 실행됩니다) count는 1으로 다시 바뀝니다 (closure 기억나시죠!?)각 요소마다 실행되는 콜백 함수는 count를 증가시키는 조건문이 한번밖에 실행이 되지 않기 때문에 2까지밖에 올라가지 않는 모습을 볼 수 있습니다.

문제는 arguments에 제대로 접근하고 못하고 있다는 것. 콘솔 로그에 출력되는 배열은 계속 첫번째로만 찍히기 때문에 각 요소별 최대 카운트가 2가 되는 것이다. 아래의 수단들도 써보았다.

arguments는 사실 배열은 아니다. 실제로는 arguments 객체의 인스턴스다.

let arr = Array.from(arguments) ;

써봤으나 fail!

let arr = [...arguments] ;

이것도 출력 안 됨 s**t!

let arr = [] ;
  for (let k = 0 ; k < arguments.length ; k++ ) {
    arr.push(arguments[k]) ;
  }
    console.log(arr)

결국 코드를 엎어서 새로 제출하긴 했는데 저 부분은 여전히 의문이 남는다. 다른 걸 하면서 해결되기를 기다려본다.

2020. 11. 18

오늘 배운 것

  • 일반적인 재귀 함수 템플릿
function recursive(input1, input2, ...) {
  // 재귀의 기초 (base case)
  if (문제를 더 이상 쪼갤 수 없을 경우) {
    return 단순한 문제의 해답;
  }
  // recursive Case
  // 그렇지 않은 경우
  return 더 작은 문제로 새롭게 정의된 문제
  // 예1. someValue + recursive(input1Changed, input2Changed, ...)
  // 예2. someValue * recursive(input1Changed, input2Changed, ...)
}
  • return 값 따로 해야하는 이유
function unpackGiftbox(giftBox, wish) {

  for (let i = 0 ; i < giftBox.length ; i++ ) {
    if ( giftBox[i] === wish ) {
      return true ;
    } else if ( Array.isArray(giftBox[i])) {
        if (unpackGiftbox(giftBox[i], wish)) {
        return true ;
        }
    }
  }
  return false;
}

2020. 11. 19

오늘 배운 것

객체 안 모든 요소를 문자열로 만드는 과제

객체는 순서가 없다. 그럼 키가 있는가?

  • string으로 만들기 위해서 ''+obj와 같은 식으로 쓰면 된다.
  • typeof 메소드는 항상 문자열로 출력 (욀케 까먹냐 ㅋㅋ)
  • 코딩 컨센션에 따르면 가능하다면 .map, .reduce와 같은 고급 함수 사용하란다.

  • 일반적인 for문 보다 for ~ of을 사용하라.

for in 반복문과 for of 반복문의 차이점

  • for in 반복문 : 객체의 모든 열거 가능한 속성에 대해 반복
  • for of 반복문 : [Symbol.iterator] 속성을 가지는 컬렉션 전용

2020. 11. 20

오늘 배운 것

  • 반올림 메소드는 Math.round()인데 소수점은 toFixed(~자릿수)
  • 자바스크립트에 유니코드 인코딩은 \udddd (dddd는 16진수)
    • 섭씨 \u2103
  • select - option
  • $ 붙인 네이밍컨벤션 본받을 점 (김ㅇㅇ님)
  • 스타벅스 서버 만든다 가정했을 때 API 디자인 해보자.
  • 엔터키가 버튼 누르게끔 처리 예시
function handleInputCityEnterkey() {
  if (event.keyCode == 13) {
    getData();
  }
}

elInputCity.onkeypress = handleInputCityEnterkey;
  • 텍스트 박스 클릭 시 초기화
function eraseInput() {
  elInputCity.value = "";
}

elInputCity.onclick = eraseInput;
  • number 타입 배열에서 가장 큰 요소 찾기
    • Math.max.apply(null, arr)
    • Math.max(...arr)

좋은 웹페이지 즐겨찾기