웹개발 및 최신 테크 소식을 전하는 블로그, 웹이즈프리

HOME > js

자바스크립트 배열 값을 찾아 다른 값으로 변경하기

Last Modified : 2020-10-31 / Created : 2020-10-31
29,224
View Count

자바스크립트의 배열의 값 중 하나를 찾아 다른 값으로 변경하는 방법을 알아봅니다.




# 자바스크립트 배열 값 다른 값으로 대치, 변경


우선 배열의 값을 다른 값으로 변경하기 위해 다음과 같은 과정이 필요합니다.

1. 배열인지 타입을 확인
2. 배열에서 변경할 값의 위치 인덱스(index) 얻기
3. 해당 인덱스를 사용하여 새로운 값 변경

과정은 간단합니다. 아래에서는 함수를 하나 만들텐데 이름은 updateArray()입니다.

updateArray(myArray, oldValue, newValue)

이 함수는 세 개의 인자를 받아 처리합니다. 첫 번째는 배열값이며 두 번째은 변경할 값을 받고 세 번째 인자는 변경할 값입니다. 그럼 아래에서 직접 코드를 작성해볼께요!
function updateArray(myArray, oldValue, newValue) {
}

빈 함수가 만들어졌습니다. 가장 먼저 타입을 확인한 후 해당 값을 찾아보려고 합니다.
function updateArray(myArray, oldValue, newValue) {
  if (!myArray instanceof Array) return;

  const index = myArray.indexOf(oldValue);
  if (index !== -1) {
    myArray[index] = newValue;
  }
}

index 값이 있는 경우 -1이 아닌 값을 반환 할 것입니다. 이 값에 새로운 값을 저장하면 완료입니다. 이제 모든 코드가 완료되었습니다. 잘 동작하는지 테스트 해보도록 하겠습니다.
test = [1, 2, 3];

// test 배열의 2를 4로 변경해보기
updateArray(test, 2, 4)

실행시 출력 결과는 아래와 같습니다.
[1, 4, 3]

2가 4로 변경되었군요. 잘 동작함을 확인할 수 있습니다.

여기까지 자바스크립트를 사용하여 배열의 값 중 하나를 찾아 다른 값으로 변경, 수정하는 방법을 알아봤습니다.

Previous

[자바스크립트] 엘리먼트의 페이지 위치 알아내기, getBoundingClientRect

Previous

자바스크립트에서 URLSearchParams 사용하여 주소 쿼리스트링, 파라미터 변경하기