🔗 배열데이터

포로토타입을 통해서 지정한 메소드는 메모리에 딱 한번만 만들어지고
그것을 앞에있는 생성자가 new 키워드로 만들어내는 인스턴스에서 언제든지 활용할 수 있다. 배열데이터에 활용 할 수 있는 메소드를 알아보자!

const numbers = [1, 2, 3, 4] 
const fruits = ["Apple", "Banana", "Cherry"] 

각각의 데이터들을 요소,배열의 아이템이라 지칭한다.

console.log(numbers[1]) // 2
console.log(fruits[2]) // Cherry

특정한 데이터의 위치를 가리키니는 숫자를 인덱스라 한다. 인덱스를 통해 출력되는 값들은 인덱싱이라 한다.

const numbers = [1, 2, 3, 4]
const fruits = ["Apple", "Banana", "Cherry"]

console.log(numbers.length) // 4
console.log(fruits.length) // 3
console.log([1, 2].length) // 2
console.log([].length) // 0

자바스크립트의 배열데이터에 사용할 수 있는 명령들을 배열API라고 한다. 그 중 .length명령어를 통해 배열의 아이템 갯수를 반환할 수 있다.

🔗 원본이 손상되지 않는 배열 메소드

.concat( )

const numbers = [1, 2, 3, 4]
const fruits = ["Apple", "Banana", "Cherry"]

console.log(numbers.concat(fruits))

2개의 배열데이터를 병합해서 새로운 배열데이터 반환한다.

.forEach( )

const numbers = [1, 2, 3, 4]
const fruits = ["Apple", "Banana", "Cherry"]

const a = fruits.forEach(function (element, index, array) {
  console.log(element, index, array)
})
console.log(a) // undefined

.fotEach( ) 메소드가 붙어있는 배열데이터의 아이템 갯수만큼 인수로 사용된 콜백함수가 반복적으로 실행되고 index값은 실행될때마다 0부터 1씩 증가한다. element자리는 item 혹은 fruit 작성가능하다.
실행이 종료되면 함수 내부에서 새로운 데이터를 출력하고 함수 외부로 반환되는 내용이 없기때문에 상수 a는 undefined가 출력된다.

.map( )

const fruits = ["Apple", "Banana", "Cherry"]

const a = fruits.map(function (item, index) {
  return `${item}-${index}`
})
console.log(a)

const b = fruits.map((fruit, i) =>({
  id: i,
  name: fruit,
}))
console.log(b)

a 에서 .map( )인수로 콜백함수가 반복적으로 실행되고 내부에서 반환된 특정한 데이터를 기준으로 새로운 배열데이터를 a 객체에 할당한다.

b 는 에로우 함수를 사용한 버전이다.

📌 .forEach( )와 .map( ) 메소드의 차이점은 forEach( )메소드는 실행일뿐 반환되지 않아서 객체에 할당되지 않고, 반대로 map( ) 메소드는 콜백함수가 반환되고 객체에 할당되어 새로운배열 데이터를 가진 객체를 출력할 수 있다.

.filter( )

const numbers = [1, 2, 3, 4]
const fruits = ["Apple", "Banana", "Cherry"]

const a = numbers.map((number) => {
  return number < 3
})
console.log(a) // [true, true, false, false]

const b = numbers.filter((number) => {
  return number < 3
})
console.log(b) // [1, 2]

.map( )메소드를 통해 출력된 데이터는 불리언데이터를 갖고있지만 .filter( )메소드는 true인 아이템을 출력한다.

.filter( ) 메소드는 배열 데이터 안에 있는 아이템들을 콜백함수에서 반환되는 값이 true인 경우에만(필터링) 아이템들이 객체에 할당되어 필터된 새로운 배열데이터를 반환한다.

.find( )

const fruits = ["Apple", "Banana", "Cherry"]

const a = fruits.find((fruits) => /^B/.test(fruits))

console.log(a) // Banana

const b = fruits.findIndex((fruits) => /^C/.test(fruits))

console.log(b) // 2

.find( )메소드는 정규표현식을 사용하여 대문자 B로 시작하는 인덱스를 매개변수test로 true값이 나올때까지 반복하고 true값이 나오면 반복을 종료한다. 그 후 true값이 나온 하나의 아이템만 반환된다.

.findIndex( )메소드는 찾아진 아이템의 인덱스 번호가 반환된다. 무수한 아이템들 갖고있는 배열데이터라면 찾으려는 아이템의 인덱스 번호를 알아내기 유용할 것 같다.

.includes( )

const numbers = [1, 2, 3, 4]
const fruits = ["Apple", "Banana", "Cherry"]

const a = numbers.includes(3)
console.log(a) //true

const b = fruits.includes("Tomato")
console.log(b) //false

.includes( ) 배열데이터에 인수로 사용된 특정한 데이터가 포함이 되어 있는지 불리언 값으로 확인해주는 메소드이다.

🔗 원본이 수정되는 메소드

📢 메소드를 사용하고 나면 원본이 수정되니 잘 알아두고 신중하게 사용하자!

const numbers = [1, 2, 3, 4]
const fruits = ["Apple", "Banana", "Cherry"]

위의 배열 데이터로 원본이 수정되는 메소드를 알아보자!

.push( )

numbers.push(5)
console.log(numbers) // [1, 2, 3, 4, 5]

해당 인덱스에 뒷쪽에 특정 데이터를 아이템으로 추가한다.

.unshift(0)

numbers.unshift(0)
console.log(numbers) // [0, 1, 2, 3, 4]

해당 인덱스 앞쪽에 특정 데이터를 아이템으로 추가한다.

.reverse( )

umbers.reverse()
console.log(numbers) // [4, 3, 2, 1]

배열 아이템들의 순서를 거꾸로 출력한다.

.splice( )

numbers.splice(2, 1, 999)
console.log(numbers) // [1, 2, 999, 4]

fruits.splice(2, 0, "Tomato")
console.log(fruits) // ['Apple', 'Banana', 'Tomato', 'Cherry']

splice(인덱스 번호, 인덱스번호부터 지울 갯수, 인덱스 번호부터 추가할 갯수)
이렇게 인수를 2개부터 3개까지 갖으며 특정한 인덱스 번호의 아이템을 제거하거나 추가하는 용도로 사용한다.