[Basic] JS - Array Method - JS배열메서드
JavaScript Array Methods JS 배열 메서드
시작 전 알아둘 사항 JS 배열에서 순서 색인은 0부터 시작함. 즉, 첫 번째는 0, 두 번째는 1, 세 번째는 2, ......... 따라서, 전체 데이터 갯수가 N이라고 할 때, 마지막 데이터의 순서는 N-1이 됨. 1. 배열 데이터 출력법 - 3가지
JS에서 모든 객체는 valueOf() 와 toString() 메서드을 갖습니다. 배열 역시 객체의 일종이며, 배열에서의 두 메서드은 결과값이 같습니다. ① valueOf() <p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = hz.valueOf();
</script> 결과값: HTML,CSS,JS,SQL,PHP
② toString() <p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = hz.toString();
</script>
결과값: HTML,CSS,JS,SQL,PHP ③ join() 아래 예제에서는 * 를 넣었지만, 그 자리에 다른 특수문자들을 넣을 수 있음. (예) | , ☆ ..... <p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = hz.join(" * ");
</script>
결과값: HTML * CSS * JS * SQL * PHP
2. 배열 (마지막 데이터 삭제 + 마지막에 새 데이터 추가)
① pop() 마지막 데이터를 삭제 <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "일본어"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.pop()
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: HTML,CSS,JS ※ 클릭할 때마다 끝에 있는 데이터가 하나씩 사라짐. cf. [주의] 아래처럼 사용할 경우엔, 반대로 마지막 데이터만 남고 모든 데이터가 사라짐. <p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "일본어"];
document.getElementById("homzzang").innerHTML = hz.pop();
</script>
결과값: 일본어 ② push() 마지막 에 새로운 데이터를 추가 <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.push("PHP")
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: HTML,CSS,JS,SQL,PHP ※ 클릭할 때마다 데이터가 추가됨
3. 배열 (처음 데이터 삭제 + 처음에 새 데이터 추가)
① shift() 첫 번째 데이터를 삭제 후, 나머지 데이터의 순서를 한 자리씩 앞으로 당김. <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["일본어", "HTML", "CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.shift();
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: HTML,CSS,JS,SQL,PHP ※ 클릭할 때마다 배열의 첫 번째 데이터가 삭제되고, 나머지 데이터 순서가 당겨짐. ② unshift() 첫 번째 에 새로운 데이터를 추가 하고, 기존 데이터의 순서를 한 자리씩 뒤로 밂. [주의] 익스플로러 8 이하의 하위 브라우저에서는 undefined 에러가 날 수 있음. <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.unshift("HTML");
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: HTML,CSS,JS,SQL,PHP ※ 클릭할 때마다 배열의 처음에 데이터가 추가 됨.
정리
배열의 첫 번째
배열의 마지막
데이터 삭제
shift() pop()
데이터 추가
unshift() push()
4. 배열의 데이터 바꾸기 (1) 배열의 데이터 색인 번호를 이용 ※ 순서는 0부터 시작. 첫 번째는 0, 두 번째는 1, ......마지막은 N-1 <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz[2] = "JavaScript";
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: HTML,CSS,JavaScript,SQL,PHP (2) length 속성을 이용하면 배열의 데이터 마지막에 쉽게 데이터 추가 가능 <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz[hz.length] = "PHP";
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: HTML,CSS,JS,SQL,PHP
5. 배열의 데이터 지우기 JS 배열 역시 객체의 일종이기 때문에, delete 연산자를 통해 데이터를 삭제 가능합니다. 하지만, delete 연산자 이용해 데이터를 삭제하면, 배열의 중간 색인 번호에 undefined (정의 안 됨) 같은 구멍이 생깁니다. 따라서, 배열의 데이터를 삭제하려면 delete 연산자 대신에 pop() 이나 splice() 메서드을 이용해 삭제하도록 합니다. <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
delete hz[0]; // 배열의 첫 번째 데이터를 삭제
document.getElementById("homzzang").innerHTML = hz[0]; // 배열의 첫 번째 데이터를 출력
}
</script>
결과값: undefined
6. splice() 메서드: 배열에 기존 데이터를 삭제하거나 그대로 둔 채, 새로운 데이터를 추가할 때 사용 splice( 데이터를 넣을 위치, 기존 데이터 삭제할 갯수, 새로 추가할 데이터 ) 형식으로 사용함.
<button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "리눅스"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.splice(3, 0, "SQL", "PHP"); // 4번째 자리를 삭제하지 않고, 그 자리에 SQL과 PHP 문자열 삽입
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: HTML,CSS,JS,SQL,PHP,리눅스 ※ 3 : 새로 추가할 데이터가 들어가야 할 위치. 순서는 0부터 세므로 3은 4번째 위치에 해당함. ※ 0 : 삭제할 갯수. 0이므로 기존의 데이터를 삭제하지 않고 그대로 둠. 만약, 1이라면 4번째 데이터를 삭제함.
※ "SQL", "PHP" : 새로 추가할 데이터. 만약, 추가할 데이터가 없다면 안 써도 무방함.
[예제]
<button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "리눅스", "일본어"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.splice(3, 2, "SQL", "PHP"); // 4번째 데이터부터 2개를 삭제하고, 새로 SQL과 PHP 문자열 데이터를 추가
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: HTML,CSS,JS,SQL,PHP
splice() 메서드을 이용하면 배열의 색인 번호에 구멍을 안 남기고 기존 데이터를 삭제 가능함. 즉, 앞서 설명한 것처럼, delete 연산자를 이용하면 색인 번호에 구멍이 생기는데, splice() 메서드은 색인 번호 에러가 안 남.
<button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL" , "PHP", "일본어", "리눅스"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.splice(5, 1); // 배열의 6번째 데이터부터 1개의 데이터를 삭제
document.getElementById("homzzang").innerHTML = hz[5]; // 배열의 6번째 데이터를 출력
}
</script>
결과값: 리눅스 ※ delete 연산자를 이용해 데이터 삭제하면 색인 번호의 구멍이 생기나, splice() 메서드은 구멍 안 생김.
7. sort() 메서드: 배열의 데이터를 알파벳 순서로 정렬 ※ 배열의 데이터가 문자열 일 때 사용 <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.sort(); // 배열의 데이터를 알파벳 순서로 정렬
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: CSS,HTML,JS,PHP,SQL 8. reverse() 메서드: sort() 메서드 뒤에 reverse() 메서드을 함께 사용하면, 배열의 데이터를 알파벳 역순으로 정렬 가능. <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.sort(); // 데이터를 알파벳 순서로 정렬
hz.reverse(); // 데이터를 역순으로 정렬
document.getElementById("homzzang").innerHTML = hz;
}
</script> 결과값: SQL,PHP,JS,HTML,CSS
reverse() 메서드을 단독으로 사용하면 현재 나열된 배열의 데이터를 역순으로 정렬시킴. <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.reverse(); // 데이터를 역순으로 정렬
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: PHP,SQL,JS,CSS,HTML
9. 배열 데이터가 숫자 일 경우 정렬 (1) sort(function(a, b){return a-b}) : 작은 숫자에서 큰 숫자 순으로 정렬 (= 오름차순 정렬) <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = [44, 33, 6, 100, 25, 8];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.sort(function(a, b){return a-b}); // 작은 숫자에서 큰 숫자 순으로 정렬
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: 6,8,25,33,44,100 (2) sort(function(a, b){return b-a}) : 큰 숫자에서 작은 숫자 순으로 정렬 (= 내림차순 정렬) <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = [44, 33, 6, 100, 25, 8];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.sort(function(a, b){return b-a});
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: 100,44,33,25,8,6 [참고] 배열의 데이터가 숫자 (예: 2와 11)일 경우, sort() 메서드으로 정렬시키면 11, 2 순으로 정렬 됨. 즉, 11을 2보다 작게 인식 <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
var hz = [2, 11];
document.getElementById("homzzang").innerHTML = hz;
function myFunction() {
hz.sort(); // 알파벳 순으로 정렬
document.getElementById("homzzang").innerHTML = hz;
}
</script>
결과값: 11,2
10. 비교 함수: function(a, b){return a-b} 과 function(a, b){return b-a} 의미
function(a, b){return a-b} : 음수, 0, 양수 순으로 정렬시키라는 의미 (= 오름차순 정렬) (예) -30, 0, 40
function(a, b){return b-a} : 양수, 0, 음수 순으로 정렬시키라는 의미 (= 내림차순 정렬) (예) 40, 0, -30
좀 더 구체적으로 설명하자면,
sort(function(a, b){return a-b}) : 오름차순 (= 작은 숫자에서 큰 숫자 순)으로 정렬. 즉, (음수, 0, 양수) 순으로 정렬
sort(function(a, b){return b-a}) : 내림차순 (= 큰 숫자에서 작은 숫자 순)으로 정렬. 즉, (양수, 0, 음수) 순으로 정렬
a: 작은 값, b: 큰값
30과 40을 비교해 정렬시킬 경우, sort() 메서드은 function(a,b) 함수를 호출해서, 여기에 30과 40을 넣습니다.
함수는 30 - 40 연산을 계산 후, - 10을 반환합니다. 정렬 함수는 30을 40보다 작은 값으로 정렬하게 됩니다.
11. 가장 큰 숫자와 가장 작은 숫자 찾는 법
(1) 가장 큰 숫자 찾는 법
<p><span id="homzzang"></span></p>
<script>
var hz = [44, 33, 6, 100, 25, 8];
hz.sort(function(a, b){return b-a}); // 숫자를 내림차순으로 정렬
document.getElementById("homzzang").innerHTML = hz[0]; // 첫 번째 데이터를 출력
</script>
결과값: 100
(2) 가장 작은 숫자 찾는 법
<p><span id="homzzang"></span></p>
<script>
var hz = [44, 33, 6, 100, 25, 8];
hz.sort(function(a, b){return a-b});
document.getElementById("homzzang").innerHTML = hz[0];
</script>
결과값: 6
12. concat() 메서드
(1) concat() 메서드은 2개 이상의 배열을 결합해 새로운 배열을 만들 때 사용.
<button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
function myFunction() {
var hz1 = ["HTML", "CSS", "JS"]; // 배열1
var hz2 = ["SQL", "PHP", "리눅스"]; // 배열2
var all = hz1.concat(hz2); // 배열1에 배열2를 결합
document.getElementById("homzzang").innerHTML = all; // 결합된 배열을 출력
}
</script>
결과값: HTML,CSS,JS,SQL,PHP,리눅스
(2) concat() 메서드은 2개 뿐만 아니라, 그 이상의 배열도 하나로 결합 가능합니다. (즉, 2개 이상의 배열도 독립변수로 가능) <button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
function myFunction() {
var arr1 = ["HTML", "CSS", "JS"];
var arr2 = ["SQL", "PHP"];
var arr3 = ["jQuery", "BOOTSTRAP"];
document.getElementById("homzzang").innerHTML =
arr1.concat(arr2, arr3);
}
</script>
결과값: HTML,CSS,JS,SQL,PHP,jQuery,BOOTSTRAP
13. slice() 메서드 slice(배열의 몇 번째부터, 맨 앞에서부터 몇 개까지) 잘라냄. (예) slice(A,B) : 앞에서 A번째부터 시작해, 맨 앞에서부터 B개까지 자름. A: 배열의 순서이므로 0부터 시작, B는 갯수이므로 1부터 시작.
<button onclick="myFunction()">클릭</button>
<p id="homzzang"></p>
<script>
function myFunction() {
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"];
var sv = hz.slice(3,5); // 배열의 4번째인 SQL부터 시작해, 맨 처음부터 시작해 5개까지.
document.getElementById("homzzang").innerHTML = sv;
}
</script>
결과값: SQL,PHP
14. 배열에 관한 더 자세한 건 나중에 다룰 예정.
방문 감사합니다. (즐겨찾기 등록: Ctrl + D)
