JavaScript

[JS중급] JS배열 메서드(forEach, map, filter, find, some, every, reduce, sort, reverse, set)

염두리안 2024. 11. 19. 17:36
728x90
반응형
  • 배열 메소드 ① - forEach와 map : for of문처럼 각 요소를 살펴보면서 반복적인 행동 가능
    • map : 메서드 결과로 새로운 배열 리턴
    • forEach : 리턴값이 없기 때문에 변수에 담았을 때 항상 undefined
    • 따라서 배열의 단순 반복 작업은 forEach, 새로운 배열이 필요하다면 map을 사용
    • 최대 반복 횟수는 메서드 호출 당시 요소의 개수
const members = ['짱구', '맹구', '유리', '훈이'];

for(let member of members) {
	console.log(`${members}님이 입장하셨습니다.`);
}

// forEach
members.forEach(function (member) {
	console.log(`${member}님이 입장하셨습니다.`);
});
// forEach의 경우, 파라미터 추가 가능 (i == index, arr = array)
members.forEach(function (member, i) {
	console.log(`${i} ${member}님이 입장하셨습니다.`);
    console.log(arr); // (4) ['짱구', '맹구', '유리', '훈이']
});

// map
const lastNames = ['김', '이', '박', 최'];
members.map(function (member) {
	console.log(`${member}님이 입장하셨습니다.`);
});
// 응용
const fullNames = members.map((member, i) => {
	return lastNames[i] + members;
});
console.log(fullNames); // ["김짱구, "이맹구", "박유리", "최훈이"]
  • 배열 메서드 ② - filter와 find : ①처럼 각 요소를 살펴보면서 반복적인 행동 가능
    • filter : 조건에 맞는 요소들만 추림 | 항상 리턴값이 배열
    • find : 리턴값은 값 | 만족하는 값 하나만 찾음(앞에 있는 요소를 먼저 리턴) | 존재하지 않는 값을 찾으면 undefined 리턴
// filter (map과 유사.. but, 리턴값으로 T/F 반환)
const devices = [
  {name: 'galaxyNote', brand: 'Samsung'},
  {name: 'galaxy23', brand: 'Samsung'},
  {name: 'ipad', brand: 'Apple'},
  {name: 'iphone14', brand: 'Apple'},
  {name: 'ipad-mini', brand: 'Apple'},
]
const apples = devices.filter((el) => el.brand === 'Apple');
console.log(apples);
>> (3) [{…}, {…}, {…}
>> 0: {name: 'ipad', brand: 'Apple'}
>> 1: {name: 'iphone14', brand: 'Apple'}
>> 2: {name: 'ipad-mini', brand: 'Apple'}
>> length: 3 [[Prototype]]: Array(0)

// 배열 벗겨내기
const galaxy = devices.filter((el) => el.brand === 'Samsung');
console.log(...galaxy)
>> {name: 'galaxyNote', brand: 'Samsung'} {name: 'galaxy23', brand: 'Samsung'}
// 아니면 find() 사용
const samsung = devices.find((el) => el.brand === 'Samsung');
console.log(samsung)
>> {name: 'galaxyNote', brand: 'Samsung'}
  • 배열 메서드 ③ - some과 every
    • some : 조건을 만족하는 요소가 1개 이상 있는지 | 조건을 맞는 요소를 찾는 즉시 반복 종료 | 빈배열인 경우, 반복하기도 전에 false 리턴
    • every : 모든 요소가 조건을 만족하는지 | 조건을 만족하지 않는 요소를 찾는 순간 반복 종료 | 빈배열인 경우, 반복하기도 전에 true 리턴
const number - [1, 3, 5, 7, 9];

// some
const someReturn = numbers.some((el) => el > 5);

// every
const everyReturn = numbers.every((el) => el > 5);

console.log('some:', someReturn); // some: true
console.log('every:', everyReturn); // every: false
  • 배열 메서드 ④ - reduce
const numbers = [1, 2, 3, 4].

// reduce 콜백함수 원형
// acc: 누산기 | 직전에 동작한 콜백함수가 리턴한 값을 받는 파라미터
// el: 배열 요소 전달, i: 인덱스 전달, arr: 메서드를 호출한 배열 전달
numbers.reduce((acc, el, i, arr) => {
	// 다음 콜백 함수의 Accumulator를 전달할 값을 리턴
    // 최종적으로 마지막으로 실행되는 콜백함수의 리턴값 = reduce메서드의 최종 리턴값
	return nextAccValue;
}, initialAccValue); // 첫번째 콜백함수가 동작할 때 acc의 값을 reduce메서드의 두번째 아규먼트로 전달

// reduce 예시
const numbers = [1, 2, 3, 4];
const sumAll = numbers.reduce((acc, el, i) => {
  console.log(`${i}번 index의 요소로 콜백함수가 동작중입니다.`);
  console.log('acc:', acc);
  console.log('el:', el);
  console.log('-----------');

  return acc + el;
}, 0);
console.log('sumAll:', sumAll);

 

reduce 예시 결과

  • sort : 배열 정렬 | 아무 아규먼트도 전달하지 않으면 유니코드 정의된 문자열 순서에 따라 정렬 | 메서드를 실행하는 원본 배열의 요소들을 정렬함... 정렬하고 나면 원래 순서로 되돌릴 수 없음
const letters = ['D', 'C', 'E', 'B', 'A'];
const numbers = [1, 10, 4, 21, 36000];

letters.sort();
numbers.sort();

console.log(letters); // (5) ["A", "B", "C", "D", "E"]
console.log(numbers); // (5) [1, 10, 21, 36000, 4]

// 오름차순&내림차순
const numbers = [1, 10, 4, 21, 36000];

// 오름차순 정렬
numbers.sort((a, b) => a - b);
console.log(numbers); // (5) [1, 4, 10, 21, 36000]

// 내림차순 정렬
numbers.sort((a, b) => b - a);
console.log(numbers); // (5) [36000, 21, 10, 4, 1]
  • reverse : 배열 순서 뒤집기 | 메서드를 실행하는 원본 배열의 요소들을 정렬함... 정렬하고 나면 원래 순서로 되돌릴 수 없음 
const letters = ['a', 'c', 'b'];
const numbers = [421, 721, 353];

letters.reverse();
numbers.reverse();

console.log(letters); // (3) ["b", "c", "a"]
console.log(numbers); // (3) [353, 721, 421]
  • map과 set
    • map : 이름 있는 데이터를 저장한다는 점에서 객체와 비슷 | 할당연산자를 통해 값을 추가하고, 점&대괄호 표기법으로 접근하는 일반 객체와 다르게 map은 메서드를 통해 값 추가, 접근 가능 => new 키워드 사용
    • set : 여러 개의 값을 순서대로 저장... 배열과 비슷 | new 키워드로 set 생성 가능 | 개별 값에 바로 접근하는 방법 X(map의 경우 index 사용) | 중복 허용 X → 중복을 허용하지 않는 값들을 모을 때 유용
// Map 생성
const code = new Map();

// set(key, value) : key를 이용해 value 추가
code.set('title', '문자열 key');
code.set(2017, '숫자형 key');
code.set(true, '불린형 key');

// get(key) : key에 해당하는 값을 얻는 메서드 | 존재 안하면 undefined
console.log(code.get(2017)); // 숫자형 key
console.log(code.get(true)); // 불린형 key
console.log(code.get('title')); // 문자열 key

// has(key) : key 존재하면 true, 존재 않으면 false 리턴
console.log(code.has('title')); // true
console.log(code.has('name')); // false

// size : 요소 개수를 반환하는 프로퍼티
console.log(code.size); // 3

// delete(key) : key에 해당하는 값을 삭제하는 메서드
code.delete(true);
console.log(code.get(true)); // undefined
console.log(code.size); // 2

// clear() : map 나의 모든 요소를 제거하는 메서드
code.clear();
console.log(code.get(2017)); // undefined
console.log(code.size); // 0
// Set 생성
const members = new Set();

// add(value): 값을 추가(메서드를 호출한 자리엔 추가된 값을 가진 set 자신 반환)
members.add('영훈'); // Set(1) {"영훈"}
members.add('윤수'); // Set(2) {"영훈", "윤수"}
members.add('동욱'); // Set(3) {"영훈", "윤수", "동욱"}
members.add('태호'); // Set(4) {"영훈", "윤수", "동욱", "태호"}

// has(value): set안에 값 존재시 true, 아니면 false
console.log(members.has('동욱')); // true
console.log(members.has('현승')); // false

// size 프로퍼티
console.log(members.size); // 4

// delete(value): 값 제거(메서드 호출한 자리엔 set 내 값이 있어서 제거 성공시 true, 아님 false 반환)
members.delete('종훈'); // false
console.log(members.size); // 4
members.delete('태호'); // true
console.log(members.size); // 3

// clear()
members.clear();
console.log(members.size); // 0

// 중복허용 X
const numbers = [1, 3, 4, 3, 3, 3, 2, 1, 1, 1, 5, 5, 3, 2, 1, 4];
const uniqNumbers = new Set(numbers);
console.log(uniqNumbers); // Set(5) {1, 3, 4, 2, 5}
728x90
반응형