Array Method

 

Array Method 

 

배열 요소 조작

unshift()

• 배열의 array.unshift() method는 배열의 앞에 요소를 추가한다.
  반환 값 : 메서드를 호출한 배열의 새로운 length 속성

const arr = [1, 2, 3]

arr.unshift(4, 5) // [4, 5, 1, 2, 3]

 

push()

• 배열의 array.push() method는 배열의 끝에 요소를 추가한다.
  반환 값 : 호출한 배열의 새로운 length 속성

const arr = [ 1, 2, 3]

arr.push(4, 5) // [1, 2, 3, 4, 5]

 

shift()

• 배열의 array.shift() method는 배열의 앞에서부터 요소를 제거한다.
  반환 값 : 배열에서 제거한 요소. 빈 배열의 경우 undefined

const arr = [1, 2, 3]

arr.shift() // [2, 3]

 

pop()

• 배열의 array.pop() method는 배열의 끝에서부터 요소를 제거한다.
  반환 값 : 배열에서 제거한 요소. 빈 배열의 경우 undefined

const arr = [1, 2, 3]

arr.pop() // [1, 2]

 

concat()

• 배열의 array.concat() method는 배열의 끝에 여러 요소를 추가한 사본을 반환한다.
  반환 값 : 새로운 배열

const arr = [1, 2, 3]

arr.concat(4, 5, 6) // [1, 2, 3, 4, 5, 6]

console.log(arr) // [1, 2, 3] (arr은 바뀌지 않는다.)

 

slice()

• 배열의 array.slice() method는 배열을 복사할 수 있다. (배열의 일부만 가져올 때 사용한다.)
• 음수 인덱스를 사용해 배열의 끝에서부터 요소에 접근할 수 있다.
  반환 값 : 추출한 요소를 포함한 새로운 배열

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
const arr1 = arr.slice(3, 5) // [4, 5]

 

splice()

• 배열의 array.splice() method는 인덱스 위치에 있는 요소를 제거, 교체, 추가할 수 있다.
• 이 method는 원본 배열 자체를 수정한다.
  반환 값 : 제거한 요소를 담은 배열 (아무 값도 제거하지 않았으면 빈 배열을 반환)

array.splice( 인덱스, 인덱스로부터 제거할 요소의 수, 인덱스로부터 추가할 요소명 )

const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
const arr1 = arr.splice(10, 2, 'a', 'b', 'c')
console.log(arr) // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, "a", "b", "c"]
console.log(arr1) // [11, 12]

추가할 요소명을 입력하지 않으면 제거만 되고 제거할 요소에 0을 넣고 추가할 요소명을 넣을 경우 추가만 된다.

 

copyWithin() (ES6 도입 Method)

• 배열의 array.copyWithin() method는 배열 요소를 복사해서 다른 위치에 붙여넣고, 기존 요소를 덮어쓴다.
• 음수 인덱스를 사용해 배열의 끝에서부터 요소에 접근할 수 있다.
  반환 값 : 수정된 배열

arr.copyWithin( 붙여넣을 위치, 복사 시작위치, 복사 종료위치(생략가능, 기본값: array.length) )

const arr = [1, 2, 3, 4]
arr.copyWithin(1, 2) // [1, 3, 4, 4]
arr.copyWithin(2, 0, 2) // [1, 2, 1, 2]

 

fill() (ES6 도입 Method)

• 배열의 array.fill() method는 배열의 모든 요소를 시작 인덱스 (기본 값 0) 에서 끝 인덱스 (기본값 array.length) 까지 변경한다.
• 음수 인덱스를 사용해 배열의 끝에서부터 요소에 접근할 수 있다.
  반환 값 : 수정된 배열

const arr = new Array(5).fill(1) // arr : [1, 1, 1, 1]
arr.fill('a') // arr : ['a', 'a', 'a', 'a']
arr.fill('b', 1) // arr : ['a', 'b', 'b', 'b'] 
arr.fill('c', 2, 4) // arr : ['a', 'b', 'c' , 'c', 'b']

 

reverse()

• 배열의 array.reverse() method는 배열 요소의 순서를 반대로 바꾼다. (수정)
  반환 값 : 수정된 배열

const arr = [1, 2, 3, 4, 5]
arr.reverse() // arr : [5, 4, 3, 2, 1]

 

sort()

• 배열의 array.sort() method는 배열 요소의 순서를 정렬한다.
  반환 값 : 정렬된 배열

const arr = [5, 3, 2, 4, 1]
arr.sort() // arr : [1, 2, 3, 4, 5]
arr.sort((a, b) => a - b) // arr : [1, 2, 3, 4, 5]
arr.sort((a, b) => b - a) // arr : [5, 4, 3, 2, 1]

• 객체가 들어있는 배열을 정렬할 수 없지만, 정렬 함수를 사용하면 가능하다.

const arr = [{ name: 'Hizini'}, { name: 'Joo'}, { name: 'HwanJin'}]
arr.sort() // arr는 바뀌지 않는다.

arr.sort((a, b) => a.name > b.name) // arr은 name 프로퍼티의 알파벳 순으로 정렬된다.

arr.sort ((a, b) => a.name[1] < b.name[1]) 
// arr은 name 프로퍼티의 두 번째 글자의 알파벳 역순으로 정렬된다.

 

배열 검색

indexOf() , lastIndexOf()

• indexOf : 찾고자 하는 요소와 정확히 일치(===)하는 첫 번째 요소의 인덱스를 반환한다.
• lastIndexOf : 배열의 끝에서부터 검색하여 정확히 일치(===)하는 첫 번째 요소의 인덱스를 반환한다.
• 존재하지 않는 경우 -1을 반환한다.
  반환 값 : 배열에 있는 요소의 첫 번째 인덱스, 없으면 -1

array.indexOf(배열에서 찾을 요소, (검색 시작 인덱스))

const o = { name: 'Hizini' }
const arr = [1, 5, 'a', o, true, 5, [1,2], '9']

arr.indexOf(5) // 1
arr.lastIndexOf(5) // 5
arr.indexOf('a') // 2
arr.lastIndexOf('a') // 2
arr.indexOf({ name: 'Hizini' }) // -1
arr.indexOf(o) // 3
arr.indexOf([1,2]) // -1
arr.indexOf('9') // 7
arr.indexOf(9) // -1

arr.indexOf(5, 5) // 5
arr.indexOf(5, 6) // -1

 

findIndex()

• 주어진 판별 함수를 만족하는 배열의 첫 번째 요소에 대한 인덱스를 반환한다.
• 만족하는 요소가 없을 경우 -1을 반환한다.
  반환 값 : 판별 함수를 만족하는 요소의 첫 번째 인덱스, 없으면 -1

array.findIndex(callbackFunction(element, index, array), thisArg)

const arr = [{ id: 5, name: 'Hizini' }, { id: 7,, name: 'Joo' }]
arr.findIndex(e => e.id === 5) // 0
arr.findIndex(e => e.name === 'Joo') // 1

 

find()

• 주어진 판별 함수를 만족하는 배열의 첫 번째 요소 값을 반환한다.
• 만족하는 요소가 없을 경우 undefined를 반환한다.
  반환 값 : 판별 함수를 만족하는 첫 번째 요소의 값, 없으면 undefined

array.find(callbackFunction(element, index, array), thisArg)

const arr1 = [{ id: 5, name: 'Hizini' }, { id: 7,, name: 'Joo' }]
arr1.find(e => e.id === 5) // { id: 5, name: 'Hizini' }
arr1.find(e => e.id === 3) // undefined

//특정 인덱스보다 뒤에 있는 제곱수 찾기
const arr2 = [1, 17, 16, 5, 4, 16, 10, 3, 49]
arr2.find((e,i) => i > 2 && Number.isInteger(Math.sqrt(e))) // 4

 

some()

• 조건에 만족하는 요소를 찾으면 즉시 검색을 멈추고 true를 반환한다.
• 만족하는 요소가 없을 경우 false를 반환한다.
• 기존 배열 값은 변경되지 않는다.
  반환 값 : boolean (하나라도 조건 만족할 경우 true, 만족하지 않을 경우 false)

const arr = [5, 7, 12, 15, 17] 
arr.some(x => x % 2 === 0) // true
arr.some(x => Number.isInteger(Math.sqrt(x))) // false

 

every()

• 배열의 모든 요소가 조건에 맞으면 true를 반환한다.
• 하나라도 만족하지 않으면 false를 반환한다.
• 기존 배열 값은 변경되지 않는다.
  반환 값 : boolea (모두 만족할 경우 true, 하나라도 만족하지 않을 경우 false)

const arr = [4, 6, 16, 36]
arr.every(x => x % 2 === 0) // true
arr.every(x => Number.isInteger(Math.sqrt(x))) // false

 

배열 순회

map()

• 배열을 순회하며 요소마다 콜백 함수 적용 후 새로운 배열을 반환한다.
• 기존 배열 값은 변경되지 않는다.
  반환 값 : 각 요소가 콜백 함수의 결과인 새로운 배열

array.map(callbackFunction(element, index, array), thisArg)

const cart = [{ name: 'Nike', price: 89000 }, { name: 'Adidas', price: 69000}]
const names = cart.map(x => x.name) // ['Nike', 'Adidas']
const discountPrice = cart.map(x => x * 0.5) // [44500, 34500]

// map을 사용하여 객체로 결합하기
const items = ['Nike', 'Adidas']
const prices = [89000, 69000]
const cart = items.map((x,i) => ({ name: x, price: prices[i] })))
// cart : [{ name: 'Nike', price: 89000 }, { name: 'Adidas', price: 69000}]

 

filter()

• 배열을 순회하며 요소마다 조건 확인 후 만족하는 요소들로 구성된 새로운 배열을 반환한다.
• 기존 배열 값은 변경되지 않는다.
  반환 값 : 조건을 만족한 새로운 배열

array.filter(callbackFunction(element, index, array), thisArg)

//홀수만 갖는 배열 만들기
const arr = [1, 2, 3, 4, 5]
const filter = arr.filter(value => value % 2 === 1) // [1, 3, 5]

 

reduce()

• 배열을 순회하며 콜백함수의 실행 값을 누적하여 하나의 결과 값을 반환한다.
  반환 값 : callback 함수을 실행한 결과를 누적한 값

arr.reduce(callback[, initialValue])

• callback : 배열의 각 요소에 대해 실행할 함수이다. (인수 4개)
  1. accumulator : callback함수의 반환값을 누적
  2. currentValue : 배열의 현재 요소
  3. currentIndex (Optional) : 처리할 현재 요소의 인덱스
  4. array (Optional) : reduce()를 호출한 배열
  ⇒ callback 함수의 반환 값은 accumulator에 할당되고 순회 중 계속 누적되어 최종 하나의 값을 반환
• initialValue : 최초 callback함수 실행 시 accumulator 인수에 제공되는 값이다. (초기값)
  초기값이 없을 경우 배열의 첫 번째 요소를 사용하고, 빈 배열에서 초기값이 없을 경우 에러가 발생합니다.

const arr = [1, 2, 3, 4, 5]
const result = arr.reduce((acc, cur, idx) => { return acc += cur }, 0)
console.log(result)  // 15 (0+1+2+3+4+5)

const arr2 = [1, 2, 3, 4, 5]
const result2 = arr2.reduce((acc, cur, idx) => { return acc += cur }, 10)
console.log(result2)  // 25 (10+1+2+3+4+5)

forEach()

• 배열의 array.forEach()method는 주어진 함수를 배열 요소 각각에 반복적으로 실행한다.
  반환 값 : undefined

let array1 = ['a', 'b', 'c']

array1.forEach(function(element) {
	console.log(element)
})
// 결과: [a, b, c]

array1.forEach(element => console.log(element))
// 결과: [a, b, c]

 

문자열 병합

join()

• 매개변수로 구분자 하나를 받고 요소들을 하나로 합친 문자열을 반환한다.
• 매개변수가 생략됐을 때 기본 값은 쉼표이다.
• 문자열 요소를 합칠 때 정의되지 않은 요소, 삭제된 요소, null, undefined는 모두 빈 문자열로 취급한다.
  반환 값 : 모든 배열 요소가 결합된 문자열

const arr = [1, null, 'I am', 'Hizini', true, undefined]
delete arr[2]
arr.join() // "1,,,Hizini,true,"
arr.join('') // "1Hizinitrue"
arr.join('zz ') // "1zz zz zz Hizinizz truezz "