[JavaScript] 배열 Array

Javascript의 배열은 다른 프로그래밍 언어의 배열과 다르게 배열 슬롯에 어떤 타입의 데이터라도 넣을 수 있다. 즉 배열의 첫 슬롯에는 문자열, 두 번째에는 숫자, 세 번째에는 객체를 넣는 식으로 사용할 수 있다. 또한 Javascript 배열은 동적으로 크기를 조절하므로 데이터를 추가하면 자동으로 커진다.

배열을 생성할땐 new Array()로 사용하거나 리터럴 [] 을 사용한다. 후자를 많이 사용한다. 배열의 인덱스는 0부터 시작한다.

객체의 리터럴은 {}이다.

new Array

<script>
      var aCarMakers = new Array();
      aCarMakers[0] = "Benz";
      aCarMakers[1] = "BMW";
      aCarMakers[2] = "Audi";
      console.log(aCarMakers);
</script>

[0] 인덱스 위치에 데이터 Benz를 넣는다.

리터럴 [] 사용

<script>
      var aCarMakers2 = ["Benz2", "BMW2", "Audi2"];
      console.log(aCarMakers2);

      var aCarMakers3 = [];
      aCarMakers3[0] = "Benz3";
      aCarMakers3[1] = "BMW3";
      aCarMakers3[2] = "Audi3";
      console.log(aCarMakers3)
</script>

length

배열의 건수는 length로 표현되는데, 데이터를 추가하거나 삭제하면 length가 커지거나 줄어든다. 그래서 for문과 자주 같이 사용된다.

문법: for (var i=0; i<배열의 갯수 변수명.length)

<script>
      for (var i = 0; i < aCarMakers2.length; i++) {
        document.write("나는" + aCarMakers2[i] + "에서 생산한 차를 가지고 있습니다.");
        document.write("<br/>")
      }
</script>

배열을 앞에 배열을 스킵하고 넘어가서 입력하면 empty로 넘어간 후 입력한 배열을 반환한다. 하지만 이렇게 하면 빈 공간 때문에 나중에 error가 날 수 있으므로 하지않음을 권장한다. index가 0부터 시작하기때문에 length로 표현해도 <=을 안해주고, <만 입력해도 가능하다.

join

join에 지정한 값으로 구분자를 넣고 모든 변수를 이어서 변수에 데이터를 return한다. join의 default는 ,

<script>
  var aCarMakers = ["Benz", "BMW", "Audi"]; 
  console.log(aCarMakers.join("  #  ")); // Benz # BMW # Audi

  var aDate = ["2020","07","28"];
  document.write(aDate.join("-")); //2020-07-28
</script>

변수 사이의 빈공간을 문자열 string으로 인식해 그 위치에 구분자를 넣는다.

indexOf

내부적으로 배열에 똑같은 데이터가 있는지 찾으면서 반복한다. 똑같은 데이터를 찾으면 해당 데이터의 index를 찾아서 return하고 return값 못찾을때는 -1을 반환한다.

<script>
   var aCarMakers = ["Benz", "BMW", "Audi"]; 
   var iIndex = aCarMakers.indexOF("BMW");   //파라미터 넘겨준값과 일치한 값
   document.write(iIndex+"<br/>");       //0,1,2중 BMW의 index는 1
   var iIndex = aCarMakers.indexOF("Benz");
   document.write(iIndex+"<br/>");       //-1
</script>

Push, Pop, Shift, Unshift

배열의 맨앞과 뒤에 데이터를 추가, 삭제한다.

<script>
    //push : 배열의 맨뒤에 데이터 추가
        var aCarMakers = ["Benz", "BMW", "Audi"];
        aCarMakers.push("hyundai");
        document.write(aCarMakers + "<br/>");  //Benz,BMW,Audi,hyundai
    //pop : 맨뒤에 데이터 삭제
        aCarMakers.pop();
        document.write(aCarMakers+"<br/>"); //Benz,BMW,Audi
    //shift : 맨앞에 데이터 삭제
        aCarMakers.shift();
        document.write(aCarMakers+"<br/>"); //BMW,Audi
    //unshift : 맨앞에 데이터 추가
        aCarMakers.unshift("KIA");
        document.write(aCarMakers+"<br/>");   //KIA, BMW, Audi
</script>

배열의 양끝이 아닌 중간위치의 데이터를 제어하고 싶다면.

splice

중간데이터를 제어할때 사용한다. 이때 splice는 원본데이터를 건들이기 때문에 주의해서 사용한다.

문법: splice(시작위치, 삭제할 데이터 갯수)

<script>
  //데이터 삭제
      var aCarMakers =["Benz", "BMW", "Audi"];
      var aAfterSpliceCarMakers = aCarMakers.splice(1,2);
      document.write(aCarMakers+"<br/>");   //자르고 남은 데이터, Benz
      document.write(aAfterSpliceCarMakers+"<br/>");   //자른데이터, BMW Audi
</script>

aAfterSpliceCarMakers 변수에는 자른 데이터가 들어가게 된다. 1번째 index 위치에서 2개를 자르기 때문에 bmw, audi가 들어간다. 이후 원본데이터도 수정되므로 원본데이터인 aCarMakers에는 benz 하나만 남게된다.

<script>
  //데이터 삽입
      var aCarMakers =["Benz", "BMW", "Audi"];
      aCarMakers.splice(1, 0, "Lamborghini",  "Porsche", "Bugatti");
      document.write(aCarMakers+"<br/>");         //Benz,Lamborghini,Porsche,Bugatti,BMW,Audi
</script>

두번째 인자에 0을 사용하면 삭제할 데이터는 없다는 뜻이 된다. 세번째인자에는 추가할 데이터를 넣는다.

이때 인덱스의 앞에 넣어야하는지 뒤에 넣어야하는지 헷갈릴 수 있다. 인덱스를 이렇게 생각하면 헷갈리지 않는다.
0 첫번째데이터 1 두번째데이터 2 세번째데이터

slice

splice와 기능은 동일하지만 slice는 원본 배열 객체를 변경하지 않는다.

문법: slice(시작위치, 종료위치)

2번째 인자가 삭제할 데이터 갯수가 아닌 종료위치라는 점도 다르다.

현재 splice에서 데이터를 추가해줬기 때문에 aCarMakers에는 Benz, Lamborghini, Porsche, Bugatti, BMW, Audi 데이터가 들어있다.

 <script>
     var aAfterSpliceCarMakers1 = aCarMakers.slice(2);
      document.write(aAfterSpliceCarMakers1+"<br/>");     //Porsche,Bugatti,BMW,Audi
      var aAfterSpliceCarMakers2 = aCarMakers.slice(2,3);
      document.write(aAfterSpliceCarMakers2+"<br/>");     //Porsche
      var aAfterSpliceCarMakers3 = aCarMakers.slice(1,3);
      document.write(aAfterSpliceCarMakers3+"<br/>");     //Lamborghini,Porsche
      document.write(aCarMakers+"<br/>");
 </script>

두번째 인자를 사용하지 않으면 끝위치까지 자르겠다는 말이다. 이때 마지막에 aCarMaker를 다시 보면 원본데이터는 변하지 않고 6개 데이터를 모두 가지고 있다.