목차
- 배열 (Array) 기본 내용
- 배열 메서드 (Array Method)
- 배열 정렬 (Array Sort)
- 배열 반복 메서드 (Array Iteration Method)
- 배열 관련 추천 강의 주소
배열 (Array) 기본 내용
[목차]
배열 기본예제
<p id="hz"></p>
<script>
var code = ["HTML", "CSS", "JS"];
document.getElementById("hz").innerHTML = code;
</script>
결과보기
배열 정의
한 번에 둘 이상의 값을 보유 할 수있는 특수 변수.
1.
하나의 변수에 여러 값을 담을 때 유용.
2.
만약, 배열 사용 안 하면, 아래처럼 각 변수에 각각 담아야 하는 불편 있음.
var code1 = "HTML";
var code2 = "CSS";
var code3 = "JS";
3.
배열값 접근법
색인배열 : 색인 (Index) 이용해 각 배열값에 접근 가능.
연관배열 : 배열키 (Key) 이용해 각 배열값에 접근 가능.
배열 생성법1 - [ ] 방식 ★ (더 간결/빠름/정확)
var array_name = [item1, item2, ...];
또는,
var array_name = [
item1,
item2,
...
];
★ 배열값은 줄바꿈 가능.
[예제1] 한줄방식
<p id="hz"></p>
<script>
var code = ["HTML", "CSS", "JS"];
document.getElementById("hz").innerHTML = code;
</script>
결과보기
[예제2] 줄바꿈방식
<p id="hz"></p>
<script>
var code = [
"HTML",
"CSS",
"JS"
];
document.getElementById("hz").innerHTML = code;
</script>
결과보기
★ 배열값 마지막 뒤에 쉼표 넣으면 브라우저간 크로스브라우징 안 됨. (IE8 이하 에러남).
배열 생성법2 - new Array() 방식
<p id="hz"></p>
<script>
var code = new Array("HTML", "CSS", "JS");
document.getElementById("hz").innerHTML = code;
</script>
결과보기
※ 배열도 객체의 일종이라, array() 함수 앞에 new 키워드 추가.
※ [배열값..] 방식이 new array(배열값...) 방식보다 더 간결하고 속도도 빠름. 첫 번째 방법 사용 권장.
배열값 접근
array_name[index]
※ index는 0부터 시작. (예) [0] : 첫 번째 , [1] 두 번째
[예제]
<p id="hz"></p>
<script>
var code = ["HTML", "CSS", "JS"];
var html = code[0];
var css = code[1];
var js = code[2];
var txt = code + "<br>" + html + "<br>" + css + "<br>" + js;
document.getElementById("hz").innerHTML = txt;
</script>
결과보기
배열값 변경 / 전체 배열값에 접근
- 배열값 변경 : arrayName[index] = "new value";
- 전체배열접근 : arrayName
<p id="hz"></p>
<script>
var code = ["HTML", "CSS", "JS"];
code[0] = "PHP"; // 배열값 변경
document.getElementById("hz").innerHTML = code; // 전체배열 접근
</script>
결과보기
배열은 객체 일종
1.
Array (배열)은 Object(객체)의 일종.
typeof 연산자로 arrayName 판별하면, Object (객체)로 나옴.
2.
JS 배열은 배열로 가장 잘 설명됨.
3.
배열의 각 항목에 대해 INDEX (색인번호)로 접근.
객체는 각 항목에 대해 Property_Name (속성명) 사용해 접근.
[Array 배열]
<p id="demo"></p>
<script>
var hz = ["홈짱닷컴", "Homzzang.com", 2012];
document.getElementById("demo").innerHTML = hz[0];
</script>
결과보기
[Object 객체]
<p id="demo"></p>
<script>
var hz = {site:"홈짱닷컴", host:"Homzzang.com", open:2012};
document.getElementById("demo").innerHTML = hz["site"];
</script>
결과보기
배열값도 객체 일종
JS 배열값 역시 객체 성격이라, 다른 유형의 변수 가질 수 있음.
즉,
한 배열에 객체, 함수, 배열, 문자열, 숫자, 날짜 등 다양한 데이터형식을 담을 수 있음.
var hzArray = {}; // hzArray 배열변수선언
hzArray[0] = Date.now;
hzArray[1] = hzFunction;
hzArray[2] = hzCars;
배열의 속성/메서드
JS 배열은 다양한 내장 속성・메서드 존재. (배열의 강점)
var hz = ["홈짱닷컴", "Homzzang.com", 2012];
var x = hz.length; // 내장속성 (배열값 개수)
var y = hz.sort(); // 내장 메서드 (배열 정렬)
배열의 length 속성 (=배열개수=배열값개수=배열길이)
1.
length 속성 : 배열 개수
2.
length 값은 항상 배열 index 최대값보다 1 큼. (왜냐면, index는 0부터 시작).
<p id="demo"></p>
<script>
var hz = ["홈짱닷컴", "Homzzang.com", 2012];
document.getElementById("demo").innerHTML = hz.length; // 3
</script>
결과보기
첫번째 배열값에 접근
arrayName[0]
<p id="demo"></p>
<script>
var hz = ["홈짱닷컴", "Homzzang.com", 2012];
var first = hz[0];
document.getElementById("demo").innerHTML = first;
</script>
결과보기
마지막 배열값에 접근
arrayNname[arrayName.length - 1]
<p id="demo"></p>
<script>
var hz = ["홈짱닷컴", "Homzzang.com", 2012];
var last = hz[hz.length - 1];
document.getElementById("demo").innerHTML = last;
</script>
결과보기
전체 배열값에 접근 - for반복문 또는 Array.forEach() 이용
for 반복문 (가장 안전)이나 Array.forEach() 함수 이용.
[for 반복문]
<p id="demo"></p>
<script>
var hz, text, cnt, i;
hz = ["홈짱닷컴", "Homzzang.com", 2012];
cnt = hz.length;
text = "<ul>";
for (i = 0; i < cnt; i++) {
text += "<li>" + hz[i] + "</li>";
}
text += "</ul>";
document.getElementById("demo").innerHTML = text;
</script>
결과보기
[foreach() 함수]
<p id="demo"></p>
<script>
var hz, text;
hz = ["홈짱닷컴", "Homzzang.com", 2012];
text = "<ul>";
hz.forEach(homzzang);
text += "</ul>";
document.getElementById("demo").innerHTML = text;
function homzzang(value) {
text += "<li>" + value + "</li>";
}
</script>
결과보기
배열값 추가
- 방법1: array.push(value1,value2,....)
- 방법2: array[array.length] = "value1"; array[array.length] = "value2"; ....
[예제1]
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
var code = ["HTML", "CSS", "JS"];
document.getElementById("demo").innerHTML = code;
function homzzang() {
code.push("PHP","SQL");
document.getElementById("demo").innerHTML = code;
}
</script>
결과보기
[예제2]
<button onclick="homzzang()">클릭</button>
<p id="demo"></p>
<script>
var code = ["HTML", "CSS", "JS"];
document.getElementById("demo").innerHTML = code;
function homzzang() {
code[code.length] = "PHP";
code[code.length] = "SQL";
document.getElementById("demo").innerHTML = code;
}
</script>
주의: code[code.length + 1] = "SQL"; 처럼 하면 중간에 배열값 없는 구멍 생김.
[주의] - 인덱스 높은 요소 추가하면 배열에 정의되지 않은 "undefined" 구멍이 생김.
<p id="demo"></p>
<script>
var code, text, cnt, i;
code = ["HTML", "CSS", "JS"];
code[6] = "Lemon";
cnt = code.length;
text = "";
for (i = 0; i < cnt; i++) {
text += code[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
결과보기
연관배열 (Associative Array) = 해시 (Hash)
1.
연관배열: 배열값에 Number Index (숫자색인) 대신 NAME (이름)으로 접근 가능한 배열.
JS는 연관배열 지원 안 함. (JS에서 배열은 항상 숫자 인덱스 사용)
<p id="demo"></p>
<script>
var hz = [];
hz[0] = "홈짱닷컴";
hz[1] = "Homzzang.com";
hz[2] = 2012;
var txt = hz[0] + " " + hz.length;
document.getElementById("demo").innerHTML = txt; // 홈짱닷컴 3
</script>
결과보기
2.
NAME 인덱스 사용하는 경우 JS는 배열을 표준 객체로 재정의.
그 후, 일부 배열 메소드 및 속성은 잘못된 결과 생성하니 주의.
<p id="demo"></p>
<script>
var hz = [];
hz['site'] = "홈짱닷컴";
hz['host'] = "Homzzang.com";
hz['open'] = 2012;
var txt = hz['site'] + " " + hz.length + " " + hz['0'];;
document.getElementById("demo").innerHTML = txt; // 홈짱닷컴 0
</script>
결과보기
배열(Array ) / 객체(Object) 차이점
- JS 배열 : NUMBER INDEX (숫자 색인) 사용. (연관배열 지원 X)
- JS 객체 : NAME INDEX (이름 색인) 사용.
PS. JS 배열 : 번호가 매겨진 인덱스를 가진 특별한 종류의 객체.
배열 사용 경우
1.
배열은 숫자 색인 사용할 때 사용.
2.
배열 생성은 [...] 방식 사용. ※ new Array(...) 방식은 느리니 사용 자제.
var hz = new Array(); // 나쁜 방식 (복잡, 느림, 비정상작동가능성)
var hz = []; // 좋은 방식
[예제1] - 배열값 2개 이상일 땐, 두 방식 모두 동일 결과 나옴. 단, 처리 속도는 차이 남.
<p id="demo"></p>
<script>
//var hz = new Array("홈짱닷컴","Homzzang.com", 2012); // 나쁜 방식
var hz = ["홈짱닷컴","Homzzang.com", 2012]; // 좋은 방식
document.getElementById("demo").innerHTML = hz[0];
</script>
[예제2] - new array() 방식은 배열값이 하나일 때, 문자열 배열값은 정상출력 O
<p id="demo"></p>
<script>
var hz = new Array("홈짱닷컴");
document.getElementById("demo").innerHTML = hz[0]; // 홈짱닷컴
</script>
결과보기
[예제3] - new array() 방식은 배열값이 하나일 때, 숫자 배열값은 정상출력 X
<p id="demo"></p>
<script>
var hz = new Array(2012);
document.getElementById("demo").innerHTML = hz[0]; // undefined
</script>
결과보기
배열인지 여부 체크 방법들
1. typeof 연산자로 배열의 데이터타입 판정 시, object (객체)로 나옴.
(예제)
<p id="demo"></p>
<script>
var hz = ["홈짱닷컴", "Homzzang.com", 2012];
document.getElementById("demo").innerHTML = typeof hz; // object
</script>
결과보기
2. Array의 데이터타입을 직관적으로 Array로 나오게 하는 3가지 방법.
방법1: Array.isArray(array_name) - ECMAScript 5가 이전 브라우저에서 지원 X
방법2: 사용자정의 isArray() 함수 생성. - 방법1의 문제 해결 가능.
방법3. instanceof 키워드 사용.
2-1. Array.isArray(array_name) 방식
ECMAScript 5 이상 사용 가능. 오래된 브라우저에선 사용 불가.
<p id="demo"></p>
<script>
var hz = ["홈짱닷컴", "Homzzang.com", 2012];
document.getElementById("demo").innerHTML = Array.isArray(hz);
</script>
결과보기
2-2. 사용자정의 isArray() 함수 생성. - 방법1의 문제 해결 가능.
인수가 배열이면 항상 true 반환.
엄밀히 말하면, 객체 프로토 타입에 "Array" 단어 포함 시 true 반환.
<p id="demo"></p>
<script>
var hz = ["홈짱닷컴", "Homzzang.com", 2012];
document.getElementById("demo").innerHTML = isArray(hz);
function isArray(arr) {
return arr.constructor.toString().indexOf("Array") > -1;
}
</script>
결과보기
2-3. instanceof 키워드 사용.
instanceof 연산자는 객체가 주어진 생성자에 의해 생성 시 true 반환함.
<p id="demo"></p>
<script>
var hz = ["홈짱닷컴", "Homzzang.com", 2012];
document.getElementById("demo").innerHTML = hz instanceof Array; // true
</script>
결과보기
배열 메서드 (Array Method)
[목차]
배열을 문자열로 전환
- toString() - 배열을 쉼표로 구분된 배열값의 문자열로 변환.
- join() - toString() 메서드와 유사하나, 쉼표 구분 대신 별도 구분자 설정 가능.
배열값추가 / 배열값제거
[배열 뒤쪽] - 속도 빠름.
- pop() - 배열 마지막 배열값 제거. (제거된 배열값 반환)
- push() - 배열 마지막에 새로운 배열값 추가. (새로운 배열개수 반환)
[배열 앞쪽] - 속도 느림.
- shift() - 첫 번째 배열값 제거 후, 다른 모든 배열값을 더 낮은 인덱스로 이동. (제거된 배열값 반환)
- unshift() - 배열 처음에 새 배열값 추가 후, 다른 모든 배열값을 더 높은 인덱스로 이동. (새로운 배열개수 반환)
배열값변경 / 배열값추가
array_name[index] = "value";
(예) hz[0] = "홈짱닷컴";
array_name[array_name.length] = "value";
(예) hz[hz.length] = "홈짱닷컴";
배열값삭제
delete array_name[index];
(예) delete hz[0];
[주의]
delete 사용하면 배열에 undefined 구멍 생길 수 있으니, pop() 또는 shift() 사용. (∵ 해당 배열값만 삭제하고 나머지 배열값의 색인 조정은 안 하므로)
배열값추가/삭제 후 배열잇기
- splice() - 배열의 특정 색인에 배열값 추가/삭제. (undefined 구멍 안 만들고 제거 가능)
배열병합 (배열연결)
concat()
- 기존 배열을 병합 (연결)하여 새 배열 생성.
- 기존 배열 변경 안 함. 항상 새 배열을 반환.
- 여러 개의 배열 독립변수 사용 가능.
- 배열값을 독립변수로 사용 가능.
배열자르기
slice()
- 배열의 일부를 새로운 배열로 잘라냄.
- 새로운 배열 생성. (기존 배열에서 요소 제거 안 함.)
- 2개의 독립변수 사용 가능. (단, 2번째 독립변수의 배열값은 포함 안 함.)
- 1개의 독립변수만 사용하면, 해당 위치부터 마지막까지 잘라내 배열 생성.
자동 toString() - 배열을 문자열로 자동전환
기본 값이 예상되면 JS는 배열을 쉼표로 구분된 문자열로 자동 변환.
그 결과, 아래 두 경우는 동일한 결과 나옴.
[참고] 모든 JS 객체는 toString() 메서드 갖음.
배열최대값 /배열최소값 (= 최대배열값/최소배열값)
JS 배열엔 최대배열값・최소배열값 찾는 내장 함수 없음.
이 문제 해결 방법을 이 페이지 아래에서 소개 예정.
배열 정렬 (Array Sort)
[목차]
문자열배열정렬 (= 오름차순)
sort() - 문자열 배열을 알파벳순으로 정렬. (숫자 경우, 제대로 작동 X)
문자열배열 내림차순 (+ 문자열배열 역순정렬)
숫자배열정렬 (= 배열값비교함수) ★
[오름차순]
arrayName.sort(function(a, b){return a - b});
[내림차순]
arrayName.sort(function(a, b){return b - a});
- 양수 : ab순
- 0 : 그대로
- 음수 : ba순
숫자배열비교함수
오름차순
function(a, b){return a - b}
1.
비교 함수의 목적은 대체 정렬 순서 정의하며. 비교 함수는 배열의 모든 값을 한 번에 두 값씩 비교.
2.
비교 함수는 인수에 따라 (음수/0/양수)값 반환.
- 음수 : ab순 정렬. (예) (1,3) 경우, 1-3 = -2 (즉, 1 < 3)이므로, 1,3 순서 배치.
- 0 : 현재 순서. (예) (1,1) 경우, 1-1 = 0 (즉, 1 = 1)이므로, 순서 조정 X
- 양수 : ba순 정렬. (예) (3,1) 경우, 3-1 = 2 (즉, 3 > 1)이므로 , 1,3 순서 재조정.
[예제]
<button onclick="homzzang1()">알파벳순</button>
<button onclick="homzzang2()">순자크기순</button>
<p id="demo"></p>
<script>
var num = [30, 100, 1, 5, 25, 10];
document.getElementById("demo").innerHTML = num;
function homzzang1() {
num.sort();
document.getElementById("demo").innerHTML = num;
}
function homzzang2() {
num.sort(function(a, b){return a - b});
document.getElementById("demo").innerHTML = num;
}
</script>
결과보기
배열랜덤정렬 (= 랜덤배열정렬)
arrayName.sort(function(a, b){return 0.5 - Math.random()});
배열최대값/배열최소값 구하기
[방법1] - (오름차순, 내림차순)으로 먼저 배열정렬시킨 후, 숫자 색인 이용해 찾기. ※ (최대배열값・최소배열값)만 찾을 경우에 매우 비효율적.
- 오름차순: arrayName.sort(function(a, b){return a - b});
- 내림차순: arrayName.sort(function(a, b){return b - a});
[방법2]
- 최대값 찾기 - function getArrayMax(arr) {return Math.max.apply(null, arr);}
- 최소값 찾기 - function getArrayMin(arr) {return Math.min.apply(null, arr);}
[참고]
- Math.max.apply(null, [1, 2, 3]) == Math.max(1, 2, 3)
- Math.min.apply(null, [1, 2, 3]) == Math.min(1, 2, 3)
[방법3] - 사용자 정의 함수 생성. (각 값을 발견된 최대값・최소값과 비교반복해 최대값・최소값 찾음.)
[최대값 구하기]
function getArrayMax(arr) {
var len = arr.length;
var max = -Infinity;
while (len--) {
if (arr[len] > max) {
max = arr[len];
}
}
return max;
}
[최소값 구하기]
function getArrayMin(arr) {
var len = arr.length;
var min = Infinity;
while (len--) {
if (arr[len] < min) {
min = arr[len];
}
}
return min;
}
객체배열정렬
1.
JS 배열엔 데이터타입이 다른 객체가 포함되는 경우 있는데,
sort() 메서드 사용한 사용자정의 함수 만들어 배열 정렬 가능.
2.
숫자 정렬보다 문자열 정렬시키는 함수가 좀 더 복잡함.
[숫자 정렬]
<button onclick="homzzang()">정렬</button>
<p id="demo"></p>
<script>
var code = [
{lang:"PHP", level:3},
{lang:"HTML", level:1},
{lang:"CSS", level:2}
];
displayCode();
function homzzang() {
code.sort(function(a, b){return a.level - b.level});
displayCode();
}
function displayCode() {
document.getElementById("demo").innerHTML =
code[0].lang + " " + code[0].level + "<br>" +
code[1].lang + " " + code[1].level + "<br>" +
code[2].lang + " " + code[2].level;
}
</script>
결과보기
[문자열 정렬]
<button onclick="homzzang()">정렬</button>
<p id="demo"></p>
<script>
var code = [
{lang:"PHP", level:3},
{lang:"HTML", level:1},
{lang:"CSS", level:2}
];
displayCode();
function homzzang() {
code.sort(function(a, b){
var x = a.lang.toLowerCase();
var y = b.lang.toLowerCase();
if (x < y) {return -1;}
if (x > y) {return 1;}
return 0;
});
displayCode();
}
function displayCode() {
document.getElementById("demo").innerHTML =
code[0].lang + " " + code[0].level + "<br>" +
code[1].lang + " " + code[1].level + "<br>" +
code[2].lang + " " + code[2].level;
}
</script>
결과보기
배열 반복 메서드 (Array Iteration Method)
★ 배열 반복 메소드는 모든 배열값에 대해 작동함.
[목차]
Array.forEach() 메서드 ★
Array.forEach() 특징
- 각 배열요소에 대해 콜백함수만 실행. (배열 반환 X)
- IE9 이상 주요 최신브라우저 지원.
Array.map() 메서드 ★
Array.map() 특징
- 각 배열요소에 대해 콜백함수 실행 후 새 배열 반환.
- 값 없는 배열 요소 경우, 함수 실행 X.
- 원래 배열을 변경 X
- IE9 이상 주요 최신브라우저 지원.
Array.filter() 메서드 ★
Array.filter() 특징
- 테스트함수 충족하는 배열요소로 구성된 새 배열 반환.
- IE9 이상 주요 최신브라우저 지원.
Array.reduce() 메서드
Array.reduce() 특징
- 단일값을 생성 (또는, 단일값으로 감소) 위해 각 배열 요소에서 함수실행.
- 배열 왼쪽에서 오른쪽으로 동작.
- 원래 배열을 줄이지는 않음.
- 초기값을 가질 수 있음.
- IE9 이상 주요 최신브라우저 지원.
Array.reduceRight() 메서드
Array.reduceRight() 특징
- 단일값을 생성 (또는, 단일값으로 감소) 위해 각 배열 요소에서 함수실행.
- 배열 오른쪽에서 왼쪽으로 동작.
- 원래 배열을 줄이지는 않음.
- 초기값을 가질 수 있음.
- IE9 이상 주요 최신브라우저 지원.
Array.every() 메서드
Array.every() 특징
- 모든 배열요소가 테스트함수 충족하는지 여부 참거짓 반환.
- IE9 이상 주요 최신브라우저 지원.
Array.some() 메서드
Array.some() 특징
- 일부 배열요소가 테스트함수 충족하는지 여부 참거짓 반환.
- IE9 이상 주요 최신브라우저 지원.
Array.indexOf() 메서드
Array.indexOf() 특징
- 배열에서 요소값 검색 후 일치한 첫번째 색인번호 반환.
- 첫 번째 항목 위치는 0이고 두 번째 항목 위치는 1
- 항목을 찾을 수 없으면 -1 반환.
- IE9 이상 주요 최신브라우저 지원.
Array.lastIndexOf() 메서드
Array.lastIndexOf() 특징
- 배열에서 요소값 검색 후 일치한 마지막 색인번호 반환.
- IE9 이상 주요 최신브라우저 지원.
Array.find() 메서드
Array.find() 특징
- 테스트 콜백함수 통과한 첫번째 배열요소의 값 반환.
- IE12 이상 주요 최신브라우저 지원.
Array.findIndex() 메서드
Array.findIndex() 특징
- 테스트 콜백함수 충족한 첫번째 배열요소의 색인번호 반환.
- IE12 이상 주요 최신브라우저 지원.
배열 관련 추천 강의 주소
