• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

목차

  1. JS 학습 전 알아둘 사항
  2. JS 배열 예제
  3. JS 배열 개념/장점
  4. JS 배열 구문
  5. JS 배열 접근 (= 배열값 제어)
  6. JS 배열 특징1 - 하나의 배열에 다른 유형의 배열값 가능
  7. JS 배열 특징2 - 객체 일종 
  8. JS 배열/객체 비교
  9. JS 배열 속성/메서드
  10. JS 배열 개수 (= 배열 길이= length 속성)
  11. JS 배열에 데이터 추가
  12. JS 배열 반복
  13. JS 색인 주의사항 - 숫자 색인만 가능
  14. JS 배열/객체 차이점
  15. JS 배열 만들기 구문
  16. 변수가 배열인지 아닌지 확인 방법

 

JS 학습 전 알아둘 사항

 

1.

JS 배열은 여러 개의 데이터 값을 하나의 변수에 할당할 때 사용.

2.
JS 배열 적을 때, 마지막 데이터 값 다음에 ,(콤마) 안 적음.
적을 경우, 브라우저마다 다르게 나타남.

3.
JS는 순서 셀 때, 0부터 시작. (즉, 첫 번째는 0, 두 번째는 1, 세 번째는 2..)
 
4.
배열 변수 선언 2가지 방법
var Arr = [];
var Arr = new Array();

 

 

JS 배열 예제

 


대괄호 안에 데이터 값을 적고, 콤마로 구분.
문자면 따옴표로 묶고, 숫자면 묶지 않음. 끝엔 따옴표 안 붙임.

<p id="homzzang"></p>

<script>
var h = ["HTML", "CSS", "JS"]; 
document.getElementById("homzzang").innerHTML = h[0]; 
</script>


결과값: HTML




배열을 적을 때, 공백과 줄바꿈은 상관없음. 즉, 아래 예제처럼 적어도 됨.

<p id="homzzang"></p>

<script>
var h = [
    "HTML",
    "CSS",
    "JS"
];
document.getElementById("homzzang").innerHTML = h[0];
</script>

결과값: HTML
 

JS 배열 개념/장점

 

1. 
배열은 여러 데이터 값을 하나의 변수에 할당 가능.


2. 
1개 변수에 1개 데이터 값만 할당 시, (검색 ・가독성・처리 속도) 모두 성능저하 발생.
var h1 = "HTML";
var h2 = "CSS";
var h3 = "JS";


3. 
배열 이용하면 (검색 용이. 가독성 향상)
var h = ["HTML", "CSS", "JS"];

 

 

JS 배열 구문

[방법1]  대괄로 안에 데이터값을 따옴표로 나열, 공백과 줄바꿈은 상관 없음. (추천)


var 배열변수명 = [데이터값1, 데이터값2, 데이터값3, .....];  
// 데이터값이 문자열이면 따옴표로 묶고, 숫자면 묶지 않음.

[예제]
var h = ["HTML", "CSS", "JS"];  // 문자열
var n = [123, 456, 789]; // 숫자


[방법2] - 키워드 new를 사용해 표현  (비추천)

var 배열명 = new Array(데이터값, 데이터값, 데이터값3, .....);  
// 데이터 값이 문자열이면 따옴표로 묶고, 숫자면 묶지 않음.

[예제]
var h = new Array("HTML", "CSS", "JS");


[참고]

방법1과 방법2는 결과 동일하나, 
가독성 및 처리 속도 향상을 위해 첫 번째 방법인 대괄호 이용 방식이 더 좋음.

 

 

JS 배열 접근 (= 배열값 제어)

① 배열 데이터 값에 할당된 번호를 이용해 해당 데이터에 접근 가능.  

데이터 순서는 0부터 시작함. 

var client = h[0];  // 배열의 첫 번째 데이터 값을 변수 client에 할당


② 기존 배열의 데이터 값 대신 다른 데이터를 할당 가능

h[0] = "TAG";  // 배열 첫 번째 데이터 값에 기존 데이터 대신, TAG 문자열을 할당

 

 

JS 배열 특징1 - 하나의 배열에 다른 유형의 배열값 가능

 

1.
JS 변수는 객체 역할 가능. 

2.
배열은 특수 객체라서, 하나의 배열 안에 여러 가지 다른 유형의 배열값 할당 가능.
즉, 하나의 배열 안에 데이터 값으로 (객체, 함수, 배열) 등 할당 가능.

h[0] = Date.now; // 날짜객체
h[1] = Function; // 함수
h[2] = Array; // 배열

 

 

JS 배열 특징2 - 객체 일종

※ typeof 키워드 이용해 배열 성격 분석 시 객체(objec)로  나옴.

<p id="homzzang"></p>

<script>
var h = ["HTML", "CSS", "JS"]; 
document.getElementById("homzzang").innerHTML = typeof h;
</script>


결과값: object  즉, 객체

 

JS 배열/객체 비교

[배열]

 

데이터 값에 접근하기 위해 숫자 색인을 이용.

즉, 첫 번째는 0, 두 번째는 1, 세 번째는 3, ...

<p id="homzzang"></p>

<script>
var h = ["HTML", "CSS", "JS"];
document.getElementById("homzzang").innerHTML = h[0]; 
</script>


결과값: HTML


[객체]

 

데이터 접근 위해 숫자 대신 데이터에 할당된 이름 이용.
이름은 문자열이므로 따옴표로 묶어 표기함.

<p id="homzzang"></p>

<script>
var h = {step0:"HTML", step1:"CSS", step2:"JS"}; // 객체는 중괄호 사용, 데이터마다 이름 붙임.
document.getElementById("homzzang").innerHTML = h["step0"];
</script>


결과값: HTML

 

 

JS 배열 속성/메서드

1. JS 배열의 진정한 힘은 내장된 배열의 속성(property)과 메서드(method)임.

 

var x = client.length; // 배열 client의 데이터 개수
var y = client.sort();  // 배열 client의 데이터를 알파벳 순서로 정렬

 


2. 예제
 
<p id="homzzang"></p>
<p id="homzzang1"></p>
<p id="homzzang2"></p>

<script>
var h = ["HTML", "CSS", "JS"]// 배열을 변수 h에 할당
var x = h.length;  // 배열 ht에 할당된 데이터의 갯수를 가져와 변수 x에 할당
var y = h.sort();   // 배열 ht에 할당된 데이터를 알파벳 순서로 정렬해 변수 y에 할당

document.getElementById("homzzang").innerHTML = h[0]; // 배열의 첫 번째 값 접근 위해 대괄호 안에 숫자 0 사용
document.getElementById("homzzang1").innerHTML = x// 변수 x에 할당된 데이터 출력
document.getElementById("homzzang2").innerHTML = y// 변수 y에 할당된 데이터 출력
</script>

 

결과값:

CSS

3

CSS,HTML,JS

※ 메서드는 다음 장에서 자세히 다룸.
 

JS 배열 개수 (= 배열 길이= length 속성)

 

<p id="homzzang"></p>

<script>
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"]; // 변수 hz 선언 후, 5개의 데이터를 지닌 배열을 변수 hz에 할당
document.getElementById("homzzang").innerHTML = hz.length// 변수 hz에 할당된 배열의 데이터 갯수를 출력
</script>


결과값: 5


[참고] 

 

배열의 데이터 갯수는 배열의 색인 번호보다 1 큼. 

즉, 
배열의 순서는 0부터 시작하므로 배열의 마지막 데이터 색인 번호는 총 데이터 갯수에서 1을 뺀 숫자가 되는 것임.

위의 예 경우 5개의 데이터가 있지만, 마지막 데이터의 PHP의 색인 번호는 5에서 1을 뺀 hz[4]가 되는 것임.

 

<p id="homzzang"></p>


<script>
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = hz[4];
</script>


결과값: PHP


JS 배열에 데이터 추가

① length 속성을 이용하면 배열에 쉽게 데이터를 추가 가능

 

<button onclick="myFunction()">클릭</button>

<p id="homzzang"></p>

<script>
var hz = ["HTML", "CSS", "JS"];
document.getElementById("homzzang").innerHTML = hz;

function myFunction() { 
   hz[hz.length] = "PHP"; 
    document.getElementById("homzzang").innerHTML = hz; // 아이디 homzzang에 hz에 할당된 데이터를 출력
}
</script>


결과값: HTML,CSS,JS,PHP


② length 속성 대신, 아래처럼 숫자로 적어도 상관 없음.

 

<button onclick="myFunction()">클릭</button>

<p id="homzzang"></p>

<script>
var hz = ["HTML", "CSS", "JS"]; // 변수 hz 선언 후, 3개의 데이터가 든 배열을 할당 
document.getElementById("homzzang").innerHTML = hz; // 아이디 homzzang에 변수 hz에 할당된 데이터 출력

function myFunction() { // myFunction 함수를 실행. 함수 실행 내용은 아래와 같음.
    hz[3] = "PHP"; // 4번째 데이터로 PHP 정의 
    document.getElementById("homzzang").innerHTML = hz; // 아이디 homzzang에 hz에 할당된 데이터를 출력
}
</script>


결과값: HTML,CSS,JS,PHP


③ 너무 큰 색인 번호로 정의해 데이터를 추가할 경우,
기존 색인 번호와 새로 추가된 색인 번호 사이의 데이터 출력코자 할 경우 undefined (정의 안 됨) 에러 발생하니 주의.

 

<button onclick="myFunction()">클릭</button>

<p id="homzzang"></p>

<script>
var hz = ["HTML", "CSS", "JS"]; // 변수 hz 선언 후, 3개의 데이터가 든 배열을 할당 
document.getElementById("homzzang").innerHTML = hz; // 아이디 homzzang에 변수 hz에 할당된 데이터 출력

function myFunction() { // myFunction 함수를 실행. 함수 실행 내용은 아래와 같음.
    hz[9] = "PHP"; // 10번째 데이터로 PHP 정의 
    document.getElementById("homzzang").innerHTML = hz[8]; // 9번째 데이터를 출력
}
</script>


결과값: undefined


④ 2개 이상의 데이터 추가 방법

 

<button onclick="myFunction()">클릭</button>

<p id="homzzang"></p>

<script>
var hz = ["HTML", "CSS", "JS"];
document.getElementById("homzzang").innerHTML = hz;

function myFunction() { 
    hz[3] = "PHP"; 
    hz[4] = "SQL"; 
    document.getElementById("homzzang").innerHTML = hz; 
}
</script>


결과값: HTML,CSS,JS,PHP,SQL 


PS. 단, 아래처럼 할 경우 출력은 되지만 사이사이 ,가 붙음

 

<button onclick="myFunction()">클릭</button>

<p id="homzzang"></p>

<script>
var hz = ["HTML", "CSS", "JS"]; 
document.getElementById("homzzang").innerHTML = hz; 

function myFunction() {
    hz[hz.length] = "PHP"; 
    hz[hz.length + 1] = "SQL";
    document.getElementById("homzzang").innerHTML = hz; 
}
</script>


결과값: HTML,CSS,JS,PHP,,SQL

 

JS 배열 반복

 

<p id="homzzang"></p>

<script>
    var index; // 변수 index 선언
    var text = "<ul>";
    var hz = ["HTML", "CSS", "JS", "PHP", "SQL"]; 
    for (index = 0; index < hz.length; index++) { 
        text += "<li>" + hz[index] + "</li>";    }
    text += "</ul>";
    document.getElementById("homzzang").innerHTML = text; 
</script>
  
 <style>
ul {margin:0; padding:0;list-style:none;}
li {float:left;padding:10px 20px; border-top:1px solid silver; border-bottom:1px solid silver; border-right:1px solid silver;}
li:first-child {border-left:1px solid silver;}
li:hover {background:red; color:white; cursor:pointer;}
</style>


결과값: 결과 보기


JS 색인 주의사항 - 숫자 색인만 가능

① 이름 색인 사용 시 오류 발생

cf. 타 언어는 이름 색인도 지원.

 

<p id="homzzang"></p>

<script>
var hz = [];
hz[0] = "HTML"; // 숫자 색인 사용. 배열의 첫 번째 데이터는 문자열 HTML
hz[1] = "CSS"; // 숫자 색인 사용. 배열의 두 번째 데이터는 문자열 CSS
hz[2] = "JS";  // 숫자 색인 사용. 배열의 세 번째 데이터는 문자열 JS
document.getElementById("homzzang").innerHTML = 
hz[0] + " " + hz.length; // 배열의 첫 번째 데이터와 데이터 갯수 출력
</script>

결과값: HTML 3

② JS에서 이름 색인을 사용할 경우, JS는 배열을 표준 객체로 재정의 함.   그 결과, 배열의 속성(properties)과 메서드(methods)은 정의 안 됨(undefined) 오류나 부정확한 결과가 나게 됨.
 

<p id="homzzang"></p>


<script>
var hz= [];
hz["step0"] = "HTML"; 
hz["step1"] = "CSS"; 
hz["step2"] = "JS"; 
document.getElementById("homzzang").innerHTML = hz[0] + " " + hz.length;
</script>

결과값: undefined 0
PS. 이름 색인을 지닌 배열을 '연관 배열 (Associative Arrays)'라고 함.
 

JS 배열/객체 차이점

1. 데이터 접근 방법 차이

 

  • 배열(arrays) : 데이터에 접근 위해, 숫자 색인 사용
  • 객체(objects) : 데이터에 접근 위해, 이름 색인 사용

 

PS. 배열은 숫자 색인을 가진 객체의 특별한 유형.


2. 배열/객체 사용 목적 비교

 

  • 배열(arrays) : 데이터 접근 위해, 각 데이터에 숫자 색인을 부여코자 할 때 사용
  • 객체(objects) : 데이터에 접근 위해, 각 데이터에 이름 색인을 부여코자 할 때 사용 

  


JS 배열 만들기 구문 비교

① 배열은 반드시 대괄호인 []를 이용해 생성.

 

<p id="homzzang"></p>

<script>
//var hz = new Array(11, 22, 33, 44, 55); // 바람직 X
  var hz = [11, 22, 33, 44, 55]; // 바람직 O
document.getElementById("homzzang").innerHTML = hz[0]; 
</script>


결과값: 11


② JS에 내장된 배열 생성자인 new Array() 사용하면 끔찍한 부작용이나 부정확한 결과가 생길 수 있음. [즉, 배열에 사용된 데이터가 2개 이상일 땐 정상 출력되지만, 오직 1일 땐 undefined (정의 안 됨) 오류가 뜸.]

 

 

[정상 출력 경우]

 
<p id="homzzang"></p>
 
<script>
var hz = new Array(11, 22); // 데이터가 2 개 이상일 때만 정상 출력
document.getElementById("homzzang").innerHTML = hz[0];
</script>

 

결과값: 11

 

[비정상 출력 경우]

 
<p id="homzzang"></p>
 
<script>
var hz = new Array(11); // 배열에 사용된 데이터가 1개일 땐, undefined 오류 뜸.
document.getElementById("homzzang").innerHTML = hz[0];    
</script>

 

결과값: undefined

 

변수가 배열인지 아닌지 확인 방법

① 변수의 유형을 알아보는 typeof 연산자를 이용하면 배열은 객체로 뜸. (왜냐면, 배열은 객체의 일종이기 때문.)  즉, 연산자 typeof로는 변수가 배열인지 아닌지 확인할 수 없음.

 

<p id="homzzang"></p>

<script>
var hz = ["HTML", "CSS", "JS", "SQL", "PHP"];
document.getElementById("homzzang").innerHTML = typeof hz;
</script>

 


② 아래 함수 이용해 변수가 배열인지 아닌지 확인 가능.
※ 함수명 isArray는 임의로 정의한 것임.

 

<p id="homzzang"></p>

<script>
var hz = ["HTML", "CSS", "JS", "SQL" , "PHP"];
document.getElementById("homzzang").innerHTML = isArray(hz); // 함수 isArray에 독립변수 hz 넣어 돌려라.

function isArray(x) { // isArray 함수 정의. 여기서 x는 함수에 들어올 독립변수를 받는 임의의 매개변수임.
    return x.constructor.toString().indexOf("Array") > -1// 아래 설명 참고 
}
</script>


결과값: true

PS.

위 함수는 독립변수가 배열인 경우, 항상 참(true)임.
엄밀히 말하면, 독립변수의 객체 원형이 객체 배열인 경우 항상 참임.

 


PS. 「x.constructor.toString().indexOf("Array") > -1」 식의 의미

 

x

매개변수. 즉, isArray(x)에서 받아온 변수값

.

객체(objects)에서 마침표는 메서드(methods)를 호출하는 용도로 사용 

constructor

생성자. 즉, x라는 변수(객체)가 생성될 때 처음 호출되는 함수. 
배열 객체 경우엔 function Array() { [native code] } 함수를 처음 실행함.

toString()

문자열로 변환, 즉, 생성자 함수인 function Array() { [native code] }를 순수한 문자열로 반환.

indexOf("Array")

Array라는 문자열이 몇 번째에 처음 등장하냐? 순서는 0부터 시작하며, 없으면 -1이 뜸.

Array 문자열은 10번째 등장하므로 indexOf("Array")는 9가 됨. 

 > -1

숫자의 크기를 비교함으로써 참거짓(Boolean)형태로 변환되어 '참(true)' 또는 거짓 (false)값을 반환


요약하면,
위 예제에서는 isArray(hz)에 의해 매개변수 x 자리에 독립변수 hz가 들어가는데, hz의 데이터는 ["HTML", "CSS", "JS", "SQL" , "PHP"] 임.
["HTML", "CSS", "JS", "SQL" , "PHP"]는 배열이고, 배열의 생성자는 function Array() { [native code] } 함수임.
function Array() { [native code] } 함수를 toString() 메서드을 이용해 문자열로 변환한 후,  indexOf("Array") 메서드으로 Array라는 문자가 몇 번째에 등장하는지 조사하면, 공백까지 표함해 10번째 등장하므로 9가 나옴. (∵ JS는 순서를 0부터 세기 때문.)

결국, 위 식에선

x.constructor.toString().indexOf("Array")는 9가 되고, 9는 -1보다 크므로 참인 true가 반환됨.

 

도움: PWneo (150128) https://sir.kr/qa/57619


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

분류 제목
게시물이 없습니다.
목록
찾아주셔서 감사합니다. Since 2012