DevJavaScript

JavaScript - 배열

⏱ 10 min.

목차


Array

자바스크립트에서 배열을 선언할 땐 Java와 달리 배열의 크기를 지정하지 않아도 된다.

1
2
var donuts = new Array();
var coffee = ["Espresso", "Latte", "Mocca"];

Most Used Methods

자주 사용하는 Array의 메서드들이다.

  • Length : 배열이 갖고있는 대표적인 Property이다. 

    1
    2
    var coffee = ["Espresso", "Latte", "Mocca"]; 
    coffee.length();   // 3

  • Push : 데이터를 추가할 때 사용하는 method이다. 배열의 마지막 인덱스에 추가된다.

    1
    2
    3
    4
    var coffee = ["Espresso", "Latte", "Mocca"]; 
    coffee.push("Americano");
    console.log(coffee);
    // ['Espresso', 'Latte', 'Mocca', 'Americano']

  • Pop : 데이터를 삭제할 때 사용하는 method이다. 배열의 마지막 인덱스의 element가 삭제된다.

    1
    2
    3
    4
    var coffee = ["Espresso", "Latte", "Mocca"]; 
    coffee.pop();
    console.log(coffee);
    // ['Espresso', 'Latte', 'Mocca']

  • Splice : 원하는 인덱스에 데이터를 추가/삭제를 할 수 있는 method.

    • Array.splice([method가 실행될 Index], [삭제될 Index 수], [새로운 element])

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      var coffee = ["Espresso", "Latte", "Mocca"]; 
      coffee.splice(1, 1, "Americano");  
      // Index 1로부터 element 1개를 삭제하고 "Americano" 추가
      console.log(coffee);  
      // ['Espresso', 'Americano', 'Latte', 'Mocca']

      coffee.splice(0, 0, "Nitro Coffee");
      // Index 0으로부터 element를 0개 삭제하고 "Nitro Coffee" 추가
      console.log(coffee);
      // ['Nitro Coffee', 'Espresso', 'Americano', 'Latte', 'Mocca']

      coffee.splice(-1, 1, "Cafe Mocca");
      // Index-1(뒤)로부터 element 1개를 삭제하고 "Cafe Mocca" 추가
      console.log(coffee);
      // ['Nitro Coffee', 'Espresso', 'Americano', 'Latte', 'Cafe Mocca']

그 외 자바스크립트에서 배열 객체가 갖는 Properties와 Methods는 공식문서에서 더 찾아볼 수 있다.


Array Loops

배열도 Loop를 사용할 수 있다. For Loop와 함께 forEach Loop, Map을 사용할 수 있다.

For Loop

1
2
3
4
5
6
7
8
9
10
11
12
13
14
var coffee = ["Espresso", "Latte", "Mocca"]; 

function orderCoffee(func) {  // 문구를 완성할 함수 작성 
  for(var i=0; i<func.length; i++) {
    func[i] += " please.";  // 각 element 뒤에 " please" 추가
    func[i] = func[i].toUpperCase();  // method 사용해서 모든 문자 Capitalize
    console.log(func[i]);  // 각 element 출력
  }
}

orderCoffee(coffee); // 함수 사용
// ESPRESSO PLEASE.
// LATTE PLEASE.
// MOCCA PLEASE.

forEach Loop

1
2
3
4
5
6
7
8
9
10
var coffee = ["Espresso", "Latte", "Mocca"]; 

coffee.forEach(function(drink) {
   drink = "A cup of " + drink + ".";
   console.log(drink);
});

// A cup of Espresso.
// A cup of Latte.
// A cup of Mocca.

Map

1
2
3
4
5
6
7
8
9
10
11
var coffee = ["Espresso", "Latte", "Mocca"]; 

var orderCoffee = coffee.map(function(drink) {
  drink = "A cup of " + drink + " please.";
  return drink;
});

console.log(orderCoffee);
// [ 'A cup of Espresso please.', 
//   'A cup of Latte please.'
//   'A cup of Mocca please.' ]

forEach 와 달리 Map은 method를 사용할 때 새로운 객체를 선언한다는 점이 다르다. 주의하자.