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(시작 위치, 삭제 개수, 추가할 데이터)를 활용하여 자유롭게 제어 할 수 있다.
'WEB > Javascript' 카테고리의 다른 글
| HTML, Javscript - 선택한 색상으로 배경색 바꾸기(pallet 만들기) (0) | 2019.09.08 |
|---|---|
| Javascript - 배열 값만 복사하기(대입 연사자 사용시 문제점) (0) | 2019.09.08 |
| Javascript - 슬라이드쇼(SlideShow) 만들기 (6) | 2019.09.06 |
| Javascript - 반복문(for, while, do~while) (0) | 2019.09.06 |
| Javascript - Date.prototype을 활용한 날짜 출력 (0) | 2019.09.06 |
