-
자바스크립트 배열(Array)프론트엔드/JavaScript 2020. 9. 21. 04:22
배열(Array)이란?
1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.
자바 스크립트의 배열은 객체이며, 유용한 내장 메소드를 가졌다.
이때 자바 스크립트 배열은 다음과 같은 특징을 갖는다
1. 배열 요소의 타입이 고정되지 않아 한 배열 안에도 배열 요소의 타입이 다를 수 있다.
2. 배열 요소의 인덱스가 연속적이지 않아도 되고, 특정 배열 요소가 비어있을 수 있다.
3. 자바 스크립트에서 배열은 Array 객체로 다뤄진다.
배열의 생성
1. 배열 리터럴
let animal = ["사자", "호랑이", "강아지", "독수리", "너구리"];리터럴 방식으로 배열을 만들 땐 대괄호 ( [ ] ) 안에 ( , ) 쉼표 기준으로 요소들을 써넣으면 된다.
2. 생성자를 이용한 배열
let world = new Array("아시아", "유럽", "아프리카", "북미", "남미");생성자 함수를 이용할 경우 new Array() 처럼 생성자 함수를 써주고 괄호 안에 요소를 써넣으면 된다.
객체 배열 참조하기
객체의 요소들은 인덱스 넘버가 부여되어 배열에 배치된다.
그리고 객체를 가진 변수 옆에 대괄호( [ ] )를 쓰고 그 안에 인덱스 넘버를 써주면 참조가 가능하다.
<body> <script> let animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; console.log(animal[0]); // 사자 console.log(animal[1]); // 호랑이 console.log(animal[2]); // 강아지 console.log(animal[3]); // 독수리 console.log(animal[4]); // 너구리 </script> </body>위 코드와 같이 첫번째 요소는 인덱스넘버 0부터 시작한다.
즉 요소의 위치의 인덱스 넘버는 요소의 위치 -1이다.
배열의 추가
배열의 추가는 push() 메서드를 사용하거나 직접 인덱스 넘버로 배열을 지정해서 추가할 수 있다.
push() 메서드를 쓸 경우 배열의 맨 마지막에 요소들이 추가된다.
인덱스 넘버를 지정해서 추가할 경우 인덱스가 겹치면 기존 있던 인덱스의 요소를 지우고 대체한다.
<body> <script> let animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; animal.push("청둥오리"); // push() 메서드 사용시 배열에 요소 추가 가능 console.log(animal); // ["사자", "호랑이", "강아지", "독수리", "너구리", "청둥오리"] 출력 animal[0] = "원숭이"; // 직접 넣고 싶은 인덱스를 지정할 수도 있다. animal[8] = "기린"; // 직접 넣고 싶은 인덱스를 지정할 수도 있다. console.log(animal); // ["원숭이", "호랑이", "강아지", "독수리", "너구리", "청둥오리", empty × 2, "기린"] 출력 </script> </body>배열의 삭제
배열을 삭제할 땐 'delete' 명령어를 사용할 수 있다.
그러나 밑의 코드를 보면 알겠지만 'delete'명령을 사용하면 배열의 공간은 그대로 남고 요소만 남는다.
반면 splice( ) 메서드를 사용하면 배열의 공간까지 깔끔하게 삭제가 된다.
splice( ) 메서드 이용시엔 시작 인덱스와 끝 인덱스를 입력하면 그 안에 포함되는 요소와 공간이 삭제된다.
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; delete animal[4]; console.log(animal); // ["사자", "호랑이", "강아지", "독수리", empty] var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; animal.splice(3,4); console.log(animal); // ["사자", "호랑이", "강아지"] </script> </body>배열 순회하기
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; for (i=0; i<animal.length; i++) {console.log(animal[i])} // 사자, 호랑이, 강아지, 독수리, 너구리 차례로 인쇄 for (i of animal) {console.log(i)}; // 사자, 호랑이, 강아지, 독수리, 너구리 차례로 인쇄 animal.forEach( function(i, j){ console.log(i+"는 요소. "+j+"는 인덱스다.") } ); // 사자는 요소. 0는 인덱스다. // 호랑이는 요소. 1는 인덱스다. // 강아지는 요소. 2는 인덱스다. // 독수리는 요소. 3는 인덱스다. // 너구리는 요소. 4는 인덱스다. </script> </body>배열에는 여러가지 자료가 들어있고 코드를 작성하다보면 배열의 내용을 하나씩 꺼내서 사용해야할 때가 있다.
그럴 경우 가장 기본적인 방법은 for문이다.
그리고 조금 더 편하게 하고 싶다면 "for...of"문을 사용하면 된다.
그리고 요소의 값 뿐 아니라 인덱스값까지 알고 싶다면 "for...each"문을 쓰면 된다.
참고로 "for...each"문의 경우 파라미터에 함수가 들어가야 한다.
배열의 프로퍼티
1. 배열의 길이 구하기 array.length
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; animal.length; // 배열의 길이인 5 animal[9] = "기린"; animal.length; // 배열의 길이인 10 console.log(animal); // ["사자", "호랑이", "강아지", "독수리", "너구리", empty × 4, "기린"] </script> </body>배열의 길이를 구하기 위해선 length 프로퍼티를 사용하면 된다.
하지만 위의 코드에서 보듯이 요소가 없는 배열도 있기 때문에 요소의 갯수가 곧 배열의 크기와 일치한다고 볼 순 없다.
배열의 메서드
1. 배열 추가하기 push()
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; console.log(animal.push("기린")); // 6 console.log(animal); // ["사자", "호랑이", "강아지", "독수리", "너구리", "기린"] </script> </body>하나 이상의 요소를 배열의 가장 마지막에 추가한다.
원본 배열은 추가한 요소의 수만큼 길이가 길어진다.
추가가 성공되면 요소의 길이를 반환한다.
2. 배열 가장 마지막 요소 제거 후 반환 pop()
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; console.log(animal.pop()); // 너구리 출력 console.log(animal); // ["사자", "호랑이", "강아지", "독수리"] 출력 </script> </body>pop() 메서드를 사용하면 배열의 맨 뒤 요소를 반환하고 배열의 요소와 공간을 지운다.
3. 배열의 첫 요소 제거 후 반환 shift()
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; console.log(animal.shift()); // 사자 출력 console.log(animal); // ["호랑이", "강아지", "독수리", "너구리"] 출력 </script> </body>shift() 메서드를 사용하면 배열의 맨 앞 요소를 반환하고 배열의 요소와 공간을 지운다.
4. 배열의 첫 자리에 요소 추가 unshift()
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; console.log(animal.unshift("기린")); // 6 출력 console.log(animal); // ["기린", "사자", "호랑이", "강아지", "독수리", "너구리"] 출력 </script> </body>unshift() 메서드를 사용하면 입력한 값을 배열의 맨 앞에 배치하고 나머지 배열 요소를 뒤로 미룬다.
그리고 성공하면 배열의 길이를 반환한다.
5. 배열 순서 뒤집기 reverse()
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; console.log(animal.reverse()); // ["너구리", "독수리", "강아지", "호랑이", "사자"] 출력 </script> </body>reverse() 메서드를 사용하면 배열의 순서를 뒤바꾼다.
그리고 reverse() 메서드를 두번 쓰면 뒤집히고 뒤집혀 제자리로 돌아온다.
정렬 기능은 없고 단순히 요소를 뒤집기만 한다.
6. 배열 정렬하기 sort()
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; console.log(animal.sort()); // ["강아지", "너구리", "독수리", "사자", "호랑이"] 출력 var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; console.log(animal.sort(function(x,y){ if(y>x) {return 1;} else if(y==x) {return 0;} else {return -1;} })); // ["호랑이", "사자", "독수리", "너구리", "강아지"] 출력 </script> </body>sort() 메서드를 사용하면 배열이 정렬된다.
숫자일 경우 1부터 순서대로, 알파벳은 ABC순으로, 한글은 가나다 순으로 정렬된다.
이때 sort() 메서드 안에 함수를 넣어 조건을 바꿔주면 역순으로 정렬도 가능하다.
7. 배열의 요소들을 한 문장으로 병합 join()
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; console.log(animal.join("")) // "사자,호랑이,강아지,독수리,너구리" 출력 console.log(animal.join("-")) // '-'를 기준으로 한 문장으로 병합. "사자-호랑이-강아지-독수리-너구리" 출력 console.log(animal.join(" ")) // 공백을 기준으로 한 문장으로 병합. "사자-호랑이-강아지-독수리-너구리" 출력 </script> </body>join() 메서드를 사용하면 배열의 요소들을 모아서 한 문장 안에 넣어 반환해준다.
파라미터로 어떤 글자나 기호를 넣을 경우 요소 사이에 그것을 넣어 병합 후 문자열로 반환한다.
8. 배열의 요소들을 문장으로 반환 toString()
<body> <script> var animal = ["사자", "호랑이", "강아지", "독수리", "너구리"]; console.log(animal.toString()); // "사자,호랑이,강아지,독수리,너구리" 출력 </script> </body>toString() 메서드를 사용하면 배열의 요소들을 합쳐서 문장으로 반환한다.
이때 요소들 사이에는 쉼표 ( , )를 기준으로 합쳐준다.
'프론트엔드 > JavaScript' 카테고리의 다른 글
자바스크립트 고차함수 - Sort(), reverse() (0) 2020.10.03 고차함수(Higher-Order Function)에 대해서 (0) 2020.09.22 Object의 분류 - 네이티브 객체, 호스트객체 (0) 2020.09.21 기본자료형/객체 비교하기, 타입 확인하기 (0) 2020.09.19 자료, 객체의 복사에 대해서 (0) 2020.09.19