JavaScript의 속성 접근자 이해

JavaScript에서 속성 접근자는 객체의 속성에 액세스할 수 있는 메커니즘입니다. 이를 수행하는 두 가지 주요 방법은 점 표기법과 대괄호 표기법입니다.

점 표기법

점 표기법은 속성에 액세스하는 가장 일반적인 방법입니다. 간단히 점(.) 뒤에 속성 이름을 사용하면 됩니다.

괄호 표기

대괄호 표기법은 속성 이름이 동적이거나 유효한 식별자가 아닌 경우(예: 공백이나 특수 문자가 포함된 경우) 유용합니다. 대괄호([])를 사용하고 속성 이름을 문자열

로 전달합니다.

JavaScript로 객체 생성

이 언어는 객체를 빠르게 생성하기 위해 객체 리터럴 표기법이라는 구문을 제공합니다. 객체 리터럴은 중괄호로 표시됩니다. 다음 예에서는 속성이 없는 빈 객체를 만듭니다.

var animal = {};

중괄호 안에 속성과 해당 값은 키/값 쌍 목록으로 지정됩니다.
키는 문자열이나 식별자일 수 있고 값은 유효한 표현식일 수 있습니다. 키/값 쌍 목록은 쉼표로 구분되며 각 키와 값은 콜론으로 구분됩니다.

다음 예에서는 리터럴 표기법을 사용하여 세 가지 속성이 있는 객체를 만듭니다.

첫 번째 속성인 동물이 1위를 차지합니다.
두 번째 속성인 돌고래는 문자열을 사용하여 지정되며 문자열 값도 저장합니다. 세 번째 속성인 포유류는 빈 객체를 저장합니다.

var animal = {
  dolphin: 1,
  "swim": "some string",
  mammal: {
  }
};

각 속성은 별도의 줄에 들여쓰기되어 작성되었습니다. 전체 객체를 한 줄에 작성할 수도 있지만 이 형식이 코드를 더 읽기 쉽습니다. 이는 속성이 많은 객체나 중첩된 객체의 경우 특히 그렇습니다.

JavaScript는 객체 속성에 액세스하기 위한 두 가지 표기법을 제공합니다.

첫 번째이자 가장 일반적인 것은 점 표기법으로 알려져 있습니다.
점 표기법에서는 호스트 개체의 이름, 마침표(또는 점), 속성 이름을 차례로 지정하여 속성에 액세스합니다.

점 표기법

점 표기법은 속성에 액세스하는 가장 일반적인 방법입니다. 간단히 점(.) 뒤에 속성 이름을 사용하면 됩니다. 예를 들어:

다음 예에서는 점 표기법을 사용하여 속성을 읽고 쓰는 방법을 보여줍니다. object.dolphin
인 경우 처음에는 값 1을 유지했지만 이 명령문을 실행한 후에 해당 값은 2가 됩니다.

• animal.dolphon에 아직 값이 없으면 정의되지 않습니다.

animal.dolphin = animal.dolphin   1;

객체 속성에 액세스하기 위한 구문은 괄호 표기로 알려져 있습니다. 괄호 표기에서는 객체 이름 뒤에 대괄호가 옵니다.
대괄호 안에 속성 이름은 문자열로 지정됩니다.
아래에서는 점 표기법의 이전 예를 대괄호 표기법을 사용하도록 다시 작성했습니다. 코드는 다르게 보일 수 있지만 기능적으로는 이전 예제와 동일합니다.

object["dolphin"] = object["dolphin"]   1;

괄호 표기법은 점 표기법보다 더 표현력이 뛰어납니다. 왜냐하면 변수가 속성 이름의 전체 또는 일부를 지정할 수 있기 때문입니다.
이는 JavaScript 인터프리터가 자동으로 대괄호 안의 표현식을 문자열로 변환한 다음 해당 속성을 검색하기 때문에 가능합니다.

다음 예에서는 대괄호 표기법을 사용하여 속성 이름을 즉시 생성하는 방법을 보여줍니다. 예제에서 속성 이름 foo는 변수 d의 내용을 문자열 "dolphin"과 연결하여 생성됩니다.

var d = "d";

object[d   "dolphin"] = "bar";

대괄호 표기를 사용하면 속성 이름에 점 표기법에서 금지된 문자를 포함할 수 있습니다.
예를 들어, 다음 명령문은 대괄호 표기법에 완전히 적합합니다. 그러나 동일한 속성 이름을 점 표기법으로 생성하려고 하면 구문 오류가 발생합니다.

object["!@#$%^&*()."] = true;

중첩된 속성에 액세스

중첩된 개체의 속성은 점 및/또는 대괄호 참조를 함께 연결하여 액세스할 수 있습니다.
예를 들어, 다음 개체에는 돌고래라는 중첩 개체가 포함되어 있습니다. 여기에는 1이라는 값을 보유하는 연도라는 속성이 있는 포유류라는 또 다른 개체가 포함되어 있습니다.

var 동물 = { 돌고래: { 포유동물: { 년: 1 } } };

var animal = {
  dolphin: {
    mammal: {
      years: 1
    }
  }
};

다음 표현식은 중첩 속성인 연도에 액세스합니다. 첫 번째 표현식은

점 표기법을 사용하고, 두 번째 표현식은 대괄호 표기를 사용합니다. 세 번째 표현식은
두 표기법을 결합하여 동일한 결과를 얻습니다.

동물.돌고래.포유류.폐; 동물["돌고래"]["포유류"]["연도"]; 동물["돌고래"].mammal["연도"];

var animal = {
  dolphin: {
    mammal: {
      years: 1
    }
  }
};

이전 예에 표시된 것과 같은 표현식을 부적절하게 사용하면 성능이 저하될 수 있습니다.

각
점 또는 대괄호 표현식을 평가하는 데는 시간이 걸립니다.

동일한 속성이 여러 번 사용되는 경우 속성에 한 번 액세스한 다음 나중에 사용할 수 있도록 값을 로컬 변수에 저장하는 것이 더 합리적입니다. 다음 예에서는 루프 내에서 bar를 여러 번 사용합니다. 그러나 동일한 값을 반복해서 계산하는 데 시간을 낭비하는 대신 bar는 지역 변수에 저장됩니다.

var 연도 = 동물.돌고래.포유류.년; 변수 개수 = 0; for (var i = 0; i var animal = { dolphin: { mammal: { years: 1 } } }; 메소드로서의 기능

함수를 객체 속성으로 사용하는 경우 이를 메소드라고 합니다. 속성과 마찬가지로 메서드도 객체 리터럴 표기법으로 지정할 수 있습니다. 다음 예에서는 이것이 수행되는 방법을 보여줍니다.

var 동물 = { 합계: 함수(돌고래, 연도) { 돌고래 시절을 돌려주세요; } };

var animal = {
  dolphin: {
    mammal: {
      years: 1
    }
  }
};

메서드는 점 및 대괄호 표기법을 사용하여 호출될 수도 있습니다. 다음 예제에서는 두 표기법을 모두 사용하여 이전 예제의 sum() 메서드를
호출합니다.

돌고래.sum(1, 2); 돌고래["합계"](1, 2);

var animal = {
  dolphin: {
    mammal: {
      years: 1
    }
  }
};

속성 및 메서드 추가

객체 리터럴 표기법은 새 객체를 생성하는 데 유용하지만 기존 객체에 속성이나 메서드를 추가할 수는 없습니다. 다행스럽게도
객체에 새 데이터를 추가하는 것은 할당문을 만드는 것만큼 간단합니다.

다음 예에서는

빈 객체를 만듭니다. 그런 다음 할당 문을 사용하여 돌고래와 포유류라는 두 가지 속성과 연도
메서드를 추가합니다. 이 예에서는
점 표기법을 사용하지만 괄호 표기도 동일하게 작동합니다.

var 동물 = {}; 동물.돌고래 = 1; 동물.포유류 = null; 동물.년 = 함수() { return "저는 5살입니다()"; };

var animal = {
  dolphin: {
    mammal: {
      years: 1
    }
  }
};

요약

객체는 기본 객체와 기타 객체로 구성된 복합 데이터 유형입니다. 개체의 빌딩 블록은 일반적으로 해당 필드 또는 속성이라고 합니다. 속성은 개체의 일부 측면을 설명하는 데 사용됩니다. 예를 들어 속성은 목록의 길이, 개의 색깔, 사람의 생년월일을 설명할 수 있습니다.
따라서 JavaScript
객체 구문은 언어의 기초 역할을 하기 때문에 이해하는 것이 중요합니다. 객체 지향 프로그래밍을 이해하려면 먼저 객체를 이해해야 합니다.

점 표기법: 속성 이름이 유효한 식별자일 때 사용합니다.
괄호 표기법: 속성 이름이 동적이거나 유효한 식별자가 아닌 경우에 사용합니다. 이러한 접근자는 객체와 해당 속성을 효과적으로 조작하기 위한 JavaScript의 기본입니다.

즐거운 코딩하세요!