32. 배열과 메서드 - 3

Chipmunk_jeong·2021년 3월 11일
0

TIL

목록 보기
32/62
post-thumbnail

filter

filterfind와 다르게 한개가 아닌 여러개의 요소를 찾아 새로운 배열로 반환하는 메서드 이다.

let arr = [1, 2, 3, 4, 5, 6];

let result = arr.filter((item, index, array) => {
	item % 2 === 0;
});
console.log(result); // [2, 4, 6]

매개변수로 받는 함수를 실행하여 해당 요소가 참이 나올경우 새로운 배열에 추가하여 반환한다.

map

map은 사용빈도가 매우 높은 메서드 중 하나이다.
map은 어떠한 로직(함수)를 모든 요소에게 적용하여,
적용된 요소를 가지는 새로운 배열을 반환한다.

let arr = [1, 2, 3, 4];

let result = arr.map((item, index array) => {
  return item * 2;
});

console.log(arr); // [1, 2, 3, 4]
console.log(result); // [2, 4, 6, 8]

reduce와 reduceRight

배열내 요소를 대상으로 반복작업을 하기 위해서는 forEach, for..of, for를 사용하면 된다.
반복작업을 하고 새로운 배열을 리턴하기 위해서는 map을 사용한다.
만약에 배열의 요소를 어떠한 로직을 통해 누적이 필요할 때 사용할수 있는 기능이 있다.
그것은 reduce이다.
배열의 모든 요소의 합을 구하거나, 모든곱을 구하는것처럼 배열의 요소를 이용해 누적값을 얻고자 할 때 사용한다.

let arr = [1, 2, 3, 4, 5];

let result = arr.reduce((acc, cur, idx, arr) => {
  acc + cur;
});

console.log(result); // 15;

reduce는 매개변수로는 콜백함수를 받고, 옵셔널로 누적되는 값의 초기값을 정해줄수 있는 값을 하나 받을 수 있다.

그리고 콜백함수를 전달할때 해당 함수는 4가지 매개변수를 받을 수 있는데, 처음부터 누적값, 현재요소, 현재요소의 인덱스, 배열을 입력받는다. 그리고 함수가 리턴한 값은 누적값에 저장된다.


sort 메서드

배열의 요소를 정렬할 때 sort메서드를 사용한다.
sort메서드는 mutable이기 때문에 원본 배열을 변형시킨다.
물론 반환값이 존재하며, 반환값으로는 정렬된 새로운 배열을 리턴한다. 즉, 원본과 리턴되는 새로운 배열은 서로 같은 값을 가진다.

let arr = ['c', 'e', 'a', 'd', 'b'];
let result = arr.sort();

console.log(arr); // ['a', 'b', 'c', 'd', 'e'];
console.log(result); // ['a', 'b', 'c', 'd', 'e'];

위와 같이 오름차순으로 정렬되는것을 볼 수 있다.
여기서 number타입을 정렬할 때는 특이점이 있는데,

let arr = [13, 4, 7, 22, 9];

arr.sort();
console.log(arr)' // [13, 22, 4, 7, 9];

위처럼 이상하게 정렬이 되어서 나온다.
이런일이 생기는 이유는 바로 문자열로 변경되어 정렬이 되기 때문이다.

그렇다면 숫자를 정렬하기 위해서는 무엇을 해야하느냐...
매개변수로 함수를 넘겨주면된다.
함수를 넘겨줄때 매개변수와 리턴값이 어느정도 규칙을 가지는데

function callback(a, b) {
  if(a > b) return 1; // 첫번째 값이 두번째 값보다 큰 경우
  if(a == b) return 0; // 두값이 같을 경우
  if(a < b) return -1; // 첫번째 값이 두번째 값보다 작은 경우
}

위의 함수를 매개변수로 넣어주게된다면 오름차순이 되는 배열을 구할 수 있다. 반대로 내림차순을 하기위해서는 리턴값을 뒤집어 주면 된다.


reverse 메서드

배열의 요소를 뒤집어주는 메서드이다.

let arr = [1, 2, 3];
arr.reverse();
console.log(arr); // [3, 2, 1];

split과 join 메서드

어떤 문자를 담고있는 변수가 있다고 가정하자.
그리고 이 문자에는 어떠한 규칙이 있는데,
일정 구간마다 ,가 있다고 가정한다면, 우리는 이 ,를 이용해서 문자를 배열로 나누어줄 수 있다.
이 때 사용하는 메서드는 split이다.

let str = 'hello, my, name is, quakka';

let arr = str.split(', ');
console.log(arr); // ['hello', 'my', 'name is', 'quakka']

반대로 배열의 요소들을 이어 하나의 문자열로 합치고 싶을 때가 있다.
이때는 join메서드를 사용하여 붙인다.

let arr = ['one', 'two', 'three', 'four'];
let result = arr.join(' ');
console.log(result); // 'one two three four'

매개변수에 공백을 넣어줌으로써 요소들 사이에 공백을 하나씩 주면서 문자열로 이어붙인다.


typeof [] === Array ???

보통 어떠한 데이터의 타입을 알기위해서typeof연산자를 이용한다.
하지만 배열은 크게보면 객체이다. 그래서 typeof를 이용한 결과값도 object가 나온다.
그렇다면 배열인지 판별하기위해 어떻게 해야하냐?
배열의 메서드를 사용하면 되는데 Array.isArray(배열)을 했을 때
해당 매개변수가 배열이면 true 아니면 false를 반환한다.

profile
Web Developer

0개의 댓글