[JavaScript] JavaScript 배열

1. 배열

- 하나의 값만 저장하는 변수를 확장하여 여러개의 저장 공간을 만드는 방법

- 자바스크립트에서는 배열을 객체를 이용해 만드는 컬렉션 자료구조

- 하나의 배열에 여러 개의 타입을 넣어줄 수 있음

• 배열 선언
  var arr = new Array();
  var arr = [];
• 배열 선언과 동시 초기화
  var fruits = new Array("사과", "배", "오렌지");
  var fruits = ["사과", "배", "오렌지"];
  
  var arr = ["안녕", 1, true, 3.14];
• 배열 요소값 변경
  // fruits에는 ["사과", "배", "오렌지"];
  fruits[1] = "레몬"; // ["사과", "레몬", "오렌지"];
  fruits[0] = "애플"; // ["애플", "레몬", "오렌지"];
  fruits[3-1] = "파인애플 // ["애플", "레몬", "파인애플"];
• 배열의 길이 알아내기
  .length를 통해 현재 배열의 길이를 알 수 있다.
  console.log(fruits.length);

2. 배열 예시

<script>
    // 배열 선언
    console.log("--배열 선언--");
    var arr1 = new Array();
    console.log(arr1);

    // 배열 선언 2번째 방법
    var arr2 = [];
    console.log(arr2);

    // 배열 선언과 동시 초기화
    console.log("--배열 선언과 동시 초기화--")
    var arr3 = new Array("사과","배","오렌지")
    console.log(arr3);

    var arr4 = ["사과", "배", "오렌지"];
    console.log(arr4);

    var arr5 = ["사과", 1, true, 3.14, "안녕하니?", "반가워1", "반가워2"];
    console.log(arr5);

    // 배열의 길이 가져오기
    console.log("--배열의 길이 가져오기--");
    console.log(arr5.length);

    console.log("--하나하나씩 찍기--")
    console.log(arr5[0]);
    console.log(arr5[1]);
    console.log(arr5[2]);
    console.log(arr5[3]);
    // 들어있지 않는 값은 undefined로 찍힘
    console.log(arr5[4]);

    // 배열과 반복문
    console.log("--배열과 반복문--");
    for(var i = 0; i < arr5.length; i++) {
        console.log("=====> " + arr5[i]);
    }
</script>

3. 배열의 기본 사용(메소드)

push()	arr1.push("a"); arr1.push("a","b","c");	배열의 가장 끝에 값을 추가(집어넣기)
pop()	var a = arr1.pop();	배열의 가장 끝에 값을 삭제(가져오기)
unshift()	arr1.unshift("v"); arr1.unshift("a","b","c");	배열의 가장 앞에 값을 추가
shift()	var a = arr1.shift();	배열의 가장 앞에 값을 삭제
slice()	var arr1 = nums.slice(1, 3); var arr2 = nums.slice(2);	배열에서 원하는 인덱스의 값에서부터 복사 앞 요소 포함, 뒤 요소 미포함 - slice(1,3) 앞 요소 포함, 뒤의 모든 요소 - slice(2)
splice()	var arr1 = nums.splice(1, 2); var arr2 = nums.splice(1);	배열에서 원하는 인덱스의 값을 삽입 또는 삭제 앞 요소 포함, 2개 삭제 후 대입 변수에 할당 - splice(1,2) 앞 요소 포함, 뒤의 모든 요소 - splice(1)
concat()	var arr = arr1.concat(arr2);	두개의 배열을 연결(배열 합치기)
indexOf()	arr1.indexOf(10);	배열 요소 인덱스 가져오기
lastIndexOf()	arr1.lastIndexOf(10);	배열 요소 인덱스를 마지막에서부터 가져오기
includes()	arr1.includes(3);	배열에 요소가 존재하는지 확인

4. 배열 메소드 예시

<script>
    var arr1 = ['a','b','c','d','e','f'];
    console.log(arr1.toString());

    console.log("==push/pop() ====================>")
    // push() 배열 끝에 값 추가
    arr1.push('g');
    console.log(arr1.toString());

    // pop() 배열 끝에 값 삭제
    var a = arr1.pop();
    console.log("arr1.pop() : "+ a);
    console.log(arr1.toString());

    arr1.push("가","나","다");
    console.log(arr1.toString());

    console.log("==shift/unshift() =====================>")
    // shift() 배열 앞에 값 삭제
    var b = arr1.shift();
    console.log("arr1.shift() : " + b);
    console.log(arr1.toString());

    // unshift() 배열 앞에 값 추가
    arr1.unshift("1");
    console.log(arr1.toString());

    arr1.unshift("A","B","C");
    console.log(arr1.toString());

    console.log("==slice() ========================>")
    // slice() 배열에서 원하는 인덱스의 값에서부터 복사
    var nums = [1,2,3,4,5];
    var arr2 = nums.slice(1,3);     // 앞 요소 포함, 뒤 요소 미포함
    console.log(arr2.toString());
    console.log(nums.toString());

    var arr3 = nums.slice(2);       // 앞 요소 포함, 뒤의 모든 요소
    console.log(arr3.toString());
    console.log(nums.toString());

    console.log("==splice() ========================>")
    // splice() 배열에서 원하는 인덱스의 값을 삽입 또는 삭제
    var arr4 = nums.splice(1, 2);   // 앞 요소 포함, 2개 삭제 후 대입 변수에 할당
    console.log(arr4.toString());
    console.log(nums.toString());

    nums = [1,2,3,4,5];             // 재 초기화
    console.log(nums.toString());
    var arr5 = nums.splice(1);      // 앞 요소 포함, 뒤의 모든 요소
    console.log(arr5.toString());
    console.log(nums.toString());
    
    console.log("==concat() ===================>");
    // concat() 두개의 배열을 연결(배열 합치기)
    var b1 = [1,2,3];
    var b2 = [4,5];
    let c = b1.concat(b2);
    console.log(b1.toString());
    console.log(b2.toString());
    console.log(c.toString());

    console.log("==indexOf() =========================>");
    // indexOf() 배열 요소 인덱스 가져오기
    // lastIndexOf() 배열 요소 인덱스를 마지막에서부터 가져오기
    console.log(c.indexOf(1));
    console.log(c.indexOf(10));     // 못 찾을 때는 -1 반환
    
    console.log(c.lastIndexOf(4));
    console.log(c.lastIndexOf(10));

    console.log("==includes() ========================>");
    // includes() 배열에 요소가 존재하는지 확인
    console.log(c.includes(3));
    console.log(c.includes(10));
</script>