JS 데이터 API / Array 메소드

🚨 JS 데이터 API / Array

 

🌲 Array 배열

배열 데이터는 기본적으로 제로베이스로 계산한다.

인덱스, 아이템 개념

index : 배열 데이터 내부에 있는 특정한 데이터의 위치를 가리키는 숫자

 

 

✅ Array Properties

📍 length

아이템의 개수 출력

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) // 리터럴 방식으로도 표기 가능

console.log([].length) // 배열데이터가 비어있는지 확인하는 용도로 사용

 

✅ Array Methods

Array 배열 메소드
.concat()	데이터 병합
.forEach()
.map()	새로운 배열
.filter()	필터링	매개변수가 콜백일 때 true면 반환, false면 버림
.find()	찾기
.findIndex()	찾아서 인덱싱
.includes()	포함
.push()	앞에 추가	원본 수정 주의
.unshift()	뒤에 추가	원본 수정 주의
.reverse()	반대로 배열
.splice(위치, 삭제할 개수, 추가할 개수)	삭제 또는 추가	원본 수정 주의

 

📍 .find()

매개변수로 콜백함수를 사용해 원하는 값을 찾는 메소드

const array1 = [5, 12, 8, 130, 44];
const found = array1.find(element => element > 10);
console.log(found); // 12

 

📍 .concat()

두 개의 배열데이터를 병합해서 새로운 데이터를 반환, 원본 데이터는 손상되지 않음

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

console.log(numbers.concat(fruits))

 

📍 .forEach()

forEach와 같이 반복되는 함수에는 콜백을 인수로 사용함
ㄴ 매개변수 element는 item, fruit로도 변경 가능 (fruit는 fruits의 단수)
ㄴ 매개변수 index는 i로 줄여 사용할 수 있음

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

fruits.forEach(function (element, index, array) {
  console.log(element, index, array)
})

 

 

📍 .map()

ㄴ 특정한 데이터를 기준으로 데이터들의 모음인 새로운 배열을 반환

const b = fruits.map(function (fruit, index) {
  return `${fruit}-${index}`
})

ㄴ 객체데이터를 리터럴 방식으로 반환하는 방법

const b = fruits.map(function (fruit, index) {
  return {
    id: index,
    name: fruit
  }
})

ㄴ 화살표 함수로 간소화하기 (중괄호의 객체는 소괄호 안에 할당할 것)

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

 

 

📍 .forEach()와 .map()의 차이

forEach메소드는 콜백함수를 사용할 때 반환되는 값은 없기 때문에 undefiend

map메소드는 콜백에서 반환된 특정한 데이터를 기준으로 데이터들의 모음인 새로운 배열을
메소드가 실행된 자리에서 반환

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

// forEach
const a = fruits.forEach(function (fruit, index) {
  console.log(`${fruit}-${index}`)
})
console.log(a) // undefiend

// map
const b = fruits.map(function (fruit, index) {
  return `${fruit}-${index}`
})
console.log(b)

 

📍 .filter()

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

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

 

📍 .find()

정규표현식 /^B/ 

ㄴ 대문자 B로 시작하는 데이터

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

const a = friuts.find(fruit => (/^B/.test(fruit))
console.log(a) // Banana

 

📍 .findIndex()

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

const b = friuts.findIndex(fruit => (/^C/.test(fruit))
console.log(b) // 2

 

📍 .includes()

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

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

 

📍 .push()메소드와 .unshift()메소드

원본 수정 주의

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

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

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

 

📍 .reverse()

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

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

 

📍 .splice(위치, 삭제할 개수, 추가할 개수)

원본 수정 주의

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

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

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

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