TIL 230103 call / apply

🎆 오늘 한 것

• 수업 정리 / 복습
• 리액트 강의
• 알고리즘 문제 풀이
• this 마저보기
• 병원 다녀오기

🙄 오늘 하려고 했는데 못한 것

• 다이소 가서 유리병, 공책, 샤프심 사오기
• 멘토링 질문 노션에 올리기

✨ 오늘 수업(함수)

🎇 자주 안 쓰던 것들 연습

const calcPrice = (...price) => {
  if (price.length === 0) {
    // throw new Error("Error!!!");
    return "에러!!!!!!!!!";
  }

  let sum = 0;
  price.forEach(element => {
    sum += element;
  });
  
  // return price.reduce((acc, item) => acc + item);
  
  return sum;
};

console.log(calcPrice(100, 4000, 200, 500));

수업 예제는 뭐 대충 인수로 보내는 만큼 파라미터 개수도 정해서 함수를 작성했는데, rest 파라미터 사용을 거의 안 해본 김에 재사용성 살려보려고 이렇게 작성했다.

forEach도 맨날 헷갈렸는데 드디어 조금 감이 오는 듯... 이제 for in for of만 익숙해지면 돼!!

🎇 parseInt()

parseInt(string)
parseInt('123바보111', 10) // output : 123

정수로 변환되지 않는 문자열은 없애버리고 제일 앞의 숫자만 반환, 두번째 파라미터는 진수를 적는 것임

const rem = (pxValue, base = 16) => {
//  if (typeof pxValue === "string") {
//    pxValue.slice(-2);
//  }

  return parseInt(pxValue) / parseInt(base) + "rem";
};

console.assert(rem(20) === "1.25rem");
console.assert(rem("30px") === "1.875rem");
console.assert(rem("56px", 10) === "5.6rem");
console.log(rem(20));

숫자 문자열을 숫자로 바꾸는데만 자주 사용했어서 이런 사용법이 있는 걸 새삼 처음 알게 됐다...

🎇 call()

call 메서드는 호출 주체인 함수를 즉시 실행하게하는 명령어. 함수를 호출하면서 첫 번째 인수로 전달한 객체를 함수의 this에 바인딩한다!

func.call(context, arg1, arg2, ...)

예에제로 넘어가보면,

const javaScript = {
  name: '자바스크립트'
}
Object.prototype.hasOwnProperty.call(javaScript,'name')

1. Object.prototype.hasOwnProperty : object가 가진 hasOwnProperty 메소드를 호출
2. call(javaScript,'name') : has어쩌고 함수가 가리키는 대상은 javascript라는 객체이고, has어쩌고 함수에는 'name'이라는 문자열을 인수로 넘기겠다.

🎇 apply()

apply 메서드는 call과 동일하게 호출 주체인 함수를 즉시 실행하게하는 명령어.

 func.apply(context, args)

apply는 func의 this를 context로 고정해주고, 유사 배열 객체인 args를 인수로 사용할 수 있게 해준다.

🚨 call()과 apply()은 거의 동일하게 작동하지만, call이 복수 인수를 따로따로 받는 대신 apply는 인수를 유사 배열 객체로 받는다는 점이 중요한 차이!!

func.call(context, ...args); // 전개 문법을 사용해 인수가 담긴 배열을 전달하는 것과
func.apply(context, args);   // call을 사용하는 것은 동일

🎆 내일 할 것

• 수업 정리 / 복습
• 리액트 강의
• 알고리즘 문제 풀이
• 콜백 함수 공부
• 다이소 가서 유리병, 공책, 샤프심 사오기

📌 언젠가 해야되는 todo

• preload / modulepreload / prefetch 공부... 언제하지?
• deep dive 19장 프로토 타입
• deep dive 25장 클래스
• 테일윈드 다크모드 공부
• 사이트 하나 잡고 리액트(Sass나 tailwind)로 클론 코딩(+다크모드까지)
• Sass 공부...

📚 이번 주 개인 목표

• 리액트 리덕스 툴킷까지 대충이라도 복습
• 리액트 SPA 섹션 보기
• deep dive 33~36
• 알고리즘 강의 문제 해결, 선택 어쩌고 문제 풀어보기
• 매일 백준이나 프로그래머스 알고리즘 간단한 거 풀이 1개
• this ✅
• callback 함수