웹개발 복습 정리 17 : forEach, map, filter, reduce, arrow function

Kimhojin_Zeno·2023년 1월 6일

Map SOME arrow function every filter foreach reduce

웹개발 복습 정리

목록 보기

17/30

섹션 22 : map, filter

forEach
map
filter
find
reduce
some
every
arrow function

함수를 넣어야 하는 배열 메서드.

forEach

콜백함수: 다른 함수에 매개변수로 넘겨준 함수.

매개변수로 넘겨받은 함수는 때가 되면 나중에 호출(called back)한다는 개념.

forEach는 콜백 함수를 받아 배열의 각 요소들을 그 함수에 넣어 실행한다.

배열.forEach(콜백함수)

const nuns = [9, 8, 7];

nums.forEach(function (n) {
	console.log(n * n)
	//prints: 81, 64, 49
});

Map

map은 콜백함수를 수령해서 배열의 요소당 한번씩 실행하고 그 결과를 새로운 배열로 만들어서 리턴한다.

Creats a new array with the results of calling a callback on every element in the array

forEach와 비슷하지만 콜백의 반환값을 새로운 배열로 만든다는 차이점이 있다.

즉 Map은 배열을 다른 상태로 매핑하는 것이다.

원래 배열 → 각 요소를 콜백함수에 넣고 돌림 → 새로운 배열 리턴.

const texts = ['lol', 'omg']
const caps = texts.map(function (t) {
		return t.toUpperCase();
})
texts; // ['lol', 'omg']
caps; // ['LOL', 'OMG']

원래 배열은 원래 그대로 남아있다. 새로운 배열이 만들어지는 것이다.

Arrow Functions

화살표 함수는 함수를 정의하는 최신 구문이다.

익스플로러에서는 실행되지 않음.

간결하게 적을 수 있다.

const square = (x) => {
	return x * x;
}

더 간략하게 쓸수도 있다. ‘암시적 반환’이란 것이다. implicit return

const isEven = function (num) {  
	return num % 2 === 0;
} //regular function expression 정규표현식

const isEven = (num) => {
	return num % 2 === 0;
} //arrow function with parens around param

const isEven = num => {
	return num % 2 === 0;
} //arrow function no parens around param

const isEven = num => {
	num % 2 === 0;
} //arrow function implicit return

const isEven = num => num % 2 === 0;
// one-liner implicit return

소괄호와 return도 생략한다. 암시적 반환에서는.

극단적으로 중괄호도 지워서 한줄로 쓸수도 있다. 매우 간략해짐.

단 인수가 하나일때 소괄호를 지우는게 가능하고 두개 이상이거나 인수가 없다면 ()소괄호를 써줘야한다.

화살표 함수와 암시적 반환은 간결하게 코드를 쓸수 있어서 유용하다. 그러나 모든 경우에 쓸 수 있는 것은 아니다.

화살표 함수는 forEach와 map등과 주로 같이 쓴다. 더 간결하게 쓸 수 있다.

const newMovies = movies.map(function (movie) {
	return movie.title
})

이렇게 쓰던걸

const newMovies = movies.map(movie => movie.title)

이렇게 쓸 수 있다.

setTimeout, setInterval

이 함수들에는 콜백함수를 전달해줘야만 배열 메서드는 아니다.

실행을 연기해서 딜레이를 주고 실행하거나, 특정 시간마다 반복해서 실행할수 있게 해준다.

setTimeout(() => {
	console.log("hello!")
}, 3000)

//3초 후에 "hello!"가 뜬다.

setInterval을 쓰면 반복할수 있다.

const id = setInterval(() => {
	console.log("hello!")
}, 2000)

//2초 후에 "hello!"가 뜨고 그 후 2초마다 또 뜬다.

clearInterval(id)이라고 호출하면 반복이 멈춘다.

Filter

배열.filter(콜백함수)

콜백함수를 만족하는 요소들만 모아서 새로운 배열로 리턴한다.

creats a new arrays with all elements that pass the test implemented by the provided function.

const nums = [9, 8, 7, 6, 5, 4]
const odds = nums.filter(n => {
	return n % 2 === 1;
	//callback returns true or false
	//if it returns true, n is added to the filtered array
})
// [9, 7, 5]

원본 nums는 바뀌지 않음.

콜백함수는 불리언 함수. 요소들은 그 콜백함수에 true or false로 나뉜다.

주어진 배열에서 특정 값보다 높은 것들만 추려내거나, 하는 등 작업을 할 수 있다.

복잡한 객체들로 되어 있는 배열을 map으로 원하는 정보로 변환한뒤 filter로 추려내는 등의 작업이 가능하다.

Every & Some

둘다 true 나 false를 반환한다.

배열.every(콜백함수)

every는 배열의 모든 요소가 콜백함수를 만족해야 true.

배열.some(콜백함수)

some은 배열의 요소 중 하나만 만족하면 true.

const words = ['dog', 'cat']

words.every(word => word.length === 3) //true

words.every(word => word[0] === 'd') //false

words.some(word => word[0] === 'd') //true

Reduce

reduce:

1. 동사 (규모·크기·양 등을) 줄이다[축소하다], (가격 등을) 낮추다[할인/인하하다]
1. 동사 (음식 등을 끓일 때 국물을) 줄이다[졸이다], (국물이) 줄어들다[졸다]

배열을 받아서 조건대로 하나의 값으로 만든다.

executes a reducer function on each element of the array, resulting in a single value.

전체 배열을 훑으면서 가장 작은 값, 가장 큰 값 등을 찾아낼 수 있다. 또는 각 요소를 더해서 하나의 값으로 만들수도 있다.

배열의 요소를 전부 더하는 reduce.

array.reduce((accumulator, currentValue) ⇒ {
	return accumulator + currentValue;
})

accumulator는 축적된 값이다. 따로 주어지지 않으면 처음엔 없음.

currentValue는 배열의 요소를 처음부터 훑는다. 위 함수에선 배열의 첫번째 값과 두번재값을 더해서 accumulator에 들어가고, 그 다음 세번째 요소가 currentValue자리에 가고… 반복된다.

배열의 요소 중 가장 작은 값을 찾는 reduce

const minPrice = prices.reduce((min, price) => {
	if(price < min) {
		return price;
	}
	return min;
})

핵심은 하나의 값만 남는다는 것이다.

array.reduce((sum, num) => sum + num, 100)

콜백함수 뒤에 , 쉼표 뒤 특정값을 주면 맨 처음 accumulator값으로 된다.

화살표 함수에서 this

화살표 함수를 쓸때 this를 쓰면 매우 까다롭다. 어떨때는 작동하고 어떨때는 다르게 실행됨.

const person = {
		firstName: 'Viggo',
		lastName: 'Mortensen',
		fullName: function () {
				return `${this.firstName} ${this.lastName}`
		}
}

person.fullName(); // "Viggo Mortensen"

fullName을 화살표 함수로 고치면

const person = {
		firstName: 'Viggo',
		lastName: 'Mortensen',
		fullName: () => {
				return `${this.firstName} ${this.lastName}`
		}
}

person.fullName(); // "undefined undefined"

화살표 함수 안에 this 키워드는 함수가 만든 범위를 가리키게 된다.

즉 this키워드가 window객체를 가리키는 것이다.

화살표 함수를 쓰지 않았을 땐 this키워드는 함수가 만든 범위와 아무 관련없고 함수를 실행하는 방법과 관련이 있다.

화살표 함수를 쓰면서 this를 쓰면 다르게 작동한다는 것을 기억하라.

const person = {
		firstName: 'Viggo',
		lastName: 'Mortensen',
		fullName: function () {
				return `${this.firstName} ${this.lastName}`
		}
		shoutName: function () {
				setTimeout(function () {
						console.log(this);
						console.log(this.fullName())
				}, 3000)
		}
}

person.shoutName(); // Window
// error. this.fullName is not a function

setTimeout 안에 있는 this는 window객체를 가리킨다. 화살표 함수가 아니기 때문에 실행 컨텍스트와 관련이 있는 것이다.

setTimeout은 window객체의 메서드다. 즉 this는 window객체를 가리킨다. 그래서 오류가 난다.

const person = {
		firstName: 'Viggo',
		lastName: 'Mortensen',
		fullName: function () {
				return `${this.firstName} ${this.lastName}`
		}
		shoutName: function () {
				setTimeout(() => {
						console.log(this);
						console.log(this.fullName())
				}, 3000)
		}
}

person.shoutName(); // person
// "Viggo Mortensen"

setTimeout안에 함수를 화살표 함수로 바꾸면 정상 작동한다.

화살표 함수 안에 있는 this 키워드는 함수가 만든 범위에 상속되는 this 키워드 값과 같다.

즉 this키워드가 함수안 this키워드와 같다는 말이다.

헷갈리는 내용이다. 일반 함수와 달리 화살표 함수에서 this는 다르게 동작한다.

정리

forEach : 배열의 각 요소들을 콜백함수에 넣어 실행한다.
map : 배열의 각 요소를 콜백함수에 넣어 실행하고 그 결과를 새로운 배열로 만들어서 리턴한다.
filter : 콜백함수를 만족하는 요소들만 모아서 새로운 배열로 리턴한다. 체에 거른다.
reduce : 배열을 받아서 조건대로 하나의 값을 리턴한다.

forEach는 각각 실행

map은 전부 돌려서 새로운 배열로

filter는 조건 맞는것만 새로운 배열로

reduce는 하나의 값으로 졸인다.

Kimhojin_Zeno

Developer

이전 포스트

웹개발 복습 정리16 : Scope, 고차함수, this, try catch

다음 포스트

웹개발 복습 정리 17 : forEach, map, filter, reduce, arrow function