ㅁ Array
- 다수의 데이터들을 담을 수 있다. (자바의 ArrayList와 유사하다)
- 크기에 제약이 없고, 타입에도 제약이 없다.
- 타입은 object(객체)
- 후행 쉼표(trailing comma)를 사용할 수 있다.
- 형식 : [element, element, ...] // 배열 내에 담겨있는 값들을 요소라고 하는데, html에서의 요소와는 다르다.
- 배열내의 요소에 접근은 배열[index]로 한다.
ㅁ Array 선언방법
(1) 변수 = new Array([크기]); // 크기 지정 안 할 수도 있다.
(2) 변수 = new Array(element, element, ...);
(3) 변수 = [ ];
(4) 변수 = [element, element, ...];
ㅁ 배열 정의하고, 인덱스로 접근하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>배열</h2>
<script>
function fnArrayDefine1() {
let arr1 = new Array();
let arr2 = new Array(3);
let arr3 = new Array('홍길동', 10, true);
console.log(arr1);
console.log(arr2);
console.log(arr3);
}
</script>
<button onclick="fnArrayDefine1();">배열확인1</button>
</body>
</html>
눌러 보면
이렇게 나온다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>배열</h2>
<script>
function fnArrayDefine1() {
let arr1 = new Array();
let arr2 = new Array(3);
let arr3 = new Array( '홍길동', 10, true, );
// 언제든 새로운 값이 들어올 수 있게끔 후행쉽표를 미리 찍어둘 수 있다.
console.log(arr1);
console.log(arr2);
console.log(arr3);
arr1[0] = 'a';
arr1[3] = 'b';
console.log(arr1);
arr2[0] = 'a';
arr2[5] = 'b';
arr2[8] = 'c';
arr2[9] = 'e';
console.log(arr2);
console.log("배열의길이:", arr2.length);
}
</script>
<button onclick="fnArrayDefine1();">배열확인1</button>
</body>
</html>
- 자바스크립트의 배열은 한 번 생성된 후에도 크기를 자유롭게 변경할 수 있습니다.
ㅁ 배열 안에 배열을 정의하고, 인덱스로 접근하기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>배열</h2>
<script>
function fnArrayDefine2() {
let arr1 = [ ];
let arr2 = [ 10, '이초홍', true, [1,2,2], ];
console.log(arr1);
console.log(arr2);
}
</script>
<button onclick="fnArrayDefine2();">배열확인2</button>
</body>
</html>
3번 인덱스는 배열이라 또 펼쳐볼 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h2>배열</h2>
<script>
function fnArrayDefine2() {
let arr1 = [];
let arr2 = [10, '이초홍', true, [1,2,2], ];
console.log(arr1);
console.log(arr2);
console.log("-----------");
console.log(arr2[0]);
console.log(arr2[1]);
console.log(arr2[2]);
console.log(arr2[3]);
console.log(arr2[3][0]);
console.log(arr2[10]); // 부적적한 인덱스 제시시 undefined
console.log("-----------");
for(let i=0; i<arr2.length; i++) {
console.log(i + "번 인덱스");
console.log(arr2[i]);
}
}
</script>
<button onclick="fnArrayDefine2();">배열확인2</button>
</body>
</html>
- 그런데 배열에 for문 쓸 때 다른 방식으로도 가능하다.
ㅁ for문 다른 방식
(1) array에서의 for in 문
- 배열을 for in문으로 순회시 순차적으로 인덱스 수를 반환한다.
- (객체는 key를 반환함)
for( 인덱스를받을변수 in 배열 ) {
실행내용
}
(2) array에서의 for of 문
- 배열을 for of문으로 순회시 순차적으로 배열의 요소를 반환한다.
for( 변수 of 배열 ) {
실행내용
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnForArray1() {
let fruits = ['사과', '바나나', '키위'];
console.log(fruits);
for( let i in fruits ) {
console.log( fruits[i] );
}
console.log("-------------------");
}
function fnForArray2() {
let fruits = ['사과', '바나나', '키위'];
console.log(fruits);
for( let f of fruits ) {
console.log( f );
}
console.log("-------------------");
}
</script>
<button onclick="fnForArray1();">for in 문</button>
<button onclick="fnForArray2();">for of 문</button>
</body>
</html>
ㅁ 배열 관련 속성 및 메소드
(1) 배열.length : 배열의 길이를 가지는 속성
(2) 배열.concat(items1[, items2[, ..]])
ㄴ 호출하는 배열의 요소들 뒤에 전달된 배열들의 요소들을 하나로 합친 새로운 배열 반환
(3) 배열.indexOf(element[, fromIndex]) // 못찾으면 -1
ㄴ 배열에서 해당 element가 위치해있는 첫번째 인덱스 반환
ㄴ 옵션 fromIndex : 탐색의 시작점의 index, 기본값은 0
(4) 배열.lastIndexOf(element[, fromIndex])
ㄴ 배열에서 해당 element가 위치해있는 마지막번째 인덱스 반환
ㄴ 옵션 fromIndex : 탐색의 시작점의 index, 기본값은 0
(5) 배열.push(element1[, element2[, ...]])
ㄴ 배열의 끝에 전달된 요소들을 추가하고, 배열의 새로운 길이 반환
// 배열 내에 요소가 몇개가 있는지는 몰라서 마지막 인덱스가 몇번인지 제시하기 어려운 경우
// push 메소드를 쓰면 배열의 마지막 인덱스에 추가할 수 있다. 전달된 요소들을 맨 뒤에 추가.
(6) 배열.pop()
ㄴ 배열의 마지막 요소를 제거하고 그 요소를 반환
ㄴ 배열이 비어있을 경우 undefined 반환
// 맨 뒤에 있는 요소를 꺼낼 때. 총 몇개의 요소가 담겨있는지 몰라서 마지막 인덱스를 제시하기 어려운 경우.
(7) 배열.unshift(element1[, element2[, ...]])
ㄴ 배열의 앞에 전달된 요소들을 추가하고, 배열의 새로운 길이 반환
(8) 배열.shift()
ㄴ 배열의 첫번째 요소를 제거하고 그 요소를 반환
ㄴ 배열이 비어있을 경우 undefined 반환
(9) 배열.slice(start, end)
ㄴ 배열의 start <= < end 인덱스 범위의 요소들을 새로운 배열로 복사해서 반환 // 기존 배열은 그대로 있음.
(10) 배열.splice(start[, deleteCount[, item1[, item2[, ...]]]])
ㄴ 배열의 기존 요소를 제거한다. 그리고 새 요소를 추가시켜줌 // splice는 기존 배열을 제거한다.
ㄴ 삭제된 요소를 반환
ㄴ start : 제거 시작 인덱스
ㄴ 옵션 deleteCount : 제거할 요소 개수 (생략시 모든요소를 의미)
ㄴ 옵션 item1, item2, .. : 제거된 자리에 추가할 요소들
(11) 배열.reverse()
ㄴ 배열 내의 요소들을 역순으로 순서를 변경하여 반환
(12) 배열.sort([callbackFn(a, b)])
- 배열.sort()만 써도 문자열은 정렬 잘 되는데 숫자는 정렬이 잘 안 됨. 함수를 써야 한다.
- callbackFn는 (a, b) => a, b 의 표현식 의 형태를 갖는다.
(a, b) => a - b 는 오름차순 정렬, (a, b) => b - a 는 내림차순 정렬이다.
- return a-b; 는 a, b 에 두 요소 전달해서 a-b로 크기를 비교한 후에
자기가 알아서 a>b이면 양수, a-b이면 음수를 리턴해서 주어진 배열을 오름차순 정렬한다.
(callbackFn 함수는 양수를 반환하면 전달된 두 요소의 순서가 변경된다)
(13) 배열.toString()
ㄴ 배열내의 요소들을 comma( , )와 함께 하나의 문자열로 합쳐서 반환
(14) 배열.join([separator])
ㄴ toString()과 동일하게 배열내의 모든 요소들을 하나의 문자열로 합쳐서 반환
ㄴ 옵션 separator : 합칠때 사용할 구분자
ㅁ concat 메소드
(2) 배열.concat(items1[, items2[, ..]])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnArrayConcat() {
let arr1 = ["사과", "딸기"];
let arr2 = [1, 2, 3];
let arr3 = ["자동차", "비행기", "오토바이"];
let concatArr = arr1.concat(arr2, arr3);
console.log(concatArr);
console.log(arr3.concat(arr1, arr2));
console.log("==============================")
console.log(arr1);
console.log(arr2);
console.log(arr3); // concat 메소드는 원본배열에 영향을 미치지 않음.
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnArrayConcat();">fnArrayConcat</button>
</body>
</html>
- concat 메소드는 원본 배열에 영향을 미치지 않는다.
ㅁindexOf 메소드
(3) 배열.indexOf(element[, fromIndex])
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnFindElementIndex() {
let arr = ["사과", "딸기", "바나나", "복숭아", "파인애플"];
let fruit = prompt("찾고자 하는 과일명 입력");
if(fruit) {
let index = arr.indexOf(fruit); // 찾지 못했을 경우 -1
if(index != -1) {
console.log("당신이 찾는 과일 " + fruit + '은(는)'
+ index + ' 번째 위치에 있습니다.'
)
}
else { console.log("판매하는 과일이 아닙니다.") }
}
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnFindElementIndex();">fnFindElementIndex</button>
</body>
</html>
ㅁ push, pop, unshift, shift 메소드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnElementInsDel() {
let arr = ["탁구", "펜싱", "양궁", "사격"];
console.log(arr);
console.log( arr.push("수영") ); // 변경된 배열의 길이 반환
console.log(arr);
console.log("================");
console.log( arr.pop() ); // 제거한 마지막 요소 반환
console.log(arr);
console.log("================");
console.log( arr.unshift("역도") ); // 변경된 배열의 길이 반환
console.log(arr);
console.log("================");
console.log( arr.shift() ); // 제거한 첫번째 요소 반환
console.log(arr);
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnElementInsDel();">fnElementInsDel</button>
</body>
</html>
- 이 넷은 모두 원본배열 내에서 진행된다.
ㅁ slice
- 기존 배열은 그대로 있음.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnElementRemove() {
let arr = ["Java", "Oracle", "HTML", "CSS", "JavaScript"];
console.log(arr.slice(1, 3)); // 1 이상 3 미만 범위의 요소들을 새 배열로 만들어서 반환
console.log(arr);
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnElementRemove();">fnElementRemove</button>
</body>
</html>
ㅁ splice 메소드
- 맨 처음, 맨 마지막 요소 말고 중간에 위치한 요소 추가, 변경, 삭제
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnElementRemove() {
let arr = ["Java", "Oracle", "HTML", "CSS", "JavaScript"];
console.log(arr);
console.log( arr.splice(1,3) ); // 1번 인덱스에서부터 3개 요소
console.log(arr); // splice로 떼어낸 부분이 아예 제거되었다.
console.log("===================");
arr.splice(0, 1, "JSP", "Servlet", "Spring");
console.log(arr);
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnElementRemove();">fnElementRemove</button>
</body>
</html>
ㅁ sort 메소드
- 원본배열 자체를 바꿔버림.
- 원본배열은 그대로 두고 싶으면 복사해서 하나 더 배열을 만들어서 진행해야 함.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnElementSorting() {
let arr = ["다보람", "나보람", "카보람", "하보람", "마보람"];
console.log(arr.sort()); // sort 메소드는 기본값 오름차순 정렬.
console.log(arr); // 원본 배열 자체를 바꾼 것임을 확인할 수 있다.
console.log("=======================");
arr.sort().reverse(); // 내림차순 정렬.
console.log(arr);
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnElementSorting();">fnElementSorting</button>
</body>
</html>
- 내림차순 정렬은 그냥 배열.sort().reverse();
ㅁ sort 메소드 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnElementSorting() {
let arr = [30, 21, 101, 18, 1, 201, 70, 7];
console.log( arr.sort() );
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnElementSorting();">fnElementSorting</button>
</body>
</html>
- 순서가 바뀌긴 했는데 내가 원하는 대로 오름차순되진 않았음.
- sort 메소드는 앞이 1로시작하는 것들이 몰려있다. 그 다음 2, 7
- 내부적으로 요소들을 문자열로 변환시켜서 아스키코드 순서대로 정렬되는 원리.
즉 숫자의 크기대로 정렬이 진행되지 않는다. -> 함수를 사용해야 내가 원하는 대로 숫자 크기순으로 정렬 된다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnElementSorting() {
let arr = [30, 21, 101, 18, 1, 201, 70, 7];
console.log( arr.sort() );
console.log("=================");
arr.sort( function(a, b) {
console.log(a, b); // 정렬이 진행될때 내부적으로 2개씩 비교가 됨.
});
console.log("=================");
console.log(arr);
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnElementSorting();">fnElementSorting</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnElementSorting() {
let arr = [30, 21, 101, 18, 1, 201, 70, 7];
console.log( arr.sort() );
console.log("=================");
arr.sort( function(a, b) {
console.log(a, b); // 정렬이 진행될때 내부적으로 2개씩 비교가 됨.
return a-b;
// 양수를 반환하면 두 요소의 순서가 변경됨.
// 음수를 반환하면 두 요소의 순서가 변경되지 않음.
// 오름차순 정렬을 하고 싶은데 앞의 값이 더 큰 경우,
// 순서를 변경해야함. 양수가 반환되게. return a-b;
// 내림차순 정렬을 하고 싶은데 뒤의 값이 더 큰 경우,
// 순서를 변경해야함. 양수가 반환되게. return b-a;
});
console.log("=================");
console.log(arr);
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnElementSorting();">fnElementSorting</button>
</body>
</html>
- 어딘가에 대입되는, 전달되는 함수는 익명함수의 형태로 사용.
ㅁ toString 메소드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnElementString() {
let months = ["Jan", "Feb", "Mar", "April", "May", "June"];
console.log(months);
console.log(months.toString());
console.log("=================");
// 배열을 콘솔창이 아닌 화면에 출력할 경우 기본적으로 toString메소드가 실행된다.
// 화면상에 객체 출력시 객체.toString()가 자동으로 실행된다. 꼭 기억.
document.getElementById("result").innerHTML = months/* .toString() */ + "<br>";
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnElementString();">fnElementString</button>
<div id="result"></div>
</body>
</html>
- 콘솔창에서 확장이 가능하다는거는 객체라는 것.
검은글씨라는건 문자열이라는 것.
- 화면상에 출력시 객체를 출력하면 객체.toString()이 자동으로 실행된다.
ㅁ join메소드
- 이것도 문자들을 합치고 컴마로 구분함. 차이점은 합쳐질 때 구분자를 제시할 수 있는 것이 toString과의 차이점.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
function fnElementString() {
let months = ["Jan", "Feb", "Mar", "April", "May", "June"];
console.log(months.join());
console.log(months.join("-"));
}
</script>
<h2>배열의 속성 및 메소드</h2>
<button onclick="fnElementString();">fnElementString</button>
<div id="result"></div>
</body>
</html>
