| layout | default |
|---|---|
| title | Methods |
| parent | Arrays |
| grand_parent | JavaScript |
| nav_order | 2 |
{: .no_toc .text-beta .fw-700}
{: .no_toc .text-delta }
- TOC {:toc}
배열의 끝에 새로운 요소를 추가하거나 새로운 배열 길이를 반환
syntax {: .label .mt-2}
//반환 var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.push("Kiwi"); // x = 5
Same result different way
{: .label .mt-2}
<div class="code-example" markdown="1">
arr[arr.length]도 동일하게 작동함
</div>
```js
fruits.push("Lemon")
fruits[fruits.length] = "Lemon";
Warning {: .label .label-red .mt-2}
그 "구멍"의 값은 undefined
배열의 처음에 새 요소를 추가하고 이전 요소를 뒤로 밀음, 새로운 배열 길이 반환
▸ 첫 번째 요소대신 마지막 요소에서 작업하는 push()와 비슷함
syntax {: .label .mt-2}
//반환 var fruits = ["Banana", "Orange", "Apple", "Mango"]; fruits.unshift("Lemon"); // Returns 5
#### pop()
**배열에서 마지막 요소를 제거하거나 튀어나온 요소를 리턴**
▸ 리턴하고 싶으면 변수에 값을 담아서 사용해야함
syntax
{: .label .mt-2}
<div class="code-example" markdown="1">
arr.pop();
</div>
```js
//제거
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.pop(); // Removes the last element ("Mango") from fruits
//리턴
var fruits = ["Banana", "Orange", "Apple", "Mango"];
var x = fruits.pop(); // x = "Mango"
첫 번째 배열 요소를 제거하고 다른 모든 요소를 더 낮은 인덱스로 이동, 전환된 문자열을 리턴
▸ 첫 번째 요소대신 마지막 요소에서 작업하는 pop()과 비슷함
syntax {: .label .mt-2}
//리턴 var fruits = ["Banana", "Orange", "Apple", "Mango"]; var x = fruits.shift(); // x = "Banana"
#### delete operator
JavaScript 배열은 객체이므로 **JavaScript 연산자 `delete`를 사용하여 요소를 삭제가능**
▸ 그냥 구멍내버리고 채우지않음 (구멍낸 경우 arr.[숫자] = “” 로 채워야함)
▸ 그래서 pop() 이나 shift()를 대신 사용함
▸ splice()도 요소를 지우는데 사용가능함
예제
{: .label .label-purple .mt-2}
```js
var fruits = ["Banana", "Orange", "Apple", "Mango"];
delete fruits[0]; // Changes the first element in fruits to undefined
!note {: .label .label-yellow .mt-2}
배열에 항목을 추가/제거하고 제거 된 항목을 반환
▸ 원래 배열을 변경함
Syntax {: .label .mt-2}
▸ index : 어디서부터 추가하거나 지워야하는지
▸ howmany : 몇개의 요소가 지워져야 하는지
▸ item1... : 어떤 요소가 들어가야 하는지
//Banana,Orange,Lemon,Kiwi,Apple,Mango
▸ 인덱스0 으로 삭제만 이용하는 방법도 있다 - 오류 x 좋은방법임!
```js
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.splice(0, 1); // Removes the first element of fruits
기존 배열을 병합(연결)하여 새 배열을 만듦
▸ 매개변수로 배열을 가지고 있는 변수를 받을수도 있고, 배열을 바로 받을수도 있음
▸ 매개변수 개수는 무한(,를 사용해서 넣고싶은 만큼 넣어도 됨)
Syntax {: .label .mt-2}
...
arr1.concat(arr2, arr3, "Peter");
### Slicing an Array
#### slice()
**배열의 일부를 새로운 배열로 잘라냄**
Syntax
{: .label .mt-2}
<div class="code-example" markdown="1">
array.slice(start, end)
▸ start : 어디서부터 잘라낼지 결정, 매개변수와 맞는 인덱스에 있는 요소부터 시작하고 자름 (포함)
▸ end : 매개변수(optional)는 종료 인수 선택 (포함하지 않음)
</div>
```js
var fruits = ["Banana", "Orange", "Lemon", "Apple", "Mango"];
var citrus = fruits.slice(1);
//citrus = Orange, Lemon, Apple, Mango
var citrus = fruits.slice(1,3);
//citrus = Orange,Lemon
모든 배열 요소를 쉼표로 구분 한 문자열로 변환
syntax {: .label .mt-2}
Automatic toString() {: .label .mt-2}
배열을 부르면 배열을 쉼표로 구분된 문자열로 자동 변환해서 출력함
→ 자동으로 toString()메소드가 사용되는 것
//fruits.toString(); = fruits;
!Note
{: .label .label-yellow .mt-2}
<div class="code-example" markdown="1">
All JavaScript data types have a valueOf() and a toString() method.
</div>
#### join()
**모든 배열 요소를 지정한 구분자로 구분한 문자열로 변환**
▸ 매개변수를 지정하지 않으면 ,로 구분함
syntax
{: .label .mt-2}
<div class="code-example" markdown="1">
fruits.join("특수문자");
</div>
```js
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits.join(" * ");
//Banana * Orange * Apple * Mango
The reference contains descriptions and examples of all Array properties and methods.
[더 찾아보기](https://www.w3schools.com/jsref/jsref_obj_array.asp){: .btn .btn-outline}