JS remind.네번째.Array

@glassestae·2020년 2월 27일
0

JS remind.

목록 보기
4/6

Array 배열

JS에서 배열은 리스트 형태를 한 객체이다.
다시 한번 적고 넘어가면 객체,배열,함수 세가지 모두다 객체이다.!
그래서 typeof 연산자에서 [1]은 'object'로 나온다.
이 점 유의하고 메소드를 살펴보자!

Array.isArray():위의 문제의 해결책인 메소드로 전달인자가 배열인지 판단한다.
전달인자가 배열이라면 true, 아니라면 false값을 반환한다.

forEach vs map

Array.prototype.forEach(callback):주어진 함수를 배열의 요소 각각에 실행시킨다.
Array.prototype.map(callbakc):forEach 메소드와 비슷하게 주어진 함수를 배열의
요소 각각에 실행시키지만 중요한 차이점이 있다.!

근본적으로 forEach 메소드는 호출한 배열 자체에서 함수를 실행시키고 아무것도 반환하지 않않는다. 그러나 map 메소드는 호출한 배열과 똑같은 배열을 복사하여 함수를 실행시키고 그 배열을 반환한다.

forEach는 원본 배열에 영향을 끼칠 우려가 있고
map은 원본 배열을 매핑한 새로운 배열을 다루기 때문에 원본 배열에 영향을 끼치지 않는다는 것!
스택오버플로우에 두 메소드의 사용예시에 대한 답변글 중에 제일 이해가 잘된 문장이다.

새로운 배열을 반환하지 않아도 되는 경우에는 map을 쓰는 것이 불필요하니
덜 메모리를 잡아먹는(?) forEach를 쓰는 것이 좋고, 아닌 경우에는 안전한 map을
사용하는 융통성을 발휘하라

filter

Array.prototype.filter(callback): 주어진 함수의 테스트를 통과하는 배열의 요소들을 모아 새로운 배열로 반환한다.

let arr = [1,2,3,4]
function isEven(x){
	return x % 2 === 0;
}

let evenArr = arr.filter(isEven(value))
evenArr  //[2,4]

이런 식으로 사용하거나 아래처럼 화살표 함수를 사용하여 더 간단하게도 사용할수 있다.

let arr = [1,2,3]
let oddArr= arr.filter((value)=>{
		return value %  2 === 1
});

oddArr // [1,3]

reduce

Array.prototype.reduce(callback):호출한 배열에 주어진 리듀서 함수를 실행하고 하나의 결과 값을 반환한다.
reduce 메소드는 처음 쓸때 이해가 안갔지만 몇번 써보니 이해가 간다.

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

let sumArr = arr.reduce(function(accumulator,currentValue){
	return  accumulator + currentValue;
})

sumArr //10

리듀서 함수의 인자는 4개로 accumulator(누산기),currentValue(처리할 현재요소),currentIndex(처리할 현재 요소의 인덱스),Array(리듀서 함수를 호출한 원래 배열)이다.

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

let oneArr = arr.reduce((acc,cur) => {
    return acc.concat(cur)
});

oneArr

이런 식으로 중첩 배열을 flat하게 펼치는데도 사용할 수 있다.

concat

Array.prototype.concat():호출한 배열에 인자로 전달된 값이나 배열을 합쳐 새로운 배열을 반환한다.
이건 위의 reduce 메소드에서 보여준 방법으로 사용할 수 있다.

pop,push,shift,unshift

Array.prototype.pop():호출한 배열의 마지막 요소를 제거하고 그 요소를 반환한다.
Array.prototype.push():호출한 배열의 끝에 전달된 인자를 추가한다.

Array.prototype.shift():호출한 배열의 첫번째 요소를 제거하고 그 요소를 반환한다.
Array.prototype.unshift():호출한 배열의 맨 앞에 전달된 인자를 추가한다.

헉헉 배열은 메소드가 너무 많아서 일단은 여기서 마무리!

profile
프론트엔드 디벨로퍼 지망 :D

0개의 댓글