JavaScript 공부정리 - 배열

시작하기 전에...

 

이번엔 배열을 집중적으로 다룬다.

 

1. 배열선언

2. 배열접근

3. 배열내 값의 갯수 확인

4. 배열에 요소 추가(뒷 부분에 추가, 특정 위치에 추가)

5. 배열 요소 제거

---

1. 배열 선언

const arr = [1, 2, 3, 'string', true]

배열을 선언하고 숫자와 문자열, 불 값을 넣었다.

이 선언문을 기준으로 아래를 설명한다.

 

2. 배열 접근

맨 위의 코드에서 이어진다.

arr[0]			// 1
arr[3]			// "string"

arr의 0번째 값은 1, 3번째 값은 "string"이다.

 

3. 배열내 값의 갯수 확인

맨 위의 코드에서 이어진다.

 

arr.length			//5

length라는 속성으로 구해온다.

5개의 값이 들어가 있으므로 5가 리턴된다.

 

4. 배열에 요소 추가(뒷 부분에 추가, 특정 위치에 추가)

맨 위의 코드에서 이어진다.

arr.push('우유')			//[1, 2, 3, 'string', true, "우유"]

push라는 속성으로 넣는다.

 

다른 방법도 있다.

arr[10] = '윈도'

//결과
//[1, 2, 3, "string", true, empty, empty, empty, empty, empty, "윈도"]

이런식으로 넣어줄 수도 있다.

 

 

이번엔 특정 위치에 요소를 추가해 보자

마찬가지로 맨 위의 코드에서 이어진다.

arr.splice(1, 0, '엉덩이')

// 결과
// [1, "엉덩이", 2, 3, "string", true]

후술하겠지만 splice는 원래 값을 지우는 데 사용한다 (자세한건 아래 참조)

그런데 역으로 값을 추가할 때 사용할 수도 있다.

1번 인덱스에 값을 0개 제거하고 '엉덩이' 값을 추가한다고 해석할 수있다.

 

 

 

!!여기서 의문

const는 분명 상수다.

그런데 push속성을 사용하자 값이 변경된 것을 볼 수 있다.

이건 정상적인 상황일까?

const arr = [1, 2, 3, 'string', true]
console.log(arr)
arr.push('우유')
console.log(arr)

// 결과
// [1, 2, 3, "string", true]
// [1, 2, 3, "string", true, "우유"]

 

일단은 넘어가자

 

 

5. 배열 요소 제거

맨 위의 코드에서 이어진다.

아래는 인덱스 번호를 기반으로 지우는 명령이다.

arr.splice(1, 2)

// 결과
// [1, "string", true]

splice 속성으로 제거한다.

1번 인덱스부터 총 2개를 제거한다는 의미다.

즉 1번 인덱스와 2번 인덱스의 값이 사라졌고

1번 인덱스 자리에는 3번 인덱스의 값이 들어와 있다.

 

 

이번엔 값을 기반으로 지워보자

const arr = [1, 2, 3, 'string', true]
const index = arr.indexOf("string")
arr.splice(index, 1)

console.log(arr)

// 결과
// [1, 2, 3, true]

최초의 배열에서

"string"값을 가진 변수 index를 만들고

그 index와 같은 값을 가진 부분을 없애도록 명령을 만들었다.

 

 

참고로 이 명령은 한 번 실행 된다

즉 배열안에 string 값이 두 번 들어가 있을 경우

낮은 인덱스 값부터 없어진다.

const arr = [1, 2, 3, 'string', 'string', true, 'string']
const index = arr.indexOf("string")
arr.splice(index, 1)
arr.splice(index, 1)
console.log(arr)

// 결과
// [1, 2, 3, true, "string"]

arr 배열에 string 값이 3개가 들어가 있다.

그리고 string을 없애라는 명령을 두 번 실행 했다

그러자 가장 마지막에 있는 string은 살아남았다.