[javascript] Array(배열) 접근 및 조작 함수 정리

 

 

* Array(배열)에 접근하는 방법 및 함수 사용 정리

🫠 javascript에서 배열은 굉장히 많이 사용되므로, 배열을 탐색하거나 조작할 수 있는 함수들에 대해 아래와 같이 정리하였다.

 

---

 배열을 하나 생성하고, 배열인지 확인해 보자

> Array.isArray를 통해 animation 변수가 배열인지 확인 

> output : true

 

 

---

🫠 배열 조작 - 배열 삭제 ① delete 

> 입력형식 : delete 배열[index];

👉🏻 output : [ 'digimon', <1 empty item>, 'pinggu' ]
✅ delete 배열[index]로 위치 지정하여 삭제할 경우, 빈 공간이 그대로 남는다.

 

 

---

🫠 배열 조작 - 배열 삭제 ② pop( )

> 입력형식 : 배열.pop( )

> pop( )은 배열의 뒤에서부터 삭제

👉🏻 output : pinggu  \n  [ 'digimon', 'pocketmon' ]  \n  2
✅ pop( )은 delete와는 다르게 공간이 남지 않고, pop( )의 반환 값은 삭제된 요소가 해당
✅ animation 배열의 길이가 -1 된 것을 확인할 수 있다.

 

 

---

🫠 배열 조작 - 배열 삭제 ③ shift( )

> 입력형식 : 배열.shift( )

> shift( )는 배열의 앞에서부터 삭제

👉🏻 output : digimon  \n  [ 'pocketmon', 'pinggu' ]  \n  2
✅ shift( )도 delete와 다르게 공간이 남지 않고, shift( )의 반환 값 역시 삭제된 요소가 해당
✅ animation 배열의 길이가 -1 된 것을 확인할 수 있다.

 

 

---

🫠 배열 조작 - 배열 삭제 ④ slice ( )

> 입력형식 : 배열.slice(시작 위치, 끝 위치)

> slice( )는 원하는 위치를 지정 후, 끝 위치까지 삭제

> ** slice( )는 원본을 훼손하지 x

👉🏻 output : 화면으로 확인해 보자
✅ slice( )에 index = 1 (pocketmon) 위치를 지정하여 index = 3까지 삭제를 요청했지만, 2까지만 삭제.
✅ 이는 , (콤마)를 기준으로 보면 이해하기 쉽다. , 'pocketmon' ~ , 'disney'로 콤마를 기준으로 👉🏻 , 시작(1)~(2) 끝,

✅ slice( ) 함수를 사용해도 animation의 원본이 훼손되지 않았음을 알 수 있음

 

 

---

🫠 배열 조작 - 배열 추가 ① push( )

> 입력형식 : 배열.push(' ')

> push( )는 배열의 뒤에서부터 추가

👉🏻 output : 4   \n   [ 'digimon', 'pocketmon', 'pinggu', 'disney' ]  \n   4
✅ push( )는 배열의 뒤에서부터 추가가 되며, animation 배열의 길이를 반환한다.
✅ animation 배열의 길이가 +1 된 것을 확인할 수 있다.

 

 

---

🫠 배열 조작 - 배열 추가 ② unshift( )

> 입력형식 : 배열.unshift(' ')

> unshift( )는 배열의 앞에서부터 추가

👉🏻 output : 4   \n   [ 'disney', 'pocketmon', 'pinggu', 'digimon']   \n   4
✅ unshift( )는 배열의 앞에서부터 추가가 되며, animation 배열의 길이를 반환한다.
✅ animation 배열의 길이가 +1 된 것을 확인할 수 있다.

 

 

---

🫠 배열 조작 - 배열 추가/삭제 splice( )

> 배열의 원하는 위치에 있는 요소를 n개까지 전부 통째로 날릴 수 있다 (= 삭제할 수 있다)

> 입력형식 : 배열.splice(원하는 위치, 개수)

👉🏻 output :  화면에서 확인해 보자

🙃 변수 animation 
✅ animation 배열의 위치를 index = 1로 지정하고, 개수를 따로 적어주지 않았으니 전부 삭제
✅ return 값으로 삭제된 배열을 반환하며, animation 배열에는 함수의 결괏값을 넣어줌

🙃 변수 colors
✅ colors 배열의 위치를 index = 2로 지정하고, 2개만 삭제해 달라고 요청
✅ return 값으로 삭제된 배열을 반환하며, colors 배열에는 함수의 결괏값을 넣어줌

 

 

🫠 splice( )의 또 다른 기능

> 삭제와 동시에 삭제한 공간에 추가를 할 수 있다.

> 입력형식 : 배열.splice(원하는 위치, 개수, '추가할 요소',...)

👉🏻 output : 화면에서 확인해 보자
✅ splice로 삭제한 index = 1의 위치(green)에 'hotpink', 'darkblue'를 추가
✅ return 값으로 [ 'green' ]만 출력하며, colors에는 추가된 결과를 넣어줌

 

 

---

🫠 배열 조작 - 배열 병합 concat( )

> 입력형식 : 배열.concat(배열)

> ** concat( )은 원본을 훼손하지 x

👉🏻 output : 화면에서 확인해 보자
✅ concat( )으로 animation과 animation2를 병합하고, return 값으로 병합된 배열을 반환
✅ 원본은 훼손되지 않은 것을 알 수 있음