[javascript] 21. 배열(Arrays) - 자바스크립트 강좌

Web/JavaScript 2015. 6. 13. 14:41

JavaScript Arrays

자바스크립트 배열은 여러 개의 단일 변수 값을 저장하는데 사용됩니다.

1. Displaying Arrays

1
2
3
4
5
6
7
 
<p id="demo"></p>
 
<script>
var cars = ["Saab", "Volvo", "BMW"];
document.getElementById("demo").innerHTML = cars;
</script>
Colored by Color Scripter
cs

cars 라는 배열을 생성합니다.

id가 demo인 요소에 cars 배열을 입력합니다.

2. What is an Array?

배열은 한번에 한 개 이상의 값을 가질 수 있는 특정한 변수 입니다.

여러 아이템을 가지고 있고, 단일 변수에 차들을 저장한다고 봅시다:

1
2
3
var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";
cs

위처럼 선언 할 수 있으나, 차가 300대라면 300개의 단일 변수를 선언 해야합니다.

위의 문제를 풀 수 있는 게 배열입니다.

3. Creating an Array

문법:

var array-name = [item1, item2, ...];

예제:

var cars = ["Saab", "Volvo", "BMW"];

4. Using the JavaScript Keyword new

new 키워드와 Array 키워드를 써서 배열을 선언합니다:

1
var cars = new Array("Saab", "Volvo", "BMW");
cs

5. Access the Elements of an Array

배열의 요소를 index 숫자를 통하여 참조 가능 합니다.

1
var name = cars[0];
cs

아래 예제처럼 특정 요소를 수정 가능 합니다.

1
cars[0] = "Opel";
cs

6. You Can Have Different Objects in One Array

자바스크립트 변수는 객체입니다. 배열은 특별한 종류의 객체입니다.

이러한 성질 때문에, 같은 배열에 다른 타입의 변수를 가질 수 있습니다.

객체 배열을 가질 수도 있고, 함수 배열을 가질 수도 있습니다.

1
2
3
myArray[0] = Date.now;
myArray[1] = myFunction;
myArray[2] = myCars;
cs

7. Arrays are Objects

배열은 특별한 타입의 객체입니다. typeof 연산자는 배열을 객체로 반환합니다.

객체는 names를 사용하여 각 맴버에 접근 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html>
<html>
    <body>
 
    <p id="demo"></p>
 
<script>
var person = {firstName:"John", lastName:"Doe", age:46};
document.getElementById("demo").innerHTML = person["firstName"];
</script>
 
    </body>
</html>
 
 
Colored by Color Scripter
cs

8. Array Properties and Methods

자바스크립트 배열의 강력함은 구현된(built-in) 배열 속성과 메소드에 있습니다:

8-1. The length Property

배열의 length 속성은 배열의 길이를 반환합니다.

1
2
3
 
var fruits = ["Banana", "Orange", "Apple", "Mango"];
fruits.length;                       // the length of fruits is 4
cs

* length 속성은 항상 하나 이상의 배열 Index 값을 갖습니다.

8-2. Adding Array Elements

배열에 새로운 요소를 추가하는 가장 쉬운 방법은 length 속성을 이용하는 방법입니다:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
    <body>
 
    <p>The length property provides an easy way to append new elements to an array without using the push() method.</p>
 
    <button onclick="myFunction()">Try it</button>
 
    <p id="demo"></p>
 
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = fruits;
 
function myFunction() {
fruits[fruits.length] = "Kiwi";
document.getElementById("demo").innerHTML = fruits;
}
</script>
 
    </body>
</html>
 
Colored by Color Scripter
cs

8-3. Looping Array Elements

배열을 순회하기 위한 가장 좋은 방법은 표준 순회방법을 사용하는 것 입니다:

1
2
3
4
5
6
 
var index;
var fruits = ["Banana", "Orange", "Apple", "Mango"];
for    (index = 0; index < fruits.length; index++) {
    text += fruits[index];
}
Colored by Color Scripter
cs

9. Associative Arrays?

많은 프로그래밍 언어에서 배열의 이름 Index를 제공합니다.

이름 Index된 배열은 Associative 배열이라고 부릅니다. (또는 hashes)

자바스크립트는 이름 index 된 배열을 제공하지 않습니다.

자바스크립트에서는, 배열을 숫자 index된 배열을 사용합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!DOCTYPE html>
<html>
    <body>
 
    <p id="demo"></p>
 
<script>
var person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
 
    </body>
</html>
 
 
Colored by Color Scripter
cs
 

만약 이름 index된 배열을 사용하고자 하면, 자바스크립트는 재정의하여 배열을 표준 객체로 생성합니다.

모든 배열 메소드와 속성은 undefined 되거나 올바르지 않은 결과를 반환합니다.

 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<!DOCTYPE html>
<html>
    <body>
 
    <p>
    If you use a named index, when accessing an array, 
    JavaScript will redefined the array to a standard object, 
    and all array methods and properties will produce undefined or incorrect results.
    </p>
 
    <p id="demo"></p>
 
<script>
var person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46; 
document.getElementById("demo").innerHTML =
person[0] + " " + person.length;
</script>
 
    </body>
</html>
 
 
Colored by Color Scripter
cs

10. The Difference Between Arrays and Objects?

자바스크립트에서 배열은 숫자 index를 사용합니다.

객체는 이름 index를 사용합니다.

11. When to Use Arrays? When to use Objects?

자바스크립트는 associative 배열을 제공하지 않습니다.

12. Avoid new Array()

new Array() 생성자를 사용하여 배열을 생성할 필요 없습니다.

[] 를 사용하여 생성 하십시오.

1
2
3
4
5
6
 
var points = new Array();         // Bad
var points = [];                  // Good 
 
var points = new Array(40, 100, 1, 5, 25, 10)  // Bad
var points = [40, 100, 1, 5, 25, 10];          // Good
cs

13. How to Recognize an Array?

변수가 배열인지 어떻게 아는지가 자바스크립트의 공통 질문 사항입니다.

문제는 자바스크립트 typeof 연산자가 배열을 "객체"로 반환한다는 점입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html>
    <body>
 
    <p>The typeof operator, when used on an array, returns object.</p>
 
    <p id="demo"></p>
 
<script>
var fruits = ["Banana", "Orange", "Apple", "Mango"];
document.getElementById("demo").innerHTML = typeof fruits;
</script>
 
    </body>
</html>
 
Colored by Color Scripter
cs

위 문제를 풀기 위해서는 isArray() 함수를 생성하여 풀 수 있습니다:

1
2
3
4
 
function isArray(myArray) {
    return myArray.constructor.toString().indexOf("Array") > -1;
}
Colored by Color Scripter
cs

이 함수는 인자 값이 배열이면 항상 참 값을 반환합니다.

저작자표시

'Web > JavaScript' 카테고리의 다른 글

[javascript] 24. 비교(Comparisons) - 자바스크립트 강좌 JS / CSE (0)	2015.06.13
[javascript] 23. 논리연산(Booleans) - 자바스크립트 강좌 JS / CSE (0)	2015.06.13
[javascript] 22. 배열 메소드(Array Method) - 자바스크립트 강좌 JS / CSE (0)	2015.06.13
[javascript] 20. 날짜 메소드(Date Methods) - 자바스크립트 강좌 JS / CSE (0)	2015.06.13
[javascript] 19. 날짜(Dates) - 자바스크립트 강좌 (0)	2015.06.13
[javascript] 18. Math - 자바스크립트 강좌 JS / CSE (0)	2015.06.13

ABOUT ME

Palpit's Techlog Palpit's Techlog

'Web > JavaScript' 카테고리의 다른 글

티스토리툴바

ABOUT ME

'Web > JavaScript' 카테고리의 다른 글

관련글 관련글 더보기

티스토리툴바