배열의 값을 추가 및 제거

배열에 값을 추가

인덱스 값을 지정하여 값 추가

Javascript는 C처럼 배열의 공간을 할당하고 사용하는게 아니라

동적으로 공간이 할당되기 때문에 원하는 인덱스를 주고 값을 추가할 수 있다.

하지만 마지막 요소에 추가하는게 아니라 마지막 요소에서 조금 멀리 떨어진 곳의 인덱스에 값을 추가하게 되면

마지막 요소부터 새로 추가한 요소까지는 빈 인덱스로 남게된다.

selectIndex.html

<script>
	let array = ['HTML', 'CSS']
	array[5] = 'JavaScript' // 5번째 인덱스에 값 추가
	document.write(array+" "+array.length) // 배열과 배열의 길이 출력
</script>

(실행결과)

HTML,CSS,,,,JavaScript 6

 

push 메소드 사용

push 메소드를 사용하여 배열에다가 값을 추가할 수 있다.

그러나 이 메소드를 사용시에는 배열의 마지막 요소 뒤에만 추가할 수 있다.

push.html

<script>
	let array = ['HTML', 'CSS']
	array.push('JavaScript') // 메소드의 인자값으로 배열에 추가할 요소 입력
	document.write(array+" "+array.length) // 배열과 배열의 길이 출력
</script>

(실행결과)

HTML,CSS,Javascript 3

 

splice 메소드 사용

push와 다르게 splice 메소드는 원하는 위치에 값을 넣을 수 있다.

splice.html

<script>
	let array=["HTML", "CSS", "Javascript"]
	array.splice(2, 0 ,"addElement")
	/*
	메소드의 첫번째 인자값으로 요소를 넣을 위치(인덱스) 입력
	두번째 인자값으로 요소를 제거할 개수 입력(지금은 추가하는 과정이니 0으로 입력)
	세번째 인자값으로 추가할 요소의 값 입력
	*/
	document.write(array+" "+array.length) // 배열과 배열의 길이 출력
</script>

(실행결과)

HTML,CSS,addElement,Javascript 4

 

배열의 값 제거

splice, indexOf 메소드 사용

splice 메소드를 사용해서 원하는 위치의 인덱스를 제거할 수 있다.

인자값으로 삭제할 요소의 인덱스를 주면 되지만, 만약 배열의 길이가 매우 길다면 배열의 인덱스를 파악하기 함들 것이다.

그럴때는 indexOf 메소드를 이용하여 함수의 인자값이 배열에 어디에 있는지

함수의 결과 값으로 나오게 되고 그 결과 값을 splice의 첫번째 인자 값으로 주면

그 값이 어디에 있든 제거가 가능하다. 

splice.html

<script>
	let array=["HTML", "CSS", "Python", "Javascript"]
	array.splice(2, 1)
	/*
	메소드의 첫번째 인자값으로 삭제할 요소의 인덱스 입력
    두번째 인자값으로 삭제할 요소의 인덱스를 포함해 이후의 요소까지 삭제할 개수 입력
	*/
	document.write(array+" "+array.length) // 배열과 배열의 길이 출력
</script>

(실행결과)

HTML,CSS,Javascript 3

spliceWithindexOf.html

<script>
	let array=["HTML", "CSS", "Python", "Javascript"]
	let locate = array.indexOf("Python") // 인자값으로 배열의 요소 입력
	array.splice(locate, 1)
	/*
	메소드의 첫번째 인자값으로 삭제할 요소의 인덱스 입력
	두번째 인자값으로 삭제할 요소의 인덱스를 포함해 이후의 요소까지 삭제할 개수 입력
	*/
	document.write(locate+" "+array+" "+array.length+"<br>") 
	// Python의 인덱스, 배열, 배열의 길이 출력
</script>

(실행결과)

2 HTML,CSS,Javascript 3