자바스크립트(JavaScript) 배열(Array)의 추가 삭제

안녕하세요. 루미오입니다.

JavaScript의 Array에 앞과 뒤에 요소를 추가하거나 삭제하는 방법(shift, unshift, push, pop ), 특정 요소를 중간에 추가하거나 삭제하는 방법(splice)을 알아보겠습니다.

순서
● Array 앞, 뒤에 추가 삭제 (shift, unshift, push, pop)
● Array 특정 요소 추가 삭제 (splice)
● Array 특정 요소 찾기 (indexOf, lastIndexOf)
● Array 특정 요소 찾아서 바꾸기 (indexOf, splice)
● 전체 Source Code & 바로 Test [jsfiddle]

하단의 → 코드 확인 및 테스트 버튼을 클릭하면 jsfiddle에서 바로 Test해 보실 수 있습니다.

 

Array 앞, 뒤에 추가 삭제 (shift, unshift, push, pop)

/* Array 앞, 뒤에 추가 삭제 */
var alphabet = ['A', 'B', 'C'];	// alphabet.length : 3

alphabet.push('D');	// ["A","B","C","D"]
alphabet.pop();	// ["A","B","C"]
alphabet.shift();	// ["B","C"]
alphabet.unshift('A');	// ["A","B","C"]

→ 코드 확인 및 테스트

push, pop 함수는 Array의 뒤에 요소를 추가, 삭제합니다. shift, unshift 함수는 앞에 요소를 추가, 삭제합니다.

 

Array 특정 요소 추가 삭제 (splice)

/* Array 특정 요소 추가 삭제 */
alphabet = ['A', 'B', 'C', 'D', 'E'];	// alphabet.length : 5

alphabet.splice(1, 2);	// ["A","D","E"]
alphabet.splice(1, 0, 'B', 'C');	// ["A","B","C","D","E"]
alphabet.splice(2, 2, 'F', 'G');	// ["A","B","F","G","E"]

→ 코드 확인 및 테스트

splice 함수는 특정 요소를 찾아서 삭제합니다. 또한, 삭제 후에 특정 요소를 추가 할 수도 있습니다. 5 Line은 1 index부터 2개를 삭제합니다. 8 Line은 1 index부터 0개를 삭제하기 때문에 아무것도 삭제되지 않고, 1 index자리에 'B', 'C'를 추가합니다. 11 Line은 2 index부터 2개를 삭제하고 2 index 자리에 'F', 'G' 요소를 추가합니다.

 

Array 특정 요소 찾기 (indexOf, lastIndexOf)

/* Array 특정 요소 찾기 */
alphabet = ['A', 'B', 'C', 'D', 'E', 'A', 'B'];		// alphabet.length : 7

var idx = alphabet.indexOf('B');	// 1
idx = alphabet.indexOf('B', 2);	// 6
idx = alphabet.indexOf('F');	// -1
idx = alphabet.lastIndexOf('B');	// 6
idx = alphabet.lastIndexOf('B', 5);	// 1
idx = alphabet.lastIndexOf('F');	// -1

→ 코드 확인 및 테스트

indexOf, lastIndexOf 함수는 Array에서 특정 요소를 찾아 index를 return 합니다. 주의할 점은 IE 9 부터 지원하기 때문에 IE 8 이하에서 사용하려면 폴리필을 적용해야 합니다. 적용방법을 보려면 [자바스크립트(JavaScript) Array.prototype.indexOf, Array.prototype.lastIndexOf 폴리필(polyfill)]을 참조하세요.

 

Array 특정 요소 찾아서 바꾸기 (indexOf, splice)

/* Array 특정 요소 찾아서 바꾸기 */
alphabet = ['A', 'B', 'C', 'D', 'E'];	// alphabet.length : 5

idx = alphabet.indexOf('B');	// 1
if(idx > -1)
    alphabet.splice(idx, 1, 'F');
document.write("alphabet : " + alphabet);	// ["A","F","C","D","E"]

→ 코드 확인 및 테스트

특정 요소를 indexOf 함수로 ‘B’의 index 위치를 찾아서 splice 함수를 이용해서 'F'로 바꾸고 있습니다.

 

감사합니다.

- 루미오 . LOOMIO -