자바스크립트에서는 여러 개의 항목을 하나의 변수에 저장해야 할 때 배열을 사용한다.
Array 객체로 배열 만들기
이전 포스팅에서는 리터럴 표기법을 이용하여 배열을 만드는 방법을 간단히 살펴보았다. 이번 포스팅에서는 객체의 인스턴스를 만드는 방법으로 배열을 만들어보자.
자바스크립에서는 배열을 쉽게 만들 수 있게 미리 Array 객체가 만들어져 있다. 이 객체를 이용해 인스턴스를 만들어보자.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
var arr = new Array();
var firNum = ['one','two','three'];
var secNum = new Array('one','two','three');
for(let i=0;i<3;i++) document.write(firNum[i]+" "); document.write("<br>");
for(let i=0;i<3;i++) document.write(secNum[i]+" ");
</script>
</body>
</html>코드 해석
var arr = new Array();Array 객체의 인스턴스를 만들 후에 arr라는 변수에 저장한 것이다. 빈 괄호를 사용하면 배열의 요소 개수가 고정되지 않으므로 해당 변수에 많은 자료를 저장할 수 있다.
<script>
//리터럴 이용 배열
var firNum = ['one','two','three'];
//객체 이용 배열
var secNum = new Array('one','two','three');
for(let i=0;i<3;i++) document.write(firNum[i]+" "); document.write("<br>");
for(let i=0;i<3;i++) document.write(secNum[i]+" ");
</script>초기값이 있는 배열이라면 이전 포스팅에서 다룬 것처럼 리터럴이나 객체를 이용해 초기화가 가능하다. 아래 코드는 반복문을 이용해 배열의 요소 값을 출력하는 코드이다.
Array 객체의 함수
Array 객체에는 배열을 다룰 수 있는 여러 함수가 존재하는데 이 중에서 자주 사용하는 함수의 기본 사용법에 대해 알아보자.
concat() 함수: 둘 이상의 배열을 연결
concat() 함수는 기존의 배열에 또 다른 배열이나 값을 합쳐서 새로운 배열을 만드는 함수이다.
<script>
var nums = ['1','2','3','4','5'];
var chars = ['a','b','c'];
//concat 함수
var rst_concat = nums.concat(chars);
document.write("result: "+rst_concat);
</script>var rst = arr_A.concat(arr_B);
배열 A에 배열 B를 연결한다. 이때 배열 A를 객체로 하며 배열 B를 인자로 갖는다. 또한 배열 A, B의 순서를 바꾸면 연결 순서가 달라진다.
기존에 사용한 배열 A, B는 함수의 작동에 대해 영향을 받지 않는데, 이는 concat 함수가 두 배열을 연결한 새로운 배열을 생성하기 때문이다.
join() 함수: 배열 요소의 연결
join() 함수는 배열 요소를 연결하는 함수이다. 배열 요소를 연결해서 나열할 때 각 요소 사이에 넣을 구분 기호가 필요한데, join 함수는 이 기호를 직접 지정할 수 있다.
만약 함수에서 구분 기호를 지정하지 않은 경우 쉼표(,)로 요소를 구분한다.
<script>
//배열 초기화 생략
//join 함수
var rst_join = nums.join("-");
document.write("result(join): "+rst_join+"<br>");
</script>join 함수는 하나의 배열을 대상으로 하며 배열을 마침표로 참조한다.
결괏값은 배열 요소를 연결하는 구분 기호로 연결하여 출력한다.
push() 함수와 unshift() 함수: 새로운 요소의 출력
함수를 사용하면 기존 배열에 새로운 요소를 추가할 때가 많은데, 이때 배열의 맨 끝에 요소를 추가하려면 push 함수를 배열의 맨 앞에 추가하려면 unshift 함수를 사용한다.
이때 유의할 점은 이 두 함수는 배열에 새로운 값이 추가될 시, 추가된 요소의 개수를 더한 배열의 요소 값을 반환한다는 것이다!
| push 함수 | 배열의 맨 끝에 요소를 추가 |
| unshift 함수 | 배열의 맨 앞에 추가 |
<script>
//값 초기화 생략
//push 함수
var rst_push = nums.push("6");
document.write("result(push): "+rst_push+"<br>");
////=> 새 요소가 추가된 후의 배열 요소의 개수를 반환
//unshift 함수
var rst_unshift = nums.unshift("0");
document.write("result(unshift): "+rst_unshift+"<br>");
////=> 새 요소가 추가된 후의 배열 요소의 개수를 반환
</script>
pop() 함수와 shift() 함수: 배열에서 요소 추출
배열에서 요소를 추출하면 해당 요소가 배열에 빠지면서 배열이 수정되므로 요소를 삭제할 때에는 배열 추출 함수를 사용한다. 이때 이 함수는 이전 함수의 반대로 작용한다고 생각하면 쉽다.
| pop 함수 | 배열의 맨 끝의 요소를 추출 |
| shift 함수 | 배열의 맨 앞의 요소를 추출 |
<script>
//pop 함수
var cnt1 = nums.pop();
document.write("result(pop): "+nums+"<br>");
document.write("poped num: "+cnt1+"<br>");
//unshift 함수
var cnt2 = nums.shift();
document.write("result(shif): "+nums+"<br>");
document.write("poped num: "+cnt2+"<br>");
</script>pop 함수와 shift 함수는 인자를 가지지 않으며 배열의 요소를 추출(배열을 직접적으로 바꾼다!)한다. 이때 var 예약어를 이용하여 변수를 저장할 수 있다.
즉, 추출 시 기존의 배열을 변화시킨다.
이때, 필자의 이전 포스팅을 본 사람들은 여기서 어떤 점을 눈치챘을 것이다. 바로 C언어 자료 구조에서 다룬 연결 리스트/스택의 구조와 비슷하며 사용하는 함수(비록 사용자 정의 함수이지만)가 동일하다!
✨스택✨
/*스택을 구현하는 구조체*/ typedef struct { int max; //스택용량 int num; //스택에 쌓여있는 데이터의 개수(스택 포인터) char *stk;//스택의 첫 요소에 대한 포인터 }IntStack; /*스택 초기화*/ void Initialisze(IntS
udangtangtang-cording-oldcast1e.tistory.com
splice() 함수: 원하는 위치의 요소를 삭제하거나 추가
배열의 중간 부분의 요소를 추가하거나 삭제 혹은 한 번에 2개 이상의 요소를 추가하거나 삭제하기 위해 사용하는 함수가 바로 splice() 함수이다.
> 인수가 1개인 경우
인수가 1개인 경우 괄호안의 인수는 그 배열의 인덱스 값을 가리킨다.
이 경우 인수가 가리키는 요소부터 배열의 끝 요소까지 삭제한다.
splice 함수는 삭제한 요소로만 구성된 배열을 반환하고 기존의 배열은 삭제되지 않은 부분만 남게된다.
<script>
nums.splice(1);
document.write("result: "+nums.splice(1)+"<br>");
</script>> 인수가 2개인 경우
인수가 2개인 경우 첫 번째 인수는 인덱스 값이고 두 번째 인수는 삭제할 개수를 뜻한다. 2개의 인수로 함수를 실행하면 기존의 배열에는 나머지 요소만 남게 된다.
<script>
nums.splice(1,2);
document.write("result: "+nums.splice(1)+"<br>");
</script>> 인수가 3개 이상인 경우
세 번째 인수부터는 앞서 삭제한 위치에 새로 추가할 요소를 지정한다.
기존의 배열의 요소를 삭제하지 않고 새로운 요소를 추가하고 싶다면 삭제할 개수를 지정하는 인수에 0을 입력하면 된다. 이렇게 하게 되면 다른 요소를 삭제하지 않고 입력한 인덱스에 따른 위치에 값을 추가할 수 있다.
추가적으로 여러 개의 인수를 추가하고 싶은 경우에는 세 번째 인수부터 차례대로 나열하면 된다.
<script>
nums.splice(1,2,"four","five","six");
</script>slice() 함수: 원하는 위치의 요소들을 추출
slice() 함수는 배열에서 요소를 꺼낸다는 점에서 앞에 나온 다른 함수와 같지만 여러 개의 요소를 꺼낼 수 있다는 점에서 다르다. slice() 함수는 시작 인덱스와 끝 인덱스를 지정해 그 사이의 요소를 꺼낸다.
이때 시작 인덱스만 지정할 경우 끝 인덱스까지 값을 추출한다.
여기서 주의할 점은 slice 함수는 기본 배열의 원형을 바꾸지 않으며 추출한 배열의 요소를 반환한다!
'JavaScript > [theory]' 카테고리의 다른 글
| [객체] #2. 객체의 프로토타입과 인스턴스 (0) | 2022.10.31 |
|---|---|
| [객체] #1. 객체란? (0) | 2022.10.10 |
| [함수] #4. 함수와 이벤트 (0) | 2022.10.05 |
| [함수] #3. 함수 표현식 (0) | 2022.10.04 |
| [함수] #2. let과 constant로 변수 선언하기 (0) | 2022.10.03 |
