forEach()
함수를 인수로 받아들인다.
for..of 루프 등장 전까지 자주 쓰였다.
기본적으로 forEach()는 배열 안의 아이템 각각에 대해 함수와 코드를 한 번씩 실행한다. // 예시 1
//예시로 들었지만, forEach로 이미 정의된 함수를 전달하는 건 일반적이지 않다..
const nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
function print(element){
console.log(element);
}
nums.forEach(print); // 9, 8, 7, 6, 5, 4, 3, 2, 1 // 예시 2
// 일반적인 패턴으로 쓰인다. 순간만을 위해 존재하는 함수와 쓰인다.
const nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
nums.forEach(function (n) {
console.log(n * n);
// prints : 81, 64, 49, 36, 25, 16, 9, 4, 1
});Map()
콜백 함수를 수령해서 배열의 요소당 1번씩 실행한다는 점이 forEach()와 비슷하다.
forEach와 큰 차이점은 콜백의 반환 값을 이용해서 새로운 배열을 생성한다는 것이다.
즉, 배열을 다른 상태로 맵핑하는 것이다. // 예시
const text = [‘rofl’, ‘lol’, ‘omg’, ‘ttyle’];
const caps = text.map(function(t) {
return t.toUpperCase();
})
text; // [‘rofl’, ‘lol’, ‘omg’, ‘ttyle’]
caps; // [‘ROFL’, ‘LOL’, ‘OMG’, ‘TTYLE’] 원래 배열에 있던 데이터를 가져와서 Map을 통해 새로운 복제 배열에 넣을 때 보통 변환한다.
보통 데이터의 일부를 가져오거나 그걸 두 배로 늘린다거나 할 때 사용한다. Arrow Function
함수를 정의하는 최신 구문.
function 키워드 없이 함수를 입력할 수 있다.
하지만 화살표 함수 하나만 단독으로 사용할 수 없다. // 예시
const square = (x) => {
return x*x;
}Arrow Function - IMPLICT RETURN(암시적 반환)
// 아래의 함수는 모두 같다.
const isEven = function(num){ // 일반적인 함수 표현식
return num % 2 === 0;
}
const isEven = (num) => { // 화살표함수 표현식
return num % 2 === 0;
}
const isEven = num => { // 괄호 없는 화살표함수 표현식
return num % 2 === 0;
}
const isEven = num => ( // RETURN 없이 반환
num % 2 === 0
)
const isEven = num => num % 2 === 0; // 한 줄로 RETURN 없이 반환SetTimeout & setInterval
이 함수들에게는 콜백 함수들을 전달해줘야 하지만 배열메서드는 아닌 함수들이다.
이 함수들은 실행을 연기, 대기, 중단하고 기본적으로 추후 날짜로 작업 일정을 정한다.
setTimeout
두 가지를 전달해줘야 한다.
첫 번째는 콜백, 두 번째는 그 함수의 실행을 연기시킬 밀리 초의 숫자이다. 예시 1
setTimeout( ( ) => {
console.log(“Hello”)
}, 3000)
// 예시 1의 첫 번째 인수 : ( ) => {console.log(“Hello”)}
// 예시 1의 두 번째 인수 : 3000(밀리세컨드, 즉 3초를 의미) setInterval
전달할 함수를 호출하는데 콜백을 매 밀리초마다 호출하는 함수이다.
즉, 인터벌을 두고 작업을 반복한다. 예시 2
setInterval( () => {
console.log(Math.random());
}, 2000)
// 예시 2의 결과 = 매 2초마다 계속 Math.random() 실행 clearInterval
setInterval 함수를 멈출 때 사용하는 함수다.
setInterva 함수의 반환값을 저장하기만 하면 된다.
setInterval 함수는 설정해놓은 인터벌에 해당하는 id를 반환하기 때문에 이 id를 이용해서 중단하고 싶은 함수를 지정할 수 있다. // 예시 3
const id = setInterval( () => {
console.log(Math.random());
}, 2000)
id // 1
clearInterval(id); // setInterval 중단Filter
요소로 구성된 배열에서 필터링을 하거나 부분 집합을 모아 새 배열을 만드는 데 쓰인다. (원본 배열은 바꾸지 않는다.)
함수를 전달해서 참이나 거짓을 반환하고 지정된 요소에 대해 참이 반환되면 해당 요소는 필터링되어서 만들어진 새 배열에 추가가 된다. // 예시 1
const nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
const odds = nums.filter(n => {
return n % 2 === 1; // our callback returns true of false(나머지가 1이면 true)
// if it returns true, n is added to the filtered array
})
// [9, 7, 5, 3, 1] 예시 2
const nums = [9, 8, 7, 6, 5, 4, 3, 2, 1];
const smallNums = nums.filter(n => n < 5;);
// [4, 3, 2, 1] 예시 3
const movies = [
{
title : ‘기생충’
release : 2019
},
{
title : ‘귀멸의 칼날 : 무한열차’
release : 2021
},
{
title : 원티드
release : 2006
},
{
title : 태극기휘날리며
release : 2006
}
]
const recentMovie = movies.filter(movie => {
return movie.release > 2010;
})
recentMovie; // 기생충, 귀멸의 칼날
const recentMovie = movies.filter(m => {
return m.release > 2010;
})
recentMovie; // 기생충, 귀멸의 칼날
const recentMovie = movies.filter(m => m.release > 2010);
recentMovie; // 기생충, 귀멸의 칼날(배열로 제목과 개봉일 모두 나옴)
2010년 이후 영화 제목만 나열(filter로 만들어진 변수를 map으로 새 배열(제목만) 만든 것)
const recentMovieTitle = recentMovie.map(m => m.title);
// 기생충, 귀멸의 칼날(배열로 제목만 나옴)
// 위 과정을 한 번에
movies.filter(m => m.release > 2010).map(m => m.title);
// 한 번에 하는 과정에서 콜백함수가 너무 길 때 들여쓰기하기
movies
.filter(m => m.release > 2010)
.map(m => m.title); // 활용 : 실전문제 —> 10글자 미만 닉네임 생성
function validUserNames(usernames){
return usernames.filter(function(names){
if(names.length < 10){
return names;
}
})
}
// 한 줄로 가능
const validUserNames = user => (user.filter(names => names.length < 10));Some&Every Method
새 배열을 반환하는 filter, map과 달리 이 둘은 항상 참, 거짓만 반환한다.
테스트를 할때 쓰인다.
some : 하나라도, 일부가 조건에 부합하면 참 const words = [‘dog’, ‘jello’, ‘log’, ‘cupcake’, ‘bag’, ‘wag’];
words.some(word => {
return word.length > 4;
}) // true
words.some(word => word[0] === ‘z’); // false
words.some(w => w.includes(‘cake)); // true every : 전체가 조건에 부합하면 참 const words = [‘dog’, ‘dig’, ‘log’, ‘bag’, ‘wag’];
words.every(word => {
return word.length === 3;
}) // true
words.every(word => word[0] === ‘d’); // false
words.every(w => {
let last_letter = w[w.length - 1];
return last_letter === ‘g’;
}) // true // 활용 : 짝수 확인 (세 개 다 같은 뜻)
const allEvens = evens => (evens.every(num => (num%2===0)));
const allEvens = evens => (evens.every(num => num%2===0));
const allEvens = evens => evens.every(num => num%2===0);Reduce Method
배열을 가져다가 점차 줄여가면서 마지막에는 하나의 값만 남긴다.
Reduce는 자동적으로 배열 안에 있는 모든 요소를 처리하지 않기 때문에 그 방법은 우리에게 달렸다.
매개변수 1 = 기존값, 쌓이는 값
매개변수 2 = 거치는 값 // 예시 : for..of 사용 했을 때
const prices = [9.99, 1.50, 19.99, 49.99, 30.50]
let total = 0;
for(let price of prices){
total += price;
}
console.log(total); // 111.97 // 예시 : reduce 사용 했을 때
const money = prices.reduce((total, price) => {
return total + price; // 연산 후, total 자리로 들어감
})
money; // 111.97 // 예시 : 최소값 찾기
const minPrice = prices.reduce((min, price) => {
if(price < min){
return price; // 조건이 실행되면 현재값을 기존값으로.
}
return min; // if문을 거치지 못한 현재값을 패스하고 다시 기존값으로 돌아가 if문 실행
}) // 예시 : 최대값 찾기
const maxPrice = prices.reduce((max, price) => {
if(price > max){
return price;
}
return min;
})화살표함수와 this
일반 함수와 달리 화살표 함수에 this 키워드는 다르게 작동한다.
밑의 내용은 불확실성함. 자세한 확인 필요
화살표함수 안에 있는 this 키워드는 함수가 만든 범위에 상속되는 this 키워드와 같다. // 화살표 함수 내에 this키워드는 윈도우 객체를 가리킨다.
객체 {
키 : 화살표 함수 => return ${this}; // 윈도우 객체
} // 함수 내에 있는 화살표 함수 내의 this 키워드는 정상적인 객체를 가리킨다.
객체 {
키: 함수{화살표 함수 => return ${this};} // 정상적인 객체
}
99 ~ 100