오늘 뭐했냐/개발에 대한 주저리

배열(콜백함수o)

스스로에게 2023. 5. 23. 20:46
  • forEach, map, filter, find
  • 콜백 함수 : 매개변수 자리에 함수를 넣는 것
//forEach, map, filter, find
// 콜백 함수 : 매개변수 자리에 함수를 넣는 것

let numbers = [1, 2, 3 ,4 , 5]

// 1. forEach
// 배열의 요소가 순차적으로 매개변수에 전달되어 콜백함수를 반복 실행한다
numbers.forEach(function(item){
    console.log("item입니다 =>", item);
});

// 2. map
// 배열의 요소가 순차적으로 매개변수에 전달되어 콜백함수를 반복 실행해  
// return값으로 새로운 배열을 생성한다
// 반드시 retuen이 들어가야한다
let newNumbers = numbers.map(function(item){
    return item * 2;
});
console.log(newNumbers);

let mapTest1 = numbers.map(function(item){
}); // return이 없는 경우 numbers의 갯수만큼 return이 되어 새로운 배열을 생성한다

console.log("return이 없는 경우:", mapTest1); 
// numbers와 길이가 같은 비어있는 배열이 만들어진다

let mapTest2 = numbers.map(function(item){
    return 10
}); 
console.log("return값이 고정된 경우:", mapTest2); 
// 배열의 길이만큼 return값으로 새로운 배열을 만든다

// 3.filter
// 배열의 요소가 순차적으로 매개변수에 전달되어 콜백함수를 반복 실행해  
// return이 true인 요소의 값만을 뽑아서 새로운 배열을 생성한다

let newNumbers2 = numbers.filter(function(item){
    return item > 2;
}); // return값이 없다면 빈 배열을 만든다
console.log(newNumbers2);

// 4. find
// 배열의 요소가 순차적으로 매개변수에 전달되어 콜백함수를 반복 실행해 
// return이 처음 true인 요소의 값만을 반환한다
// 모두 false인 경우 undefine을 반환한다
let newNumbers3 = numbers.find(function(item){
    return item > 2;
});
console.log(newNumbers3);

아직은 콜백함수가 뭔지 어떻게 작동하는지 헷갈리지만 나중에 다시 배운다고 하니 이런 게 있다는 것만 알고 있자

'오늘 뭐했냐 > 개발에 대한 주저리' 카테고리의 다른 글

es6(1) - 구조분해할당(destructuring)  (0) 2023.05.24
for문  (0) 2023.05.23
배열(콜백함수x)  (0) 2023.05.23
객체(초반 정리)  (0) 2023.05.23
조건문 응용  (0) 2023.05.23