[Web] JavaScript 메서드

🎈 Arrow Function (화살표 함수)

Arrow funtion은 항상 무명 메서드이다.
값을 전달하고, 리턴하는 것은 가능하다.

• 일반 함수 표현법

function() {
	...
}

• Arrow function 표현법

() => {
	...
}

🎈 Callback Function (콜백 함수)

1. 이벤트 발생 시 호출되는 예약 함수
   • 유저가 이벤트를 발생 시켰을 때 호출되는 예약된 함수
   • OS가 특정 행동을 할 때 호출되는 예약된 함수
2. 일반 함수의 파라미터로 등록되는 함수

🎈 배열 메서드 종류

1. Array.forEach(콜백함수)

   • Array의 원소 개수만큼 callback 함수가 호출된다.
   • callback 함수가 한번 호출될 때 마다 원소 하나씩 argument로 들어간다.

     arr.forEach((value) => {
     	console.log(value);
     })

2. Array.some(콜백함수)

   • Array의 원소 개수만큼 callback 함수가 호출된다.
   • callback 함수가 한번 호출될 때 마다 원소 하나씩 argument로 들어간다.
   • 하나의 조건만 충족해도 true를 반환한다.

     const datas = [1, 2, 3, 4, 5];
     console.log(datas.some((data) => data > 4)); // true 반환
     console.log(datas.some(data) => data < 0)); // false 반환

3. Array.every(콜백함수)

   • Array 원소 개수만큼 callback 함수가 호출된다.
   • callback 함수가 한번 호출될 때 마다 원소 하나씩 argument로 들어간다.
   • 모든 조건을 충족해야 true를 반환한다.

     const datas = [1, 2, 3, 4, 5];
     console.log(datas.every((data) => data > 0)); // true 반환
     console.log(datas.every(data) => data > 3)); // false 반환

4. Array.find(콜백함수)

   • Array 원소 개수만큼 callback 함수가 호출된다.
   • callback 함수가 한번 호출될 때 마다 원소 하나씩 argument로 들어간다.
   • 해당 조건을 만족하는 첫 번째 요소의 값을 반환한다.

     const datas = [1, 2, 3, 4, 5];
     datas.find((data) => data > 4); // 5
     datas.find((data) => data > 5); // undefined;

5. Array.findIndex(콜백함수)

   • Array 원소 개수만큼 callback 함수가 호출된다.
   • callback 함수가 한번 호출될 때 마다 원소 하나씩 argument로 들어간다.
   • 해당 조건을 만족하는 첫 번째 요소의 인덱스를 반환한다.

     const datas = [1, 2, 3, 4, 5];
     console.log(datas.findIndex((data) => data > 4)); // 4
     console.log(datas.findIndex((data) => data > 5)); // -1 (없는 경우)

6. Array.map((요소, index))

   • 배열의 요소를 하나씩 탐색하며 callback 함수의 return 값을 모아둠 ➡️ 배열을 새롭게 생성
   • 배열 안의 각 요소를 변환할 때 사용

     const datas = [3, 5, 4, 2];
     const newDatas = datas.map((data) => data+1); 
     console.log(newDatas); // [4, 6, 5, 3]

💡 forEach와 map의 차이점 잘 알아둘 것. forEach는 배열의 요소를 하나씩 탐색하며 callback 함수를 수행하는 메서드이고, map은 배열의 요소를 하나씩 탐색하며 callback 함수의 리턴값을 모아 배열로 만드는 것이다.

7. Array.filter((요소, index))

   배열에서 특정 조건을 만족하는 값들만 따로 추출하는 메서드 ➡️ 배열을 새롭게 생성

   const datas = [3, 5, 4, 2];
   const newDatas = datas.filter((data) => data > 3);
   console.log(newDatas); // [5, 4]

8. Array.reduce((acc, cur) => {}, 초기값)

   • acc(accumulator) : 누산기. 결과 값을 해당 acc에 담아서 출력한다.
   • cur(current) : 현재 값
   • 초기값 : 숫자, 문자, 배열, 빈 객체 전부 넣을 수 있다. (생략도 가능)
   • reduce를 통해 map, filter, find 등 거의 모든 메서드를 구현할 수 있다.

     const datas = [1, 2, 3, 4, 5];
     const actResult = datas.reduce((acc, cur) => acc+cur); // 최종 결과값이 acrResult로 들어감
     console.log(actResult); // 15

+) 긍정/부정 의미

• 부정의 의미

  • undefined
  • null
  • 0
  • ''(빈 문자열)
  • false

• 긍정의 의미

  • 부정의 의미를 제외한 모든 것
  • 빈 배열과 빈 객체는 긍정의 의미를 가지고 있다

+) 백틱

• 키보드 왼쪽 TAB 버튼 위에 위치한 `` 이다.
• ""와 다르게 ENTER을 인식한다.
• 문자열과 변수를 같이 사용할 수 있다.
• 변수를 사용하는 경우 ${변수} 형태로 사용한다.