더보기
JavaScript의 배열에 대해 알아보자
배열
✔️ 자바스크립트에서는 변수 선언 시 별도의 자료형 지정이 없기 때문에
어떤 자료형의 값들이든 다 하나의 배열 공간에 담을 수 있음
=> 자바에서의 ArrayList와 유사함
<button onclick="arrayTest();">확인하기</button>
<div id="area1" class="area small"></div>
<script>
function arrayTest() {
// 테스트용 배열 생성
var arr = ["홍길동", "서울", 20, true, [1, 2, 3]]; // 배열 객체
console.log(arr);
console.log(arr[2]); // 20
console.log(arr[3]); // true
console.log(arr[4]); // [1, 2, 3]
console.log(arr[4][0]); // 1
// 테스트 결과를 출력할 div 요소
var area1 = document.getElementById("area1");
// for문
/*
for(var i = 0; i < arr.length; i++) {
area1.innerHTML += arr[i] + "<br>";
}
*/
// 배열의 0번 인덱스에서부터 마지막 인덱스까지 순차적으로 모두 접근하고자 한다면
// for in문 활용 가능
// for(var 변수명 in 순차적으로접근하고자하는배열명)
// 이때 변수형으로 var, let 가능하나 const는 안 됨
for(var i in arr) { // i: 0, 1, 2, ..., 마지막인덱스값
area1.innerHTML += arr[i] + "<br>";
}
}
</script>
배열의 선언
👉🏻 배열의 선언 시 배열의 크기를 지정한 채로 선언하거나 크기를 지정하지 않아도 됨
(배열의 크기의 제약이 없음)
<button onclick="arrayTest2();">확인하기</button>
<script>
function arrayTest2() {
// 자바스크립트에서의 배열의 선언법
var arr1 = new Array(); // 배열의 크기가 0인 빈 배열
var arr2 = new Array(3); // 배열의 크기가 3인 빈 배열
var arr3 = []; // 배열의 크기가 0인 빈 배열
console.log(arr1);
console.log(arr2);
console.log(arr3);
// 만들어진 배열에 값 대입
arr1[0] = "바나나";
arr1[1] = "사과";
arr1[10] = "키위"; // 배열의 크기가 11로 늘어나 있다. ([2]~[9]까진 비어 있음)
console.log(arr1);
arr2[0] = "자동차";
arr2[1] = "기차";
arr2[2] = "도보";
arr2[3] = "비행기"; // 배열의 크기가 4로 늘어나 있다
console.log(arr2);
// 배열 선언과 동시에 초기화
var arr4 = new Array("홍길동", "임꺽정");
var arr5 = ["Java", "oracle", "front-end"];
console.log(arr4);
console.log(arr5);
}
</script>
Array 객체의 메소드 11개
👉🏻 1) indexOf(찾고자하는요소) : 배열에서 해당 요소가 위치해 있는 인덱스를 반환
<h4>1) indexOf(찾고자하는요소) : 배열에서 해당 요소가 위치해 있는 인덱스를 반환</h4>
<div id="area2" class="area small"></div>
<button onclick="indexOfTest();">확인하기</button>
<script>
function indexOfTest() {
var area2 = document.getElementById("area2");
// 테스트용 배열
var arr = ["사과", "딸기", "바나나", "복숭아", "파인애플"];
// 찾고자 하는 과일을 사용자로부터 입력받는 구문
var fruit = prompt("찾고자 하는 과일명을 입력하세요.");
var index = arr.indexOf(fruit);
// 해당 과일이 있다면 그 과일의 인덱스 값을 반환
// 배열에 존재하지 않는 요소를 입력 시 -1을 반환
console.log(index);
// 있을 경우: 당신이 찾는 과일 XXX은 x번째 인덱스에 있습니다.
// 없을 경우: 당신이 찾는 과일 XXX는 판매하지 않습니다. 출력
area2.innerHTML = "당신이 찾는 과일 " + fruit + "은 ";
if(index == -1) {
area2.innerHTML += "판매하지 않습니다.";
} else {
area2.innerHTML += index + "번째 인덱스에 있습니다.";
}
// 참고
console.log(1 == 1); // true
console.log(1 == "1"); // true
// == : 동등연산자, 자료형과 무관하게 실제 값만 일치하면 true
console.log(1 === "1") // false
// === : 일치연산자, 자료형과 값 둘 다 일치해야만 true
}
</script>
👉🏻 2) concat(배열, 배열, ...) : 여러 개의 배열을 결합하고자 할 때 사용
<div id="area3" class="area big"></div>
<button onclick="concatTest();">확인하기</button>
<script>
function concatTest() {
var area3 = document.getElementById("area3");
// 테스트용 배열
var arr1 = ["사과", "딸기"];
var arr2 = ["자동차", "오토바이", "비행기"];
area3.innerHTML = "arr1: " + arr1 + "<br>"; // arr1: 사과,딸기
area3.innerHTML += "arr2: " + arr2 +"<br>"; // arr2: 자동차,오토바이,비행기
area3.innerHTML += "arr1 기준으로 배열 합침: " + arr1.concat(arr2) + "<br>";
// arr1 기준으로 배열 합침: 사과,딸기,자동차,오토바이,비행기
area3.innerHTML += "다시 arr1: " + arr1 + "<br>";
// 다시 arr1: 사과,딸기
// concat 메소드는 원본 배열에 영향을 끼치지 않는 메소드
// => 두 개의 배열을 합쳐서 새로운 배열로 만들어서 반환
area3.innerHTML += "arr2 기준으로 배열 합침: " + arr2.concat(arr1) + "<br>";
// arr2 기준으로 배열 합침: 자동차,오토바이,비행기,사과,딸기
area3.innerHTML += "여러 개의 배열 합침: " + arr1.concat(arr2, [1, 2, 3]) +"<br>";
// 여러 개의 배열 합침: 사과,딸기,자동차,오토바이,비행기,1,2,3
}
</script>
👉🏻 3) reverse(): 배열에 담긴 값들을 역순으로 바꿔 주는 메소드
<div id="area4" class="area small"></div>
<button onclick="reverseTest();">확인하기</button>
<script>
function reverseTest() {
var area4 = document.getElementById("area4");
// 테스트용 배열
var arr = [1, 2, 3, 4, 5];
area4.innerHTML = "arr: " + arr + "<br>";
area4.innerHTML += "reverse 결과: " + arr.reverse() + "<br>";
area4.innerHTML += "다시 arr: " + arr + "<br>";
// reverse 메소드는 원본 배열에 영향을 끼치는 메소드
}
</script>
👉🏻 4) sort(): 배열 안에 담긴 값들을 오름차순으로 정렬시켜 주는 메소드(문자열만 가능)
👉🏻 여러 언어가 섞여 있을 경우 설정된 인코딩에 따라 달라짐(MS949는 영어->한글순인 것처럼)
<div id="area5" class="area small"></div>
<button onclick="sortTest();">확인하기</button>
<script>
function sortTest() {
var area5 = document.getElementById("area5");
// 테스트용 배열
var arr = ["이나나", "이라라", "이가가", "이다다"];
area5.innerHTML = "arr: " + arr + "<br>";
area5.innerHTML += "sort 결과: " + arr.sort() + "<br>";
area5.innerHTML += "다시 arr: " + arr + "<br>"; // 원본 배열이 영향 받음
// sort 메소드는 원본 배열에 영향을 끼치는 메소드
// 내림차순으로 정렬하고 싶다면?
// => sort 메소드로 오름차순 정렬 후 reverse 메소드로 뒤집기
area5.innerHTML += "내림차순 정렬: " + arr.sort().reverse() + "<br>";
// 메소드를 연이어서 호출(=메소드 체이닝) 가능
}
</script>
👉🏻 5_1) push(추가할요소) : 배열의 맨 뒤에 요소를 추가하고 배열의 크기를 반환
👉🏻5_2) pop() : 배열의 맨 뒤 요소를 제거하고 제거된 요소를 반환
<div id="area6" class="area big"></div>
<button onclick="pushpopTest();">확인하기</button>
<script>
function pushpopTest() {
var area6 = document.getElementById("area6");
// 테스트용 배열
var arr = ["서초동", "방배동", "역삼동", "삼성동", "대치동"];
area6.innerHTML = "arr: " + arr + "<br>";
arr.push("신사동");
area6.innerHTML += "arr에 push 후: " + arr + "<br>";
area6.innerHTML += "arr에 push 후 배열의 크기: " + arr.push("논현동") + "<br>";
// 한 큐에 쓸 시에는 "배열의 크기"를 찍어 줌 => 7
area6.innerHTML += "다시 arr : " + arr + "<br>";
area6.innerHTML += "arr에 pop 후: " + arr.pop() + "<br>";
area6.innerHTML += "다시 arr: " + arr + "<br>";
// 원본 배열에 영향을 끼치는 메소드
arr.pop();
arr.pop();
arr.pop();
area6.innerHTML += "최종 arr: " + arr + "<br>";
}
</script>
👉🏻 6_1) unshift(추가할요소) : 배열의 맨 앞에 요소를 추가 후 배열의 크기를 반환
👉🏻 6_2) shift(): 배열의 맨 앞에 요소 제거하고 제거된 요소를 반환
<div id="area7" class="area big"></div>
<button onclick="shiftUnshiftTest();">확인하기</button>
<script>
function shiftUnshiftTest() {
var area7 = document.getElementById("area7");
// 테스트용 배열
var arr = ["야구", "볼링", "테니스", "탁구"];
area7.innerHTML = "arr : " + arr + "<br>";
arr.unshift("농구");
area7.innerHTML += "arr에 unshift 후: " + arr + "<br>";
area7.innerHTML += "arr에 unshift 후 배열의 크기: " + arr.unshift("당구") + "<br>";
area7.innerHTML += "다시 arr: " + arr + "<br>";
area7.innerHTML += "arr에 shift: " + arr.shift() + "<br>";
area7.innerHTML += "최종 arr: " + arr + "<br>";
// 원본 배열에 영향을 미치는 메소드
}
</script>
👉🏻 7_1) slice(시작, 끝): 배열 안의 요소들은 단지 추출만 해 주는 메소드
👉🏻 7_2) splice(시작, 제거수, 추가값): 배열의 요소를 추출해서 제거 및 추가, 추가값은 생략 가능
<div id="area8" class="area small"></div>
<button onclick="sliceSpliceTest();">확인하기</button>
<script>
function sliceSpliceTest() {
var area8 = document.getElementById("area8");
// 테스트용 배열
var arr = ["자바", "오라클", "html", "css", "javascript"];
area8.innerHTML = "arr: " + arr + "<br>";
// slice(시작인덱스, 끝인덱스) : 시작인덱스에서부터 끝인덱스-1까지 추출
area8.innerHTML += "slice 결과: " + arr.slice(2, 4) + "<br>"; // 자바,오라클,html,css,javascript
area8.innerHTML += "다시 arr: " + arr + "<br>"; // html,css
// slice 메소드는 원본 배열에 영향을 미치지 않는 메소드
// splice(시작인덱스, 제거수, 추가할요소)
// 추가할요소를 생략한 경우 부분적인 요소들을 제거만 시켜 주지만
// 추가할 요소를 생략하지 않은 경우 부분적인 요소들을 제거 후 그 자리에 새로운 요소를 추가
area8.innerHTML += "splice 결과: " + arr.splice(2, 2, "spring") + "<br>";
// spring을 적지 않았을 때 '자바,오라클,javascript'
// spring을 적었을 때 '자바,오라클,spring,javascript'
area8.innerHTML += "최종 arr: " + arr + "<br>";
// splice 메소드는 원본 배열에 영향을 미치는 메소드
}
</script>
👉🏻 8) join(구분자) / toString(): 배열에 담긴 값들을 하나의 "문자열"로 합쳐서 반환해 주는메소드
👉🏻 toString()은 ','로만 배열을 나누어 표현 가능한 것에 비해 join은 구분자 제시 가능
<div id="area9" class="area small"></div>
<button onclick="toStringJoinTest();">확인하기</button>
<script>
function toStringJoinTest() {
var area9 = document.getElementById("area9");
// 테스트용 배열
var arr = ["나는", "오늘부터", "운동을", "시작한다!!"];
area9.innerHTML = "arr: " + arr + "<br>";
area9.innerHTML += "toString: " + arr.toString() + "<br>";
// 배열 객체를 html 요소 내부에 출력할 경우 내부적으로 toString() 호출 후 돌아온 결과 출력
area9.innerHTML += "join: " + arr.join() + "<br>";
// join은 기본적으로 매개변수를 생략했을 때 ','를 통해 하나의 문자열로 합쳐 줌
// join 메소드 호출 시 구분자를 내가 제시하면 해당 구분자로 하나의 문자열로 합쳐 줌
area9.innerHTML += "구분자를 제시한 join: " + arr.join(" ") + "<br>";
}
</script>