💡 핵심 요약 (TL;DR)

'콜백함수실행, Blocking VS non-blocking, 배열.indexOf(value), Number.toFixed(숫자), 탬플릿태그'에서 다루는 각 기술의 핵심 개념과 동작 방식의 차이점을 분석한 내용이다. 동작 원리와 장단점을 비교 파악하여 프로젝트 개발 상황에 적합한 방식을 선택할 수 있다.

비전공자가 IT개발자로, 커리어전환기11

콜백함수실행, Blocking VS non-blocking, 배열.indexOf(value), Number.toFixed(숫자), 탬플릿태그

1. 콜백함수실행

handleClick()은 실행이고 실행의 결과는 return값이 없으므로 undifiend이다

2. 동기와 비동기 개념설명 : Blocking VS non-blocking

비동기는 요청에 대한 결과가 동시에 일어나지 않는다.
요청을 다 받긴 한다. 그럼 결과가 언제 일어나느냐? callback이 일어날때 결과가 발생함!

3. 배열.indexOf(value)

값의 위치를 알 수 있다. [0]번째인지 [2]번째인지 등등
값이 없으면 -1이 출력.

//예제
let 과일 = ['딸기', '포도', '바나나', '사과']

console.log(과일.indexOf('바나나'))
// expected output: 2

console.log(과일.indexOf('리치'))
// expected output: -1

4. Number.toFixed(숫자)

Number.toFixed(2) = 소수점 둘째자리까지 반올림하여 표시

//예제1
console.log(((1.2345).toFixed(1))

// expected output: "1.2"

//예제2
console.log((1.256).toFixed(2))

// expected output: "1.26"

//예제3
function financial(x) {
  return Number.parseFloat(x).toFixed(2);
}

console.log(financial(123.456));
// expected output: "123.46"

5. 템플릿태그

HTML에 템플릿 태그부분은 JS의 세번째 줄이 없으면 아예 브라우저가 읽지 않는다.
따라서 이벤트리스너를 달때는 템플릿아이디를 가지고 와서 다는 게 아니라 템플릿안의 다른 클래스나 아이디를 가지고와야한다

#TIL