안녕하세요, 코린이의 코딩 학습기 채니 입니다.
개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다.
배열 (Array)
- 길이 제한, 타입 제한이 없음
HTML 코드
<button onclick="test1();">배열생성</button>
Javascript
배열 생성
function test1() {
const arr1 = [1, 2, 3];
const arr2 = new Array('a', 'b', 'c');
const arr3 = new Array(3); // 배열의 길이
console.log(arr1);
console.log(arr2);
console.log(arr3);
}
배열 요소 추가
arr1[3] = '안녕';
arr1[4] = ['x', 'y', 'z'];
console.log(arr1);
배열의 길이와 타입 제한이 없기 때문에 배열 선언 시 [1, 2, 3]으로 길이를 3으로 주었어도 더 추가할 수 있으며,
숫자/문자 등의 여러 타입을 동일한 배열 원소로 추가할 수 있으며, 심지어 배열을 원소로 추가할 수도 있습니다.
arr3[0] = '가';
arr3[1] = '나';
arr3[2] = '다';
arr3[3] = '라';
console.log(arr3);
마찬가지로 길이 제한이 없으므로, 배열 선언 시 길이를 3으로 주었어도 이상으로 추가할 수 있습니다.
arr3[0] = '가';
// arr3[1] = '나';
// arr3[2] = '다';
// arr3[3] = '라';
console.log(arr3);
선언한 배열의 길이보다 원소를 적게 넣으면 위처럼 확인됩니다.
요소 참조 - 인덱스 이용
console.log(arr1[3]);
console.log(arr1[4][2]);
배열 안에 배열 원소는 2차원 배열을 선언할 때처럼 선언하여 원소를 꺼내옵니다.
존재하지 않는 원소 참조 시
console.log(arr1[100]);
값이 없음을 의미하는 undefined를 반환하고, 오류가 발생 되지는 않습니다.
(대신 .lenght 등 해당 요소에 접근하여 무언가를 가져올 때는 오류 발생! "Canno read properties of undefined")
HTML 코드
<button onclick="test2();">indexOf</button>
Javascript 코드
indexOf(search, start)
- 0번지부터 배열 원소의 인덱스 가져오기
function test2() {
const arr = ["apple", "strawberry", "melon", "avocade", "melon"];
console.log(arr.indexOf("melon"));
console.log(arr.indexOf("melon", 3));
console.log(arr.indexOf("meeeelon"));
}
1) arr 배열에 "melon"의 값을 가진 원소의 인덱스를 0번지부터 찾아 반환하므로 2가 반환되었습니다.
2) arr 배열에 "melon"의 값을 가진 원소의 인덱스를 3번지부터 찾으므로 4가 반환되었습니다.
3) arr 배열에 "meeelon"의 값을 가진 원소의 인덱스를 0번지부터 찾았지만 존재하지 않으므로 -1이 반환되었습니다.
lastIndexOf(seartch, start)
- 마지막 번지부터 배열 원소의 인덱스 가져오기
const arr = ["apple", "strawberry", "melon", "avocade", "melon"];
console.log(arr.lastIndexOf("melon"));
arr 배열에 "melon"의 값을 가진 원소의 인덱스를 마지막 번지부터 찾아 반환하므로 4가 반환되었습니다.
배열 복제
HTML 코드
<button onclick="test3();">concat</button>
Javascript 코드
concat(arr1, arr2 ...):arr3
- 배열 원소를 복사하여 원본 배열에 추가하지 않고 새 배열을 반환
function test3() {
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr3 = arr1.concat(arr2);
console.log(arr1);
console.log(arr2);
console.log(arr3);
}
arr1 배열 원소에 arr2의 배열 원소를 복제한 새로운 배열을 반환(arr3)하는 것을 확인할 수 있습니다.
전개연산자 spread Operator (ES6)
const arr1 = [1, 2, 3];
const arr2 = ['a', 'b', 'c'];
const arr4 = [...arr1, ...arr2];
const arr5 = [...arr1];
console.log(arr4);
console.log(arr5);
배열 원소를 문자열로 합치기
HTML 코드
<button onclick="test4();">join</button>
Javascript 코드
join(delimiter(구분자):string
function test4() {
const arr = ['사과', '딸기', '바나나', '망고'];
const join = arr.join('|');
console.log(typeof join, join);
}
배열 원소들을 '|'로 구분한 string 타입의 '사과|딸기|바나나|망고'가 출력되는 것을 확인할 수 있습니다.
delimiter 생략 시
const arr = ['사과', '딸기', '바나나', '망고'];
console.log(arr.join());
delimiter 생략 시에는 기본 구분자인 (,)가 추가된 string 타입을 반환해줍니다.
배열 거꾸로 뒤집기
HTML 코드
<button onclick="test5();">reverse</button>
Javascript 코드
reverse()
- 요소 순서를 반대로 뒤집음
- 원본 배열을 수정
function test5() {
const arr = ['가', '나', '다'];
console.log(arr.reverse()); // 원본 배열을 리턴
console.log(arr);
}
reverse()는 원본 배열을 수정하고, 원본 배열을 리턴합니다.
배열 원소의 순서가 거꾸로 뒤집어진 것을 확인할 수 있습니다.
배열 정렬
HTML 코드
<button onclick="test6();">sort</button>
Javascript 코드
기본 정렬
sort(compareFunction)
- 원본 배열 정렬
function test6() {
// 기본 정렬
const arr = [3, 2, 4, 5, 1];
console.log(arr.sort());
console.log(arr);
}
오름차순으로 정렬된 것을 확인할 수 있으며, 마찬가지로 원본 배열을 수정 / 반환하는 것을 확인할 수 있습니다.
const names = ['나영길', '다락방', '가방애'];
console.log(names.sort());
console.log(names);
문자열도 사전등재순으로 오름차순 정렬되는 것을 확인할 수 있으며, 원본 배열을 수정 / 반환하는 것을 확인할 수 있습니다.
기타 정렬
- 음수 | 0 | 양수를 반환 → 음수 반환 시 자리 교환
숫자 내림차순
const arr = [3, 2, 4, 5, 1];
arr.sort(function(a, b) {
return b - a;
});
console.log(arr);
문자열 사전등재역순
const names = ['나영길', '다락방', '가방애'];
names.sort(function(a, b) {
if(a > b) return -1;
if(a < b) return 1;
return 0;
});
console.log(names);
음수, 양수, 0을 이용하여 음수가 리턴되면 a, b의 자리 교환이 이루어집니다.
이를 이용하여 내림차순 정렬을 할 수 있습니다.
@실습 - 영화
- 사용자로부터 영화 제목을 입력 받고, 이를 배열로 변환
- 오름차순 정렬 후 li태그로 화면 출력
HTML 코드
<button onclick="test7();">@실습문제 - 영화</button>
<ul class="test"></ul>
Javscript 코드
function test7() {
const movies = prompt("영화제목을 입력하세요.(,로 구분)");
// 사용자 입력 값이 없는 경우 조기 return
if(!movies) return;
const arr = movies.split(",");
// 앞 뒤 공백 제거
for(let i = 0; i < arr.length; i++) {
arr[i] = arr[i].trim();
}
arr.sort();
let html = "";
for(let i = 0; i < arr.length; i++) {
html += `<li>${arr[i]}</li>`;
}
document.querySelector("ul.test").innerHTML = html;
}
