자바스크립트에 concat() 메서드를 사용하면 배열에 값을 추가하거나 합치기를 할 수 있다. concat() 메서드에 익숙하면 pop, push 메서드 또는 unshift, shift 메서드를 사용하지 싫어질 수도 있다. 굳이 배열이 아니더라도 개별값들도 concat() 메서드로 추가할 수 있다.
자바스크립트 배열 합치기
Merging Javascript Array
여러 건의 배열이 있는 경우 하나로 합치는 경우가 생길 수 있다.
자바스크립트는 여러 건의 배열을 하나로 합치기가 가능한 머지 기능이 있다.
자바스크립트의 머지 기능을 사용하기 위해선 cancat() 메서드를 사용한다.
concat() 메서드는 배열을 하나로 합칠 수 있으며, 특정 위치에 있는 자료들을 삭제하며 추가할 수도 있다.
concat() 메서드 배열 합치기
배열을 합치는 방법에는 몇 가지 방법이 있다.
- 단순히 값을 넣는 방법
- 배열 2개를 추가하는 방법
- 배열의 특정 위치에 있는 값들을 삭제하면서 추가하는 방법이다.
위의 방법에 따른 사용법은 다음과 같다.
Array.concat(개별값)
Array.concat(배열)
Array.concat(배열, 배열, ~ )
Array.concat(1,0, 배열)
Array.concat(1,2, 배열)샘플코드
위에서 언급된 사용방법으로 간단한 자바스크립트 예제를 만들어 본다.
그대로 사용하면 되며, 코드의 결과값을 비교해 보면 알 수 있다.
concat() 메서드에 숫자가 들어간 부분이 애매할 수 있다.
concat() 의 인자값 중 첫번째는 추가할 위치, 두번째는 원본 배열의 삭제할 값 갯수이다.
<!DOCTYPE html>
<html>
<body>
<h2>자바스크립트</h2>
<div id="cont">
<p id="ret1"></p>
<p id="ret2"></p>
<p id="ret3"></p>
<p id="ret4"></p>
<p id="ret5"></p>
<p id="ret6"></p>
</div>
<script>
let vText;
let vComp = ["현대자동차","기아자동차","쌍용자동차","쉐보레"];
console.log(typeof(vComp), vComp);
document.querySelector("#ret1").innerHTML = vComp;
console.log("----------");
let vCompAdd = "폭스바겐";
let vCompTotal = vComp.concat(vCompAdd);
console.log(typeof(vCompTotal), vCompTotal);
document.querySelector("#ret2").innerHTML = vCompTotal;
console.log("----------");
vCompAdd = ["현대자동차", "기아자동차"];
vCompTotal = vComp.concat(vCompAdd);
console.log(typeof(vCompTotal), vCompTotal);
document.querySelector("#ret3").innerHTML = vCompTotal;
console.log("----------");
let vCompKor = ["현대자동차", "기아자동차"];
let vCompIty = ["람보르기니", "페라리"];
vCompTotal = vComp.concat(vCompKor, vCompIty);
console.log(typeof(vCompTotal), vCompTotal);
document.querySelector("#ret4").innerHTML = vCompTotal;
console.log("----------");
</script>
</body>
</html>위의 코드를 살펴본다.
원본 배열을 만들고 결과를 출력해 본다.
concat() 의 형태가 여러가지 있지만, 위에서 언급한 것에서 동떨어져 있지 않다.
concat() 메서드가 어떻게 사용되는지만 확인하면 된다.
결과화면을 보자.
반응형
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 배열의 요소 값 삭제하기 slice 메서드 (0) | 2021.12.29 |
|---|---|
| 자바스크립트 배열 값 추가 splice 사용법 (0) | 2021.12.28 |
| 자바스크립트 배열 값 수정 삭제 (0) | 2021.12.26 |
| javasciprt array unshift shift 자바스크립트 배열에 값의 추가 삭제 (0) | 2021.12.25 |
| 자바스크립트 배열 값 추가 삭제 using javascript array push pop method (0) | 2021.12.24 |
댓글