javascript

JavaScript에서 객체 이해 - JavaScript guide

조회 385 (작성일 2019.10.28 10:11)
- 음성
- 목록

목차

JavaScript에서 객체 이해

소개

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

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

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

이 튜토리얼에서, 우리는 개체 속성 및 방법이 무엇인지 개체를 만드는 방법 및 액세스하는 방법, 추가, 삭제, 수정, 및 개체 속성을 반복 검토 할 것입니다.

https://www.digitalocean.com/community/tutorials/understanding-objects-in-javascript

객체 생성

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

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

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

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

먼저 객체 리터럴입니다.

// 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이며 세 가지 속성이 있습니다. 각 속성은 키 : 값 쌍이라고도 하는 이름 : 값 쌍으로 구성됩니다. 무기는 속성 이름 중 하나이며 문자열 인 속성 값 "axe"에 연결됩니다. 메소드 이름은 greet이고 함수 값으로 구성된 메소드 값을 갖는 하나의 메소드가 있습니다.

인사에서 this 키워드를 볼 수 있습니다. 이것을 객체 내부에서 사용할 때 현재 객체 (이 경우 gimli)를 가리 킵니다.

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

gimli;

Output

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

이 출력은 사용 중인 콘솔에 따라 다르게 렌더링 될 수 있지만 객체에 전달 된 모든 값이 출력에 표시됩니다.

다음으로 JavaScript 객체의 속성과 메서드를 검토하겠습니다.

특성 및 방법

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

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

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

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

객체 속성에 액세스

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

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

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

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

무기의 속성 값을 검색하려면 객체의 변수 이름을 입력 한 다음 점 (.)과 속성 또는 메서드 이름을 입력하여 객체 점 표기법으로 확인할 수 있습니다

// 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 객체에 추가 할 수 있습니다. 도트 및 괄호 표기법을 사용하여 새 객체 속성을 추가 할 수 있습니다.

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

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

점 표기법 또는 대괄호 표기법으로 위와 같이 해당 값에 액세스 할 수 있습니다.

gimli.age;

Output

139

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

// 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에서 무기 속성을 제거합니다.

// Remove weapon from gimli
delete gimli.weapon;

Output

true

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

김리의 출력을 테스트하여 성공했는지 확인할 수 있습니다.

gimli;

Output

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

위 출력에서 무기 이름과 관련 값을 더 이상 사용할 수 없으므로 속성이 성공적으로 삭제되었음을 나타냅니다.

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

객체 속성 반복

JavaScript에는 내장 된 유형의 for 루프가 있으며 이는 특별히 객체의 속성을 반복하기 위한 것입니다. 이것을 for ... in 루프라고 합니다.

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

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

for ... in을 사용하여 김gimli의 모든 속성을 탐색하고 콘솔에 인쇄 할 수 있습니다. 대괄호 표기법을 사용하여 속성 값을 변수 (이 경우 키)로 검색 할 수 있습니다.

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

Output

Gimli
dwarf
battle axe

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

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

Output

NAME: Gimli
RACE: dwarf
WEAPON: battle axe

for ... in 루프는 for ... of 루프와 혼동되어서는 안됩니다. for ... of 루프는 Array 객체 유형에서만 사용됩니다. “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 개발자 네트워크에서 객체 작업을 참조하십시오.

이전글JavaScript에서 날짜 및 시간 이해 - JavaScript guide 19.10.28
다음글JavaScript에서 배열 메서드를 사용하는 방법 : Iteration 메서드 - JavaScript guide 19.10.28

JavaScript 객체

회원로그인

JavaScript에서 객체 이해 - JavaScript guide

메인메뉴

고객센터

회원영역

회사정보

회원로그인

소셜계정으로 로그인

정보실

컨텐츠 정보

본문

메인메뉴

고객센터

회원영역

회사정보