자바스크립트 배열(Array)데이터

2022.04.25

Array(배열)

배열데이터 내부의 Elemente(요소)들을 item이라 지칭
인수로 사용되는 하나의 함수를 콜백함수라함

.length

Array.prortotype.length
prototype이 써있으면 배열데이터를 리터럴방식으로 쓸 수 있다 ( [].length )

const fruits = ['Apple', 'Mango', 'Banana']
console.log(fruits) // (3) ['Apple', 'Mango', 'Banana']
console.log(fruits.length) //3
console.log([].length) //0

.concat()

두개의 배열데이터를 병합해서 새로운 배열데이터를 반환
원본 데이터에 전혀 영향이없음

 const fruits = ['Apple', 'Mango', 'Banana']
 const users = ['Sunny', 'Jessi', 'Rosie']

 console.log(fruits.concat(user)) // ['Apple', 'Mango', 'Banana', 'Sunny', 'Jessi', 'Rosi']
 console.log(fruits)
 console.log(users)

.forEach()

배열데이터의 아이템의 개수만큼 특정한 콜백함수를 반복적으로실행
갯수만큼 반복하기때문에 반복을 멈추고 싶어도 배열이 끝나면 끝날 수 있다

 const users = ['Sunny', 'Jessi', 'Rosie']
 users.forEach(function(element, index, array) {
   console.log(element, index, array)   
 })

 Sunny 0 (3) ['Sunny', 'Jessi', 'Rosie']
 Jessi 1 (3) ['Sunny', 'Jessi', 'Rosie']
 Rosie 2 (3) ['Sunny', 'Jessi', 'Rosie']

 // 다른 배열반목문들

const arr = [1, 2, 3, 4]
for (let i = 0; i < arr.length; i += 1) {
  console.log(arr[i])
}
for (const item of arr) {
  console.log(item)
}

.map()

return키워드를 통해 반환값을 새로운 배열데이터로 만들어서 사용할 수 있다
반환된 값은 true, false로 반환

 forEach()는 따로 반환되는 값은 없다
 배열데이터 참조(:값이 연결되있다)
 const users = ['Sunny', 'Jessi', 'Rosie']
 const a = users.forEach( function (user, index) {
   return {
     name: user,
     number: index
   }
 })
 console.log(a) //undefined

 // return키워드로 값을 밖으로 반환함
 // 객체를 새로운 배열로 만들어줌
 const users = ['Sunny', 'Jessi', 'Rosie']
 const a = users.map( function (user, index) {
   return {
     name: user,
     number: index
   }
 })
 console.log(a)
 (3) [{…}, {…}, {…}]
 0: {name: 'Sunny', number: 0}
 1: {name: 'Jessi', number: 1}
 2: {name: 'Rosie', number: 2}
 length: 3

.filter()

배열데이터 각각의 아이템들을 true인 값만 반환
주어진함수(콜백) 테스트를 통과한 애들만 가지고 새로 생성해서 반환
원본배열에서보다 갯수가 줄어들어듬

 const num = [1, 2, 3, 4]
 const a = num.filter(num => num < 3)
 console.log(a) //(2) [1, 2]

map(),filter()는 새로운 배열을 반환하는 매서드

.find() .findIndex()

 const num = [1, 2, 3, 4]
 const users = ['Sunny', 'Jessi', 'Rosie']

find() 불린데이터로 찾아진 배열의 첫번째 요소(item)반환. 없으면 undefinded

 const a = users.find(user => /^R/.test(user))

 console.log(a) //Rosie

findIndex()는 해당하는 부분의 index번호를 반환해줌
 const b = users.findIndex(user => /^R/.test(user))

 console.log(b) //2

.includes()

인수안에 데이터가 포함되어있는지를 불린데이터형태로 반환

 const num = [1, 2, 3, 4]
 const users = ['Sunny', 'Jessi', 'Rosie']

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

 const b = users.includes('Jenny')
 console.log(b) //false

.join()

배열의 모든 요소를 특정한 기호로 연결해서 하나의 문자(string) 로 만들어서 반환함

const arr = [1, 2, 3, 4]
 console.log(
   arr.join(',') //1,2,3,4
 )

.pop() .shift()

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

.pop()
기존 배열에서 마지막 요소를 제거하고 그 요소를 반환
원본이 수정됨

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

.shift()
기존 배열에서 맨앞 요소를 제거하고 그 요소를 반환

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

.push() .unshift()

맨 끝에 하나이상의 요소를 추가하고, 배열의 새로운 길이를 반환
원본 수정됨 주의!

 const num = [1, 2, 3, 4]
 const users = ['Sunny', 'Jessi', 'Rosie']

.push()

 배열데이터의 가장 뒷쪽 부분에 데이터 삽입
 num.push(5)
 console.log(num) //[1, 2, 3, 4, 5]

.unshift()

 배열데이터의 가장 앞쪽 부분에 데이터 사입
 num.unshift(0)
 console.log(num) // [0, 1, 2, 3, 4, 5]

.reverse()

배열아이템 순서를 뒤집는다
원본 수정됨 주의!

 const num = [1, 2, 3, 4]
 num.reverse()
 console.log(num) //(4) [4, 3, 2, 1]

.splice()

원본 수정됨 주의!
인덱스 값을 넣음
.splice(인덱스, 삭제개수, 추가데이터)

const arr = [1, 2, 3, 4, 5]
console.log(
  arr.splice(2, 2, 7) // [3, 4] 제거한 요소를 담은 배열을 반환
)

console.log(arr) // [1, 2, 7, 5]
// 아무것도 지우지 않고 2번째 index에 끼워넣고 싶을경우
// arr.splice(2, 0, 7) 으로 해주면 됨

.every()

모든 값이 통과해야 true

// 4번 반복될거고, return으로 반환된 값이 전부 Truthy 여야지만이 true가 나올거임
const arr = [1, 2, 3, 4]
console.log(
   arr.every(item => item < 5)  //콜백함수 하나를 받습니다
 ) //true

console.log(
  arr.every(item => item < 4)  
) //false 모두통과해야 true

.reduce()

첫번째 인수는 콜백함수, 두번째 인수가 있음(내가 원하는 초기값 지정. 현재 처리할 요소)
acc: 누적되는 그 값 accumulator
누적이 최초로 시작될 값이 cur이에요!!
cur: 초기값 currentValue

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

const sum = arr.reduce((acc, cur, index) => {
  console.log(index) // 0 1 2 3
  return acc + cur
}, 0)

1. acc값에 초기값 cur`0`이들어가고 cur에 arr 인덱스[0]인 1이 들어감 0 + 1 = 1
2. return키워드를 통해 acc에 1, cur에 arr 인덱스[1]인 2이 들어감 1 + 2 = 3
3. return키워드를 통해 acc에 3, cur에 arr 인덱스[2]인 3이 들어감 3 + 3 = 6
4. return키워드를 통해 acc에 6, cur에 arr 인덱스[3]인 4이 들어감 6 + 4 = 10
5. 이제 반복할 item이 없으니 최종적으로 변수`sum`에 값이 들어가서 console.log(sum) = 10

// 화살표 함수
const sum = arr.reduce((acc, cur) => acc + cur, 0)
console.log(sum) // 10
//reduce()는 콜백이 하나의 누적값을 다음 콜백값으로 넘겨줄 수 있음

forEach() 외부 변수 필요

const arr = [1, 2, 3, 4]
 let sum = 0
 arr.forEach(item => {
   sum += item
 })
 console.log(sum) // 10

.slice()

string에도 ,slice()메소드 존재

const arr = [1, 2, 3, 4, 5]
console.log(arr.slice(0, 3)) //[1, 2, 3]

.some()

배열 안의 어떤 요소라도 주어진 판별 함수를 통과하는지 테스트
전체아이템중에 하나라도 통과하면되요

console.log(
  arr.some( item => {
    return item === 1
  })
) //true

// 화살표 함수
console.log(
  arr.some( item => item === 1)
) //true