04 -1 자바스크립트 배열, push(), splice() 메소드 사용

배열은 여러 개의 변수를 한 번에 선언해 다룰 수 있는 자료형

- 쉼표(,)로 내부의 값(=요소)을 구분

- 요소의 순서를 인덱스라 부름

 

 

JS 배열의 형태

 

 

---

 

배열 요소 개수 확인하기 : 배열.length

 

 

메소드를 사용해 배열 뒷 부분에 요소 추가하기 : 배열.push(요소)

 

 

인덱스를 사용해 배열 뒷 부분에 요소 추가하기

 

 

 

배열 요소 제거하기 - 2가지 방식이 있음

 

- 인덱스 기반으로 제거 : 배열.splice(인덱스, 제거할 요소의 개수)

접합(splice)은 다양하게 활용되는데 일부를 제거한 후 붙이는 것과 중간에 다른 요소를 넣고 붙이는 것 둘 다 접합.

 

 

splice (2, 1) : 배열의 2번째 인덱스로부터 1개의 요소를 제거

▶ ["pear"] : 제거되는 요소

 

 

 

- 값을 기반으로 제거

: 배열 내부에서 특정 값의 위치를 찾는 indexOf() 메소드를 사용해 값의 위치를 추출한 뒤 splice() 메소드를 사용해 제거

만약 배열 내부에 요소가 없으면 -1을 리턴

 

const 인덱스 = 배열.indexOf(요소)
배열.splice(인덱스, 1)

 

 

 

 

: indexOf 메소드 사용해서 'banana' 값의 위치를 확인 -> itm.splice(1,1) 메소드 사용해 ['banana'] 가 제거됨을 확인 -> 다시 배열 itm을 보면 'banana'가 제거된 배열 itm이 보인다.

마지막 라인, 이미 제거된 'banana'의 위치를 찾으려고 하니까 -1 리턴

 

 

+) 문자열의 indexOf 메소드

백두산의 앞 글자인 '백'의 위치가 5번째 인덱스에 있어서 5를 출력

 

 

 

+) 배열의 특정 위치에 요소 추가하기 : 배열.splice(인덱스, 0, 요소)

 

const itmA = ['apple','banana','orange','melon']
undefined


itmA.splice(1, 0, 'lemon')
[]


itmA
(5) ['apple','lemon','banana','orange','melon']

 

splice(1, 0, 'lemon') : 'lemon'을 인덱스 1에 추가

 

 

---

 

기본미션 자료의 비파괴와 파괴

- 연산자, 함수, 메소드는 크게 비파괴적 처리와 파괴적 처리로 구분 가능

- 처리 후 원본의 상태 변화에 따라 구분

 

비파괴적 처리 : 처리 후에 원본 내용이 변경되지 않는다.

- 메모리가 여유로운 현대의 프로그래밍 언어와 라이브러리는 자료 보호를 위해 대부분 비파괴적 처리방식 사용

 

: 상수 a, b, c는 실행 이후 원본 내용을 유지

 

 

파괴적 처리 : 처리 후에 원본 내용이 변경된다.

- 배열과 같이 거대해질 수 있는 자료에 대한 메모리 절약 가능 (장점)

- 원본이 사라지기 때문에 위험할 수 있음 (단점)

 

 

: melon이 추가되어 원본(array)의 내용이 변경

 

 

선택미션 확인 문제3

 

① 비파괴적 처리

 

 

 

② 파괴적 처리 - push 메소드를 사용해서 배열의 요소를 추가해 원본이 변경

 

③ 비파괴적 처리

 

 

 

④ 비파괴적 처리