# 배열

## 배열

#### **배열(array)**이란 **연관된 데이터를 모아서 통으로 관리**하기 위해서 사용하는 **데이터 타입**이다.

### 배열의 생성

```javascript
var member = ['egoing', 'k8805', 'sorialgi'] // 0 1 2 
```

* **대괄호(\[ ])는 배열을 만드는 기호**다. 대괄호 안에 데이터를 콤마(,)로 구분해서 나열하면 배열이 된다.
* 하나의 변수에 3개의 데이터를 저. **각각의 데이터를 원소(Element)이**라고 부른다.
* 배열의 값을 가져올 때는 대괄호 안에 숫자를 넣는다**. 이 숫자를 색인(index)**이라고 함  **0부터 시작**한다.

### 배열의 존재 이유 

* **함수**는 **여러개의 값이 입력** 되어도 **하나의 값**만 **반환(return)**이된다. 
* **배열**은 **여러개의 값을 넣거나 호출 할 수 있다.** 

```javascript
function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
var members = get_members();
document.write(members[0]); //egoing
document.write(members[1]); //k8805
document.write(members[2]); //sorialgi
```

###

### 배열의 사용

```javascript
function get_members(){
    return ['egoing', 'k8805', 'sorialgi'];
}
members = get_members();
// members.length는 배열에 담긴 값의 숫자를 알려준다. 
for(i = 0; i < members.length; i++){
    // members[i].toUpperCase()는 members[i]에 담긴 문자를 대문자로 변환해준다.
    document.write(members[i].toUpperCase());   
    document.write('<br />');
}
```

* 배열은 반복문과 결합하여 많이 사용된다.
* 배열요소의 개수가 많아져도 length (배열 요소의 개수 만큼) 대문자로 변환 시켜준다.&#x20;

### 배열의 조작 &#x20;

#### push:point\_right: 배열안에 원소를 추가

```javascript
var li = ['a', 'b', 'c', 'd', 'e'];
li.push('f');
alert(li); // ['a','b','c','d','e','f']
```

#### concat:point\_right: 복수의 원소를 추가

```javascript
var li = ['a', 'b', 'c', 'd', 'e'];
li = li.concat(['f', 'g']);
alert(li); // ['a','b','c','d','f','g']
```

#### unshift :point\_right:배열의 시작점에 원소를 추가

```javascript
var li = ['a', 'b', 'c', 'd', 'e'];
li.unshift('z');
alert(li); // ['z','a','b','c','d','e']
```

#### splice:point\_right:첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열로부터 제거한 후에 리턴

```javascript
var li = ['a', 'b', 'c', 'd', 'e'];
li.splice(2, 0, 'B'); 
alert(li);//['a','b','B','c','d','e']
```

###

### **제거**

#### shift :point\_right: 배열의 첫번째 원소를 제거

```javascript
var li = ['a', 'b', 'c', 'd', 'e'];
li.shift();
alert(li); // ['b','c','d','e']
```

#### pop :point\_right: 배열 끝점의 원소를 제거

```javascript
var li = ['a', 'b', 'c', 'd', 'e'];
li.pop();
alert(li); //['a','b','c','d']
```

### **정렬**

#### sort :point\_right: 순서대로 정렬해준다. ( 숫자, 문자 기본적인 순서에 따라 )

```javascript
var li = ['c', 'e', 'a', 'b', 'd'];
li.sort();
alert(li); //['a','b','c','d','e']
```

**array.sort(sortfunc)을 사용하면 원하는 정렬방법에 따라 정렬을 할 수 있다.**&#x20;

#### reverse :point\_right: 역순으로 정렬해준다.

```javascript
var li = ['c', 'e', 'a', 'b', 'd'];
li.reverse();
alert(li); //['e','d','c','b','a']
```

###

### 배열 조회하기&#x20;

```javascript
{
            const arr12 = [100, 200, "javascript"];
            const search = "javascript";

            //for문
            for(let i=0; i<arr12.length; i++){
                if( search == arr12[i] ){
                    document.write( search + "를 찾았습니다.<br>");
                }
            }

            //forEach
            arr12.forEach(function(el){
                if( search == el ){
                    document.write( search + "를 찾았습니다.<br>");
                }
            });

            //map
            arr12.map(function(el){
                if( search == el ){
                    document.write( search + "를 찾았습니다.<br>"); 
                }
            });
            document.write("<br>");
        }
        // 모두 javascript를 찾았습니다. 라는 결과값이 나온다.
```