배열

배열이란?

• 인덱스를 가지는 복수의 자료를 저장할 수 있는 자료구조
• 데이터는 순차적으로 저장되며 중복이 가능하다.
• 저장된 데이터에는 인덱스를 이용하여 접근이 가능하다.
• key가 없으며 인덱스가 있다.
• 값이 직렬로 연결되어 제공된다

배열 선언 방법

new Array()

    <script>
        let arr1 = new Array(1,2,"아","a");
        console.log(arr1); // [1, 2, '아', 'a']
    </script>

literal notation []

    <script>
        let arr2 =[1,2,3,`abcd`,true];
        console.log(arr2); //[1, 2, 3, 'abcd', true]
    </script>

객체와 배열 차이

• 객체는 key가 있고 배열은 인덱스가 있다.
• 배열에는 length가 있지만 객체에는 없다.
• 객체는 {} 를 통해 생성 , 배열은 [] 를 통해 생성된다.

<script>
        let a = {
            1 : 1,
            2 : 2,
            3 : 3
        }
        console.dir(a)
        let b =[1,2,3,`abcd`,true];
        console.dir(b)
    </script>

배열 요소 접근 방법

• 인덱스 번호를 통해 접근해야 한다.
• 인덱스는 0부터 시작하며 “현재 배열의 최대 길이 - 1” 로 끝난다.
• 잘못된 인덱스로 배열에 접근할 경우 undefined가 출력된다.

   <script>
        let arr1 =[1,2,3,`abcd`,true];
        console.log(arr1[0]); // 1
        console.log(arr1[1]); // 2
        console.log(arr1[2]); // 4
        console.log(arr1[3]); // abcd

        //다른 값을 넣을 때
        arr1[0] = 10;
        console.log(arr1[0]); //10
        console.log(arr1[8]); //undefined
    </script>

• 배열에 객체 프로퍼티를 삽입할 수 있다. 단, 객체 프로퍼티가 삽입된다 하엳ㅎ 배열의 length에는 전혀 영향이 없다.

    <script>
        let arr1 = ['zero','one','two'];

        //프로퍼티 동적 추가
        arr1.color = 'red'
        console.log(arr1.length); //3
        console.dir(arr1);

        //배열 원소 추가
        arr1[3] = 'red'
        console.log(arr1.length); //4
        console.dir(arr1);       
    </script>

Array.length

• 현재 배열의 길이를 나타낼 경우 사용하는 프로퍼티
• 배열 리터럴을 넣게 되면 해당 length가 증가한다.
• 인덱스를 가지고 삽입할 경우 최대 길이보다 길면 배열은 랭스 값을 갱신하고 데이터가 없는 공란은 undefined로 둔다.

    <script>
        let arr1 = [];
        
        arr1[0] = 1;
        arr1[3] = true;
        arr1[8] = "안녕"

        for(i=0; i<arr1.length; i++){
            console.log(arr1[i])
        }
         console.dir(arr1)

    </script>

배열 함수

이름	내용
push	배열의 끝에 원하는 값을 추가
pop	배열의 마지막 주소에 있는 값을 제거하여 반환
shift	배열의 첫 번째 주소에 있는 값을 제거하여 반환
concat	두 개의 배열을 합친다.
join	배열 값 사이에 원하는 문자 삽입
reverse	열을 역순으로 재배치
sort	배열을 정렬
slice	배열의 일부분을 반환
splice	배열 값을 추가하거나 제거하여 반환

 <script>
        //push
        console.log("---------push------------------")
        const ex1 = ["a","b", "c"];
        ex1.push("d")
        console.log(ex1);

        //pop
        console.log("---------pop------------------")
        const ex2 = ["a","b", "c"]
        let x1 = ex2.pop();
        console.log(ex2)
        console.log(x1)

        //shift
        console.log("---------shift------------------")
        const ex3 = ["a","b", "c"]
        let x2 =ex3.shift();
        console.log(ex3)
        console.log(x2)

        //concat
        console.log("---------concat------------------")
        const ex4_1 = ["a","b", "c"]
        const ex4_2 = ["d","e", "f"]
        
        const res1 = ex4_1.concat(ex4_2);
        console.log(res1)
        console.log(res1 == ex4_2) //false 주소를 새로 만들어낸것

        //join
        console.log("---------join------------------")
        const ex5 = ["a", "b","c"];
        const res2 = ex5.join("/")
        console.log(res2)
        console.log(res2 == ex5) //false

        //reverse
        console.log("---------reverse------------------")
        const ex6 = ["a", "b", "c"];
        const res3 = ex6.reverse();
        console.log(res3)
        console.log(ex6)
        console.log(res3 == ex6) //true 똑같은 값이다 

        //sort
        console.log("---------sort------------------")
        const ex7 = [1,4,2,3,5];
        ex7.sort();
        console.log(ex7)
        //잘 안쓰인다 

        //slice
        console.log("---------slice------------------")
        const ex8 = [1,2,3,4];
        const res4 =ex8.slice(0,2)//0부터 2번쨰까지
        const res5 =ex8.slice(0,-1) //뒷뷰뷴 부터
        console.log(res4);
        console.log(res5);
        console.log(res4 == ex8) //false 새로운 객체로 갱신된다는 것

        //splice
        console.log("---------splice------------------")
        const ex9_1 = ["a","b","c","d","e"]
        const ex9_2 = ex9_1.splice(1,2);
        console.log(ex9_1);
        console.log(ex9_2);

       
    </script> console.log(x2)
  </script>

배열의 순회 방법

1. 일반 for 문
2. for ~ in 문
3. for ~ of 문
4. foreach 함수

1. 일반 for 문

• 일반 for 문은 기존 배열의 length 속성을 통해 index를 추출하여 배열의 순회가 가능하다.

    <script>
        let arr1 = ['red','green','blue'];
        for(let index = 0; index<arr1.length; index++){
            console.log(arr1[index]);
        }
    </script>

2. for ~ in 문

• 기존 for 문과 달리 in 문은 배열의 처음부터 끝까지 순회할 수 있는 인덱스를 생성한다.
• 해당 인덱스를 이용한 배열 안의 데이터를 처음부터 끝까지 순회 가능하다.

    <script>
        let arr1 = ['red','green','blue'];
        for(let key in arr1){
            console.log(`${key} : ${arr1[key]}`)
        }
    </script>

3. for ~ of 문

• for ~ of 문은 반복할 수 있는 객체(iterable object)를 순회할 수 있도록 해주는 반복문이다.
• for in 문과 반복하는 것은 차이가 없지만 대상과 방법에서 차이가 있다.
• iterable object 를 반복할 때 마다 반복할 수 있는 객체 안의 아이템 값이 variable 변수에 설정된다.
• for ~ of 문을 사용하기 위해 객체가 Symbol.iterator 속성을 가지고 있어야 한다.
• 인덱스를 사용할 이유가 없고 아이템 값만 받아 사용할 경우 유용하게 쓸 수 있다.

    <script>
        let arr1 = ['red','green','blue'];
        for(const item1 of arr1){
            console.log(item1);
        }
        for(const item2 of [10,20,30]){
            console.log(item2);
        }
        for(let item3 of "안녕"){
            console.log(item3)
        }
    </script>

3-1. for of 문 : DOM을 활용한 객체 순회

<body>
   <ul>
    <li>딸기</li>
    <li>수박</li>
    <li>참외</li>
   </ul>
    <script>
        let Li = document.querySelectorAll("li");
        for(let li of Li){
            console.log(li.textContent)
        }
    </script>
</body>

3-2. for ~ in ,for ~ of

• for ~ in
  • key 값을 불러온다.
  • 객체의 모든 열거 가능한 속성에 대해 반복
• for ~ of
  • value를 불러온다.
  • [Symbol.iterator] 속성을 가지는 컬렉션 전용

    <script>
     let a = [10, 20, 30];
     for(let key in a){
        console.log(key, a[key]);
     }
     console.log("-------------")
     for(let value of a){
        console.log(value);
     }
    </script>

4. foreach

• Array에서 제공하는 함수
• 처음부터 끝까지 순회하고자 할 때 쓰는 함수이며 안쪽 파라미터에는 callback function이 들어간다.
• callback function 의 파라미터로 두개를 사용할 수가 있는데 ( 해당 데이터 아이템 , 인덱스번호 ) 두개를 선언하여 사용이 가능하다.

    <script>
     let a = [10, 20, 30];
     a.forEach(function(item, index) {
        console.log(`${index} : ${item}`);
     });
     //인덱스 없이 값만 얻을 경우
     a.forEach(e=>{
        console.log(e)
     })
    </script>

배열 요소 삭제

• 배열도 객체이므로 delete 연산자를 사용할 수 있다.
• 단 delete를 써도 length 값은 변하지 않으며 완벽히 삭제할 경우 splixe() 메서드를 사용한다.

    <script>
     let a = [10, 20, 30];
        delete a[1];
        console.dir(a);
    console.log("---------------")
    let b = [10, 20, 30];
    let b_1 = b.splice(2);
    console.dir(b);
    console.dir(b_1);
    </script>

유사배열객체

• Array는 아니지만 Array 처럼 사용할 수 있는 Object
• 인덱스를 가지고 있으며 작성 된 순서대로 읽기, 수정, 삭제가 가능하다.
• 또한 length가 존재한다.
• {key : value} 형태의 오브젝트 특징을 유지하면서 배열의 특징을 가미한 것이 유사배열객체이다.