자바스크립트 객체

숫자, 문자열, 부울( true 및 false ), null 및 undefined를 제외한 JavaScript의 모든 항목은 후드 아래의 개체입니다.

JavaScript에서 배열은 객체이고 함수는 객체이며 물론 객체도 객체입니다.

기술적으로 말하면 JavaScript의 개체는 변경 가능한 키 컬렉션입니다.

마지막 단락에서 변경 가능한 용어는 기본적으로 요소를 추가하거나 제거하여 개체를 변경할 수 있음을 의미합니다.

개체에는 속성에 이름과 값이 있는 속성이 포함됩니다. 속성 이름은 빈 문자열(' ')을 포함하여 모든 문자열이 될 수 있습니다. 속성 값은 undefined를 제외한 모든 JavaScript 값이 될 수 있습니다.

개체는 데이터를 수집하고 구성하는 데 유용합니다. 그들은 다른 객체를 포함할 수 있습니다.

모든 스크린샷은 Firefox 71.0 및 개발자 도구에서 가져온 것입니다. 언급할 가치가 있는 Firefox 71.0의 특정 기능 중 하나는 콘솔의 여러 줄 코드 편집기입니다.


JavaScript에서 개체는 두 가지 구문을 사용하여 만들 수 있습니다.

선언적

컨스트럭티드

리터럴 구문은 다음과 같이 정의됩니다.

var bioData = {
  key: value,
  // other properties and values
}

구성된 구문은 다음과 같이 정의됩니다.

// create the object using the constructed
// syntax 
var bioData = new Object();

// add a property name and value
bioData.key = value;

리터럴 구문은 개체를 만드는 가장 일반적이고 쉬운 방법입니다(나중에 살펴봅니다). 반면 구성된 양식에는 한 가지 단점이 있습니다. 개체 값을 하나씩 추가해야 합니다.

개체를 만들 때 주의해야 할 사항은 다음과 같습니다.

속성 이름에 하이픈이나 공백이 포함된 경우 이름을 따옴표("")로 묶습니다.

각 키 값 쌍을 쉼표( , )로 구분합니다

.

속성 이름 또는 값이 예약어인 경우 이름을 따옴표("")로 묶습니다.

코드를 작성할 시간입니다. 브라우저 콘솔로 전환하고 다음 코드를 입력합니다.

/**
  * An object with three properties
  */
var bioData = {
  first_name: "Habdul",
  last_name: "Hazeez",
  field: "Computer Science"
};

콘솔에 입력하고 실행하십시오.



다음으로 개체가 생성되었는지 확인합니다.



구성된 구문은 다음과 같습니다.

var bioData = new Object();

콘솔에 입력하고 실행하여 개체가 생성되었는지 확인합니다.



앞에서 객체가 다른 객체를 포함할 수 있다고 언급한 바 있습니다. 예를 들면 다음과 같습니다.

var bioData = {
  first_name: "Habdul",
  last_name: "Hazeez",
  field: "Computer Science"
  skills: {
     programming_languages: "JavaScript, C, C++",
     other_fields: "Computer Security, Artificial Intelligence"
  }
};

데이터 검색

개체 이름을 대괄호로 묶거나[ ] 점 표기법을 사용하여 개체에서 값을 검색할 수 있습니다. 속성 이름이 name와 같은 예약어인 경우 읽기 쉽기 때문에 점 표기법을 사용하는 것이 가장 좋습니다. 몇 가지 코드를 살펴보겠습니다.

// retrieve the first_name using square
// brackets notation 

bioData['first_name'];

콘솔에서:



점 표기법을 사용할 수도 있습니다.

biodata.'first_name'

콘솔에서:



다른 개체를 포함하는 개체에서 데이터를 검색하는 방법은 아래 이미지에 요약되어 있습니다.



존재하지 않는 속성을 검색하려고 하면 undefined 가 표시됩니다.

데이터 업데이트

개체의 값은 할당을 통해 업데이트할 수 있습니다. 속성 이름이 개체에 이미 있는 경우 속성 값이 대체됩니다.

코드에서:

bioData['first_name'] = "Ben";

콘솔에서:



다음 코드를 사용하여 업데이트를 확인할 수 있습니다.

// check the object

bioData;

콘솔에서:



delete 연산자는 개체에서 속성을 제거하는 데 사용됩니다. 속성이 있는 경우 개체에서 속성을 제거합니다.

// This will delete the first_name property

delete bioData.first_name;

콘솔에서:



삭제 확인:

// check the object to confirm the deletion

bioData;

콘솔에서:




이것은 JavaScript 객체에 대한 소개일 뿐이며 다음 항목은 생략했습니다.

개체 열거형

개체 참조

반사

다음은 숫자입니다.