TIL_javascript 22년 11월 12일

학습 목표

• 챕터 3,4, 예제 복습하기
• 챕터 5-1 복습하기
• 프로그래머스 예제 풀어보기
• 잘한점, 개선할점, 새로 시도해볼점 기록하기

회고록

• 셀프 평가
  • 이번 챕터는 어려웠다. 아직 모르는 호이스팅의 개념이 잘 머리에 입력되어있어야 하는데 키워드를 들었지만 자세하게 확인해보지 않아서 계속해서 키워드가 나와도 정확하게 이해하지 못했던것 같다. 매번 정리하기 어렵겠지만 키워드를 모아 두었다가 정리하는 시간을 갖으면 도움이 될것 같다
• 잘한 점
  • 프로그래머스 문제 오류를 직접 해결했다. 다른 사람이 푼 답지를 보지 않고 우선 내가 짠 코드에서 뭘 바꾸면 답이 나올지 계속 디버깅하면서 답을 찾아갔다. 어떻게든 구현해야하는 답을 구현해 보는 경험을 하게 됬다.
• 개선할 점
  • 구글링을 잘 해서 만들어진 모듈을 활용하는 것도 실력이다!
• 내일 시도해볼 것
  • 호이스팅이라는 키워드가 튜터님과 수현님이 계속 반복해서 언급하는데 알아봐야겠다.
  • 동기, 비동기 (동기화) 키워드 배우기

새로운 개념

5-1:

• 콜백함수 (callback function)

  • 함수는 하나의 자료형이기 때문에 매개변수로 전달할수 있다.

  • 매개변수로 전달하는 함수를 콜백함수라고 한다

    function callThreeTimes (callback){
    	for (let i=0; i<3; i++){
    	callback(i)
    	}
    }
    function print(i){
    	console.log(`${i} 번째 함수 호출`)
    }
    callThreeTimes(print)
    
    //callThreeTimes() 는 print()함수를 매개변수로 받아 3번 호출한다 
    // callThreeTimes() 함수의 내부에는 callback(i)로 함수를 호출하고 있다.
    //print() 함수가 print(0), print(1),print(2)로 차례대로 호출되어 콘솔에 찍힌다
    
    > 0번째 함수 호출
    	1번째 함수 호출
    	2번째 함수 호출
    

오답노트

콜백함수 코드 처리 순서가 햇갈렸고 팀원들과 토론후 내가 이해한 대로 다시 설명해보겠다.

• 자바스크립트의 호이스팅 때문에 변수, 함수가 제일 최상위로 선언된다.
  • 그래서 function callThreeTimes (print) 함수는 print () 함수를 callThreeTimes함수의 매게변수로 받는 콜백 함수라는걸 컴퓨터가 알게 된다.
• print(i) 함수는 실행하면 콘솔에 i번째 함수 호출이 찍히는것을 컴퓨터가 메모리에 입력하게 된다
• callThreeTime 함수는 아래의 반복문 작업 코드를 실행하는데 , i를 print() 함수의 매개로 호출이 되고 콘솔에 i번째 함수 호출 이 찍히게 된다
  • print는 console.log(${i}번째 함수 호출) callback(i) 함수로 호출되어서
  • for 문이 돌면서 i는 0,1,2 라는 값이 처리되고 i 값을 print(i) 넣어서 콘솔로 찍으면
  • 0번째 함수 호출…2번째 함수 호출을 실행하게 된다

선언적 함수와 익명 함수의 조합: 익명함수가 호출되는지 이해가 안됨

함수 = function (){
	console.log('익명함수')
}

function 함수() {
	console.log('선언적함수')
}

함수 ()
> 익명함수가 실행 된다 

결국 호이스팅을 이해해야 하는데.. (또 나왔네?)

우선 예제 문제로만 봤을 때, 선언적 함수가 먼저 생성되고 → 컴퓨터가 코드 순으로 익명 함수를 실행하게 되는데, 익명함수와 선언적 함수의 이름이 함수()로 같기 때문에 컴퓨터는 선언적 함수가 익명 함수로 바뀐걸로 인식하고 익명함수의 콘솔을 실행한다.

• 익명 함수는 코드가 순차적으로 실행
• 선언적 함수는 순차
• 적인 코드 실행 이전에 생성 (호이스팅)

프로그래머스 문제 :

https://school.programmers.co.kr/learn/courses/30/lessons/120899

• 내 오류: 문제에서 요구하는 최대값의 인덱스와 최대값을 구하시오를 무시하고 최대값만 먼저 찾았더니 정답을 입력했을때 정답의 형식에 맞지 않아서 답이 틀리게 됬다
• 해결 방법:

  //내 해결 방법
  function solution  (array) {
      let output = array[0];
      for (const item of array){
          if (output < item){
              output =item
          }
        }
          
      return [output,array.indexOf(output)]
      
  }
  const arrayExample= [1,8,3]
  console.log(solution(arrayExample))
  
  >[8,1] // 8은 최대값, 1은 최대값의 인덱스
  
  // math 메소드 사용하여 max 값 구하는 방법
  
  function solution2(array) {
    let max = Math.max(...array);
    return [max, array.indexOf(max)];
  }
  console.log(solution2([1, 2, 3, 4]))