rhanziy

js. array의 forEach(), filter(), Set() 함수 본문

Html_css_js

js. array의 forEach(), filter(), Set() 함수

rhanziy 2022. 2. 6. 23:41
  • array.forEach는 받아온 array를 for 반복문 없이 item(element) 하나씩 function에 넣을 수 있는 함수
arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])


다음 세 가지 매개변수를 받는다.
element - 처리할 현재 요소.  index(Optional) - 처리할 현재 요소의 인덱스.  array(Optional) - filter를 호출한 배열.

const arr = ["pizza", "hamburger", "chicken"];

arr.forEach((food)=> console.log(food));


배열안의 element 하나하나를 food라는 이름으로 정의하고 콘솔을 찍은 결과값

pizza

hamburger

chicken

forEach를 사용하면 배열의 리스트를 만들기도 쉽다.
function showList( ) { } 함수 정의 후
arr.forEach(showList); ... 이런식으로

map( ) 함수와 유사하지만 return값의 유무와 기존 배열에 영향을 미치냐/마냐의 차이이다.

map( ) forEach( )
새로운 배열 생성 기존 배열을 바꿈
return을 반환 return값 반환 X

  • array.filter( )는 filter조건에 맞는 배열의 element값을 새로운 배열로 반환하는 함수. 조건이 맞지 않으면 빈 배열을 반환한다.
arr.filter(callback(element[, index[, array]])[, thisArg])


다음 세 가지 매개변수를 받는다.
element - 처리할 현재 요소.  index(Optional) - 처리할 현재 요소의 인덱스.  array(Optional) - filter를 호출한 배열.

const newArr = arr.filter((food)=> food !== "chicken");  // true면 return, false면 걸러짐.
console.log(newArr);

pizza

hamburger

  • Set은 ES6에서 등장한 중복을 제거한 값들의 집합이다. 중복이 허용되지 않는 객체이며, 안에 이미 같은 값이 존재한다면 추가되지 않는다.  
  const array = [1, 2, 3, 4, 1, 2, 3];
  const del = Array.from(new Set(array));
  console.log(del) = [1, 2, 3, 4]


+ Set 객체 사용법

let x = new Set([1, 2, 3, 4, 5]);
//Set(5) {1, 2, 3, 4, 5}
x.add(6);
//Set(6) {1, 2, 3, 4, 5, 6}

x.add(6); // 값이 존재하기 때문에 추가 안됨
//Set(6) {1, 2, 3, 4, 5, 6}

x.delete(1);
//Set(5) {2, 3, 4, 5, 6}

x.has(2);
//true

x.clear();
//Set(0) {}

x.size;
// 0


add는 중복된 값이 없을 경우에 값을 추가한다.

delete는 값을 삭제한다.
has는 값이 존재하는 지 확인해준다.
clear는 Set 내부의 모든 값을 삭제한다.
size는 값의 수를 확인해준다.(length역할)

Comments