• Q&A
  • 회원가입
  • 로그인

[Array] JS - Array - 배열 ★★★★★

2,776  

목차

 

Array (배열)
Array Method (배열메서드)
Array Sort (배열정렬)
Array Iteration Method (배열반복메서드)

 

 

 

Array (배열)


1.

Array 예제

 

<p id="hz"></p>


<script>

var code = ["HTML", "CSS", "JS"];

document.getElementById("hz").innerHTML = code;

</script>

 

결과보기


2.

Array 정의

 

한 번에 둘 이상의 값을 보유 할 수있는 특수 변수.

 


 

1.

하나의 변수에 여러 값을 담을 때 유용.

 

2.

만약, 배열 사용 안 하면, 아래처럼 각 변수에 각각 담아야 하는 불편 있음.

 

var code1 = "HTML";

var code2 = "CSS";

var code3 = "JS";


3.

배열값 접근법

색인배열 : 색인 (Index) 이용해 각 배열값에 접근 가능.
연관배열 : 배열키 (Key) 이용해 각 배열값에 접근 가능.

 

 

3-1.

Array 생성법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 이하 에러남).

 

3-2. 

Array 생성법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(배열값...) 방식보다 더 간결하고 속도도 빠름. 첫 번째 방법 사용 권장.

 

4.

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> 

 

결과보기

 

5.

Array 배열값 변경 + 전체배열접근

 

1.

배열값 변경 : array_name[index] = "new value";

 

2.

전체배열접근 : array_name

 


 

 <p id="hz"></p>


<script>

var code = ["HTML", "CSS", "JS"];

code[0] = "PHP"; // 배열값 변경

document.getElementById("hz").innerHTML = code; // 전체배열 접근

</script> 

 

결과보기


6-1.

Array 배열은 객체 일종

 

1.

Array (배열)은 Object(객체)의 일종.
typeof 연산자로 array_name 판별하면, 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>

 

결과보기 

 

6-2.

Array 배열값도 객체 일종

 

JS 배열값 역시 객체 성격이라, 다른 유형의 변수 가질 수 있음.

즉, 

한 배열에 객체, 함수, 배열, 문자열, 숫자, 날짜 등 다양한 데이터형식을 담을 수 있음.

 


 

var hzArray = {}; // hzArray 배열변수선언

hzArray[0] = Date.now; 

hzArray[1] = hzFunction;

hzArray[2] = hzCars; 

 


7.

Array 속성・메서드

 

JS 배열은 다양한 내장 속성・메서드 존재. (배열의 강점)

 


 

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

var x = hz.length;   // 내장속성 (배열값 개수)

var y = hz.sort();   // 내장 메서드 (배열 정렬)

 

 

8.

Array 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> 

 

결과보기

 

9-1. 

Array 첫번째 배열 접근

 

Array_name[0]

 


 

<p id="demo"></p>


<script>

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

var first = hz[0];

document.getElementById("demo").innerHTML = first;

</script> 

 

결과보기

 

9-2. 

Array 마지막 배열값 접근

 

Array_name[Array_name.length - 1]



 

<p id="demo"></p>


<script>

var hz = ["홈짱닷컴", "Homzzang.com", 2012];

var last = hz[hz.length - 1];

document.getElementById("demo").innerHTML = last;

</script> 

 

결과보기


10.

Array 배열값 반복

 

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>

 

결과보기


11.

Array 배열값 추가

 

방법1: array.push(value1,value2,....)

방법2: array[array.length] = "value1"; array[array.length] = "value2"; ....

 


[예제]

 

<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>

 

결과보기


 

<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>

 

결과보기


12.

Array 연관배열 (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>

 

결과보기


13.

Array (배열)・Object (객체) 차이점

 

JS 배열 : NUMBER INDEX (숫자 색인) 사용. (연관배열 지원 X)

JS 객체 : NAME INDEX (이름 색인) 사용.


JS 배열 : 번호가 매겨진 인덱스를 가진 특별한 종류의 객체.

 


14.

Array 배열 사용 경우

 

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>


결과보기

 

15.

Array 배열판정 (= 배열여부확인)

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 (배열 메서드) 


1.

배열을 문자열로 전환

 

toString()

배열을 쉼표로 구분된 배열값의 문자열로 변환.

 

join()

toString() 메서드와 유사하나, 쉼표 구분 대신 별도 구분자 설정 가능. 

 


2. 

Array 배열값추가 / 배열값제거

[배열 뒤쪽] - 속도 빠름.

 

pop()

배열 마지막 배열값 제거. (제거된 배열값 반환)

 

push()

배열 마지막에 새로운 배열값 추가. (새로운 배열개수 반환)

 


[배열 앞쪽] - 속도 느림.

 

shift()

첫 번째 배열값 제거 후, 다른 모든 배열값을 더 낮은 인덱스로 이동. (제거된 배열값 반환)

 

unshift()

배열 처음에 새 배열값 추가 후, 다른 모든 배열값을 더 높은 인덱스로 이동. (새로운 배열개수 반환)

 


3.

Array 배열값변경 / 배열값추가

 

array_name[index] = "value"; 
(예) hz[0] = "홈짱닷컴"; 

 


 

array_name[array_name.length] = "value";  
(예) hz[hz.length] = "홈짱닷컴";

 

 

4. 

Array 배열값삭제

 

delete array_name[index];
(예) delete hz[0]; 

 

[주의]

delete 사용하면 배열에 undefined 구멍 생길 수 있으니, pop() 또는 shift() 사용.

(∵ 해당 배열값만 삭제하고 나머지 배열값의 색인 조정은 안 하므로)

 

 

5.  

Array 배열값추가/삭제 후 배열잇기

 

splice()

배열의 특정 색인에 배열값 추가/삭제. (undefined 구멍 안 만들고 제거 가능)

 

 

6.  

Array 배열병합 (배열연결)

 

concat()

기존 배열을 병합 (연결)하여 새 배열 생성. 

기존 배열 변경 안 함. 항상 새 배열을 반환.

여러 개의 배열 독립변수 사용 가능.

배열값을 독립변수로 사용 가능.

 

  

7. 

Array 배열자르기

 

slice()

배열의 일부를 새로운 배열로 잘라냄.

새로운 배열 생성. (기존 배열에서 요소 제거 안 함.)
2개의 독립변수 사용 가능. (단, 2번째 독립변수의 배열값은 포함 안 함.)

1개의 독립변수만 사용하면, 해당 위치부터 마지막까지 잘라내 배열 생성.

 

 

8. 

자동 toString()배열을 문자열로 자동전환

 

기본 값이 예상되면 JS는 배열을 쉼표로 구분된 문자열로 자동 변환.
그 결과, 아래 두 경우는 동일한 결과 나옴.


array_name.toString()

array_name

 

[참고] 모든 JS 객체는 toString() 메서드 갖음.

 

9.  

최대배열값 / 최소배열값

 

JS 배열엔 최대배열값・최소배열값 찾는 내장 함수 없음.

이 문제 해결 방법을 이 페이지 아래에서 소개 예정.

 

 

 

 

Array Sort (배열정렬)

 

1-1. 

Array 문자열배열정렬 (= 오름차순)

 

sort()

문자열 배열을 알파벳순으로 정렬. (숫자 경우, 제대로 작동 X)

 

 

1-2. 

Array 문자열배열 내림차순 (+ 문자열배열 역순정렬)


reverse() 

배열순서 뒤집기 (= 배열역순정렬)

 

sort()

reverse()

내림자순배열정렬. (위 두 메서드를 함께 사용. 즉, 오름차순 정렬시킨 후, 순서 뒤집음.)

 


2-1.

Array 숫자배열정렬 (= 배열값비교함수)  

[오름차순]

 

array_name.sort(function(a, b){return a - b}); 

음수: ab순

0 : 그대로

양수: ba순

 


[내림차순]

 

array_name.sort(function(a, b){return b - a});

양수 : ab순

0 : 그대로

음수 : ba순

 


2-2. 

Array 숫자배열비교함수

 

오름차순

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>


결과보기

 

3. 

Array 배열랜덤정렬 (= 랜덤배열정렬)

 

array_name.sort(function(a, b){return 0.5 - Math.random()}); 

 

 

4. 

Array 배열최고값/배열최소값 구하기

방법1.

(오름차순, 내림차순)으로 먼저 배열정렬시킨 후, 숫자 색인 이용해 찾기.

※ (최대배열값・최소배열값)만 찾을 경우에 매우 비효율적.

 

오름차순

array_name.sort(function(a, b){return a - b}); 

 

내림차순

array_name.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;

}

 

 

5. 

Array 객체배열정렬 

 

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 (배열반복 메서드)

 

★ 배열 반복 메소드는 모든 배열값에 대해 작동.

 

1. Array.forEach()

 

각 배열 요소에 대해 함수 (콜백함수)를 한 번 호출.

IE9 이상 주요 최신브라우저 지원.

 


2. Array.map()

 

각 배열 요소에 대해 기능을 수행하여 새 배열을 작성

값이 없는 배열 요소 경우, 함수를 실행 안 함.
원래 배열을 변경하지 않음.

IE9 이상 주요 최신브라우저 지원.

 


3. Array.filter()

 

테스트 통과하는 배열 요소 사용해 새 배열 생성.

IE9 이상 주요 최신브라우저 지원.

 


4-1. Array.reduce()

 

단일값을 생성 (또는, 단일값으로 감소) 위해 각 배열 요소에서 함수실행.

배열 왼쪽에서 오른쪽으로 동작.

원래 배열을 줄이지는 않음.

초기값을 가질 수 있음.

IE9 이상 주요 최신브라우저 지원.



4-2. Array.reduceRight()

 

단일값을 생성 (또는, 단일값으로 감소) 위해 각 배열 요소에서 함수실행.

배열 오른쪽에서 왼쪽으로 동작.

원래 배열을 줄이지는 않음.

초기값을 가질 수 있음.

IE9 이상 주요 최신브라우저 지원.

 


5-1. Array.every()

 

모든 배열 값이 테스트를 통과했는지 확인.

IE9 이상 주요 최신브라우저 지원.

 


5-2. Array.some()

 

일부 배열 값이 테스트를 통과했는지 확인.

IE9 이상 주요 최신브라우저 지원.

 


6-1. Array.indexOf()

 

배열에서 요소 값을 검색하고 해당 위치를 반환.

첫 번째 항목 위치는 0이고 두 번째 항목 위치는 1

항목을 찾을 수 없으면 -1을 반환.

항목이 두 번 이상 존재하면 첫 번째 위치 반환.

IE9 이상 주요 최신브라우저 지원.

 


6-2. Array.lastIndexOf()

 

Array.indexOf()와 유사하나, 지정 요소가 마지막으로 나타나는 위치 반환.

IE9 이상 주요 최신브라우저 지원.

 


7-1. Array.find()

 

테스트 함수 통과한 첫 번째 배열 요소의 값 반환.
IE12 이상 주요 최신브라우저 지원.

 


7-2. Array.findIndex()

 

테스트 함수 통과한 첫 번째 배열 요소의 색인 반환.
IE12 이상 주요 최신브라우저 지원.

 

 

 

PS.

 

엘리 님 (8. Array - 개념) 강의

https://youtu.be/yOdAVDuHUKQ 

 

엘리 님 (8. Array - 유용한 함수 10가지) 강의

https://youtu.be/3CUjtKJ7PJg


모질라 (Array) 강의

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

 



찾아주셔서 감사합니다. Since 2012