Array 배열 메서드 (1)

CoderS·2023년 2월 28일
0

Array.prototype.메서드( )

코딩테스트를 통해 찾아본 배열 메서드 정리 1

기본적으로 배열과 상호작용하는 메서드는 엄청나게 많다!

극히 일부만 보여주고 있다.

확실히 계속해서 쓰는것만 알아서 그런지 이렇게 편리한 기능들이 있었는지 다시 한번 복습의 절심함을 느꼈다.

코딩테스트를 공부하다 다른 사람들의 답안지를 확인했는데, 익숙하면서 잘 기억이 안나는 메서드들이 보여서 정리해보았다.

Array.fill( )

fill( ) 메서드는 배열의 시작 index 부터 끝 index 이전까지 정적인 값 하나로 채운다.
단어만 유추해 보자면 채운다라는 의미를 가지고 있다.

Array.fill( value, start (시작점), end (도착지점) )

1st Argument

첫 번째 인자는 value 를 말한다.
원하는 값으로 설정하면 배열을 그 값으로 채운다.

예 ) 정수 1로 바꿔보자!

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

const arrA = a.fill(1);

console.log(arrA);

결과는...

숫자 1부터 6까지 배열 요소로 있었는데, 모두다 숫자 1로 바뀌었다!

그럼? 문자열이나 객체 배열은??

문자열 1 콘솔값

랜덤 객체 콘솔값

랜덤 배열 콘솔값

여러 타입의 값들이 출력된다!

Array.fill( value, start (시작점), end (도착지점) )

2nd Argument

두 번째 인자로는 시작점을 얘기한다.

자바스크립트를 공부했으면 index 라는 것에 대해 조금이나마 알 것이다.
Index 는 배열의 n번째 요소를 1 이 아닌 0으로 인식한다.

그 말은 즉, 우리가 첫 번째 값을 찾아내려면 Array[1] 이 아닌 Array[0]으로 해야 원하는 요소로 접근할 수 있다.

예제를 보자면...

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

const arrB = arr.fill(2, 3);
console.log(arrB);

value 는 2 그리고 시작점은 3으로 되어있다.

결과는...

기존의 우리의 배열이 약간 달라진 걸 확인할 수 있다.
시작점을 3으로 지정했으니, 왼쪽에서부터 4번째 요소였던 숫자 4부터 마지막 숫자까지 2로 둔갑해버렸다.

이렇게 원하는 포인트에서 value 를 바꿀 수 있으니, 확실히 유용하게 쓰일 인자로 보인다.

Array.fill( value, start (시작점), end (도착지점) )

3rd Argument

세 번째 인자는 end 그러니까 끝 index 를 지정한다.
기본값은 시작점과 다르게 this.length (1부터 시작하면 된다.)

예 )

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

const arrC = arr.fill(3, 2, 5);
console.log(arrC);

값을 3으로 지정하고, 2번째 인덱스부터 5번째 요소까지 3으로 바꾼다.

결과적으로...

주의할 점!

  • 두 번재 인자는 기본값이 0이고 세 번째 인자는 기본값이 1이니 잘 염두하고 사용해야겠다.

Array.reduce( )

이 메서드는 연속된 수의 합을 찾는 공식을 아주 편하게 도와주는 기능을 갖고 있다.

Array.reduce( (accumulator, currentValue, currentIndex, array) => { }, initialValue )

map 메서드와 마찬가지로 콜백함수를 인자로 갖고, 그 안에 파라미터를 활용하는 메서드!
이 메서드를 분석하고 이해하느라 시간이 좀 걸렸다...

기본적인 사용 예제 )

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

const addNumbers = arr.reduce((accumulator, currentValue) =>
	accumulator + currentValue,
    0
)

console.log(addNumbers);

결과는...

1부터 5까지 숫자들을 더하니 15가 나온다.

1st Argument

첫 번째 콜백의 파라미터는 누산기!
누산기는 콜백의 반환값을 누적한다.

예 ) 누산기

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

const numbers = arr.reduce((accumulator) => accumulator);

console.log(numbers);

결과는...

위 배열의 0번째 인덱스인 1이 출력된다.
콜백의 첫 번째 호출하는데 만약 initialValue 를 따로 지정하면, 그 초기값부터 시작한다.

예 ) initialValue 를 4로 지정!

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

const numbers = arr.reduce((accumulator) => accumulator, 4);

console.log(numbers);

결과는...

InitialValue 그러니까 초기값이 중요한 이유는 위에처럼 배열에 숫자가 있는게 아니라 빈 배열일 경우 에러가 발생한다.

그래서 보통은 초기값을 0으로 지정하고 있다.

참고!

  • initialValue를 제공하지 않으면, reduce( )는 index 1부터 시작해 콜백 함수를 실행하고 첫 번째 index 는 건너 뛴다. initialValue를 제공하면 인덱스 0에서 시작한다.

2nd Argument

두 번째 콜백의 파라미터는 현재 값
처리할 현재 요소를 말한다.

예 )

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

const numbers = arr.reduce((accumulator, currentValue) => currentValue);

console.log(numbers);

결과는...

콜백이 4번 호출되는데 마지막 요소인 5를 보여준다?

그 이유는 초기값을 설정하지 않으면, 현재값이 숫자 2부터 마지막 5까지 호출하는 것이다.

MDN 에서 이렇게 친절히 표로 설명해준다.

출처 : 링크텍스트

3rd & 4th Arguments

세 번째는 현재 처리할 요소의 index 를 알려주고, 네 번째 파라미터는 reduce 메서드를 호출한 배열을 보여준다.

reduce 메서드는 초기값을 설정하는걸 기본으로 해야겠다.

profile
하루를 의미있게 살자!

0개의 댓글