JavaScript의 객체 이해

소개

JavaScript의 객체는 이름:값 쌍으로 표시되는 이름 또는 키와 값의 모음으로 구성된 데이터 유형입니다. 이름:값 쌍은 문자열, 숫자 및 부울을 비롯한 모든 데이터 유형을 포함할 수 있는 속성과 개체 내에 포함된 함수인 메서드로 구성될 수 있습니다.

JavaScript의 개체는 실생활의 개체에 비유할 수 있는 독립형 엔터티입니다. 예를 들어 책은 제목, 저자, 페이지 수 및 장르로 설명하는 개체일 수 있습니다. 마찬가지로 자동차는 색상, 제조업체, 모델 및 마력으로 설명하는 개체일 수 있습니다. JavaScript 배열도 객체 유형입니다.

객체는 대부분의 JavaScript 프로그램의 통합적이고 기본적인 측면입니다. 예를 들어 사용자 계정 개체에는 사용자 이름, 암호 및 전자 메일 주소와 같은 데이터가 포함될 수 있습니다. 또 다른 일반적인 사용 사례는 배송 정보의 이름, 가격 및 무게와 같은 각 항목에 대한 모든 관련 정보를 포함하는 많은 개체 배열로 구성될 수 있는 웹 쇼핑 플랫폼의 장바구니입니다. 할 일 목록은 개체로 구성될 수 있는 또 다른 일반적인 응용 프로그램입니다.

이 자습서에서는 개체를 만드는 방법, 개체 속성 및 메서드가 무엇인지, 개체 속성에 액세스, 추가, 삭제, 수정 및 반복하는 방법을 검토합니다.

개체 만들기

개체는 숫자나 문자열이 데이터 유형인 것처럼 JavaScript 데이터 유형입니다. 데이터 유형으로서 개체는 변수에 포함될 수 있습니다.

JavaScript에서 객체를 구성하는 방법에는 두 가지가 있습니다.

중괄호를 사용하는 객체 리터럴: {}
new 키워드를 사용하는 객체 생성자

데모 목적으로 두 가지 방법을 모두 사용하여 빈 개체 예제를 만들 수 있습니다.

먼저 객체 리터럴입니다.

// Initialize object literal with curly brackets
const objectLiteral = {};

객체 리터럴은 중괄호로 객체를 초기화합니다.

다음 예제에서는 개체 생성자를 사용합니다.

// Initialize object constructor with new Object
const objectConstructor = new Object();

new Object()로 초기화되는 객체 생성자 메서드를 사용하여 동일한 데이터를 생성했습니다.

이 두 가지 방법 모두 빈 개체를 만듭니다. 개체 리터럴을 사용하는 것이 불일치 및 예기치 않은 결과가 발생할 가능성이 적기 때문에 더 일반적이고 선호되는 방법입니다.

캐릭터를 설명하기 위해 변수 gimli에 포함된 예제 개체를 만들 수 있습니다.

// Initialize gimli object
const gimli = {
	name: "Gimli",
	race: "dwarf",
	weapon: "axe",
	greet: function() {
		return `Hi, my name is ${this.name}!`;
	},
};

우리의 새 객체는 세 가지 속성을 가진 gimli입니다. 각 속성은 키:값 쌍이라고도 하는 이름:값 쌍으로 구성됩니다. weapon은 속성 이름 중 하나이며 속성 값인 \axe\와 연결되는 문자열입니다. greet라는 메소드 이름과 함수의 내용으로 구성된 메소드 값을 가진 하나의 메소드가 있습니다.

greet 내에서 this 키워드를 볼 수 있습니다. 개체 내부에서 this를 사용할 때 현재 개체를 참조합니다(이 경우 gimli).

콘솔에 gimli를 보내면 전체 개체가 출력됩니다.

gimli;

Output{name: "Gimli", race: "dwarf", weapon: "axe", greet: ƒ}

이 출력은 사용 중인 콘솔에 따라 다르게 렌더링될 수 있지만 개체에 전달된 모든 값이 출력에 표시된다는 점에 유의해야 합니다.

다음으로 JavaScript 개체의 속성과 메서드를 검토합니다.

속성 및 방법

개체는 속성과 메서드를 가질 수 있습니다.

속성은 개체 내의 이름(키)과 값 간의 연결이며 모든 데이터 유형을 포함할 수 있습니다. 속성은 일반적으로 개체의 특성을 나타냅니다.

메서드는 개체 속성의 값인 함수이므로 개체가 수행할 수 있는 작업입니다.

개체 속성과 메서드의 차이점을 기억하는 쉬운 방법은 속성을 명사로, 메서드를 동사로 생각하는 것입니다. name, race 및 weapon은 모두 개체와 관련된 명사이며 속성입니다. fight() 또는 talk()는 메소드 함수 정의로 사용될 수 있는 동사입니다.

개체 속성에 액세스

개체의 속성에 액세스하는 방법에는 두 가지가 있습니다.

점 표기법: .
괄호 표기: []

원래 예제 개체인 gimli를 다시 살펴보겠습니다.

const gimli = {
	name: "Gimli",
	race: "dwarf",
	weapon: "axe",
	greet: function() {
		return `Hi, my name is ${this.name}!`;
	},
};

weapon의 속성 값을 검색하려면 개체의 변수 이름을 입력하고 점(.)을 입력하여 개체 점 표기법으로 검색할 수 있습니다. 속성 또는 메서드 이름.

// Retrieve the value of the weapon property
gimli.weapon;

Output"axe"

gimli.weapon은 \axe\라는 속성 값을 출력합니다. 개체 괄호 표기법을 사용하여 동일한 데이터를 검색할 수도 있습니다. 문자열을 인덱싱하고 액세스하는 방법과 유사하게 대괄호 표기법의 구문은 속성 이름을 묶는 두 개의 대괄호([])입니다.

// Retrieve the value of the weapon property
gimli["weapon"];

Output"axe"

점 표기법과 대괄호 표기법이 모두 정기적으로 사용됩니다. 점 표기법이 더 빠르고 가독성이 높지만 더 많은 제한이 있습니다. 대괄호 표기법은 변수에 저장된 속성 이름에 대한 액세스를 허용하며 개체의 속성에 특수 문자가 포함된 경우 사용해야 합니다.

개체 메서드를 검색하려면 개체 변수에 첨부된 일반 함수를 호출하는 것과 같은 방식으로 메서드를 호출합니다.

gimli.greet();

Output"Hi, my name is Gimli!"

위의 예에서 개체 메서드 greet()의 문자열 값이 반환되는 것을 볼 수 있습니다.

이제 이름:값 쌍을 추가하거나 기존 항목을 수정하여 개체 속성을 수정할 수 있습니다.

개체 속성 추가 및 수정

개체에 새 속성을 추가하려면 할당 연산자(=)를 사용하여 속성에 새 값을 할당합니다.

예를 들어 숫자 데이터 유형을 gimli 개체에 새로운 age 속성으로 추가할 수 있습니다. 점과 대괄호 표기법을 모두 사용하여 새 개체 속성을 추가할 수 있습니다.

// Add new age property to gimli
gimli.age = 139;

// Add new age property to gimli
gimli["age"] = 139;

위와 같이 점 표기법이나 대괄호 표기법을 사용하여 해당 값에 액세스할 수 있습니다.

gimli.age;

Output139

동일한 프로세스를 사용하여 개체에 메서드를 추가할 수도 있습니다.

// Add new fight method to gimli
gimli.fight = function() {
	return `Gimli attacks with an ${this.weapon}.`;
}

이 새로운 객체 메서드를 생성하면 위에서 했던 것처럼 호출할 수 있습니다.

gimli.fight();

Output"Gimli attacks with an axe."

동일한 방법을 사용하여 기존 속성에 새 값을 할당하여 객체의 속성을 수정할 수 있습니다.

// Update weapon from axe to battle axe
gimli.weapon = "battle axe";

이 시점에서 개체를 호출하면 모든 추가 및 수정 사항을 볼 수 있습니다.

gimli;

Output{name: "Gimli", race: "dwarf", weapon: "battle axe", age: 139, greet: ƒ, fight: ƒ}

할당 작업을 통해 JavaScript 개체의 속성과 메서드를 수정할 수 있습니다.

개체 속성 제거

개체에서 속성을 제거하려면 delete 키워드를 사용합니다. delete는 개체에서 속성을 제거하는 연산자입니다.

아래 예에서는 delete를 사용하여 gimli에서 weapon 속성을 제거합니다.

// Remove weapon from gimli
delete gimli.weapon;

Outputtrue

속성이 성공적으로 제거되었거나 존재하지 않는 속성에 사용된 경우 delete 작업은 true로 평가됩니다.

gimli의 출력을 테스트하여 성공 여부를 확인할 수 있습니다.

gimli;

Output{name: "Gimli", race: "dwarf", age: 139, greet: ƒ, fight: ƒ}

위의 출력에서 weapon 이름과 관련 값을 더 이상 사용할 수 없으므로 속성을 성공적으로 삭제했음을 보여줍니다.

다음 섹션에서는 JavaScript에서 객체를 반복하는 방법을 살펴보겠습니다.

개체 속성을 통한 반복

JavaScript에는 특히 개체의 속성을 반복하기 위한 for 루프 유형이 내장되어 있습니다. 이것을 for...in 루프라고 합니다.

다음은 주 개체 예제인 gimli의 단순화된 버전입니다.

const gimli = {
	name: "Gimli",
	race: "dwarf",
	weapon: "battle axe",
};

for...in을 사용하여 gimli의 모든 속성을 순회하고 콘솔에 출력할 수 있습니다. 괄호 표기법을 사용하여 속성 값을 변수(이 경우 key)로 검색할 수 있습니다.

// Iterate through properties of gimli
for (let key in gimli) {
  console.log(gimli[key]);
}

OutputGimli
dwarf
battle axe

for...in 루프의 첫 번째 변수만 사용하여 속성 이름 자체를 검색할 수도 있습니다. 문자열 메서드를 사용하여 키 값을 대문자로 변환했습니다.

// Get keys and values of gimli properties
for (let key in gimli) {
  console.log(key.toUpperCase() + ':', gimli[key]);
}

OutputNAME: Gimli
RACE: dwarf
WEAPON: battle axe

for...in 루프는 Array 객체 유형에서만 사용되는 for...of 루프와 혼동해서는 안 됩니다. "JavaScript의 배열 이해\ 자습서에서 배열 반복에 대해 자세히 알아볼 수 있습니다.

또 다른 유용한 열거형 메서드는 객체의 키 배열을 반환하는 Object.keys() 메서드입니다.

// Initialize method on gimli object to return property keys
Object.keys(gimli);

Output["name", "race", "weapon"]

이 방법을 사용하면 개체의 키 또는 이름을 배열로 사용할 수 있으므로 JavaScript 배열에 사용할 수 있는 모든 방법을 활용할 수 있습니다.

결론

객체는 JavaScript 프로그래밍 언어의 매우 유용하고 다양한 기능입니다. 이는 JavaScript로 코드를 작성하는 주요 빌딩 블록 중 일부이며 관련 데이터 및 기능을 구성하는 실용적인 방법입니다. 할 일 목록, 쇼핑 카트, 사용자 계정 및 웹맵의 위치는 모두 접할 수 있는 실제 JavaScript 개체의 많은 예 중 일부입니다.

이 자습서에서는 속성과 메서드의 차이점, 개체를 만드는 방법, 개체 속성을 통해 추가, 제거, 수정 및 반복하는 방법을 배웠습니다. JavaScript 개체에 대해 자세히 알아보려면 Mozilla 개발자 네트워크에서 개체 작업을 참조하세요.