[JS] 나만 몰랐었던 자주 쓰이는 배열 메소드들..

JS를 이제서야 막 배우기 시작한 나..

존재하는지도 몰랐었던 JS의 배열에서 사용되는 메소드들을 모아서 정리해보았다.

추후 배열 데이터를 다룰 때 학습한 내용이 기억나지 않는다면 참고할 예정이다.

---

.at( )

배열을 인덱싱함. (음수값을 사용 시 뒤에서부터 인덱싱)

const arr = ['A',  'B', 'C']


console.log(arr[0]) // 'A'
console.log(arr.at(0)) // 'A'

console.log(arr[arr.length -1]) // 'c'
console.log(arr.at(-1)) // 'C'

.concat( )

[대상 배열 + 주어진 배열], 새로운 배열 반환.

const arr1 = ['A', 'B', 'C']
const arr2 = ['D', 'E', 'F']
const arr3 = arr1.concat(arr2)

console.log(arr1)  // ['A', 'B', 'C']
console.log(arr2)  // ['D', 'E', 'F']
console.log(arr3)  // ['A', 'B', 'C', 'D', 'E', 'F']

.every( )

배열의 '모든' 요소가 콜백테스트에서 참인지 반환

const arr = [1, 2, 3, 4]
const isTrue1 = arr.every(item => item > 2)
const isTrue2 = arr.every(item => item < 10)

console.log(isTrue1)  // False
console.log(isTrue2)  // True

.filter( )

콜백 테스트를 통과한 요소들만 가지고 새로운 배열열을 생성.

const arr = [1, 10, 4, 5, 22, 132]
const filteredArr = arr.filter(arr => arr >= 10) 

console.log(filteredArr)  // [10, 22, 132]

위의 경우 객체 배열데이터에서도 활용이 가능하다!

const students = [
  { name: 'Park', grade: 1 },
  { name: 'Kim', grade: 2 },
  { name: 'Lee', grade: 3 }
]

const morethanFirstGrade = 
      students.filter(students => students.grade > 1)

console.log(morethanFirstGrade) 
// { name: 'Kim', grade: 2 },
// { name: 'Lee', grade: 3 }  두가지 데이터가 출력

.find( )

배열에서 콜백 테스트를 통과하는 '첫번째' 요소 반환.

const arr = [ 7, 4, 8, 2, 3, 1]
const arrFinder = arr.find(item => item > 5) // `item`은 매개변수

console.log(arrFinder) // 7

객체 배열데이터에서도 아래와 같이 사용할 수 있다.

const students = [
  { name: 'Park', grade: 1 },
  { name: 'Kim', grade: 2 },
  { name: 'Lee', grade: 3 }
]

const findStudent = 
      students.find(students => students.name === 'Kim')

console.log(findStudent) 
// { name: 'Kim', grade: 2 }

.findIndex( )

. 배열에서 콜백 테스트를 통과하는 첫번째 요소의 '인덱스 번호'(배열번호)반환.

const arr = [ 7, 4, 8, 2, 3, 1]
const arrIndexFinder = arr.find(item => item > 5) 

console.log(arrIndexFinder) // 0

.flat( )

. 하위 배열을 지정한 깊이까지 붙인 새로운 배열 생성. (깊이 기본값은 1)

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

console.log(arr.falt()) // [1, 2, 3, 4, [5, [6, 7]]]
console.log(arr.falt(2)) // [1, 2, 3, 4, 5, [6, 7]]
console.log(arr.falt(Infinity)) // [1, 2, 3, 4, 5, 6, 7]  
// Infinity를 사용하면 모든 깊이의 배열을 벗겨낸다고 보면 됨..!

.forEach( )

대상 배열의 길이만큼 주어진 콜백을 실행. (반복문 대체품)

const arr = ['A', 'B', 'C']
arr.forEach(item => console.log(item))
/* 
A
B
C  순차적으로 출력 */

위의 코드는 아래와 기능적으로 동일하다!

for(let i = 0; i < arr.length; i =+ 1) {
	console.log(arr[i])
}

단, .forEach()메소드의 경우 중간에 반복문을 breck 할 수 없음!

.includes()

배열에 특정 요소를 포함하는지 boolean형으로 확인.

const arr = ['A', 'B', 'C']
console.log(arr.includes('D'))  // false
/* 단, 문자데이터에서 대소문자를 구분해줘야 함! */

아래와 같은 상황도 존재하니, 꼭 기억하도록 하자!

const user = [ {name : 'Park'} ]
console.log(user.includes( {name : 'Park'} )  // false

/* 형태는 서로 같아보이지만, '참조형'타입은 데이터의 생김새가 같아도 
메모리 주소가 달라서로 다른 데이터로 취급하기 때문!*/

.join( )

. 배열의 모든 요소를 구분자로 연결한 '문자'로 반환.

const arr = ['사과', '바나나', '체리']

console.log(arr.join())  // 아무것도 넣기 않으면 ','로 구분.
console.log(arr.join(', '))
console.log(arr.join('/ '))
/* 차례대로 출력되는 값

사과,바나나,체리
사과, 바나나, 체리
사과/ 바나나/ 체리
*/

.map( )

배열의 길이만큼 주어진 콜백을 실행, 콜백 반환값을 모아 새로운 배열 생성.

const arr = [1, 2, 3, 4]
const newNum = arr.map(item => item * 2)
console.log(newNum)  // [2, 4, 6, 8]

객체 데이터 배열에서는 아래와 같이 속성들을 추가하여 새로운 배열을 만들 수 있다.

const users = [
	{ name: 'Park', grade: 1 },
  	{ name: 'Kim', grade: 2 },
  	{ name: 'Lee', grade: 3 }
]

const students = users.map(item => ({
	...users,  // 전개연산자를 통해 users 배열의 이전 데이터들을 불러옴. 
  	isValid: true,
  	email: null
}))

console.log(students) 
/*
{ name: 'Park', grade: 1, isValid: true, email: null},
{ name: 'Kim', grade: 2, isValid: true, email: null},
{ name: 'Lee', grade: 3, isValid: true, email: null}
*/

.pop( )

배열의 마지막 요소를 제거하여 원본 배열을 변경함.

const arr = [1, 2, 3]
console.log(arr.pop())  // 3
console.log(arr)  // [1, 2]

.push()

배열의 마지막에 하나 이상의 요소를 추가하고 길이를 추가. 마찬가지로 원본이 변경됨.

const arr = [1, 2, 3]
const newArrLength = arr.push(4)

console.log(newArrLength)  // 4
console.log(arr)  // [1, 2, 3, 4]

.reduce( )

대상 배열의 길이만큼 주어진 콜백을 실행, 마지막에 호출되는 콜백의 반환값을 반환. 각 콜백의 반환값은 다음 콜백으로 전달됨.

const arr = [1, 2, 3]  // 순차적으로 currentValue에 들어감. 
const sum = arr.reduce((accumulator, currentValue) => {
	return accumulator + currentValue // 계산 후 accumulator로 return.
},0)  // 0은 초기 accumulator 값.

위의 sum 함수를 간략하게 나타내자면 아래와 같다.

const sum = arr.reduce((acc, cur) => acc + cur , 0)

.reversed( )

대상 배열의 순서를 반전, 원본배열 또한 변경됨.

const arr = [1, 2, 3]
const reversedArr = arr.reversed()

console.log(reversedArr)  // [3, 2, 1]
console.log(arr)		  // [3, 2, 1]

.shift( )

배열의 첫번째 요소 제거, 제거된 요소를 반환. 원본 배열도 변경됨!

const arr = ['A', 'B', 'C']
console.log(arr.shift())  //  A
console.log(arr)  //  ['B', 'C']

.slice( )

배열의 일부분을 추출해 새로운 배열 반환. (두번째 인수 직전까지 추출, 두번쨰 인수 생략시 끝까지 추출.)

const arr = ['A', 'B', 'C', 'D', 'E', 'F', 'G']

console.log(arr.slice(0, 3))  // ['A', 'B', 'C']
console.log(arr.slice(3, -1))  // ['D', 'E', 'F']
console.log(arr.slice(4))  // ['E', 'F', 'G']
console.log(arr)  // ['A', 'B', 'C', 'D', 'E', 'F', 'G']

.some( )

배열 요소들 중 하나라도 테스트에 통과하는지 확인. (boolean 형으로 결과 도출)

const arr = [1, 2, 3, 4, 5]
const inValid = arr.some(item => item > 4)

console.log(inValid)  // true

.sort( )

배열을 콜백의 반환 값(+, -, 0)에 따라 정렬. 콜백이 없을 시 요소를 문자열로 변환하고 유니코드 코드 포인트 순서로 정렬. (원본이 변경됨)

const arr = [1, 4, 16, 2, 30, 442, 0]

arr.sort()
console.log(arr)  // [0, 1, 16, 2, 30, 4, 442] 

arr.sort((a, b) => a - b)  // 오름차순 정렬
console.log(arr)  // [0, 1, 2, 4, 16, 30, 442]

arr.sort((a, b) => b - a)  // 내림차순 정렬
console.log(arr)  // [442, 30, 16, 4, 2, 1, 0]

.splice( )

대상 배열에 요소를 추가, 삭제, 변경함. (배열 원본이 변경됨)

const arr = ['A', 'B', 'C']

arr.splice(2, 0, 'X')  
// 2번째 인덱스로부터 0개를 삭제, 해당자리에 'X' 요소 추가

console.log(arr)  // ['A', 'B', 'X', 'C'] 

arr.splice(1, 1)  // 1번째 인덱스로부터 1개 삭제
console.log(arr) // ['A', 'X', 'Y']

arr.splice(0, 1, 'Z')  // 1번째 인덱스로부터 1개 삭제
console.log(arr) // ['Z', 'X', 'Y']

.unshift( )

새로운 요소를 배열의 맨 앞에 추가하고 새 배열의 길이를 반환.

const arr = ['A', 'B', 'C']

console.log(arr.unshift('K'))  // 4
console.log(arr)  // ['K', 'A', 'B', 'C']

Array.form( )

유사배열(Array-like)을 실제 배열로 반환하는 정적 메소드.

const arraylike = {
	0: 'A',
  	1: 'B',
  	2: 'C',
  	length: 3  // 유사배열을 만들때 length 속성도 꼭 제공해야 Array.from()을 통해서 출력이 가능.
}

console.log(arraylike.constructor === Array)  // false 출력. (Array가 아닌 엄연한 객체 데이터라는 뜻.)
console.log(arraylike.constructor === Object)  // true 출력.

arraylike.(item => console.log(item))  // 배열이 아닌 유사배열이기에 forEach 메소드 사용 불가. 오류가 발생함.

Array.from(arraylike).forEach(item => console.log(item))
/*
A
B
C
순차적으로 출력
*/

---