JavaScript: JS 데이터 Ep.2 (배열)

23 Aug 2022 • TIL

배열

인덱스, 인덱싱

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

console.log(numbers) // (4) [1, 2, 3, 4]
console.log(fruits) // (3) ['Apple', 'Banana', 'Cherry']
console.log(numbers[1]) // 2
console.log(fruits[2]) // Cherry

메소드

  • 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) // 2
  
console.log([].length) // 0

  • concat()
    두개의 배열 데이터를 병합하여 새로운 배열 데이터를 반환해주는 메소드이다. 원본의 데이터에는 손상이 없다!

    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
console.log(numbers.concat(fruits)) // (7) [1, 2, 3, 4, 'Apple', 'Banana', 'Cherry']
console.log(numbers) // (4) [1, 2, 3, 4]
console.log(fruits) // (3) ['Apple', 'Banana', 'Cherry']

  • forEach()
    해당 메소드가 붙어있는 배열데이터의 아이템의 갯수만큼 특정한 콜백 함수를 반복적으로 실행하는 용도로 사용되는 메소드이다.

    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
fruits.forEach(function (element, index, array) {
  console.log(element, index, array)
}) 
    
// Apple 0 
// (3) ['Apple', 'Banana', 'Cherry']
// Banana 1 
// (3) ['Apple', 'Banana', 'Cherry']
// Cherry 2 
// (3) ['Apple', 'Banana', 'Cherry']
  
fruits.forEach(function (fruit, i) {
  console.log(fruit, i)
})
    • element
      배열데이터의 아이템을 하나씩 뽑아낸다.
    • index
      0부터 순차적으로 아이템의 갯수만큼 늘어난다.
    • array
      해당 배열데이터를 지칭한다.

    • 매개변수의 이름은 본인이 이해할 수 있는 것으로 변경해도 된다.
      단, 매개변수와 아래의 이름은 동일해야 실행이 된다.

      fruits.forEach(function (fruit, i) {
  console.log(fruit, i)
}) // 실행됨
    
fruits.forEach(function (item, i) {
  console.log(fruit, i)
}) // 실행안됨
    • 마지막 array는 잘 사용하지 않는다.
    • 화살표 함수로 만들기
      자세한 코드 내용은 하단 map() 참고 
      const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
    
const a = fruits.forEach((fruit, index) => {
  console.log(`${fruit}-${index}`)
})
// Apple-0
// Banana-1
// Cherry-2

  • map()
    인수로 사용하는 콜백의 내부에서, 반환한 데이터를 가지고 그 데이터들을 모아놓은 새로운 배열을 만들어서 반환한다.
    원본 데이터에는 영향이 가지 않는다.

    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
const a = fruits.forEach(function (fruit, index) {
  console.log(`${fruit}-${index}`)
})
// Apple-0
// Banana-1
// Cherry-2
console.log(a) // undefined
  
const b = fruits.map(function (fruit, index) {
  return.log(`${fruit}-${index}`)
})
console.log(b)
// (3) ["Apple-0", "Banana-1", "Cherry-2"]
    • 반한된 것은 b라는 변수에 할당되었다.
    • 객체 리터럴 방식으로 작성하기 
      const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
    
const b = fruits.map(function (fruit, index) {
  return {
    id: index,
    name: fruit
  }
})
console.log(b)
// 0: {id: 0, name: "Apple"}
// 1 ...
    • 화살표 함수로 작성하기 + 단축시키기 
      const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
    
const b = fruits.map((fruit, index) => ({
  id: index,
  name: fruit
}))
console.log(b)
// 0: {id: 0, name: "Apple"}
// 1 ...

  • filter()
    특정한 배열데이터에서 필요해 의해서 원하는 조건으로 내용을 필터링 하여 해당 조건에 충족하는 데이터들로만 새로운 배열을 만든다.
    원본 데이터에는 영향이 가지 않는다.

    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
const a = numbers.map(number => {
  return number < 3
})
console.log(a)
// (4) [true, true, false, false]
  
const b = numbers.filter(number => {
  return number < 3
})
console.log(b)
// [1, 2]
    • 화살표 함수 단축시키기 
      const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
    
const b = numbers.filter(number => number < 3 )
console.log(b)
// [1, 2]

  • find()
    원하는 조건의 아이템을 찾게 되면 반복이 멈추면서 해당 값이 반환되고 끝이난다.

    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
const a = fruits.find(fruit => {
  return /^B/.test(fruit)
})
console.log(a) //Banana

    • 정규표현식
      ^ ⇒ 시작한다.
      /^B/ ⇒ 대문자 B로 시작하는 문자데이터를 의미한다.

    • /^B/.test(fruit)
      대문자 B로 시작하면 true, 아니면 false

    • B로 시작하는 단어인 Banana가 fruit가 되면서 true가 반환이 되면, 아이템의 반복이 멈추게 된다. (즉, Cherry까지는 가지 않는다.)

    • 화살표함수의 간소화

      const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
    
const a = fruits.find(fruit => return /^B/.test(fruit))
console.log(a) //Banana
  • findIndex()
    원하는 조건의 아이템을 찾게 되면 반복이 멈추면서 해당 아이템의 인덱스 번호를 반환한다. 
    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
const a = fruits.findIndex(fruit => {
  return /^B/.test(fruit)
})
console.log(a) 
// 1
    • 화살표 함수의 간소화 
      const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
    
const a = fruits.findIndex(fruit => /^B/.test(fruit))
console.log(a) 
// 1

  • includes()
    인수로 사용되는 특정한 데이터(3, ‘SOHA’)가 해당하는 특정 배열(numbers, fruits)에 들어져 있는지 확인할 때 사용한다.

    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
const a = numbers.includes(3)
console.log(a) // true
  
const b = fruits.includes('SOHA')
console.log(b) // false
  • push()
    배열데이터의 원본이 수정된다!!
    해당 배열의 가장 뒤쪽에 특정한 인수의 내용을 밀어넣는(push, 추가하는) 것이다. 
    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
numbers.push(5)
console.log(numbers)
// (5) [1, 2, 3, 4, 5]

  • unshift()
    배열데이터의 원본이 수정된다!!
    해당 배열의 가장 앞쪽에 특정한 인수의 내용을 밀어넣는(unshift, 추가하는) 것이다.

    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
numbers.unshift(0)
console.log(numbers)
// (5) [0, 1, 2, 3, 4]

  • reverse()
    배열데이터의 원본이 수정된다!!
    해당 배열데이터의 순서를 거꾸로 뒤짚는다.

    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
numbers.reverse()
fruits.reverse()
  
console.log(numbers) // [4, 3, 2, 1]
console.log(fruits) // ["Cherry", "Banana", "Apple"]
  • splice()
    배열데이터의 원본이 수정된다!!
    splice(인덱스 번호, 해당 인덱스 번호에서 아이템을 지우는 갯수)
    특정한 인덱스 번호의 숫자를 가져와서 원하는 갯수의 아이템을 해당 갯수만큼 지워준다. 
    const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
numbers.splice(2, 1)
  
console.log(numbers) // (3) [1, 2, 4]
-----------------------------

const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
  
numbers.splice(2, 2)
console.log(numbers) // (2) [1, 2]
    • 0개의 아이템 지우기 + 새로운 아이템 값 끼워넣기 
      const numbers = [1, 2, 3, 4]
const fruits = ['Apple', 'Banana', 'Cherry']
    
// 0개의 아이템 지우기 - 그대로 출력
numbers.splice(2, 0)
console.log(numbers) // (4) [1, 2, 3, 4]
    
// 새로운 아이템 끼워넣기
numbers.splice(2, 0, 999)
console.log(numbers) // (5) [1, 2, 999, 3, 4]
    
fruits.splice(2, 0, 'Orange')
console.log(fruits) // ['Apple', 'Banana', 'Orange', 'Cherry']
    
// 원하는 아이템 지우고 그 자리에 새로운 값 넣기
numbers.splice(3, 1, 99)
console.log(numbers) // (5) [1, 2, 999, 99, 4]
 TIL  JS

Comments

Related Posts