분류 javascript

자바 스크립트에서 배열을 CRUD하기

컨텐츠 정보

  • 조회 356 (작성일 )

본문

JavaScript에서 항목을 배열로 작성, 업데이트 및 삭제하는 방법에는 두 가지가 있습니다. 

첫 번째 방법은 객체 자체를 변경하는 파괴적인 방법을 사용하는 것입니다.


두 번째 방법은  immutable 메소드를 사용하여 업데이트 된 새 값이 포함 된 새 배열을 반환하는 것입니다. 

Redux 또는 다른 상태 관리 라이브러리를 사용하는 경우 매우 유용 할 수 있습니다.


https://dev.to/rahmanfadhil/how-to-crud-an-array-in-javascript-5bko 


배열에 아래와 같은 항목이 있다고 가정 해 봅시다.


const list = ["Item 1", "Item 2", "Item 3"]


아이템 만들기 


mutable 방법 :


const newItem = "Item 4"

list.push(newItem)

immutable 방법 :


const newItem = "Item 4"

const newList = list.concat([newItem])

결과:


[
  "Item 1",
  "Item 2",
  "Item 3",
  "Item 4"
]


아이템 업데이트 


mutable 방법 :


const itemIndex = 1
const newItem = "Item 2 (updated)"

list[itemIndex] = newItem

immutable 방법 :


const itemIndex = 1
const newItem = "Item 2 (updated)"

const newList = list.map((item, index) => {
  return index === itemIndex ? newItem : item
})


결과:


[
  "Item 1",
  "Item 2 (updated)",
  "Item 3"
]


항목 삭제 


mutable 방법 :


const itemIndex = 1

list.splice(itemIndex, 1)

immutable 방법 :


const itemIndex = 1

const newList = list.filter((item, index) => {
  return index !== itemIndex
})


결과:


[
  "Item 1",
  "Item 3"
]