배열

Array 객체

 

Array 객체는 자바스크립트의 여러 가지 내장 객체 중에서 배열을 다룬다.

(배열이란 하나의 변수에 값을 여러 개 저장할 때 사용한다.)

• Array 객체로 배열 만들기
  - 초기값이 없는 상태에서 단순히 객체의 인스턴스만 만든다면 new 예약어를 사용해 변수에 할당하면 된다.
  - 초깃값이 없는 경우
  

  var numbers = new Array();	// 배열의 크기를 지정하지 않음
  var numbers = new Array(4);	// 배열의 크기를 지정함​

   - 초깃값이 있는 경우
  

  var numbers = ['one','two','three','four'];		// 배열 선언
  var numbers = Array('one','two','three','four');	// Array 객체를 사용한 배열 선언​

   
• Array 객체의 length 프로퍼티 사용하기
  - 배열 요소의 개수를 알기위해 Array 객체에 있는 length 프로퍼터를 사용하면 된다.
  - length 프로퍼터에는 배열 요소의 개수가 저장되어 있다.
  

  <script>
  var numbers = ["one", "two", "three", "four"];
  
  for(i = 0; i < numbers.length; i++) {
    document.write("<p>" + numbers[i] + "</p>");
  }
  </script>​

  
  
  

Array 객체의 메서드

 

종류	설명
concat	기존 배열에 요소를 추가해 새로운 배열을 만든다.
every	배열의 모든 요소가 주어진 함수에 대해 참이면 true를 반환하고 그렇지 않으면 false를 반환한다.
filter	배열 요소 중에서 주어진 필터링 함수에 대해 true인 요소만 골라 새로운 배열을 만든다.
forEach	배열의 모든 요소에 대해 주어진 함수를 실행한다.
indexOf	주어진 값과 일치하는 값이 있는 배열 요소의 첫 인덱스를 찾는다.
join	배열 요소를 문자열로 합친다. 이때 구분자를 지정할 수 있다.
push	배열의 맨 끝에 새로운 요소를 추가한 후 새로운 length를 반환한다.
unshift	배열의 시작 부분에 새로운 요소를 추가한다.
pop	배열의 마지막 요소를 꺼내 그 값을 결과로 반환한다.
shift	배열에서 첫 번째 요소를 꺼내 그 값을 결과로 반환한다.
splice	배열에 요소를 추가하거나 삭제한다.
slice	배열에서 특정한 부분만 잘라 낸다.
reverse	배열의 배치 순서를 역순으로 바꾼다.
sort	배열 요소를 지정한 조건에 따라 정렬한다.
toString	배열에서 지정한 부분을 문자열로 반환한다. 이때 각 요소는 쉼표(,)로 구분한다.

• 배열끼리 합치는 concat()메서드
  - concact() 메서드는 서로 다른 배열 2개를 합쳐서 새로운 배열을 만들어 준다.
  - 어느 배열을 먼저 쓰는가에 따라 기준이 달라지고, 결과 배열의 순서도 달라진다.
  - concact() 메서드를 이용해 새로 만들어진 배열은 기존 배열에 영향을 주지 않는다.
  

  <script>
      var nums = [1, 2, 3];
      var chars = ["a", "b", "c", "d"];
  
      // 두 개의 배열 합치기
      var numsChars = nums.concat(chars);
      var charsNums = chars.concat(nums);
      document.write("nums에 chars 합치면 : ", numsChars, "<br> chars에 nums 합치면 : ", charsNums);
      document.write("<hr>");
  </script>​

• 배열 안의 요소끼리 합치는 join() 메서드
  - join()메소드는 배열 요소를 연결해서 하나의 문자열로 만들어 준다.
  - 각 요소 사이에 원하는 구분자를 넣을 수도 있는데, 따로 지정하지 않으면 요소를 쉼표(,)로 구분한다.
  

  <script>
      var nums = [1, 2, 3];
      var chars = ["a", "b", "c", "d"];
      var string1 = nums.join();
      document.write("구분자 없이 : ", string1);
      document.write("<br>");
      var string2 = chars.join('/');
      document.write("/ 구분자 지정 : ", string2);
      document.write("<hr>");
  </script>​

• 새로운 요소를 추가하는 push(), unshift() 메서드
  - 배열 맨 끝에 요소를 추가하려면 push() 메서드를 사용한다.
  - 배열 맨 앞에 요소를 추가하려면 unshift() 메서드를 사용한다.
  - 배열 맨 앞과 맨 뒤에 요소를 추가하면 원래 있던 배열이 바뀐다.
  

  <script>
      // 요소 추가 - 새로운 length 값 반환
      var ret1 = nums.push(4, 5);  // 배열 끝에 추가
      document.write("length : ", ret1, " | 배열 : ", nums);  		
      document.write("<br>");
      var ret2 = nums.unshift(0);  // 배열 앞에 추가
      document.write("length : ", ret2, " | 배열 : ", nums);
      document.write("<hr>");
  </script>​

• 배열에서 요소를 꺼내는 pop(), shift() 메서드
  - 배열에서 뒤에 있는 요소를 꺼낼 때는 pop() 메서드를 사용한다.
  - 앞에 있는 요소를 꺼낼 때는 shift() 메서드를 사용한다.
  

  <script>
      var popped1 = chars.pop(); // 마지막 요소 꺼냄
      document.write("꺼낸 요소 : ", popped1, " | 배열 : ", chars); 
      document.write("<br>");
      var popped2 = chars.shift(); // 첫번째 요소 꺼냄
      document.write("꺼낸 요소 : ", popped2, " | 배열 : ", chars);
      document.write("<hr>");
  </script>​

• 원하는 위치에 요소를 추가·삭제하는 splice() 메서드
  - splice() 메서드는 괄호 언에 들어 있는 인수에 따라 배열 요소를 삭제하거나 새로운 요소를 추가한다,
  - splice() 메서드를 실행하면 삭제한 요소로 이루어진 새로운 배열이 결괏값으로 반환된다.
  1. 인수가 1개인 경우
     - 괄호 안의 인수는 배열의 인덱스값, 즉 배열의 위치를 가리킨다.
     - 인수가 지정한 인덱스의 요소부터 배열의 맨 끝 요소까지 삭제한다.
     - splice() 메서드를 실행한 후에는 삭제한 요소를 반환하고 기존의 배열은 변경된 상태가 된다.
  

  <script>
      // 인수가 1개일 경우
      var numbers = [1, 2, 3, 4, 5];
      var newNumbers = numbers.splice(2);
      document.write("반환된 배열 : " + newNumbers + "<br>" );
      document.write("변경된 배열 : " + numbers );
      document.write("<hr>");
  </script>​

   2. 인수가 2개인 경우
     - 첫 번째 인수는 인덱스값이고 두 번째 인수는 삭제할 요소의 개수이다.
     - splice() 메서드를 실행한 후에는 삭제한 요소를 반환하고 기존의 배열은 나머지 요소만 남는다.
  

  <script>
      var study = ["html", "css", "web", "jquery"];
      var newStudy = study.splice(2, 1);
      document.write("반환된 배열 : " + newStudy + "<br>");
      document.write("변경된 배열 : " + study);
      document.write("<hr>");
  </script>

   3. 인수가 3개인 경우
     - 첫 번째 인수는 배열에서 삭제할 시작 위치를 나타내고, 두 번째 인수는 삭제할 개수를 알려준다. 그리고 세 번째 인수부터는 삭제한 위치에 새로 추가할 요소를 지정한다.
  

  <script>
      // 인수가 3개 이상일 경우
      var newStudy2 = study.splice(2, 1, "js");
      document.write("반환된 배열 : " + newStudy2 + "<br>");
      document.write("변경된 배열 : " + study);
  </script>​

   
• 기존 배열을 바꾸지 않으면서 요소를 꺼내는 slice() 메서드
  - 시작과 끝 인덱스를 지정해서 요소를 여러 개 꺼내고, 실행 결과 기존 배열이 바뀌지 않는다.
  1. 인수가 1개인 경우
     - 인수를 하나만 지정하면 그 인수를 시작 인덱스로 간주하고 지정한 요소부터 마지막 요소까지 꺼내서 변환한다.
  

  <script>
      // 추출한 요소로 배열 만듦, 기존 배열 변경안됨
      var colors = ["red", "green", "blue", "white", "black"];
      var colors2 = colors.slice(2); //인덱스 2부터 끝까지
      document.write(colors2);
  </script>​

  2. 인수가 2개인 경우
     - 인수 2개를 사용하면 여러 개의 요소를 꺼낼 수 있다.
       (꺼낼 요소의 구간을 의미한다.)
     - 첫 번째 인수는 배열의 시작 인덱스이고, 두 번째 인수는 끝 인덱스의 바로 직전 인덱스를 가리킨다.
  

  <script>
      var colors3 = colors.slice(2,4);  // 인덱스 2,3
      document.write(colors3);
  </script>​