CallBack함수

다른 함수가 실행을 끝낸 뒤 실행되는 것을 "callback"함수라고 한다.
그래서 순차적으로 코드를 실행하고 싶을 때 사용한다.

forEach

forEach메서드는 배열을 순회하는 여러 방법 중 하나이다.
사용자는 각 작업들의 특징을 고려해 적합한 메서드를 사용하는 것이 올바른 사용법이다.

const numbers = [1,2,3,4,5,6];

// 기존 방식
for (i=0; i<numbers.length; i++){
	console.log(numbers[i])
}

// forEach방식
numbers.forEach(function(num){
	console.log(num);
}

forEach는 매개변수와 함께 각 요소에 적용하는 콜백함수를 전달한다.
1. CurrentValue : 처리할 현재요소
2. Index : 처리할 현재요소의 인덱스
3. Array : forEach메서드를 호출한 배열

Template literals

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴이다.
런타임 시점으로 자바스크립트 문자열로 처리/변환된다.
그래서 HTML을 데이터와 결합해 DOM을 다시 그려야 하는 일이 빈번하게 발생될 때 템플릿을 이용해 쉽게 편집하고 작성할 필요성이 있어 이러한 기능이 추가 되었다고 한다.

// 기존 출력방식
let a = 30;
let b = "JS"
let c = 5
let str = "안녕하세요."+(a+b)+"살입니다."+"b"를 좋아합니다.

// 리터럴을 이용한 출력방식
let a = 30;
let b = "JS"
let c = 5
let str = `안녕하세요 ${a+b}살이고 ${b}를 좋아합니다.`

이렇게 간결하게 문자열을 표현할 수 있다.
즉, 템플릿 리터럴을 이용한다면 코드의 가독성이 올라가는 것을 알 수 있다.

Map

Map은 forEach메서드와 같지만 하나 다른 점이 있다.
새로운 변수에 담아 주는 것이다.

• 예를들면

const text = ['lol','hi','happy']
const new = text.map(function (e) => {
	return e.toUpperCase()
}

이렇게 새로운 new라는 변수에 저장할 수 있다.
그래서 값 출력시
text -> 'lol','hi','happy'
new -> 'LOL','HI','HAPPY'

그래서 map을 사용하면 새로운변수에 하나씩 넣지 않아도 map함수를 이용해 바로 만들어 줄 수 있어 코드가 간결해진다.

Filter

배열의 요소를 하나씩 꺼내고, 함수를 실행해 '특정 조건'을 통과하는 요소를 모아 새로운 배열로 반환한다.
실생활에 사용되는 예로는 영화평점이나 오래된 아이템이나 새로운 아이템들을 가져올 때 사용이 된다.

const nums = [1,2,3,4,5,6,7,8]
const newNums = nums.filter(function(item) {
	return item > 3;
}

reduce

reduce함수는 배열의 각 요소를 순회하며 callback함수의 실행 값을 "누적"하여 하나의 결과값을 반환한다.
기본문법

const numbers = [1, 2, 3, 4];
numbers.reduce((누산값, 현재요소값, 현재요소의index, 현재배열) => {
  return 다음누산값;
}, 초기누산값);

accumulator == "누적되는 값"
currentValue == "현재값"
index == "현재 인덱스 (생략가능)"
array == "reduce호출한 함수 배열 (생략가능)"
initialValue == callback의 최초 호출시 accumulator 초기값

arr.reduce(callback(accumulator, currentValue, index, array), initialValue)