From 2a18a140122fc87b4f13577b9910e1627f2bbb88 Mon Sep 17 00:00:00 2001 From: alattalatta Date: Tue, 23 Nov 2021 20:51:34 +0900 Subject: Rename html to md --- .../guide/working_with_objects/index.html | 500 --------------------- .../javascript/guide/working_with_objects/index.md | 500 +++++++++++++++++++++ .../reference/global_objects/array/index.html | 483 -------------------- .../reference/global_objects/array/index.md | 483 ++++++++++++++++++++ 4 files changed, 983 insertions(+), 983 deletions(-) delete mode 100644 files/ko/web/javascript/guide/working_with_objects/index.html create mode 100644 files/ko/web/javascript/guide/working_with_objects/index.md delete mode 100644 files/ko/web/javascript/reference/global_objects/array/index.html create mode 100644 files/ko/web/javascript/reference/global_objects/array/index.md (limited to 'files/ko') diff --git a/files/ko/web/javascript/guide/working_with_objects/index.html b/files/ko/web/javascript/guide/working_with_objects/index.html deleted file mode 100644 index 7dce2677f8..0000000000 --- a/files/ko/web/javascript/guide/working_with_objects/index.html +++ /dev/null @@ -1,500 +0,0 @@ ---- -title: Working with objects -slug: Web/JavaScript/Guide/Working_with_Objects -translation_of: Web/JavaScript/Guide/Working_with_Objects ---- -

자바스크립트는 간단한 객체기반 패러다임 상에서 만들어졌다. 객체는 프로퍼티의 모음이며, 프로퍼티는 "이름"(name 또는 key)과 "값"(value)의 연결로 이루어진다 . 프로퍼티의 값으로 함수가 될 수 있는데, 이런 프로퍼티는 메소드라고 불린다. 브라우저 안에 미리 정의 된 객체뿐 아니라 사용자들이 직접 자신만의 객체를 정의할 수도 있다.

- -

이 절에서는 객체, 프로퍼티, 함수, 메소드가 어떻게 사용되는지, 그리고 사용자를 위한 새로운 객체를 생성하는 방법을 설명한다

- -

개요

- -

자바스크립트에서의 객체는 다른 프로그래밍 언어에서와 비슷하게 현실 세계에서의 사물(objects)과 비교해 볼 수 있다. 자바스크립트에서의 객체의 개념은 실세계상에서의 인식 가능한 사물로 이해할 수 있다.

- -

객체는 단독으로 존재 가능한 개체(entity)이며, 프로퍼티(property)과 타입(type)을 가진다. 예를 들어 컵과 비교를 해 본다면 컵은 사물 객체인데 색깔, 모양, 무게, 재료 등의 속성(프로퍼티)을 가지고 있다. 비슷하게 자바스크립트의 객체는 그 특징을 결정짓는 여러 프로퍼티를 가진다.

- -

객체와 프로퍼티

- -

자바스크립트의 객체에는 그와 연관된 프로퍼티가 있다. 프로퍼티는 객체에 붙은 변수(variable)라고 설명할 수 있겠다. 객체의 프로퍼티는 일반 자바스크립의 변수와 기본적으로 똑같은데, 다만 객체에 속해있다는 차이만 있을 뿐이다. 객체의 프로퍼티들이 객체의 특징을 규정한다. 프로퍼티에 접근할 때는 도트(점) 표기법을 사용한다.

- -
objectName.propertyName
-
- -

자바스크립트의 모든 변수가 그렇듯이, 객체의 이름과 프로퍼티 이름은 모두 대소문자를 구별한다. 프로퍼티를 새로 정의하려면 그냥 이름과 값을 추가하면 된다. 예를 들어 myCar 라는 이름의 객체를 생성하고, 거기에 make, model, and year 라는 프로퍼티들을 추가해보자:

- -
var myCar = new Object();
-myCar.make = "Ford";
-myCar.model = "Mustang";
-myCar.year = 1969;
-
- -

대괄호 표기법을 사용하여 객체의 프로퍼티에 접근할 수 있다. 객체는 연관배열(associative arrays)이라고도 불리는데, 각 프로퍼티는 하나의 문자열 이름과 연관되어(associated) 이것을 통해 접근할 수 있기 때문이다. 예를 들면 myCar 객체의 프로퍼티에 다음과 같이 접근할 수 있다.

- -
myCar["make"] = "Ford";
-myCar["model"] = "Mustang";
-myCar["year"] = 1969;
-
- -

객체의 프로퍼티 이름은 유효한 자바스크립트 문자열이거나 문자열로 변환이 가능한 것이면 어떤 것이든 가능하며, 심지어 빈 문자열도 된다. 하지만 자바스크립트 식별자(identifier)로 적합하지 않으면 (예 : 하이픈, 빈칸을 포함하거나 숫자로 시작하는 이름), 대괄호를 이용한 표기법으로만 접근이 가능하다. 이 표기법은 프로퍼티 이름이 사전에 미리 결정되지 않고 런타임 시점에 결정되는 경우에 특히 유용하다. 아래의 예를 보자.

- -
var myObj = new Object(),
-    str = "myString",
-    rand = Math.random(),
-    obj = new Object(); // 변수 4개를 콤마를 사용하여 한번에 생성하고 할당.
-
-myObj.type              = "Dot syntax";
-myObj["date created"]   = "String with space";
-myObj[str]              = "String value";
-myObj[rand]             = "Random Number";
-myObj[obj]              = "Object";
-myObj[""]               = "Even an empty string";
-
-console.log(myObj);
-
- -

변수에 저장된 문자열을 이용해서도 프로퍼티에 접근할 수 있다.

- -
-
var propertyName = "make";
-myCar[propertyName] = "Ford";
-
-propertyName = "model";
-myCar[propertyName] = "Mustang";
-
-
- -

대괄호 표기법을 for...in 과 함께 사용하면 객체의 열거가능한 프로퍼티를 나열할 수 있다. 이것이 어떻게 작동하는지 알기 위해 아래의 함수를 보자. 이 함수는 객체와 객체 이름을 함수의 인자로 전달받아서 객체의 프로퍼티들을 출력해 준다.

- -
function showProps(obj, objName) {
-  var result = "";
-  for (var i in obj) {
-    if (obj.hasOwnProperty(i)) {
-        result += objName + "." + i + " = " + obj[i] + "\n";
-    }
-  }
-  return result;
-}
-
- -

showProps(myCar, "myCar") 함수를 호출하면 다음과 같은 문자열을 반환한다.

- -
myCar.make = Ford
-myCar.model = Mustang
-myCar.year = 1969
- -

모든 것이 객체

- -

자바스크립트 세상에서는 거의 모든 것들이 객체이다. null 과 undefined 를 제외한 모든 원시 타입도 객체로 취급된다. 이러한 원시 타입들에도 프로퍼티가 추가될 수 있고 (설명 필요: assigned properties of some types are not persistent), 모두 객체로서의 특징을 갖는다.

- -

객체의 프로퍼티 나열하기

- -

ECMAScript 5 를 기준으로 객체의 프로퍼티를 나열/순회하는 방법이 세 가지 있다.

- - - -

ECMAScript 5 이전 버전에서는 객체의 모든 프로퍼티를 나열하는 자체적인 방법이 제공되지 않았다. 하지만 아래 함수를 이용하면 가능하다.

- -
function listAllProperties(o){
-	var objectToInspect;
-	var result = [];
-
-	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){
-		result = result.concat(Object.getOwnPropertyNames(objectToInspect));
-	}
-
-	return result;
-}
-
- -

이 트릭은 객체의 "숨겨진" 프로퍼티를 알아내는 데 유용하다. (숨겨진 프로퍼티란 프로토타입 체인 상의 프로퍼티 중 객체를 통해 접근이 불가능한 것들을 말하는데 동일 이름의 다른 프로퍼티가 프로퍼티 체인 상에서 먼저 존재하는 경우에 발생한다).  만약 접근 가능한 프로퍼티만 나열하고 싶다면 배열에서 중복되는 프로퍼티들을 제거하면 된다.

- -

객체 생성하기

- -

자바스크립트에는 미리 정의된 객체가 몇 개 존재한다. 사용자는 여기에 추가적으로 자신의 객체를 생성할 수 있다. 자바스크립트 1.2 부터는 객체 이니셜라이저(initializer) 를 이용하여 객체를 생성할 수 있다. 또 다른 방법으로는 먼저 생성자 함수를 정의한 후 이 함수와 new 연산자를 이용하여 인스턴스를 만들수 있다.

- -

객체 이니셜라이저

- -

생성자 함수를 사용하는 방법 대신, 객체 이니셜라이저를 사용하여 객체를 생성할 수 있다. 이 방식은 때때로 "리터럴 표기에 의한 객체 생성"(creating objects with literal notation) 이라고도 불린다. 객체 이니셜라이저라는 단어는 C++ 에서도 비슷한 의미로 사용된다.

- -

객체 이니셜라이저를 이용한 객체 생성의 문법은 다음과 같다.

- -
var obj = { property_1:   value_1,   // property_# may be an identifier...
-            2:            value_2,   // or a number...
-            // ...,
-            "property n": value_n }; // or a string 
- -

obj는 새로 만들어질 객체 이름이고, property_i는 식별자 (이름, 숫자, 또는 스트링 리터럴), value_i 는 수식인데 이 값이 property_i 에 할당 된다. obj 변수에 할당 (assignment =) 하는 것은 선택 사항이다; 이 생성된 객체를 다른 곳에서 참조할 필요가 없다면 변수에 할당하지 않아도 된다. (만약 이 생성된 객체를 변수를 사용하지 않고 구문 안에서 바로 사용하려면 블럭 구문과 혼돈되지 않도록 리터널을 괄호로 감싸줄 필요가 있다.)

- -

객체 이니셜라이저는 수식이고, 각각의 이니셜라이저가 포함된 구문이 실행될 때 마다 이니셜라이저 수식에 의해 새로운 객체가 하나씩 생성이 된다. 똑같은 이니셜라이저에 의해 생성된 객체라도 서로 별개이며 비교 결과는 동일하지 않음 (not equal) 이 된다. 객체는 마치 new Object() 호출이 실행된 것 처럼 생성이 된다; 즉, 객체 이니셜라이저 수식에 의해 만들어진 객체들은 Object의 인스턴스들이 된다.

- -

다음 문장은 수식cond가 참일 경우 객체를 만들어서 변수 x 에 할당한다:

- -
if (cond) var x = {hi: "there"};
-
- -

다음 예제는 myHonda을 생성하고 세개의 속성을 추가한다. engine 속성 역시 자신의 속성들을 가지고 있는 객체이다.

- -
var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}};
-
- -

객체 이니셜라이저를 이용하여 배열을 만들 수 있다. array literals 를 참조하기 바란다.

- -

JavaScript 1.1 과 그 이전 버전에서는, 객체 이니셜라이저를 사용할 수 없었다. 항상 생성자 함수를 쓰거나 생성 목적으로 제공되는 별도 함수를 사용했어야 했다. Using a constructor function 참고.

- -

생성자 함수 사용하기

- -

다른 방법으로는 다음 두 단계에 따라 객체를 생성할 수 있다:

- -
    -
  1. 생성자 함수를 작성하여 객체 타입을 정의한다. 객체 타입 이름의 첫 글자는 반드시 대문자를 사용하는 좋은 관례가 있으므로 따르기를 권장한다.
    2. -
  2. new를 이용하여 객체의 인스턴스를 생성한다.
    3. -
- -

객체의 타입을 정의하려면 타입의 이름, 속성(프로퍼티), 메소드 등을 기술하는 함수를 하나 만들어야 한다. 예를 들면, 여러분이 자동차를 위한 객체 타입을 만들기 원한다면, 이 객체의 타입의 이름은 car이고, 이 타입은 제조사, 모델, 생산연도를 위한 속성을 포함하길 원할 것이다. 아마도 다음과 같은 함수를 작성하게 될 것이다:

- -
function Car(make, model, year) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-}
-
- -

함수 인자로 전달 받은 값을 객체의 속성에 할당하기 위해서 this를 사용 한 것에 주목하기 바란다.

- -

이제 다음과 같이 하여 mycar라는 이름의 객체를 생성할 수 있다:

- -
var mycar = new Car("Eagle", "Talon TSi", 1993);
-
- -

이 문장은 mycar를 만들고 특정 값들을 속성으로 할당하고 있다. 이렇게 하면 mycar.make의 값은 문자열 "Eagle" 이 되고, mycar.year는 정수 1993 이 된다.

- -

new를 이용하면 어떤 갯수의 car 객체도 만들 수 있다. 예를 들면 다음과 같다.

- -
var kenscar = new Car("Nissan", "300ZX", 1992);
-var vpgscar = new Car("Mazda", "Miata", 1990);
-
- -

객체는 또 다른 객체를 속성으로 가질 수 있다. 예를 들어 여러분이 person 이라는 객체를 다음과 같이 정의를 했고:

- -
function Person(name, age, sex) {
-  this.name = name;
-  this.age = age;
-  this.sex = sex;
-}
-
- -

그리고 두 개의 새 person 객체의 인스턴스를 만들었다고 하면:

- -
var rand = new Person("Rand McKinnon", 33, "M");
-var ken = new Person("Ken Jones", 39, "M");
-
- -

car의 정의에 person 객체의 값을 갖는 owner 속성을 추가하도록 수정할 수 있다:

- -
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-}
-
- -

수정된 새 객체의 인스턴스를 만들려면 다음과 같이 하면 된다:

- -
var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
-var car2 = new Car("Nissan", "300ZX", 1992, ken);
-
- -

위 문장은 문자열 리터럴이나 정수를 넘기는 대신 객체 rand 와 ken을 owners를 위한 인자로 전달하고 있다. car2의 소유자 이름을 찾고 싶다면 다음과 같은 속성을 사용할 수 있다.:

- -
car2.owner.name
-
- -

이미 정의 된 객체에도 새로운 속성을 추가할 수 있다.

- -
car1.color = "black";
-
- -

위 문장은 속성 color를 car1 에 추가하고, 그 값으로는 "black"을 지정하고 있다. 그러나 이것은 다른 객체들에는 영향을 주지 않는다. 새 속성을 해당 타입의 모든 객체들에 다 추가하고 싶다면, 이 속성을 car 객체 타입의 정의에 추가해야 한다.

- -

Object.create 메서드 사용하기

- -

객체는 Object.create 메서드를 이용해서 생성될 수 있다. 이 메서드는 사용할 프로토타입 객체를 사용자가 직접 선택할 수 있기 때문에 상당히 유용하다. (객체 생성시 생성자 함수가 없어도 가능하다). 이 메서드에 대한 더 자세한 정보는 {{jsxref("Object.create()")}} 를 참고하도록 하자.

- -
// Animal properties and method encapsulation
-var Animal = {
-  type: "Invertebrates", // Default value of properties
-  displayType : function(){  // Method which will display type of Animal
-    console.log(this.type);
-  }
-}
-
-// Create new animal type called animal1
-var animal1 = Object.create(Animal);
-animal1.displayType(); // Output:Invertebrates
-
-// Create new animal type called Fishes
-var fish = Object.create(Animal);
-fish.type = "Fishes";
-fish.displayType(); // Output:Fishes
- -

상속

- -

JavaScript 에서의 모든 객체들은 최소한 하나의 다른 객체로부터 상속을 받는다. 상속을 제공하는 객체를 프로토타입이라고 부르며, 상속되는 속성들은 prototype 이라는 생성자 객체에서 찾을 수 있다.

- -

객체 프로퍼티의 인덱싱

- -

JavaScript 1.0에서는 객체의 속성을 참조할 때 속성 이름을 이용하거나 또는 숫자 인덱스를 이용할 수 있었다. 하지만 JavaScript 1.1과 그 이후 부터는 처음에 프로퍼티를 이름으로 정의하면 항상 이름으로만 참조를 할 수 있고, 처음에 인덱스를 이용하여 정의하면 인덱스를 이용해서만 참조할 수 있다.

- -

이 제약 사항은 생성자 함수를 이용하여 객체와 프로퍼티를 생성할 때 (앞에서 Car 객체 타입의 예)에도 동일하게 적용되고, 개개의 속성을 명시적으로 지정할 때 (예: myCar.color = "red")에도 마찬가지이다. 만약 처음에 객체 속성을 정의할 때 myCar[5] = "25 mpg" 처럼 인덱스 방식을 사용하면, 그 이후에도 계속 myCar[5] 방식으로만 참조할 수 있다.

- -

forms 배열과 같이 HTML 로부터 얻어지는 객체들에는 이 규칙이 적용되지 않는다. 숫자를 이용하거나 (이 객체가 문서 상에 존재하는 순서에 따라) 또는 태그의 attribute 이름으로 참조가 가능하다. 예를 들면 HTML 문서에서 두 번째 <FORM> 태그가 "myForm" 이라는 값의 NAME attribute 를 가지고 있다면, 이 form을 document.forms[1] 또는 document.forms["myForm"] 또는 document.myForm 와 같이 접근할 수 있다.

- -

객체의 프로퍼티 정의

- -

prototype 프로퍼티를 사용하여 미리 정의된 객체 타입에 속성을 추가할 수 있다. 이렇게 정의된 속성은 해당 객체 타입의 한 인스턴스에만 적용되는 것이 아니라 해당 객체 타입의 모든 인스턴스가 갖게 된다. 다음 코드에서는 car 타입의 객체 전체에 color 프로퍼티를 추가한 후, car1 인스턴스의 color 프로퍼티에 값을 할당하는 것을 보여준다.

- -
Car.prototype.color = null;
-car1.color = "black";
-
- -

더 많은 정보는 JavaScript Reference에서 Function 객체의 prototype 속성을 참조

- -

메소드 정의

- -

메소드는 한 객체와 연관된(associated) 함수이며, 간단하게 말해 객체의 프로퍼티 중에서 함수인 것을 메소드라고 한다. 메소드를 정의하는 방식은 일반 함수를 정의하는 것과 동일하고, 다만 어떤 객체의 프로퍼티로 할당되어야 한다는 점이 차이가 난다. 자세한 것은 method definitions를 참조하자. 다음은 메소드 정의의 한 예이다.

- -
objectName.methodname = function_name;
-
-var myObj = {
-  myMethod: function(params) {
-    // ...do something
-  }
-};
-
- -

첫번째 줄은 이미 존재하는 objectName이라는 객체에 methodname이라는 이름의 메소드를 추가하는 것이다. function_name 은 메소드로 사용될 함수의 이름이다. 두번째 줄부터는 객체를 정의할 때 메소드를 같이 정의하는 예이다.

- -

그러고 나면 다음과 같이 해당 객체의 문맥(context)에서 메소드를 호출할 수 있다.

- -
object.methodname(params);
-
- -

객체 생성자 함수에 메소드 정의를 포함시킴으로써 해당 객체 타입의 메소드를 정의할 수 있다. 한 예로 이전에 정의한 car 객체의 프로퍼티를 형식에 맞춰 출력하는 함수를 정의할 수 있는데, 다음과 같다.

- -
function displayCar() {
-  var result = "A Beautiful " + this.year + " " + this.make
-    + " " + this.model;
-  pretty_print(result);
-}
-
- -

위에서 pretty_print는 수평 규칙과 문자열을 나타내 주는 함수이다. 여기서 사용한 this는 해당 메소드가 속한 객체를 가리킨다는 점을 기억하자.

- -

아래와 같은 코드를 car객체의 정의에 추가함으로써 해당 함수를 car객체의 메소드로 만들 수 있다.

- -
this.displayCar = displayCar;
-
- -

따라서 car객체의 전체 정의는 아래와 같이 됩니다.

- -
function Car(make, model, year, owner) {
-  this.make = make;
-  this.model = model;
-  this.year = year;
-  this.owner = owner;
-  this.displayCar = displayCar;
-}
-
- -

그리고 각각의 객체(인스턴스)를 가지고 displayCar메서드를 아래와 같이 호출 할 수 있습니다:

- -
car1.displayCar();
-car2.displayCar();
-
- -

객체 참조를 위해 this 를 사용하기

- -

자바스크립트는 특별한 키워드를 가지고 잇습니다. 바로 this라는 키워드이다. 메서드 내부에서 this 키워드를 사용하게 되면 해당 메서드를 포함한 객체를 가리키게 된다. 예를 들어 특정 객체의 속성값의 상한과 하한 값의 범위에 있는지를 확인하는 validate라는 함수를 아래와 같이 작성한다고 했을 때, 

- -
function validate(obj, lowval, hival) {
-  if ((obj.value < lowval) || (obj.value > hival))
-    alert("Invalid Value!");
-}
-
- -

validate메서드를 각각의 form 요소들의 onchange 이벤트 핸들러에서 호출할 수 있다. 그 때, 다음 예제처럼 this 키워드를 사용해서 해당 form요소를 인자로 넘길 수 있다. 

- -
<input type="text" name="age" size="3"
-  onChange="validate(this, 18, 99)">
-
- -

일반적으로 this는 메서드를 호출하는 객체를 지칭합니다. 

- -

 myForm. form속성과 함께 사용할때, this키워드는 현재 객체의 부모 form을 지칭한다. 다음의 예제에서, myForm form은 텍스트 객체와 버튼 객체를 가지고 있다. 사용자가 해당 버튼을 클릭했을때, myForm form안에 있는 텍스트 객체의 값을 myForm form의 이름으로 설정한다. 해당 버튼의 onclick 이벤트 처리자는 부모 form인 myForm을 지칭하기 위해 this.form를 사용한다. 

- -
<form name="myForm">
-<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
-<p><input name="button1" type="button" value="Show Form Name"
-     onclick="this.form.text1.value = this.form.name">
-</p>
-</form>
- -

getters 와 setters 정의

- -

getter 메서드는 특정 속성의 값을 받아 오기 위한 메서드 입니다. setter메서드는 특정 속성의 값을 설정하기 위한 메서드 입니다. 새로운 속성을 추가 하기 위해 getter와 setter 메서드들을 미리 정의된 객체 혹은 사용자 정의 객체에 정의 하 수 있습니다.  getter와 setter메서드들을 정의 하기 위한 문법은 객체 구문 문법을 사용합니다.

- -

자바스크립트 1.8.1버전부터, 객체와 배열 초기화에서 속성들을 설정하고자 할 경우 setter메서드들은 더이상 사용이 불가합니다.

- -

다음의 JS 쉘은 getter와 setter메서드들이 사용자 정의객체인 o에서 어떻게 작동하는지를 보여 줍니다. JS쉘은 개발자가 배치 모드 혹은 대화형 모드에서 자바스크립트 코드를 테스트하기위한 하나의 어플리케이션입니다. 

- -
js> var o = {a: 7, get b() {return this.a + 1;}, set c(x) {this.a = x / 2}};
-[object Object]
-js> o.a;
-7
-js> o.b;
-8
-js> o.c = 50;
-js> o.a;
-25
-
- -

o 객체의 속성이 다음과 같을 때,

- - - -

[gs]et 속성명()  문법이 실제 사용되는 메서드명이라고 생각이 될지라도, "[gs]et 속성명()" 문법(__define[GS]etter__와는 반대로)을 사용한 객체 구문 문법으로 정의된 getter와 setter메서드들의 이름들은 실제 getter 메서드들의 이름이 아니라는 점에 유의 하세요.  "[gs]et 속성명()" 문법을 사용하여 getter, setter메서드내의 함수명을 작성하기 위해서는, Object.defineProperty (혹은 Object.prototype.__defineGetter__ 레거시 콜백)을 사용하여 프로그램적으로 분명한 이름의 함수명을 사용하세요. 

- -

아래의 자바스크립트 쉡은 이미 정의된 Date 클래스의 모든 인스턴스들에 년도 속성을 추가 하기 위해 getter와 setter 메서드들이 Date 프로토타입을 확장하는 방법을 보여 줍니다. 

- -

아래의 구문들은 년도 속성 추가를 위한 getter와 setter메서드를 정의합니다:

- -
js> var d = Date.prototype;
-js> Object.defineProperty(d, "year", {
-    get: function() {return this.getFullYear() },
-    set: function(y) { this.setFullYear(y) }
-});
-
- -

아래의 구문들은 Date객체에서 getter와 setter메서드를 사용하는 법을 보여 줍니다:

- -
js> var now = new Date;
-js> print(now.year);
-2000
-js> now.year = 2001;
-987617605170
-js> print(now);
-Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
-
-
- -

원칙적으로, getter와 setter는 둘 중 하나가 될 수 있다.

- - - -

object initializers를 사용해서 getter와 setter메서드들을 정의할 경우, getter메서드는 get, setter메서드는 set이라는 접두사만 추가하면 됩니다. 물론 getter메서드는 인자를 받지 않는 반면, setter 메서드는 정확히 하나의 인자(설정할 새로운 값)만을 받습니다. 

- -
var o = {
-  a: 7,
-  get b() { return this.a + 1; },
-  set c(x) { this.a = x / 2; }
-};
-
- -

Object.defineProperties 메서드를 사용하면 객체 생성이후라도 언제든지 getter and setter메서드들을 객체에 추가할 수 있습니다. Object.defineProperties 메서드의 첫번째 인자는 getter and setter메서드들을 추가할 객체이고, 두번째 인자는 getter and setter메서드들의 이름과 getter and setter메서드들의 정의를 가지고 있는 객체가 되어야 합니다. 이전 예제와 동일하게 사용된 getter and setter메서드들을 정의하고 있는 예제는 아래와 같습니다:

- -
var o = { a:0 }
-
-Object.defineProperties(o, {
-    "b": { get: function () { return this.a + 1; } },
-    "c": { set: function (x) { this.a = x / 2; } }
-});
-
-o.c = 10 // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
-console.log(o.b) // Runs the getter, which yields a + 1 or 6
-
- -

당신의 프로그래밍 스타일과 현재 진행 중인 작업에 따라 getter and setter메서드들을 정의할 수 있는 두가지 양식 중 하나를 선택하여 사용할 수 있습니다. prototype을 정의 할때 object initializer를 사용했다면 앞으로도 대부분 첫번째 양식을 선택 하여 작성을 할 것입니다. 이 양식이 보다 간결하고 자연스럽기 때문입니다. 하지만 prototype 혹은 특정 객체를 작성하지 않고서 나중에 getter and setter 메서드를 추가하고자 한다면 두번째 양식만이 가능한 선택입니다.  두번째 양식은 아마도 자바스크립트의 동적 속성을 가장 잘 나타내고 있습니다. 하지만 코드 작성과 읽고 이해하는 부분에 어려움이 있습니다. 

- -
-

Firefox 3.0 이전 버전의 경우, getter and setter 메서드들은 DOM 요소들에는 지원되지 않습니다. 이전 버전의 Firefox에서는 아무런 에러 없이 작동하지 않을 것입니다. 이것에 대한 예외가 필요하다면, HTMLElement의 prototype(HTMLElement.prototype.__define[SG]etter__)을 변경하고 예외를 던지는 것이 하나의 방법입니다.

- -

Firefox 3.0 버전에서는 이미 정의된 속서에 대해 getter or setter를 정의 할 경우 예외가 발생됩니다. 이전 버전의 Firefox에서는 아니지만 해당 속성을 반드시 사전에 제거해야만 합니다. 

-
- -

추가로 볼 것들 

- - - -

프로퍼티의 삭제

- -

상속 받지 않은 속성은 delete 연산자를 이용하여 제거 할 수 있다. 다음 코드는 어떻게 속성을 제거하는지 보여준다.

- -
// 새 객체 myobj를 두 개의 속성 a, b 와 함께 생성
-var myobj = new Object;
-myobj.a = 5;
-myobj.b = 12;
-
-// 속성을 삭제. myobj 에는 속성 b 만 남게 됨.
-delete myobj.a;
-console.log ("a" in myobj) // "false"를 출력
-
- -

var 키워드로 선언하지 않은 전역 변수도 delete를 이용하여 삭제를 할 수 있다:

- -
g = 17;
-delete g;
-
- -

더 자세한 정보는 delete를 보면 된다.

- -

객체 간의 비교

- -

JavaScript 에서는 객체들은 레퍼런스 타입이다. 두 개의 별개 객체들은, 설령 그 속성 값들이 모두 다 동일하다고 하더라도, 절대로 동일하다고 비교(equal)될 수 없다. In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.

- -
// 속성은 같지만 서로 별개인 두 변수와 두 객체
-var fruit = {name: "apple"};
-var fruitbear = {name: "apple"};
-
-fruit == fruitbear // false 리턴
-fruit === fruitbear // false 리턴
- -
// 두 개의 변수이지만 하나의 객체
-var fruit = {name: "apple"};
-var fruitbear = fruit;  // fruit 객체 레퍼런스를 fruitbear 에 할당
-
-// here fruit and fruitbear are pointing to same object
-fruit == fruitbear // true 리턴
-fruit === fruitbear // true 리턴
-
- -

비교 연산자에 대한 상세한 정보는 Comparison operators를 참고하기 바란다.

- -

추가 검토

- - - -
{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
diff --git a/files/ko/web/javascript/guide/working_with_objects/index.md b/files/ko/web/javascript/guide/working_with_objects/index.md new file mode 100644 index 0000000000..7dce2677f8 --- /dev/null +++ b/files/ko/web/javascript/guide/working_with_objects/index.md @@ -0,0 +1,500 @@ +--- +title: Working with objects +slug: Web/JavaScript/Guide/Working_with_Objects +translation_of: Web/JavaScript/Guide/Working_with_Objects +--- +

자바스크립트는 간단한 객체기반 패러다임 상에서 만들어졌다. 객체는 프로퍼티의 모음이며, 프로퍼티는 "이름"(name 또는 key)과 "값"(value)의 연결로 이루어진다 . 프로퍼티의 값으로 함수가 될 수 있는데, 이런 프로퍼티는 메소드라고 불린다. 브라우저 안에 미리 정의 된 객체뿐 아니라 사용자들이 직접 자신만의 객체를 정의할 수도 있다.

+ +

이 절에서는 객체, 프로퍼티, 함수, 메소드가 어떻게 사용되는지, 그리고 사용자를 위한 새로운 객체를 생성하는 방법을 설명한다

+ +

개요

+ +

자바스크립트에서의 객체는 다른 프로그래밍 언어에서와 비슷하게 현실 세계에서의 사물(objects)과 비교해 볼 수 있다. 자바스크립트에서의 객체의 개념은 실세계상에서의 인식 가능한 사물로 이해할 수 있다.

+ +

객체는 단독으로 존재 가능한 개체(entity)이며, 프로퍼티(property)과 타입(type)을 가진다. 예를 들어 컵과 비교를 해 본다면 컵은 사물 객체인데 색깔, 모양, 무게, 재료 등의 속성(프로퍼티)을 가지고 있다. 비슷하게 자바스크립트의 객체는 그 특징을 결정짓는 여러 프로퍼티를 가진다.

+ +

객체와 프로퍼티

+ +

자바스크립트의 객체에는 그와 연관된 프로퍼티가 있다. 프로퍼티는 객체에 붙은 변수(variable)라고 설명할 수 있겠다. 객체의 프로퍼티는 일반 자바스크립의 변수와 기본적으로 똑같은데, 다만 객체에 속해있다는 차이만 있을 뿐이다. 객체의 프로퍼티들이 객체의 특징을 규정한다. 프로퍼티에 접근할 때는 도트(점) 표기법을 사용한다.

+ +
objectName.propertyName
+
+ +

자바스크립트의 모든 변수가 그렇듯이, 객체의 이름과 프로퍼티 이름은 모두 대소문자를 구별한다. 프로퍼티를 새로 정의하려면 그냥 이름과 값을 추가하면 된다. 예를 들어 myCar 라는 이름의 객체를 생성하고, 거기에 make, model, and year 라는 프로퍼티들을 추가해보자:

+ +
var myCar = new Object();
+myCar.make = "Ford";
+myCar.model = "Mustang";
+myCar.year = 1969;
+
+ +

대괄호 표기법을 사용하여 객체의 프로퍼티에 접근할 수 있다. 객체는 연관배열(associative arrays)이라고도 불리는데, 각 프로퍼티는 하나의 문자열 이름과 연관되어(associated) 이것을 통해 접근할 수 있기 때문이다. 예를 들면 myCar 객체의 프로퍼티에 다음과 같이 접근할 수 있다.

+ +
myCar["make"] = "Ford";
+myCar["model"] = "Mustang";
+myCar["year"] = 1969;
+
+ +

객체의 프로퍼티 이름은 유효한 자바스크립트 문자열이거나 문자열로 변환이 가능한 것이면 어떤 것이든 가능하며, 심지어 빈 문자열도 된다. 하지만 자바스크립트 식별자(identifier)로 적합하지 않으면 (예 : 하이픈, 빈칸을 포함하거나 숫자로 시작하는 이름), 대괄호를 이용한 표기법으로만 접근이 가능하다. 이 표기법은 프로퍼티 이름이 사전에 미리 결정되지 않고 런타임 시점에 결정되는 경우에 특히 유용하다. 아래의 예를 보자.

+ +
var myObj = new Object(),
+    str = "myString",
+    rand = Math.random(),
+    obj = new Object(); // 변수 4개를 콤마를 사용하여 한번에 생성하고 할당.
+
+myObj.type              = "Dot syntax";
+myObj["date created"]   = "String with space";
+myObj[str]              = "String value";
+myObj[rand]             = "Random Number";
+myObj[obj]              = "Object";
+myObj[""]               = "Even an empty string";
+
+console.log(myObj);
+
+ +

변수에 저장된 문자열을 이용해서도 프로퍼티에 접근할 수 있다.

+ +
+
var propertyName = "make";
+myCar[propertyName] = "Ford";
+
+propertyName = "model";
+myCar[propertyName] = "Mustang";
+
+
+ +

대괄호 표기법을 for...in 과 함께 사용하면 객체의 열거가능한 프로퍼티를 나열할 수 있다. 이것이 어떻게 작동하는지 알기 위해 아래의 함수를 보자. 이 함수는 객체와 객체 이름을 함수의 인자로 전달받아서 객체의 프로퍼티들을 출력해 준다.

+ +
function showProps(obj, objName) {
+  var result = "";
+  for (var i in obj) {
+    if (obj.hasOwnProperty(i)) {
+        result += objName + "." + i + " = " + obj[i] + "\n";
+    }
+  }
+  return result;
+}
+
+ +

showProps(myCar, "myCar") 함수를 호출하면 다음과 같은 문자열을 반환한다.

+ +
myCar.make = Ford
+myCar.model = Mustang
+myCar.year = 1969
+ +

모든 것이 객체

+ +

자바스크립트 세상에서는 거의 모든 것들이 객체이다. null 과 undefined 를 제외한 모든 원시 타입도 객체로 취급된다. 이러한 원시 타입들에도 프로퍼티가 추가될 수 있고 (설명 필요: assigned properties of some types are not persistent), 모두 객체로서의 특징을 갖는다.

+ +

객체의 프로퍼티 나열하기

+ +

ECMAScript 5 를 기준으로 객체의 프로퍼티를 나열/순회하는 방법이 세 가지 있다.

+ + + +

ECMAScript 5 이전 버전에서는 객체의 모든 프로퍼티를 나열하는 자체적인 방법이 제공되지 않았다. 하지만 아래 함수를 이용하면 가능하다.

+ +
function listAllProperties(o){
+	var objectToInspect;
+	var result = [];
+
+	for(objectToInspect = o; objectToInspect !== null; objectToInspect = Object.getPrototypeOf(objectToInspect)){
+		result = result.concat(Object.getOwnPropertyNames(objectToInspect));
+	}
+
+	return result;
+}
+
+ +

이 트릭은 객체의 "숨겨진" 프로퍼티를 알아내는 데 유용하다. (숨겨진 프로퍼티란 프로토타입 체인 상의 프로퍼티 중 객체를 통해 접근이 불가능한 것들을 말하는데 동일 이름의 다른 프로퍼티가 프로퍼티 체인 상에서 먼저 존재하는 경우에 발생한다).  만약 접근 가능한 프로퍼티만 나열하고 싶다면 배열에서 중복되는 프로퍼티들을 제거하면 된다.

+ +

객체 생성하기

+ +

자바스크립트에는 미리 정의된 객체가 몇 개 존재한다. 사용자는 여기에 추가적으로 자신의 객체를 생성할 수 있다. 자바스크립트 1.2 부터는 객체 이니셜라이저(initializer) 를 이용하여 객체를 생성할 수 있다. 또 다른 방법으로는 먼저 생성자 함수를 정의한 후 이 함수와 new 연산자를 이용하여 인스턴스를 만들수 있다.

+ +

객체 이니셜라이저

+ +

생성자 함수를 사용하는 방법 대신, 객체 이니셜라이저를 사용하여 객체를 생성할 수 있다. 이 방식은 때때로 "리터럴 표기에 의한 객체 생성"(creating objects with literal notation) 이라고도 불린다. 객체 이니셜라이저라는 단어는 C++ 에서도 비슷한 의미로 사용된다.

+ +

객체 이니셜라이저를 이용한 객체 생성의 문법은 다음과 같다.

+ +
var obj = { property_1:   value_1,   // property_# may be an identifier...
+            2:            value_2,   // or a number...
+            // ...,
+            "property n": value_n }; // or a string 
+ +

obj는 새로 만들어질 객체 이름이고, property_i는 식별자 (이름, 숫자, 또는 스트링 리터럴), value_i 는 수식인데 이 값이 property_i 에 할당 된다. obj 변수에 할당 (assignment =) 하는 것은 선택 사항이다; 이 생성된 객체를 다른 곳에서 참조할 필요가 없다면 변수에 할당하지 않아도 된다. (만약 이 생성된 객체를 변수를 사용하지 않고 구문 안에서 바로 사용하려면 블럭 구문과 혼돈되지 않도록 리터널을 괄호로 감싸줄 필요가 있다.)

+ +

객체 이니셜라이저는 수식이고, 각각의 이니셜라이저가 포함된 구문이 실행될 때 마다 이니셜라이저 수식에 의해 새로운 객체가 하나씩 생성이 된다. 똑같은 이니셜라이저에 의해 생성된 객체라도 서로 별개이며 비교 결과는 동일하지 않음 (not equal) 이 된다. 객체는 마치 new Object() 호출이 실행된 것 처럼 생성이 된다; 즉, 객체 이니셜라이저 수식에 의해 만들어진 객체들은 Object의 인스턴스들이 된다.

+ +

다음 문장은 수식cond가 참일 경우 객체를 만들어서 변수 x 에 할당한다:

+ +
if (cond) var x = {hi: "there"};
+
+ +

다음 예제는 myHonda을 생성하고 세개의 속성을 추가한다. engine 속성 역시 자신의 속성들을 가지고 있는 객체이다.

+ +
var myHonda = {color: "red", wheels: 4, engine: {cylinders: 4, size: 2.2}};
+
+ +

객체 이니셜라이저를 이용하여 배열을 만들 수 있다. array literals 를 참조하기 바란다.

+ +

JavaScript 1.1 과 그 이전 버전에서는, 객체 이니셜라이저를 사용할 수 없었다. 항상 생성자 함수를 쓰거나 생성 목적으로 제공되는 별도 함수를 사용했어야 했다. Using a constructor function 참고.

+ +

생성자 함수 사용하기

+ +

다른 방법으로는 다음 두 단계에 따라 객체를 생성할 수 있다:

+ +
    +
  1. 생성자 함수를 작성하여 객체 타입을 정의한다. 객체 타입 이름의 첫 글자는 반드시 대문자를 사용하는 좋은 관례가 있으므로 따르기를 권장한다.
    2. +
  2. new를 이용하여 객체의 인스턴스를 생성한다.
    3. +
+ +

객체의 타입을 정의하려면 타입의 이름, 속성(프로퍼티), 메소드 등을 기술하는 함수를 하나 만들어야 한다. 예를 들면, 여러분이 자동차를 위한 객체 타입을 만들기 원한다면, 이 객체의 타입의 이름은 car이고, 이 타입은 제조사, 모델, 생산연도를 위한 속성을 포함하길 원할 것이다. 아마도 다음과 같은 함수를 작성하게 될 것이다:

+ +
function Car(make, model, year) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+}
+
+ +

함수 인자로 전달 받은 값을 객체의 속성에 할당하기 위해서 this를 사용 한 것에 주목하기 바란다.

+ +

이제 다음과 같이 하여 mycar라는 이름의 객체를 생성할 수 있다:

+ +
var mycar = new Car("Eagle", "Talon TSi", 1993);
+
+ +

이 문장은 mycar를 만들고 특정 값들을 속성으로 할당하고 있다. 이렇게 하면 mycar.make의 값은 문자열 "Eagle" 이 되고, mycar.year는 정수 1993 이 된다.

+ +

new를 이용하면 어떤 갯수의 car 객체도 만들 수 있다. 예를 들면 다음과 같다.

+ +
var kenscar = new Car("Nissan", "300ZX", 1992);
+var vpgscar = new Car("Mazda", "Miata", 1990);
+
+ +

객체는 또 다른 객체를 속성으로 가질 수 있다. 예를 들어 여러분이 person 이라는 객체를 다음과 같이 정의를 했고:

+ +
function Person(name, age, sex) {
+  this.name = name;
+  this.age = age;
+  this.sex = sex;
+}
+
+ +

그리고 두 개의 새 person 객체의 인스턴스를 만들었다고 하면:

+ +
var rand = new Person("Rand McKinnon", 33, "M");
+var ken = new Person("Ken Jones", 39, "M");
+
+ +

car의 정의에 person 객체의 값을 갖는 owner 속성을 추가하도록 수정할 수 있다:

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+}
+
+ +

수정된 새 객체의 인스턴스를 만들려면 다음과 같이 하면 된다:

+ +
var car1 = new Car("Eagle", "Talon TSi", 1993, rand);
+var car2 = new Car("Nissan", "300ZX", 1992, ken);
+
+ +

위 문장은 문자열 리터럴이나 정수를 넘기는 대신 객체 rand 와 ken을 owners를 위한 인자로 전달하고 있다. car2의 소유자 이름을 찾고 싶다면 다음과 같은 속성을 사용할 수 있다.:

+ +
car2.owner.name
+
+ +

이미 정의 된 객체에도 새로운 속성을 추가할 수 있다.

+ +
car1.color = "black";
+
+ +

위 문장은 속성 color를 car1 에 추가하고, 그 값으로는 "black"을 지정하고 있다. 그러나 이것은 다른 객체들에는 영향을 주지 않는다. 새 속성을 해당 타입의 모든 객체들에 다 추가하고 싶다면, 이 속성을 car 객체 타입의 정의에 추가해야 한다.

+ +

Object.create 메서드 사용하기

+ +

객체는 Object.create 메서드를 이용해서 생성될 수 있다. 이 메서드는 사용할 프로토타입 객체를 사용자가 직접 선택할 수 있기 때문에 상당히 유용하다. (객체 생성시 생성자 함수가 없어도 가능하다). 이 메서드에 대한 더 자세한 정보는 {{jsxref("Object.create()")}} 를 참고하도록 하자.

+ +
// Animal properties and method encapsulation
+var Animal = {
+  type: "Invertebrates", // Default value of properties
+  displayType : function(){  // Method which will display type of Animal
+    console.log(this.type);
+  }
+}
+
+// Create new animal type called animal1
+var animal1 = Object.create(Animal);
+animal1.displayType(); // Output:Invertebrates
+
+// Create new animal type called Fishes
+var fish = Object.create(Animal);
+fish.type = "Fishes";
+fish.displayType(); // Output:Fishes
+ +

상속

+ +

JavaScript 에서의 모든 객체들은 최소한 하나의 다른 객체로부터 상속을 받는다. 상속을 제공하는 객체를 프로토타입이라고 부르며, 상속되는 속성들은 prototype 이라는 생성자 객체에서 찾을 수 있다.

+ +

객체 프로퍼티의 인덱싱

+ +

JavaScript 1.0에서는 객체의 속성을 참조할 때 속성 이름을 이용하거나 또는 숫자 인덱스를 이용할 수 있었다. 하지만 JavaScript 1.1과 그 이후 부터는 처음에 프로퍼티를 이름으로 정의하면 항상 이름으로만 참조를 할 수 있고, 처음에 인덱스를 이용하여 정의하면 인덱스를 이용해서만 참조할 수 있다.

+ +

이 제약 사항은 생성자 함수를 이용하여 객체와 프로퍼티를 생성할 때 (앞에서 Car 객체 타입의 예)에도 동일하게 적용되고, 개개의 속성을 명시적으로 지정할 때 (예: myCar.color = "red")에도 마찬가지이다. 만약 처음에 객체 속성을 정의할 때 myCar[5] = "25 mpg" 처럼 인덱스 방식을 사용하면, 그 이후에도 계속 myCar[5] 방식으로만 참조할 수 있다.

+ +

forms 배열과 같이 HTML 로부터 얻어지는 객체들에는 이 규칙이 적용되지 않는다. 숫자를 이용하거나 (이 객체가 문서 상에 존재하는 순서에 따라) 또는 태그의 attribute 이름으로 참조가 가능하다. 예를 들면 HTML 문서에서 두 번째 <FORM> 태그가 "myForm" 이라는 값의 NAME attribute 를 가지고 있다면, 이 form을 document.forms[1] 또는 document.forms["myForm"] 또는 document.myForm 와 같이 접근할 수 있다.

+ +

객체의 프로퍼티 정의

+ +

prototype 프로퍼티를 사용하여 미리 정의된 객체 타입에 속성을 추가할 수 있다. 이렇게 정의된 속성은 해당 객체 타입의 한 인스턴스에만 적용되는 것이 아니라 해당 객체 타입의 모든 인스턴스가 갖게 된다. 다음 코드에서는 car 타입의 객체 전체에 color 프로퍼티를 추가한 후, car1 인스턴스의 color 프로퍼티에 값을 할당하는 것을 보여준다.

+ +
Car.prototype.color = null;
+car1.color = "black";
+
+ +

더 많은 정보는 JavaScript Reference에서 Function 객체의 prototype 속성을 참조

+ +

메소드 정의

+ +

메소드는 한 객체와 연관된(associated) 함수이며, 간단하게 말해 객체의 프로퍼티 중에서 함수인 것을 메소드라고 한다. 메소드를 정의하는 방식은 일반 함수를 정의하는 것과 동일하고, 다만 어떤 객체의 프로퍼티로 할당되어야 한다는 점이 차이가 난다. 자세한 것은 method definitions를 참조하자. 다음은 메소드 정의의 한 예이다.

+ +
objectName.methodname = function_name;
+
+var myObj = {
+  myMethod: function(params) {
+    // ...do something
+  }
+};
+
+ +

첫번째 줄은 이미 존재하는 objectName이라는 객체에 methodname이라는 이름의 메소드를 추가하는 것이다. function_name 은 메소드로 사용될 함수의 이름이다. 두번째 줄부터는 객체를 정의할 때 메소드를 같이 정의하는 예이다.

+ +

그러고 나면 다음과 같이 해당 객체의 문맥(context)에서 메소드를 호출할 수 있다.

+ +
object.methodname(params);
+
+ +

객체 생성자 함수에 메소드 정의를 포함시킴으로써 해당 객체 타입의 메소드를 정의할 수 있다. 한 예로 이전에 정의한 car 객체의 프로퍼티를 형식에 맞춰 출력하는 함수를 정의할 수 있는데, 다음과 같다.

+ +
function displayCar() {
+  var result = "A Beautiful " + this.year + " " + this.make
+    + " " + this.model;
+  pretty_print(result);
+}
+
+ +

위에서 pretty_print는 수평 규칙과 문자열을 나타내 주는 함수이다. 여기서 사용한 this는 해당 메소드가 속한 객체를 가리킨다는 점을 기억하자.

+ +

아래와 같은 코드를 car객체의 정의에 추가함으로써 해당 함수를 car객체의 메소드로 만들 수 있다.

+ +
this.displayCar = displayCar;
+
+ +

따라서 car객체의 전체 정의는 아래와 같이 됩니다.

+ +
function Car(make, model, year, owner) {
+  this.make = make;
+  this.model = model;
+  this.year = year;
+  this.owner = owner;
+  this.displayCar = displayCar;
+}
+
+ +

그리고 각각의 객체(인스턴스)를 가지고 displayCar메서드를 아래와 같이 호출 할 수 있습니다:

+ +
car1.displayCar();
+car2.displayCar();
+
+ +

객체 참조를 위해 this 를 사용하기

+ +

자바스크립트는 특별한 키워드를 가지고 잇습니다. 바로 this라는 키워드이다. 메서드 내부에서 this 키워드를 사용하게 되면 해당 메서드를 포함한 객체를 가리키게 된다. 예를 들어 특정 객체의 속성값의 상한과 하한 값의 범위에 있는지를 확인하는 validate라는 함수를 아래와 같이 작성한다고 했을 때, 

+ +
function validate(obj, lowval, hival) {
+  if ((obj.value < lowval) || (obj.value > hival))
+    alert("Invalid Value!");
+}
+
+ +

validate메서드를 각각의 form 요소들의 onchange 이벤트 핸들러에서 호출할 수 있다. 그 때, 다음 예제처럼 this 키워드를 사용해서 해당 form요소를 인자로 넘길 수 있다. 

+ +
<input type="text" name="age" size="3"
+  onChange="validate(this, 18, 99)">
+
+ +

일반적으로 this는 메서드를 호출하는 객체를 지칭합니다. 

+ +

 myForm. form속성과 함께 사용할때, this키워드는 현재 객체의 부모 form을 지칭한다. 다음의 예제에서, myForm form은 텍스트 객체와 버튼 객체를 가지고 있다. 사용자가 해당 버튼을 클릭했을때, myForm form안에 있는 텍스트 객체의 값을 myForm form의 이름으로 설정한다. 해당 버튼의 onclick 이벤트 처리자는 부모 form인 myForm을 지칭하기 위해 this.form를 사용한다. 

+ +
<form name="myForm">
+<p><label>Form name:<input type="text" name="text1" value="Beluga"></label>
+<p><input name="button1" type="button" value="Show Form Name"
+     onclick="this.form.text1.value = this.form.name">
+</p>
+</form>
+ +

getters 와 setters 정의

+ +

getter 메서드는 특정 속성의 값을 받아 오기 위한 메서드 입니다. setter메서드는 특정 속성의 값을 설정하기 위한 메서드 입니다. 새로운 속성을 추가 하기 위해 getter와 setter 메서드들을 미리 정의된 객체 혹은 사용자 정의 객체에 정의 하 수 있습니다.  getter와 setter메서드들을 정의 하기 위한 문법은 객체 구문 문법을 사용합니다.

+ +

자바스크립트 1.8.1버전부터, 객체와 배열 초기화에서 속성들을 설정하고자 할 경우 setter메서드들은 더이상 사용이 불가합니다.

+ +

다음의 JS 쉘은 getter와 setter메서드들이 사용자 정의객체인 o에서 어떻게 작동하는지를 보여 줍니다. JS쉘은 개발자가 배치 모드 혹은 대화형 모드에서 자바스크립트 코드를 테스트하기위한 하나의 어플리케이션입니다. 

+ +
js> var o = {a: 7, get b() {return this.a + 1;}, set c(x) {this.a = x / 2}};
+[object Object]
+js> o.a;
+7
+js> o.b;
+8
+js> o.c = 50;
+js> o.a;
+25
+
+ +

o 객체의 속성이 다음과 같을 때,

+ + + +

[gs]et 속성명()  문법이 실제 사용되는 메서드명이라고 생각이 될지라도, "[gs]et 속성명()" 문법(__define[GS]etter__와는 반대로)을 사용한 객체 구문 문법으로 정의된 getter와 setter메서드들의 이름들은 실제 getter 메서드들의 이름이 아니라는 점에 유의 하세요.  "[gs]et 속성명()" 문법을 사용하여 getter, setter메서드내의 함수명을 작성하기 위해서는, Object.defineProperty (혹은 Object.prototype.__defineGetter__ 레거시 콜백)을 사용하여 프로그램적으로 분명한 이름의 함수명을 사용하세요. 

+ +

아래의 자바스크립트 쉡은 이미 정의된 Date 클래스의 모든 인스턴스들에 년도 속성을 추가 하기 위해 getter와 setter 메서드들이 Date 프로토타입을 확장하는 방법을 보여 줍니다. 

+ +

아래의 구문들은 년도 속성 추가를 위한 getter와 setter메서드를 정의합니다:

+ +
js> var d = Date.prototype;
+js> Object.defineProperty(d, "year", {
+    get: function() {return this.getFullYear() },
+    set: function(y) { this.setFullYear(y) }
+});
+
+ +

아래의 구문들은 Date객체에서 getter와 setter메서드를 사용하는 법을 보여 줍니다:

+ +
js> var now = new Date;
+js> print(now.year);
+2000
+js> now.year = 2001;
+987617605170
+js> print(now);
+Wed Apr 18 11:13:25 GMT-0700 (Pacific Daylight Time) 2001
+
+
+ +

원칙적으로, getter와 setter는 둘 중 하나가 될 수 있다.

+ + + +

object initializers를 사용해서 getter와 setter메서드들을 정의할 경우, getter메서드는 get, setter메서드는 set이라는 접두사만 추가하면 됩니다. 물론 getter메서드는 인자를 받지 않는 반면, setter 메서드는 정확히 하나의 인자(설정할 새로운 값)만을 받습니다. 

+ +
var o = {
+  a: 7,
+  get b() { return this.a + 1; },
+  set c(x) { this.a = x / 2; }
+};
+
+ +

Object.defineProperties 메서드를 사용하면 객체 생성이후라도 언제든지 getter and setter메서드들을 객체에 추가할 수 있습니다. Object.defineProperties 메서드의 첫번째 인자는 getter and setter메서드들을 추가할 객체이고, 두번째 인자는 getter and setter메서드들의 이름과 getter and setter메서드들의 정의를 가지고 있는 객체가 되어야 합니다. 이전 예제와 동일하게 사용된 getter and setter메서드들을 정의하고 있는 예제는 아래와 같습니다:

+ +
var o = { a:0 }
+
+Object.defineProperties(o, {
+    "b": { get: function () { return this.a + 1; } },
+    "c": { set: function (x) { this.a = x / 2; } }
+});
+
+o.c = 10 // Runs the setter, which assigns 10 / 2 (5) to the 'a' property
+console.log(o.b) // Runs the getter, which yields a + 1 or 6
+
+ +

당신의 프로그래밍 스타일과 현재 진행 중인 작업에 따라 getter and setter메서드들을 정의할 수 있는 두가지 양식 중 하나를 선택하여 사용할 수 있습니다. prototype을 정의 할때 object initializer를 사용했다면 앞으로도 대부분 첫번째 양식을 선택 하여 작성을 할 것입니다. 이 양식이 보다 간결하고 자연스럽기 때문입니다. 하지만 prototype 혹은 특정 객체를 작성하지 않고서 나중에 getter and setter 메서드를 추가하고자 한다면 두번째 양식만이 가능한 선택입니다.  두번째 양식은 아마도 자바스크립트의 동적 속성을 가장 잘 나타내고 있습니다. 하지만 코드 작성과 읽고 이해하는 부분에 어려움이 있습니다. 

+ +
+

Firefox 3.0 이전 버전의 경우, getter and setter 메서드들은 DOM 요소들에는 지원되지 않습니다. 이전 버전의 Firefox에서는 아무런 에러 없이 작동하지 않을 것입니다. 이것에 대한 예외가 필요하다면, HTMLElement의 prototype(HTMLElement.prototype.__define[SG]etter__)을 변경하고 예외를 던지는 것이 하나의 방법입니다.

+ +

Firefox 3.0 버전에서는 이미 정의된 속서에 대해 getter or setter를 정의 할 경우 예외가 발생됩니다. 이전 버전의 Firefox에서는 아니지만 해당 속성을 반드시 사전에 제거해야만 합니다. 

+
+ +

추가로 볼 것들 

+ + + +

프로퍼티의 삭제

+ +

상속 받지 않은 속성은 delete 연산자를 이용하여 제거 할 수 있다. 다음 코드는 어떻게 속성을 제거하는지 보여준다.

+ +
// 새 객체 myobj를 두 개의 속성 a, b 와 함께 생성
+var myobj = new Object;
+myobj.a = 5;
+myobj.b = 12;
+
+// 속성을 삭제. myobj 에는 속성 b 만 남게 됨.
+delete myobj.a;
+console.log ("a" in myobj) // "false"를 출력
+
+ +

var 키워드로 선언하지 않은 전역 변수도 delete를 이용하여 삭제를 할 수 있다:

+ +
g = 17;
+delete g;
+
+ +

더 자세한 정보는 delete를 보면 된다.

+ +

객체 간의 비교

+ +

JavaScript 에서는 객체들은 레퍼런스 타입이다. 두 개의 별개 객체들은, 설령 그 속성 값들이 모두 다 동일하다고 하더라도, 절대로 동일하다고 비교(equal)될 수 없다. In JavaScript objects are a reference type. Two distinct objects are never equal, even if they have the same properties. Only comparing the same object reference with itself yields true.

+ +
// 속성은 같지만 서로 별개인 두 변수와 두 객체
+var fruit = {name: "apple"};
+var fruitbear = {name: "apple"};
+
+fruit == fruitbear // false 리턴
+fruit === fruitbear // false 리턴
+ +
// 두 개의 변수이지만 하나의 객체
+var fruit = {name: "apple"};
+var fruitbear = fruit;  // fruit 객체 레퍼런스를 fruitbear 에 할당
+
+// here fruit and fruitbear are pointing to same object
+fruit == fruitbear // true 리턴
+fruit === fruitbear // true 리턴
+
+ +

비교 연산자에 대한 상세한 정보는 Comparison operators를 참고하기 바란다.

+ +

추가 검토

+ + + +
{{PreviousNext("Web/JavaScript/Guide/Regular_Expressions", "Web/JavaScript/Guide/Details_of_the_Object_Model")}}
diff --git a/files/ko/web/javascript/reference/global_objects/array/index.html b/files/ko/web/javascript/reference/global_objects/array/index.html deleted file mode 100644 index 11b705304c..0000000000 --- a/files/ko/web/javascript/reference/global_objects/array/index.html +++ /dev/null @@ -1,483 +0,0 @@ ---- -title: Array -slug: Web/JavaScript/Reference/Global_Objects/Array -tags: - - Array - - Example - - Global Objects - - JavaScript - - Reference -translation_of: Web/JavaScript/Reference/Global_Objects/Array -browser-compat: javascript.builtins.Array ---- -
{{JSRef}}
- -

JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.

- -

설명

- -

배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.

- -

배열은 요소 인덱스로 문자열(연관 배열)을 사용할 수 없으며 무조건 정수만 허용합니다. 속성 접근자를 사용해 정수 외 키에 접근할 경우 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수합니다. 배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로, 순회 및 변형 작업은 객체 속성에 적용되지 않습니다.

- -

자주 사용하는 연산

- -

배열 만들기

- -
let fruits = ['사과', '바나나']
-
-console.log(fruits.length)
-// 2
-
- -

인덱스로 배열의 항목에 접근하기

- -
let first = fruits[0]
-// 사과
-
-let last = fruits[fruits.length - 1]
-// 바나나
-
- -

배열의 항목들을 순환하며 처리하기

- -
fruits.forEach(function (item, index, array) {
-  console.log(item, index)
-})
-// 사과 0
-// 바나나 1
-
- -

배열 끝에 항목 추가하기

- -
let newLength = fruits.push('오렌지')
-// ["사과", "바나나", "오렌지"]
-
- -

배열 끝에서부터 항목 제거하기

- -
let last = fruits.pop() // 끝에있던 '오렌지'를 제거
-// ["사과", "바나나"]
-
- -

배열 앞에서부터 항목 제거하기

- -
let first = fruits.shift() // 제일 앞의 '사과'를 제거
-// ["바나나"]
-
- -

배열 앞에 항목 추가하기

- -
let newLength = fruits.unshift('딸기') // 앞에 추가
-// ["딸기", "바나나"]
-
- -

배열 안 항목의 인덱스 찾기

- -
fruits.push('망고')
-// ["딸기", "바나나", "망고"]
-
-let pos = fruits.indexOf("바나나")
-// 1
-
- -

인덱스 위치에 있는 항목 제거하기

- -
let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법
-
-// ["딸기", "망고"]
-
- -

인덱스 위치에서부터 여러개의 항목 제거하기

- -
let vegetables = ['양배추', '순무', '무', '당근']
-console.log(vegetables)
-// ["양배추", "순무", "무", "당근"]
-
-let pos = 1
-let n = 2
-
-let removedItems = vegetables.splice(pos, n)
-// 배열에서 항목을 제거하는 방법
-// pos 인덱스부터 n개의 항목을 제거함
-
-console.log(vegetables)
-// ["양배추", "당근"] (원 배열 vegetables의 값이 변함)
-
-console.log(removedItems)
-// ["순무", "무"]
-
- -

배열 복사하기

- -
let shallowCopy = fruits.slice() // 사본을 만드는 방법
-// ["딸기", "망고"]
-
- -

배열 요소에 접근하기

- -

JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 {{jsxref("Array.length", "length")}} 속성에서 1을 뺀 것과 같습니다.

- -

잘못된 인덱스를 사용하면 undefined를 반환합니다.

- -
let arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다']
-console.log(arr[0])              // '첫 번재 요소입니다'를 기록
-console.log(arr[1])              // '두 번재 요소입니다'를 기록
-console.log(arr[arr.length - 1]) // '마지막 요소입니다'를 기록
-
- -

toString이 속성인 것과 마찬가지로(정확히 하자면, toString()은 메서드입니다) 배열의 요소도 속성입니다. 하지만 아래의 예시처럼 배열 요소에 접근하려 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.

- -
console.log(arr.0) // 구문 오류
-
- -

이 점에는 JavaScript 배열과 속성에 특별한 점이 없습니다. 숫자로 시작하는 JavaScript 속성은 마침표 구문으로 접근할 수 없으며, 반드시 괄호 표기법으로 접근해야 합니다.

- -

예를 들어 '3d'라는 이름의 속성을 가진 객체에서 해당 속성에 접근할 땐 괄호 표기법을 사용해야만 합니다.

- -
let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
-console.log(years.0)   // 구문 오류
-console.log(years[0])  // 정상 작동
-
- -
renderer.3d.setTexture(model, 'character.png')     // 구문 오류
-renderer['3d'].setTexture(model, 'character.png')  // 정상 작동
-
- -

3d 예시에서 '3d'를 따옴표로 감싸야 함에 유의하세요. JavaScript 배열 인덱스도 따옴표로 둘러쌀 수는 있지만(years[2] 대신에 years['2']처럼), 굳이 필요하지는 않습니다.

- -

years[2]의 2는 JavaScript 엔진이 암시적인 toString 변환을 사용해 문자열로 변환합니다. 그 결과로서 '2'와 '02'는 years 객체에서 서로 다른 칸을 가리키며, 다음 코드는 true가 될 수 있습니다.

- -
console.log(years['2'] != years['02']);
-
- -

length 와 숫자형 속성의 관계

- -

JavaScript 배열의 {{jsxref("Array.length", "length")}} 속성과 숫자형 속성은 연결되어 있습니다.

- -

몇몇 배열 내장 메서드({{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} 등)은 호출했을 때 배열의 {{jsxref("Array.length", "length")}} 속성의 값을 참조합니다.

- -

다른 메서드({{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} 등) 또한 배열의 {{jsxref("Array.length", "length")}} 속성의 업데이트를 유발합니다.

- -
const fruits = []
-fruits.push('banana', 'apple', 'peach')
-
-console.log(fruits.length) // 3
-
- -

JavaScript 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계를 넘어간다면, JavaScript 엔진은 배열의 {{jsxref("Array.length", "length")}} 속성을 그에 맞춰 업데이트 합니다.

- -
fruits[5] = 'mango'
-console.log(fruits[5])           // 'mango'
-console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
-console.log(fruits.length)       // 6
-
- -

{{jsxref("Array.length", "length")}}를 직접 늘릴 수 있습니다.

- -
fruits.length = 10;
-console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
-console.log(fruits.length); // 10
-
- -

하지만, {{jsxref("Array.length", "length")}} 속성을 감소시키면 요소를 지웁니다.

- -
fruits.length = 2
-console.log(Object.keys(fruits)) // ['0', '1']
-console.log(fruits.length)       // 2
-
- -

{{jsxref("Array.length")}} 문서에 더 자세한 설명이 있습니다.

- -

매치 결과를 이용한 배열 생성

- -

정규표현식과 문자열 사이의 매치 결과로 JavaScript 배열을 만들 수 있습니다. 이 배열은 매치에 대한 정보를 제공하는 속성들과 요소들을 가집니다. 이러한 배열은 {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, {{jsxref("String.replace")}}로부터 반환됩니다. 이 속성들과 요소들에 대한 설명을 돕기위해, 다음 예제를 보고 아래 테이블을 참조해주세요.

- -
// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 합니다.
-// 일치한 b와 다음 d를 기억하십시오.
-// 대소문자 구분은 무시됩니다.
-
-var myRe = /d(b+)(d)/i;
-var myArray = myRe.exec('cdbBdbsbz');
-
- -

매치로부터 반환되는 속성들과 요소들은 다음과 같습니다:

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
속성/요소설명예시
input {{ReadOnlyInline}}정규 표현식과 일치시키는 원본 문자열을 나타내는 읽기 전용 속성입니다."cdbBdbsbz"
index {{ReadOnlyInline}}원본 문자열에서 정규 표현식이 처음 일치하는 문자열의 위치(원본 문자열의 첫 문자 위치를 0으로 하는)를 나타내는 읽기 전용 속성입니다.1
[0] {{ReadOnlyInline}}원본 문자열에서 정규 표현식이 처음 일치하는 문자열을 지정하는 읽기 전용 요소입니다."dbBd"
[1], ...[n] {{ReadOnlyInline}}만약 정규 표현식에 괄호가 포함돼 있다면 괄호에 일치하는 부분 문자열을 나타내는 읽기 전용 요소들입니다. 가능한 괄호 안의 부분 문자열의 수는 무제한입니다.[1]: bB
- [2]: d
- -

생성자

- -
-
{{jsxref("Array.Array", "Array()")}}
-
Array 객체를 생성합니다.
-
- -

정적 속성

- -
-
Array.length
-
값이 1인 Array 생성자의 길이 속성입니다.
-
{{jsxref("Array.@@species", "get Array[@@species]")}}
-
파생 객체를 생성하는데 사용하는 생성자 함수입니다.
-
- -

정적 메서드

- -
-
{{jsxref("Array.from()")}}
-
유사 배열 또는 반복 가능한 객체로부터 새로운 Array 인스턴스를 생성합니다.
-
{{jsxref("Array.isArray()")}}
-
만약 변수가 배열이면 참을, 아니면 거짓을 반환합니다.
-
{{jsxref("Array.of()")}}
-
전달인자의 개수나 데이터 타입에 관계없이 새 Array 인스턴스를 생성합니다.
-
- -

Array 인스턴스

- -

모든 Array 인스턴스는 Array.prototype을 상속합니다. 다른 생성자와 마찬가지로, Array() 생성자의 프로토타입을 수정하면 모든 Array 인스턴스도 수정의 영향을 받습니다. 예를 들면, 새로운 메서드와 속성을 추가해 모든 Array를 확장할 수 있으므로, {{glossary("polyfill", "폴리필")}}에 쓰입니다.

- -

그러나 배열 객체에 비표준 메서드를 추가하면 나중에 스스로, 혹은 JavaScript에 기능이 추가될 경우 문제가 될 수 있습니다.

- -

잘 모를 법한 사실: Array.prototype은 그 스스로 Array입니다.

- -
Array.isArray(Array.prototype) // true
- -

인스턴스 속성

- -
-
-
Array.prototype.constructor
-
객체의 프로토타입을 생성하는 함수를 지정합니다.
-
{{jsxref("Array.prototype.length")}}
-
배열의 원소 수를 나타냅니다.
-
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
-
{{jsxref("Statements/with", "with")}} 결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.
-
-
- -

인스턴스 메서드

- -

변경자 메서드

- -
-

변경자 메서드는 배열을 수정합니다.

- -
-
{{jsxref("Array.prototype.copyWithin()")}}
-
배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.
-
{{jsxref("Array.prototype.fill()")}}
-
배열 안의 시작 인덱스부터 끝 인덱스까지의 요소값을 지정된 정적 값으로 채웁니다.
-
{{jsxref("Array.prototype.pop()")}}
-
배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.
-
{{jsxref("Array.prototype.push()")}}
-
배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.
-
{{jsxref("Array.prototype.reverse()")}}
-
배열의 요소 순서를 반전시킵니다. 첫 번째가 마지막이 되고 마지막이 첫 번째가 됩니다.
-
{{jsxref("Array.prototype.shift()")}}
-
배열에서 첫 번째 요소를 삭제하고 그 요소를 반환합니다.
-
{{jsxref("Array.prototype.sort()")}}
-
배열의 요소를 정렬하고 그 배열을 반환합니다.
-
{{jsxref("Array.prototype.splice()")}}
-
배열에서 요소를 추가/삭제합니다.
-
{{jsxref("Array.prototype.unshift()")}}
-
배열의 앞에 하나 이상의 요소를 추가하고 새로운 길이를 반환합니다.
-
-
- -

접근자 메서드

- -
-

접근자 메서드는 배열을 수정하지 않고, 기존 배열의 일부에 기반한 새로운 배열 또는 값을 반환합니다.

- -
-
{{jsxref("Array.prototype.at()")}}
-
주어진 인덱스의 요소를 반환합니다. 음수 값을 지정할 경우 인덱스를 배열의 끝부터 셉니다.
-
{{jsxref("Array.prototype.concat()")}}
-
배열을 매개변수로 주어진 배열/값과 이어붙인 새로운 배열을 반환합니다.
-
{{jsxref("Array.prototype.filter()")}}
-
지정한 콜백의 반환 결과가 true인 요소만 모은 새로운 배열을 반환합니다.
-
{{jsxref("Array.prototype.includes()")}}
-
배열이 주어진 값을 포함하는지 판별해 true 또는 false를 반환합니다.
-
{{jsxref("Array.prototype.indexOf()")}}
-
배열에서 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 -1을 반환합니다.
-
{{jsxref("Array.prototype.join()")}}
-
배열의 모든 요소를 문자열로 합칩니다.
-
{{jsxref("Array.prototype.lastIndexOf()")}}
-
배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환합니다. 없으면 -1을 반환합니다.
-
{{jsxref("Array.prototype.slice()")}}
-
배열의 일부를 추출한 새 배열을 반환합니다.
-
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
-
지정한 배열을 나타내는 배열 리터럴을 반환합니다. 새로운 배열을 만들기 위해 이 값을 사용할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.
-
{{jsxref("Array.prototype.toString()")}}
-
배열과 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.
-
{{jsxref("Array.prototype.toLocaleString()")}}
-
배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.
-
-
- -

순회 메서드

- -

배열을 처리하면서 호출할 콜백 함수를 받는 메서드 여럿이 존재합니다. 이런 메서드를 호출하면 배열의 length를 기억하므로, 아직 순회를 끝내지 않았을 때 요소를 더 추가하면 콜백이 방문하지 않습니다.

- -

요소의 값을 바꾸거나, 요소를 제거하는 등 다른 변경점은 콜백 방문 시점에 따라 최종 값에 영향을 줄 수 있습니다. 비록 이런 동작 방식은 잘 정의되어 있으나, 여러분의 코드를 다른 사람이 읽을 때 헷갈리지 않도록 여기에 의존하면 안됩니다.

- -

반드시 배열을 변형해야 한다면, 새로운 배열로 복사하세요.

- -
-
-
{{jsxref("Array.prototype.entries()")}}
-
배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 배열 반복자 객체를 반환합니다.
-
{{jsxref("Array.prototype.every()")}}
-
배열의 모든 요소가 주어진 판별 콜백을 만족할 경우 true를 반환합니다.
-
{{jsxref("Array.prototype.find()")}}
-
주어진 판별 콜백을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 undefined를 반환합니다.
-
{{jsxref("Array.prototype.findIndex()")}}
-
주어진 판별 콜백을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1를 반환합니다.
-
{{jsxref("Array.prototype.forEach()")}}
-
배열의 각각의 요소에 대해 콜백을 호출합니다.
-
{{jsxref("Array.prototype.keys()")}}
-
배열의 각 인덱스에 대한 키를 가지는 새로운 배열 반복자 객체를 반환합니다.
-
{{jsxref("Array.prototype.map()")}}
-
배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환합니다.
-
{{jsxref("Array.prototype.reduce()")}}
-
주어진 콜백 함수를 가산기와 요소 각각에 대해 왼쪽에서 오른쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.
-
{{jsxref("Array.prototype.reduceRight()")}}
-
주어진 콜백 함수를 가산기와 요소 각각에 대해 오른쪽에서 왼쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.
-
{{jsxref("Array.prototype.some()")}}
-
배열의 어떤 요소가 주어진 판별 콜백을 만족할 경우 true를 반환합니다.
-
{{jsxref("Array.prototype.values()")}}
-
배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.
-
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
-
배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.
-
-
- -

예제

- -

배열 생성

- -

아래 예제는 길이 0의 배열 msgArray 을 생성하고, msgArray[0] 와 msgArray[99] 에 값을 할당하여, 배열의 길이를 100으로 변경합니다.

- -
let msgArray = []
-msgArray[0] = 'Hello'
-msgArray[99] = 'world'
-
-if (msgArray.length === 100) {
-  console.log('The length is 100.')
-}
- -

2차원 배열 생성

- -

아래의 예제는 2차원 문자열 배열로 체스보드를 생성합니다. 첫번째 이동은 (6,4)의 'p'를 (4,4)로 복사하여 이루어집니다. 이전 위치 (6,4)는 빈공간으로 만듭니다.

- -
let board = [
-  ['R','N','B','Q','K','B','N','R'],
-  ['P','P','P','P','P','P','P','P'],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  [' ',' ',' ',' ',' ',' ',' ',' '],
-  ['p','p','p','p','p','p','p','p'],
-  ['r','n','b','q','k','b','n','r'] ]
-
-console.log(board.join('\n') + '\n\n')
-
-// Move King's Pawn forward 2
-board[4][4] = board[6][4]
-board[6][4] = ' '
-console.log(board.join('\n'))
- -

결과는 다음과 같습니다.

- -
R,N,B,Q,K,B,N,R
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
- , , , , , , ,
-p,p,p,p,p,p,p,p
-r,n,b,q,k,b,n,r
-
-R,N,B,Q,K,B,N,R
-P,P,P,P,P,P,P,P
- , , , , , , ,
- , , , , , , ,
- , , , ,p, , ,
- , , , , , , ,
-p,p,p,p, ,p,p,p
-r,n,b,q,k,b,n,r
-
- -

배열을 사용하여 일련의 값을 테이블처럼 표시하기

- -
const values = []
-for (let x = 0; x < 10; x++){
- values.push([
-  2 ** x,
-  2 * x ** 2
- ])
-}
-console.table(values)
- -

결과는 다음과 같습니다.

- -
0    1    0
-1    2    2
-2    4    8
-3    8    18
-4    16    32
-5    32    50
-6    64    72
-7    128    98
-8    256    128
-9    512    162
-
- -

(첫번째 열은 (인덱스))

- -

명세

- -{{Specifications}} - -

브라우저 호환성

- -

{{Compat}}

- -

같이 보기

- - diff --git a/files/ko/web/javascript/reference/global_objects/array/index.md b/files/ko/web/javascript/reference/global_objects/array/index.md new file mode 100644 index 0000000000..11b705304c --- /dev/null +++ b/files/ko/web/javascript/reference/global_objects/array/index.md @@ -0,0 +1,483 @@ +--- +title: Array +slug: Web/JavaScript/Reference/Global_Objects/Array +tags: + - Array + - Example + - Global Objects + - JavaScript + - Reference +translation_of: Web/JavaScript/Reference/Global_Objects/Array +browser-compat: javascript.builtins.Array +--- +
{{JSRef}}
+ +

JavaScript Array 전역 객체는 배열을 생성할 때 사용하는 리스트 형태의 고수준 객체입니다.

+ +

설명

+ +

배열은 프로토타입으로 탐색과 변형 작업을 수행하는 메서드를 갖는, 리스트와 비슷한 객체입니다. JavaScript에서 배열의 길이와 요소의 자료형은 고정되어 있지 않습니다. 배열의 길이가 언제든지 늘어나거나 줄어들 수 있기 때문에 JavaScript 배열들은 밀집도가 보장되지 않습니다. 보통 이 성질은 편리하지만, 목적에 맞지 않는다면 형식화 배열(typed array)을 사용하는 것을 고려해보세요.

+ +

배열은 요소 인덱스로 문자열(연관 배열)을 사용할 수 없으며 무조건 정수만 허용합니다. 속성 접근자를 사용해 정수 외 키에 접근할 경우 배열 리스트의 요소가 아니라 배열 객체의 속성 변수를 설정하거나 회수합니다. 배열 객체의 속성과 배열 요소의 리스트의 요소는 서로 다른 별개의 항목으로, 순회 및 변형 작업은 객체 속성에 적용되지 않습니다.

+ +

자주 사용하는 연산

+ +

배열 만들기

+ +
let fruits = ['사과', '바나나']
+
+console.log(fruits.length)
+// 2
+
+ +

인덱스로 배열의 항목에 접근하기

+ +
let first = fruits[0]
+// 사과
+
+let last = fruits[fruits.length - 1]
+// 바나나
+
+ +

배열의 항목들을 순환하며 처리하기

+ +
fruits.forEach(function (item, index, array) {
+  console.log(item, index)
+})
+// 사과 0
+// 바나나 1
+
+ +

배열 끝에 항목 추가하기

+ +
let newLength = fruits.push('오렌지')
+// ["사과", "바나나", "오렌지"]
+
+ +

배열 끝에서부터 항목 제거하기

+ +
let last = fruits.pop() // 끝에있던 '오렌지'를 제거
+// ["사과", "바나나"]
+
+ +

배열 앞에서부터 항목 제거하기

+ +
let first = fruits.shift() // 제일 앞의 '사과'를 제거
+// ["바나나"]
+
+ +

배열 앞에 항목 추가하기

+ +
let newLength = fruits.unshift('딸기') // 앞에 추가
+// ["딸기", "바나나"]
+
+ +

배열 안 항목의 인덱스 찾기

+ +
fruits.push('망고')
+// ["딸기", "바나나", "망고"]
+
+let pos = fruits.indexOf("바나나")
+// 1
+
+ +

인덱스 위치에 있는 항목 제거하기

+ +
let removedItem = fruits.splice(pos, 1) // 항목을 제거하는 방법
+
+// ["딸기", "망고"]
+
+ +

인덱스 위치에서부터 여러개의 항목 제거하기

+ +
let vegetables = ['양배추', '순무', '무', '당근']
+console.log(vegetables)
+// ["양배추", "순무", "무", "당근"]
+
+let pos = 1
+let n = 2
+
+let removedItems = vegetables.splice(pos, n)
+// 배열에서 항목을 제거하는 방법
+// pos 인덱스부터 n개의 항목을 제거함
+
+console.log(vegetables)
+// ["양배추", "당근"] (원 배열 vegetables의 값이 변함)
+
+console.log(removedItems)
+// ["순무", "무"]
+
+ +

배열 복사하기

+ +
let shallowCopy = fruits.slice() // 사본을 만드는 방법
+// ["딸기", "망고"]
+
+ +

배열 요소에 접근하기

+ +

JavaScript 배열의 인덱스는 0부터 시작합니다. 즉, 배열 첫 번째 요소의 인덱스는 0이고, 마지막 요소의 인덱스는 배열의 {{jsxref("Array.length", "length")}} 속성에서 1을 뺀 것과 같습니다.

+ +

잘못된 인덱스를 사용하면 undefined를 반환합니다.

+ +
let arr = ['첫 번재 요소입니다', '두 번째 요소입니다', '마지막 요소입니다']
+console.log(arr[0])              // '첫 번재 요소입니다'를 기록
+console.log(arr[1])              // '두 번재 요소입니다'를 기록
+console.log(arr[arr.length - 1]) // '마지막 요소입니다'를 기록
+
+ +

toString이 속성인 것과 마찬가지로(정확히 하자면, toString()은 메서드입니다) 배열의 요소도 속성입니다. 하지만 아래의 예시처럼 배열 요소에 접근하려 하면, 속성 이름이 유효하지 않기 때문에 구문 오류가 발생합니다.

+ +
console.log(arr.0) // 구문 오류
+
+ +

이 점에는 JavaScript 배열과 속성에 특별한 점이 없습니다. 숫자로 시작하는 JavaScript 속성은 마침표 구문으로 접근할 수 없으며, 반드시 괄호 표기법으로 접근해야 합니다.

+ +

예를 들어 '3d'라는 이름의 속성을 가진 객체에서 해당 속성에 접근할 땐 괄호 표기법을 사용해야만 합니다.

+ +
let years = [1950, 1960, 1970, 1980, 1990, 2000, 2010]
+console.log(years.0)   // 구문 오류
+console.log(years[0])  // 정상 작동
+
+ +
renderer.3d.setTexture(model, 'character.png')     // 구문 오류
+renderer['3d'].setTexture(model, 'character.png')  // 정상 작동
+
+ +

3d 예시에서 '3d'를 따옴표로 감싸야 함에 유의하세요. JavaScript 배열 인덱스도 따옴표로 둘러쌀 수는 있지만(years[2] 대신에 years['2']처럼), 굳이 필요하지는 않습니다.

+ +

years[2]의 2는 JavaScript 엔진이 암시적인 toString 변환을 사용해 문자열로 변환합니다. 그 결과로서 '2'와 '02'는 years 객체에서 서로 다른 칸을 가리키며, 다음 코드는 true가 될 수 있습니다.

+ +
console.log(years['2'] != years['02']);
+
+ +

length 와 숫자형 속성의 관계

+ +

JavaScript 배열의 {{jsxref("Array.length", "length")}} 속성과 숫자형 속성은 연결되어 있습니다.

+ +

몇몇 배열 내장 메서드({{jsxref("Array.join", "join")}}, {{jsxref("Array.slice", "slice")}}, {{jsxref("Array.indexOf", "indexOf")}} 등)은 호출했을 때 배열의 {{jsxref("Array.length", "length")}} 속성의 값을 참조합니다.

+ +

다른 메서드({{jsxref("Array.push", "push")}}, {{jsxref("Array.splice", "splice")}} 등) 또한 배열의 {{jsxref("Array.length", "length")}} 속성의 업데이트를 유발합니다.

+ +
const fruits = []
+fruits.push('banana', 'apple', 'peach')
+
+console.log(fruits.length) // 3
+
+ +

JavaScript 배열의 속성을 설정할 때 그 속성이 유효한 배열 인덱스이고 그 인덱스가 현재 배열의 경계를 넘어간다면, JavaScript 엔진은 배열의 {{jsxref("Array.length", "length")}} 속성을 그에 맞춰 업데이트 합니다.

+ +
fruits[5] = 'mango'
+console.log(fruits[5])           // 'mango'
+console.log(Object.keys(fruits)) // ['0', '1', '2', '5']
+console.log(fruits.length)       // 6
+
+ +

{{jsxref("Array.length", "length")}}를 직접 늘릴 수 있습니다.

+ +
fruits.length = 10;
+console.log(Object.keys(fruits)); // ['0', '1', '2', '5']
+console.log(fruits.length); // 10
+
+ +

하지만, {{jsxref("Array.length", "length")}} 속성을 감소시키면 요소를 지웁니다.

+ +
fruits.length = 2
+console.log(Object.keys(fruits)) // ['0', '1']
+console.log(fruits.length)       // 2
+
+ +

{{jsxref("Array.length")}} 문서에 더 자세한 설명이 있습니다.

+ +

매치 결과를 이용한 배열 생성

+ +

정규표현식과 문자열 사이의 매치 결과로 JavaScript 배열을 만들 수 있습니다. 이 배열은 매치에 대한 정보를 제공하는 속성들과 요소들을 가집니다. 이러한 배열은 {{jsxref("RegExp.exec")}}, {{jsxref("String.match")}}, {{jsxref("String.replace")}}로부터 반환됩니다. 이 속성들과 요소들에 대한 설명을 돕기위해, 다음 예제를 보고 아래 테이블을 참조해주세요.

+ +
// 하나의 d와 하나 이상의 b에 하나의 d가 뒤따라 일치해야 합니다.
+// 일치한 b와 다음 d를 기억하십시오.
+// 대소문자 구분은 무시됩니다.
+
+var myRe = /d(b+)(d)/i;
+var myArray = myRe.exec('cdbBdbsbz');
+
+ +

매치로부터 반환되는 속성들과 요소들은 다음과 같습니다:

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
속성/요소설명예시
input {{ReadOnlyInline}}정규 표현식과 일치시키는 원본 문자열을 나타내는 읽기 전용 속성입니다."cdbBdbsbz"
index {{ReadOnlyInline}}원본 문자열에서 정규 표현식이 처음 일치하는 문자열의 위치(원본 문자열의 첫 문자 위치를 0으로 하는)를 나타내는 읽기 전용 속성입니다.1
[0] {{ReadOnlyInline}}원본 문자열에서 정규 표현식이 처음 일치하는 문자열을 지정하는 읽기 전용 요소입니다."dbBd"
[1], ...[n] {{ReadOnlyInline}}만약 정규 표현식에 괄호가 포함돼 있다면 괄호에 일치하는 부분 문자열을 나타내는 읽기 전용 요소들입니다. 가능한 괄호 안의 부분 문자열의 수는 무제한입니다.[1]: bB
+ [2]: d
+ +

생성자

+ +
+
{{jsxref("Array.Array", "Array()")}}
+
Array 객체를 생성합니다.
+
+ +

정적 속성

+ +
+
Array.length
+
값이 1인 Array 생성자의 길이 속성입니다.
+
{{jsxref("Array.@@species", "get Array[@@species]")}}
+
파생 객체를 생성하는데 사용하는 생성자 함수입니다.
+
+ +

정적 메서드

+ +
+
{{jsxref("Array.from()")}}
+
유사 배열 또는 반복 가능한 객체로부터 새로운 Array 인스턴스를 생성합니다.
+
{{jsxref("Array.isArray()")}}
+
만약 변수가 배열이면 참을, 아니면 거짓을 반환합니다.
+
{{jsxref("Array.of()")}}
+
전달인자의 개수나 데이터 타입에 관계없이 새 Array 인스턴스를 생성합니다.
+
+ +

Array 인스턴스

+ +

모든 Array 인스턴스는 Array.prototype을 상속합니다. 다른 생성자와 마찬가지로, Array() 생성자의 프로토타입을 수정하면 모든 Array 인스턴스도 수정의 영향을 받습니다. 예를 들면, 새로운 메서드와 속성을 추가해 모든 Array를 확장할 수 있으므로, {{glossary("polyfill", "폴리필")}}에 쓰입니다.

+ +

그러나 배열 객체에 비표준 메서드를 추가하면 나중에 스스로, 혹은 JavaScript에 기능이 추가될 경우 문제가 될 수 있습니다.

+ +

잘 모를 법한 사실: Array.prototype은 그 스스로 Array입니다.

+ +
Array.isArray(Array.prototype) // true
+ +

인스턴스 속성

+ +
+
+
Array.prototype.constructor
+
객체의 프로토타입을 생성하는 함수를 지정합니다.
+
{{jsxref("Array.prototype.length")}}
+
배열의 원소 수를 나타냅니다.
+
{{jsxref("Array.@@unscopables", "Array.prototype[@@unscopables]")}}
+
{{jsxref("Statements/with", "with")}} 결속 범위로부터 제외하려는 속성 이름이 들어있는 기호입니다.
+
+
+ +

인스턴스 메서드

+ +

변경자 메서드

+ +
+

변경자 메서드는 배열을 수정합니다.

+ +
+
{{jsxref("Array.prototype.copyWithin()")}}
+
배열 내의 지정된 요소들을 동일한 배열 내에서 복사합니다.
+
{{jsxref("Array.prototype.fill()")}}
+
배열 안의 시작 인덱스부터 끝 인덱스까지의 요소값을 지정된 정적 값으로 채웁니다.
+
{{jsxref("Array.prototype.pop()")}}
+
배열에서 마지막 요소를 뽑아내고, 그 요소를 반환합니다.
+
{{jsxref("Array.prototype.push()")}}
+
배열의 끝에 하나 이상의 요소를 추가하고, 변경된 배열의 길이를 반환합니다.
+
{{jsxref("Array.prototype.reverse()")}}
+
배열의 요소 순서를 반전시킵니다. 첫 번째가 마지막이 되고 마지막이 첫 번째가 됩니다.
+
{{jsxref("Array.prototype.shift()")}}
+
배열에서 첫 번째 요소를 삭제하고 그 요소를 반환합니다.
+
{{jsxref("Array.prototype.sort()")}}
+
배열의 요소를 정렬하고 그 배열을 반환합니다.
+
{{jsxref("Array.prototype.splice()")}}
+
배열에서 요소를 추가/삭제합니다.
+
{{jsxref("Array.prototype.unshift()")}}
+
배열의 앞에 하나 이상의 요소를 추가하고 새로운 길이를 반환합니다.
+
+
+ +

접근자 메서드

+ +
+

접근자 메서드는 배열을 수정하지 않고, 기존 배열의 일부에 기반한 새로운 배열 또는 값을 반환합니다.

+ +
+
{{jsxref("Array.prototype.at()")}}
+
주어진 인덱스의 요소를 반환합니다. 음수 값을 지정할 경우 인덱스를 배열의 끝부터 셉니다.
+
{{jsxref("Array.prototype.concat()")}}
+
배열을 매개변수로 주어진 배열/값과 이어붙인 새로운 배열을 반환합니다.
+
{{jsxref("Array.prototype.filter()")}}
+
지정한 콜백의 반환 결과가 true인 요소만 모은 새로운 배열을 반환합니다.
+
{{jsxref("Array.prototype.includes()")}}
+
배열이 주어진 값을 포함하는지 판별해 true 또는 false를 반환합니다.
+
{{jsxref("Array.prototype.indexOf()")}}
+
배열에서 주어진 값과 일치하는 제일 앞의 인덱스를 반환합니다. 없으면 -1을 반환합니다.
+
{{jsxref("Array.prototype.join()")}}
+
배열의 모든 요소를 문자열로 합칩니다.
+
{{jsxref("Array.prototype.lastIndexOf()")}}
+
배열에서 주어진 값과 일치하는 제일 뒤의 인덱스를 반환합니다. 없으면 -1을 반환합니다.
+
{{jsxref("Array.prototype.slice()")}}
+
배열의 일부를 추출한 새 배열을 반환합니다.
+
{{jsxref("Array.prototype.toSource()")}} {{non-standard_inline}}
+
지정한 배열을 나타내는 배열 리터럴을 반환합니다. 새로운 배열을 만들기 위해 이 값을 사용할 수 있습니다. {{jsxref("Object.prototype.toSource()")}} 메서드를 재정의합니다.
+
{{jsxref("Array.prototype.toString()")}}
+
배열과 그 요소를 나타내는 문자열을 반환합니다. {{jsxref("Object.prototype.toString()")}} 메서드를 재정의합니다.
+
{{jsxref("Array.prototype.toLocaleString()")}}
+
배열과 그 요소를 나타내는 지역화된 문자열을 반환합니다. {{jsxref("Object.prototype.toLocaleString()")}} 메서드를 재정의합니다.
+
+
+ +

순회 메서드

+ +

배열을 처리하면서 호출할 콜백 함수를 받는 메서드 여럿이 존재합니다. 이런 메서드를 호출하면 배열의 length를 기억하므로, 아직 순회를 끝내지 않았을 때 요소를 더 추가하면 콜백이 방문하지 않습니다.

+ +

요소의 값을 바꾸거나, 요소를 제거하는 등 다른 변경점은 콜백 방문 시점에 따라 최종 값에 영향을 줄 수 있습니다. 비록 이런 동작 방식은 잘 정의되어 있으나, 여러분의 코드를 다른 사람이 읽을 때 헷갈리지 않도록 여기에 의존하면 안됩니다.

+ +

반드시 배열을 변형해야 한다면, 새로운 배열로 복사하세요.

+ +
+
+
{{jsxref("Array.prototype.entries()")}}
+
배열의 각 인덱스에 대한 키/값 쌍을 포함하는 새로운 배열 반복자 객체를 반환합니다.
+
{{jsxref("Array.prototype.every()")}}
+
배열의 모든 요소가 주어진 판별 콜백을 만족할 경우 true를 반환합니다.
+
{{jsxref("Array.prototype.find()")}}
+
주어진 판별 콜백을 만족하는 첫 번째 요소를 반환합니다. 만족하는 요소가 없으면 undefined를 반환합니다.
+
{{jsxref("Array.prototype.findIndex()")}}
+
주어진 판별 콜백을 만족하는 첫 번째 요소의 인덱스를 반환합니다. 만족하는 요소가 없으면 -1를 반환합니다.
+
{{jsxref("Array.prototype.forEach()")}}
+
배열의 각각의 요소에 대해 콜백을 호출합니다.
+
{{jsxref("Array.prototype.keys()")}}
+
배열의 각 인덱스에 대한 키를 가지는 새로운 배열 반복자 객체를 반환합니다.
+
{{jsxref("Array.prototype.map()")}}
+
배열의 모든 요소 각각에 대하여 주어진 콜백 함수를 호출하고, 그 반환값을 모은 새로운 배열을 반환합니다.
+
{{jsxref("Array.prototype.reduce()")}}
+
주어진 콜백 함수를 가산기와 요소 각각에 대해 왼쪽에서 오른쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.
+
{{jsxref("Array.prototype.reduceRight()")}}
+
주어진 콜백 함수를 가산기와 요소 각각에 대해 오른쪽에서 왼쪽으로 호출하여 하나의 값으로 줄인(reduce) 결과를 반환합니다.
+
{{jsxref("Array.prototype.some()")}}
+
배열의 어떤 요소가 주어진 판별 콜백을 만족할 경우 true를 반환합니다.
+
{{jsxref("Array.prototype.values()")}}
+
배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.
+
{{jsxref("Array.prototype.@@iterator()", "Array.prototype[@@iterator]()")}}
+
배열의 각 인덱스에 대한 값을 가지는 새로운 배열 반복자 객체를 반환합니다.
+
+
+ +

예제

+ +

배열 생성

+ +

아래 예제는 길이 0의 배열 msgArray 을 생성하고, msgArray[0] 와 msgArray[99] 에 값을 할당하여, 배열의 길이를 100으로 변경합니다.

+ +
let msgArray = []
+msgArray[0] = 'Hello'
+msgArray[99] = 'world'
+
+if (msgArray.length === 100) {
+  console.log('The length is 100.')
+}
+ +

2차원 배열 생성

+ +

아래의 예제는 2차원 문자열 배열로 체스보드를 생성합니다. 첫번째 이동은 (6,4)의 'p'를 (4,4)로 복사하여 이루어집니다. 이전 위치 (6,4)는 빈공간으로 만듭니다.

+ +
let board = [
+  ['R','N','B','Q','K','B','N','R'],
+  ['P','P','P','P','P','P','P','P'],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  [' ',' ',' ',' ',' ',' ',' ',' '],
+  ['p','p','p','p','p','p','p','p'],
+  ['r','n','b','q','k','b','n','r'] ]
+
+console.log(board.join('\n') + '\n\n')
+
+// Move King's Pawn forward 2
+board[4][4] = board[6][4]
+board[6][4] = ' '
+console.log(board.join('\n'))
+ +

결과는 다음과 같습니다.

+ +
R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+ , , , , , , ,
+p,p,p,p,p,p,p,p
+r,n,b,q,k,b,n,r
+
+R,N,B,Q,K,B,N,R
+P,P,P,P,P,P,P,P
+ , , , , , , ,
+ , , , , , , ,
+ , , , ,p, , ,
+ , , , , , , ,
+p,p,p,p, ,p,p,p
+r,n,b,q,k,b,n,r
+
+ +

배열을 사용하여 일련의 값을 테이블처럼 표시하기

+ +
const values = []
+for (let x = 0; x < 10; x++){
+ values.push([
+  2 ** x,
+  2 * x ** 2
+ ])
+}
+console.table(values)
+ +

결과는 다음과 같습니다.

+ +
0    1    0
+1    2    2
+2    4    8
+3    8    18
+4    16    32
+5    32    50
+6    64    72
+7    128    98
+8    256    128
+9    512    162
+
+ +

(첫번째 열은 (인덱스))

+ +

명세

+ +{{Specifications}} + +

브라우저 호환성

+ +

{{Compat}}

+ +

같이 보기

+ + -- cgit v1.2.3-54-g00ecf