[JavaScript] 자바스크립트 배열 선언 및 사용법 총정리

어느 언어에도 마찬가지겠지만 자바스크립트에도 배열이 존재합니다. 배열을 사용할 때는 어떤 경우일까요? 배열은 다수의 데이터를 저장하고 처리하는 경우에 유용하게 사용할 수 있습니다. 100개의 데이터를 처리해야한다고 칩시다. 배열을 사용하지않고 100개의 데이터를 저장시키려면 100개의 변수가 필요하겠죠?

 

그렇다면 값을 넣는 코드도 출력코드도 100번씩 적어야할것입니다. 굉장히 코딩하기도 힘들고 코드량도 길어집니다. 하지만 배열을 선언한다면 효율적으로 코드를 짤 수 있습니다. 100개의 주소값을 가지는 배열을 하나 선언하고 그 주소값에다가 For문을 이용해 값을 넣어주고 출력을 해준다면 굉장히 효율적인 코드가 되기 때문입니다.

 

---

 

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

자바스크립트의 배열선언 방법은 다른 언어들과는 조금 다릅니다. 대표적인 방식은 아래와 같습니다.

var arrNumber = new Array(); //배열선언
var arrNumber = new Array("a","b","c","d");
var arrNumber = [1,2,3,4]; 

 

자바스크립트 배열에 값 넣는 법

자바스크립트에서 배열을 선언했으면 값을 넣어봐야겠죠. 배열 선언과 동시에 초기화를 시킬 수도 있으나 아래와 같이 초기화 시켜줄수도 있습니다.

var arrNumber = new Array(); //배열선언

arrNumber[0] = 1;
arrNumber[1] = 2;
arrNumber[2] = 3;
arrNumber[3] = 4;
arrNumber[4] = 5;	

for(var i=0;i<5;i++){
    arrNumber[i]=i;
}

 

자바스크립트 배열 출력법

배열의 값 출력하는 방법입니다. 다양한 방법이 있지만 아래 예제는 document.write()함수를 사용하여 출력하였습니다.

var arrNumber = new Array(); //배열 선언
	
for(var i=0;i<5;i++){ //배열 초기화
    arrNumber[i]=i;
}
	
for(var i=0;i<arrNumber.length;i++){ //배열 출력
    document.write(arrNumber[i]+"<br>");
}
	
/*결과값
0
1
2
3
4*/ 

 

 자바스크립트 배열의 다양한 함수 소개 및 사용법 

1. push는 배열의 끝에 원하는 값을 추가해주는 함수입니다.

var example = new Array("a", "b", "c");
example.push("d");

document.write(example);
//결과값 a,b,c,d

 

2. pop은 배열의 마지막 주소에 있는 값을 제거해주는 함수입니다.

var example = new Array("a", "b", "c");
example.pop();

document.write(example);
//결과값 a,b

 

3. shift는 배열의 첫번째 주소에 있는 값을 제거하여 반환해주는 함수입니다.

var example = new Array("a", "b", "c");
example.shift();

document.write(example);
//결과값 b,c

 

4. length는 배열의 길이를 반환해주는 함수입니다.

var example = new Array("a", "b", "c");

document.write(example.length);
//결과값 3

 

5. concat은 두개의 배열을 합쳐주는 기능을 하는 함수입니다.

var example = new Array("a", "b", "c");
var example2 = new Array("d","e","f");

example = example.concat(example2);
document.write(example);
//결과값 a,b,c,d,e,f

 

6. join을 사용하면 배열값 사이에 원하는 문자를 삽입할 수 있습니다.

var example = new Array("a", "b", "c");
example = example.join("/");

document.write(example);
//결과값 a/b/c

 

7. reverse를 사용하면 배열을 역순으로 재배치 할 수 있습니다.

var example = new Array("a", "b", "c");
example.reverse();

document.write(example);
//결과값 c,b,a

 

8. sort를 사용하면 배열을 정렬할 수 있습니다.

var example = new Array(1,4,2,3,5);
example.sort();

document.write(example);
//결과값 1,2,3,4,5

 

9. slice는 배열의 일부분을 반환하는 함수입니다.

var example = [1, 2, 3, 4];
var example2 = example. slice(0, -1);

document.write(example);
document.write("<br/>");

example2 = example. slice(-2);
document.write(example2);

//결과값
//1,2,3,4
//3,4

 

10. splice는 배열값을 추가하거나 제거하여 반환해주는 함수입니다.

var example = ["a", "b", "c", "d"];
var example2 = example.splice(1, 2);

document.write(example);
document.write("<br/>");
document.write(example2)

//결과값
//a,d
//b,c