JavaScript 배열 메서드인데요 4

.lastIndexOf()
.map()
.of()
.pop()
.push()
.reduce()
.reduceRight()

.lastIndexOf()

lastIndexOf() 메서드는 indexOf()와 유사하게 작동하지만, indexOf()가 첫 번째 인덱스를 리턴하는 것과 반대로, 마지막 인덱스를 리턴한다.

const fruits = ['apple', 'banana', 'orange', 'banana']

console.log(fruits.lastIndexOf('banana')) // 3
console.log(fruits.lastIndexOf('grape')) // -1

.map()

map() 메서드는 배열을 각 요소에 대해 콜백함수를 실행한 결과로 이루어진 새로운 배열을 리턴한다. 알고리즘을 풀거나 컴포넌트를 만들 때 정말 자주 사용하게 되는 메서드이다. 원본 배열은 변경되지 않는다.

const numbers = [1, 2, 3, 4, 5]
console.log(numbers.map((num) => num ** 2)) // [1, 4, 9, 16, 25]

.of()

of() 메서드는 인자로 전달된 값들을 갖는 새로운 배열을 생성하는 정적 메서드이다. 배열 생성자Array()와의 차이는 숫자 타입의 인자를 하나만 전달했을 때, 배열 생성자의 경우 인자를 길이로 갖는 빈 배열을 만들고, of() 메서드는 인자를 요소로 갖는 배열을 만드는 차이가 있다.

Array(1, 2, 3) // [1, 2, 3]
Array.of(1, 2, 3) // [1, 2, 3]

Array(5) // [ , , , , ]
Array.of(5) // [5]

.pop()

pop() 메서드는 배열의 마지막 요소를 제거하고 해당 요소를 리턴한다. 원본 배열이 변경되고, 배열이 비어있었다면 undefined를 리턴하며 배열은 변경되지 않는다. 자료구조, 알고리즘에서 많이 쓰이는 메서드이며, 특히 스택 자료구조에서 많이 쓰인다.

const fruits = ['apple', 'banana', 'orange']

console.log(fruits.pop()) // 'orange'
console.log(fruits) // ['apple', 'banana']

fruits.pop()

console.log(fruits) // ['apple']

.push()

push() 메서드는 배열의 끝에 인자로 전달한 요소를 추가하고, 변경된 배열의 길이를 리턴한다. 한 번에 여러 개의 인자를 전달하여 요소를 동시에 추가할 수 있다. pop()과 함께 스택 자료구조에서 많이 쓰인다.

const fruits = ['apple', 'banana']

console.log(fruits.push('orange', 'grape')) // 4
console.log(fruits) // [ 'apple', 'banana', 'orange', 'grape' ]

.reduce()

reduce() 메서드는 배열의 각 요소에 대해 콜백함수를 실행하고, 하나의 결괏값을 리턴한다. reduce()는 네 개의 인자를 갖는다.

누산기 (accumulator): 누적된 값
현재 값 (currentValue)
현재 인덱스 (index)
원본 배열 (array)

콜백함수를 실행한 결과를 누산기에 누적시켜 가며, 결국 최종 결괏값 하나를 리턴한다. 또, 인자와 별도로 초깃값을 설정해 줄 수 있는데, 설정하지 않으면 배열의 첫 번째 요소가 초깃값이 된다.
배열 전체에 대한 처리를 하고 하나의 결과가 필요할 때 유용한 메서드이다.

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

console.log(numbers.reduce((acc, cur) => acc + cur, 0)) // 15

.reduceRight()

.reduceRight() 메서드는 reduce()와 유사하지만, 배열의 순회를 끝에서부터 시작하여 첫 번째 요소로 진행된다는 점이 다르다. 그 외의 작동방식은 동일하다.

const strings = ['Hello', ' ', 'world', '!']

console.log(strings.reduceRight((acc, cur) => acc + cur, '')) // '!world Hello'

참고 문서 : https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array