[JS] 배열과 관련된 메소드

1. forEach 와 map

배열 메소드
인수로 콜백 함수를 받는다.

const members = ['철수', '영희', '미선', '영수'];

1-1. forEach
members.forEach(function (member) {
  console.log(`${member}님이 입장하셨습니다.`);
});

* 두번째 파라미터로 index 접근, 세번째 파리미터로 반복 중인 배열 자체에 접근한다.
** 세번째 파라미터의 반복 중인 배열은 굳이 왜 필요한가 생각할 수도 있지만, 변수로 선언되지않은 배열에서 사용 가능하다.
ex) [1,2,3].forEach( .......);  // 자주 사용되지는 않다.


1-2. map
const newArr = members.map(function (member) {
  /* console.log(`${member}님이 입장하셨습니다.`); */ 
  return member+' 회원님';
});

forEach와 동작은 비슷하다.
* 차이점은 콜백 함수 내에서 나온 값으로 새로운 배열을 반환한다.
** return 값;  으로 각각의 값으로 구성된 새로운 배열이 생긴다. >> 표현식이라는 이야기

console.log(newArr); 

결과값 >>> [ '철수 회원님', '영희 회원님', '미선 회원님', '영수 회원님' ]

** forEach, map 메소드의 반복횟수는 배열이 더 늘어나도 최초의 크기까지이고, 줄게 되면 반복횟수도 줄어든다.


2. filter와 find
해당 배열에서 조건을 검증해서 반환하는 메소드

2-1. filter
예문)
const newArr = arr.filter( (parameter) => parameter.property === 'word' );
해당 조건을 만족하는 모든 요소를 찾아 '배열'로 반환한다.

2-2. find
filter만 find로 바꿔준다
해당 조건을 만족하는 가장 첫번째 요소를 '값'으로 반환한다.
조건을 만족하지 못하면 undefined로 반환한다.


3. some과 every
해당 배열에서 조건을 만족하는지를 확인해 불린 값으로 반환하는 메소드

arr.some( (el) => 조건 );
3-3. some 하나라도 만족하면 true
3-4. every 모두 만족해야 true

* 검사하는 배열이 빈 배열이라면 some은 false, every는 true를 반환한다.


4. reduce

const numbers = [1,2,3,4];

numbers.reduce( (acc, el, i, arr) => {
  return nextAccValue;
}, initialAccValue);

콜백함수가 동작할 때 직전에 동작한 콜백 함수가 리턴한 값을 acc(누산기)에 전달 받는 파라미터
마지막에 실행되는 콜백함수의 리턴값이 최종 리턴값이 된다.
최초실행 시 적용할 리턴값이 없으므로 사용자가 최초의 accumualtor의 값을 initialAccValue에 전달받는다.

* initialAccValue는 생략을 하더라도 에러가 발생하지 않고 첫번째 인덱스의 값을 그대로 전달한다. 
  하지만 첫번째 인덱스의 동작을 생략한 과정이라 의도하지 않는 한 값을 주는게 좋다.


5. sort 메소드
기본적으로 배열의 문자열을 유니코드의 순서에 따라 정렬한다.

 

숫자는?
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]

MDN 문서를 참고할 예정

* 새로운 배열을 반환하는 것이 아닌 자기자신의 순서를 바꾼다.


6. reverse 메소드

배열의 순서를 뒤집는 메소드
* sort와 마찬가지로 원본 배열의 순서를 뒤집는다.



7. map객체와 set객체

7-1. new 키워드를 통해서 Map을 만들 수 있다.
const newMap = new Map();

map.set(key, value): key를 이용해 value를 추가하는 메소드.
map.get(key): key에 해당하는 값을 얻는 메소드. key가 존재하지 않으면 undefined를 반환.
map.has(key): key가 존재하면 true, 존재하지 않으면 false를 반환하는 메소드.
map.delete(key): key에 해당하는 값을 삭제하는 메소드.
map.clear(): Map 안의 모든 요소를 제거하는 메소드.
map.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)


7-2. Set도 Map과 마찬가지로 new 키워드를 사용한다.
const newSet = new Set();

set.add(value): 값을 추가하는 메소드. (메소드를 호출한 자리에는 추가된 값을 가진 Set 자신을 반환.)
set.has(value): Set 안에 값이 존재하면 true, 아니면 false를 반환하는 메소드.
set.delete(value): 값을 제거하는 메소드. (메소드를 호출한 자리에는 셋 내에 값이 있어서 제거에 성공하면 true, 아니면 false를 반환.)
set.clear(): Set 안의 모든 요소를 제거하는 메소드.
set.size: 요소의 개수를 반환하는 프로퍼티. (메소드가 아닌 점 주의! 배열의 length 프로퍼티와 같은 역할)

* Set은 개별 값에 바로 접근하는 방법이 없다. for of 를 통해 접근가능
** 중복된 값을 허용하지 않는다.