상권's

배열에 대해서 알아보자. (1. 추가, 삭제, 조회, 변경) 본문

~2022 작성 글/자바스크립트

배열에 대해서 알아보자. (1. 추가, 삭제, 조회, 변경)

라마치 2021. 9. 30. 15:45

배열은 중괄호([])를 이용해서 만들 수 있습니다.

arr = [1, 2, 3, 4]

배열은 각 index에 element가 속해있습니다. index는 배열의 첫번째 element를 0으로 시작합니다.

 


배열에 엘리먼트 조회하기

배열의 값을 조회하기 위해서는 index를 입력하면 됩니다.

arr = [1, 2, 3, 4]

arr[1] // 배열의 변수 + 중괄호([index]) 를 입력하면 해당 인덱스의 엘리먼트 조회.
       // 배열의 인덱스는 0부터 시작합니다!
2      // 배열의 1번째 인덱스는 2.
arr[0]
1


arr = ['sangkwon', 'kim', 'daegu', 'changwon']

arr['sangkwon'] // 파라미터로 입력되는 값을 찾는 건 아닙니다!
undefined

arr.indexOf('찾기 원하는 값') 배열에서 '찾기 원하는 값'이 위치한 인덱스 확인.

arr = ['sangkwon', 'kim', 'daegu', 'changwon']

arr.indexOf('daegu') //파라미터의 값이 배열에 있으면 인덱스를 리턴합니다.
2
arr.indexOf('sang') //파라미터의 값이 배열에 없으면 -1을 리턴합니다.
-1

arr.includes('찾기 원하는 값') 배열에서 '찾기 원하는 값'이 있는지 확인 - boolean 값을 리턴.

arr = ['sangkwon', 'kim', 'daegu', 'changwon']

arr.includes('sangkwon') //파라미터의 값이 배열에 있으면 true.
true
arr.includes('sang') //파라미터의 값이 배열에 없으면 fasle.
false

for문을 이용해서 배열의 모든 요소를 출력하기.

배열은 for of를 통해서 아래와 같이 배열의 모든 요소를 불러올 수 있다.

for ( const el of arr ) {console.log(el)}
sangkwon
kim
daegu
changwon

배열에 엘리먼트 추가하고 삭제하기.

arr.push('추가하기 원하는 값'), arr.unshift('추가하기 원하는 값') 배열에 엘리먼트를 추가.

pushunshift의 차이는 '추가하는 원하는 값'의 위치가 다르다는 점 입니다.

push는 배열의 맨 마지막 엘리먼트로 '추가하기 원하는 값'이 입력됩니다.

반면, unshift는 배열의 첫번째 엘리먼트로 '추가하기 원하는 값'이 입력됩니다.

실행 결과는 아래 코드에서 확인하겠습니다.

 

arr.pop(), arr.shift() 배열의 엘리먼트를 삭제

popshift의 차이는 삭제되는 엘리먼트의 위치가 다르다는 점 입니다.

pop은 배열의 마지막 엘리먼트를 삭제합니다.

shift는 배열의 첫번째 엘리먼트를 삭제합니다.

arr = [1, 2, 3, 4]

arr.push(1) // 파라미터가 배열의 맨 마지막에 추가.
5 // 실행하고 나면 배열의 길이가 리턴.
arr
[1, 2, 3, 4, 1]

arr.pop() // 배열의 맨 마지막 element를 삭제.
1
arr
[1, 2, 3, 4]
arr.pop(3) // 단, 파라미터에 값을 넣더라도 파라미터의 값이 삭제되는 게 아니고
4          //맨 마지막 element가 삭제
arr
[1, 2, 3]

arr.shift() // 배열의 첫번째 element가 삭제.
1
arr
[2, 3]

arr.unshift(100) // 배열의 첫번째 element로 파라미터가 입력된다.
3
arr
[100, 2, 3]

배열의 엘리먼트 변경 및 추가하는 다른 방법.

arr = [1, 2, 3, 4]

arr[2] = 7 // 조회하는 방법처럼 중괄호에 인덱스를 넣은 후 새로 할당하면 엘리먼트가 변경 됨.
7

arr
(4) [1, 2, 7, 4]


arr = [1, 2, 3, 4]
[1, 2, 3, 4]

arr[4] = 5 // 배열 내에 존재하지 않는 인덱스를 [] 
5          // 사이에 넣고 값을 할당하면 해당 인덱스에 엘리먼트로 추가.

arr
[1, 2, 3, 4, 5]

arr[6] = 6 //[]에 넣은 인덱스가 기존 배열의 길이를 초과하는 인덱스일 경우, 
6           // 그 전의 인덱스는 undefined가 되고 할당한 값이 엘리먼트로 들어갑.

arr
[1, 2, 3, 4, 5, empty, 6]

arr[5]
undefined

 

Comments