Javascript - 배열(Array) 선언 및 사용 하기

7개의 정수 데이터를 받아와 합산 값을 구해야 하는 프로그램이 있다고 할 때 우린 어떻게 해야할까?

변수 7개를 선언하고 각 변수에 값을 저장한 후 다 더해주면 될 것이다.

var num1 = 14;
var num2 = 33;
var num3 = 17;
var num4 = 12;
var num5 = 19;
var num6 = 24;
var num7 = 31;
alert(num1 + num2 + num3 + num4 + num5 + num6 + num7);

 

간단할 수 있지만 7개의 변수를 이름이 겹치지 않게 다 선언하고 또 호출하여 더하는 번거로움이 있다.

지금은 7개지만 100개를 받거나 1000개를 받아야 한다면????

​

이럴 때 배열을 사용하면 좋을 것이다.

​

자바스크립트의 배열 형태로 변경해보자.

var res = 0;
var arr = [14, 33, 7, 12, 19, 24, 31];
for(i=0; i<arr.length; i++){
  res += arr[i];
}
alert(res);

arr이라는 변수에 배열 데이터를 담아 저장하고

for을 활용하여 배열의 첫번째 데이터인 0번 인덱스부터 마지막 인덱스 6번까지 더해주면 똑같은 결과를 얻는다.

관련 데이터를 한 배열에 담아 값을 추가하거나 삭제 시킬 수 잇고 훨씬 깔끔하게 데이터를 처리 할 수 있다.

 

---

자바스크립트에서 배열 선언 방법

방법 1)

var fruits =  new Array();
fruits[0] = "포도";
fruits[1] = "멜론";
fruits[2] = "망고";
fruits[3] = "사과";
//fruits > [포도, 멜론, 망고, 사과]

방법 2)

var fruits = ["포도", "멜론", "망고", "사과"];
//fruits > [포도, 멜론, 망고, 사과]

방법 3)

var fruits = new Array("포도", "멜론", "망고", "사과");
//fruits > [포도, 멜론, 망고, 사과]

 

---

배열 호출

선언을 하였으니 하나씩 호출하는 방법도 알아보자.

​

배열명의 해당 위치 인덱스를 찍으면 해당 데이터를 호출 할 수 있다.

var fruits = ["포도", "멜론", "망고", "사과"];

fruits[0] // "포도"

fruits[1] // "멜론"

fruits[2] // "망고"

fruits[3] // "사과"

​

이와 같은 특성을 활용하여 for문을 통해 0번째 인덱스부터 배열의 길이까지 찍으면 하나씩 데이터를 얻을 수 있다.

var fruits = ["포도", "멜론", "망고", "사과"];
var str = "";
for(i=0; i<fruits.length; i++){
   console.log(fruits[i]);
   str += fruits[i];
}
console.log(str); // 포도멜론망고사과

 

---

 

배열 제어

기존 배열에서 데이터 추가 하기 - push(데이터)

var fruits = ["포도", "멜론", "망고", "사과"];
fruits.push("체리");
console.log(fruits); //["포도", "멜론", "망고", "사과", "체리"]

추가 후 마지막에 체리 데이터가 추가 된 걸 볼 수 있다.

​

​

​

기존 배열에서 데이터 삭제 하기 - pop()

var fruits = ["포도", "멜론", "망고", "사과"];
fruits.pop();
console.log(fruits); //["포도", "멜론", "망고"]

 

삭제 후 마지막에 사과 데이터가 삭제 된 걸 볼 수 있다.

​

​

그럼 특정 위치에 추가하거나 삭제 하는 방법도 알아보자.

특정 인덱스 값 삭제하기 - splice

var fruits = ["포도", "멜론", "망고", "사과"];
var idx = fruits.indexOf("망고");
var removeItem = fruits.splice(idx, 1);
console.log("removeItem > "+removeItem); //망고
console.log(fruits); //["포도", "멜론", "사과"]

 

망고 텍스트를 indexOf를 통하여 인덱스 값을 얻은 후,

splice(시작 위치, 삭제 개수) 를 통하여 데이터를 삭제 할 수 있다.

​

삭제 개수를 늘리면 연달아 삭제도 가능하다.

​

한번에 2개 데이터 삭제하기

var fruits = ["포도", "멜론", "망고", "사과"];
var idx = fruits.indexOf("망고");
var removeItem = fruits.splice(idx, 2);
console.log("removeItem > "+removeItem); //망고,사과
console.log(fruits); //["포도", "멜론"]

 

특정 위치에 데이터 추가하기

var fruits = ["포도", "멜론", "망고", "사과"];
var idx = fruits.indexOf("망고");
fruits.splice(idx, 0, "파인애플");
console.log(fruits); //["포도", "멜론", "파인애플", "망고", "사과"

망고가 기존에 3번째 즉 fruits[2] 위치였고 해당 위치에 파인애플이 들어온 걸 볼 수 있다.

​

자바스크립트에서는 배열을 splice(시작 위치, 삭제 개수, 추가할 데이터)를 활용하여 자유롭게 제어 할 수 있다.