자바스크립트 배열 (JavaScript Arrays)

자바스크립트 배열은 단일 변수에 여러 값을 저장하기 위해 사용합니다.

Example


배열(Array)이란 무엇인가?

배열은 한 번에 둘 이상의 값을 저장할 수있는 특별한 변수(special variable)입니다.

항목 목록(list of items) (예: 자동차 이름 목록(a list of car names))이 있는 경우, 단일 변수(single variables)에 자동차(cars)를 저장하면 다음과 같이 표시할 수 있습니다:


var car1 = "Saab";
var car2 = "Volvo";
var car3 = "BMW";

그러나 자동차를 돌아보고(loop through) 특정 차량(specific one)을 찾으려면 어떻게해야할까요? 만약 3대가 아니라 300 대를 가지고 있다면?

해결책은 배열(array)입니다!

배열은 하나의 이름(a single name)에 많은 값을 가질 수 있으며, 인덱스 번호(index number)를 참조하여 값을 액세스 할 수 있습니다.


배열(Array) 만들기

배열 리터럴(array literal)을 사용하는 것이 자바스크립트 배열을 만드는 가장 쉬운 방법입니다.

구문:


var array_name = [item1, item2, ...];   

Example


공백과 줄 바꿈은 중요하지 않습니다. 선언(declaration )은 여러 줄로 작성할 수 있습니다:

Example



자바스크립트 키워드 new 사용

다음 예제도 Array를 만들고 값을 할당합니다:

Example



배열 요소(Elements of an Array) 액세스

인덱스번호(index number)를 참조하여 배열요소(an array element)에 액세스합니다.

이 구문(statement)은 cars의 첫 번째 요소 값(value of the first element)에 액세스합니다:


var name = cars[0];

이 구문(statement)은 cars의 첫 번째 요소(first element in cars)를 수정합니다:


cars[0] = "Opel";

Example



전체 배열(Full Array) 액세스

자바스크립트를 사용하여 배열 이름(array name)을 참조하여 전체 배열에 액세스 할 수 있습니다:

Example



배열(Arrays)은 객체(Objects)입니다.

배열은 특별한 유형의 객체입니다(a special type of objects). 자바스크립트의 typeof 연산자(operator)는 배열(arrays)에 대해 “object”를 반환합니다.

그러나 자바스크립트 배열은 배열로 가장 잘 설명됩니다. (JavaScript arrays are best described as arrays.)

배열(arrays)은 그 “요소(elements)”에 액세스하기 위해 숫자(numbers)를 사용합니다. 이 예제에서 person[0]는 John을 반환합니다:

Array:


객체(Objects)는 이름(names)을 사용하여 그것의 “members”에 액세스합니다. 이 예제에서 person.firstName는 John을 반환합니다:

Object:



배열요소(Array Elements)는 객체(Objects)가 될 수 있습니다

자바스크립트 변수(variables)는 객체(objects)가 될 수 있습니다. 배열은 특별한 종류의 객체(special kinds of objects)입니다.

이 때문에 동일한 배열에서(in the same Array) 여러 유형의 변수(variables of different types)를 가질 수 있습니다.

배열(an Array)에 객체(objects)를 가질 수 있습니다. 배열에 함수(functions )를 포함할 수 있습니다. 배열에 배열(arrays)을 가질 수 있습니다:


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

배열 속성 및 메소드 (Array Properties and Methods)

자바스크립트의 진정한 강점은 기본제공 배열 속성 및 메소드(built-in array properties and methods)입니다:

Examples


var x = cars.length;   // The length property returns the number of elements
var y = cars.sort();   // The sort() method sorts arrays

배열 메소드(Array methods)는 다음 장에서 다룹니다.


The length Property

배열의 length 속성(property)은 배열의 길이(배열 요소의 숫자(the number of array elements))를 반환합니다.

Example



루핑 배열 요소 (Looping Array Elements)

배열(an array)을 루프(loop through)하는 가장 좋은 방법은 “for” 루프(loop)입니다:

Example



배열요소(Array Elements) 추가하기

배열에 새 요소(a new element)를 추가하는 가장 쉬운 방법은 push 메소드(method)를 사용하는 것입니다:

Example

push 메소드(method)는 배열에 새 요소(a new element)를 추가합니다.


push 메소드(method)는 배열에 새 요소(a new element)를 추가합니다.

length 속성(property)을 사용하여 배열에 새 요소를 추가할 수도 있습니다:

Example

push() 메소드를 사용하지 않고 length 속성을 사용하여 배열에 새 요소를 추가할 수 있습니다.


push() 메소드를 사용하지 않고 length 속성을 사용하여 배열에 새 요소를 추가할 수 있습니다.

Example



연관 배열 (Associative Arrays)

많은 프로그래밍 언어는 명명된 인덱스(named indexes)를 사용하여 배열을 지원합니다.

명명된 인덱스(named indexes)가 있는 배열을 연관배열(associative arrays) (또는 hashes)이라도 합니다.

자바스크립트는 명명된 인덱스(named indexes)가 있는 배열을 지원하지 않습니다.

자바스크립트에서는 배열(arrays)은 항상 숫자 인덱스(numbered indexes)를 사용합니다.

Example


Example:



배열(Arrays)과 객체(Objects)의 차이점

자바스크립트에서 배열(arrays)숫자 인덱스(numbered indexes)를 사용합니다.

자바스크립트에서 객체(objects)명명된 인덱스(named indexes)를 사용합니다.


배열(Arrays)을 사용할 때. 객체(Objects)를 사용할 때.

  • 자바스크립트는 연관 배열(associative arrays)을 지원하지 않습니다.
  • 요소이름(element names)을 문자열(strings) (text)로 만들려면 객체(objects)를 사용해야 합니다.
  • 요소이름(element names)을 숫자(numbers)로 만들려면 배열(arrays)을 사용해야 합니다.

new Array()를 피하십시오.

자바스크립트의 기본제공 배열 생성자(built-in array constructor) new Array()를 사용할 필요가 없습니다.

대신 []를 사용합니다.

이 두 개의 다른 명령문(statements)은 모두 points라고 명명된 새로운 빈 배열(a new empty array named points)을 만듭니다:


var points = new Array();         // Bad
var points = [];                  // Good 

이 두 개의 서로 다른 명령문(statements)은 모두 6개의 숫자를 포함하는 새로운 배열을 만듭니다:

new Array() 사용을 피하고, 대신 []를 사용하십시오.


new Array() 사용을 피하고, 대신 []를 사용하십시오.

new 키워드는 코드를 복잡하게 만들 뿐입니다. 또한 예기치 않은 결과가 발생할 수 있습니다:


var points = new Array(40, 100);  // Creates an array with two elements (40 and 100)

요소(elements) 중 하나를 제거하면 어떻게 될까요?

new Array() 사용을 피하세요.


new Array() 사용을 피하세요.


배열(an Array)을 인식하는 방법

일반적인 질문: 변수(a variable)가 배열(an array)인지 어떻게 알 수 있나요?

문제는 자바스크립트 연산자(operator) typeof가 “object”를 반환한다는 것입니다:

typeof 연산자는 배열에서 사용될 때 object를 반환합니다:


typeof 연산자(operator)는 배열에서 사용될 때 object를 반환합니다:

typeof 연산자(operator)는 자바스크립트 배열이 객체이기 때문에 object를 반환합니다.

해결책 1:

이 문제를 해결하기 위해 ECMAScript 5는 새 메소드(method) Array.isArray()를 정의합니다:


이 해결책의 문제점은 ECMAScript 5를 이전 브라우저에서 지원하지 않는다는 점입니다.

해결책 2:

이 문제를 해결하기 위해 자신만의 isArray() 함수를 만들 수 있습니다:


인수(argument)가 배열(an array)이면 위의 함수는 항상 true를 반환합니다.

또는 더 정확하게: 객체 프로토타입(object prototype)에 “Array”라는 단어가 포함되어 있으면 true를 반환합니다.

해결책 3:

객체(an object)를 is created by 주어진 생성자(a given constructor)로 생성한다면, instanceof 연산자(operator)는 true를 반환합니다. :


출처: JavaScript Arrays

Leave a comment