초보자를 위한 JavaScript의 객체

객체는 키-값 쌍으로 정의되는 항목과 같은 사전입니다.

참조 데이터 유형입니다. 즉, 객체 변수에는 메모리의 위치 저장소를 가리키는 참조 포인터가 할당됩니다. 대략적으로 말하자면 할당된 변수(포인터)를 수정하면 메모리의 원래 값도 수정됩니다.

배열과 달리 객체는 순서가 지정되지 않으므로 인덱스를 사용하여 항목에 액세스할 수 없습니다. 나중에 항목에 액세스하는 방법에 대해 논의할 것이므로 걱정하지 마십시오.

개체의 예;

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

JavaScript에서 객체를 생성하는 방법

객체 리터럴

이것은 키:값 쌍으로 중괄호 안에 개체를 정의하고 초기화하는 JavaScript에서 개체를 만드는 가장 쉬운 방법입니다.



속성 이름이라고도 하는 키는 문자열이어야 하며 값 속성은 모든 데이터 유형일 수 있습니다.

예를 들어;

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

변수person에는 두 가지 속성, 즉 firstName 및 lastName가 있습니다.

새 객체 키워드

new Object() 생성자를 사용하여 객체를 초기화할 수 있습니다.
이 경우 나중에 속성을 추가해야 합니다.

const person = new Object(); //initializing an object
person.firstName = "John"; // adding property firstName with a value of John
person.lastName = "Doe";

객체 생성자

객체 생성자 함수는 여러 객체를 생성하기 위한 청사진 역할을 합니다. 키 값은 함수 매개변수로 전달됩니다.

function Student(first, last, age, eye) {
  this.firstName = first;
  this.lastName = last;
  this.age = age;
  this.eyeColor = eye;
}
//lets create student1 and student2 objects
const student1= new Student("John", "Doe", 50, "blue");
const student2 = new Student("Sally", "Rally", 48, "green");

## 객체를 사용해야 하는 경우

객체는 키-값 쌍으로 저장할 때 유용합니다

.

유사한 특성을 가진 값을 함께 그룹화하여 코드를 더 쉽게 읽을 수 있도록 하는 데 유용합니다.
## JavaScript 개체의 단점

개체 속성이 순서가 지정되지 않았으므로 인덱스가 있는 항목 액세스를 지원하지 않습니다. 속성 이름을 알고 있어야 합니다.

특정 위치에서 항목 추가 또는 제거와 같은 작업을 지원하지 않습니다.

## 객체의 항목에 액세스하는 방법

개체 속성은 점 또는 대괄호 표기법을 사용하여 액세스할 수 있습니다.

예를 들어:

    let person = {
       firstName: 'John',
       lastName: 'Doe'
};

person.firstName // outputs 'John'
person ['lastName'] //outputs 'Doe'

//Notice that the property is passed as a string in the bracket notation.

개체에서 할당되지 않은 속성에 액세스하면 undefined가 아닌 null가 출력됩니다.

person.age //undefined

점 연산은 속성이 유효한 JavaScript 식별자인 경우에만 사용할 수 있습니다.

속성 이름에 공백, 하이픈이 있거나 속성이 동적으로 결정되는 경우 점 연산에서 오류가 발생합니다. 이러한 상황에서는 괄호 표기법을 사용하십시오.

let address = {
    'building no': 3960,
    street: 'North 1st street',
    state: 'CA',
    country: 'USA'
};
address['building no'] //3960

개체에 속성을 추가하고 변경하는 방법

개체에 속성을 추가하는 것은 매우 간단합니다. 속성에 액세스하고 값을 할당합니다. person 개체에 나이와 건물 번호를 추가해 봅시다.

마찬가지로 값 속성을 새 값에 할당하여 값 속성을 변경할 수 있습니다.

let person = {
   firstName: 'John',
   lastName: 'Doe'
};

person.age = 16
person['building no'] = 3960
//change the firstName to Jane
person.firstName = 'Jane'

console.log(person.age)//16

console.log(person['building no'])//3960

개체에서 속성을 삭제하는 방법

삭제 연산자는 개체의 속성과 해당 값을 모두 삭제하는 데 사용됩니다.

delete person.age 
delete person['building no']

/* Before deletion: person.age = 16, 
                   person['building no'] = 3960
after deletion, person.age = undefined
                  person['building no']= undefined
*/

## 객체를 반복하는 방법
객체를 횡단하는 가장 빠른 방법은 for..in 루프를 사용하는 것입니다.

예를 들어;

let person = {
    firstName: 'John',
    lastName: 'Doe'
};

for(let x in person){
    console.log(x  ) // outputs all the properties
}

객체에 속성이 있는지 확인하는 방법

in 연산자를 사용하여 개체에 특정 속성이 있는지 확인합니다. 부울을 반환합니다.

'age' in person // true
'country' in person //false

마찬가지로 hasOwnProperty() 메서드를 사용하여 속성이 있는지 확인할 수 있습니다.

person.hasOwnProperty('age') //true

in 대 hasOwnProperty()

in 객체가 다른 객체에서 상속된 경우에도 객체가 객체에 있으면 true를 반환합니다.

let obj={
    age:16
}
const obj2= Object.create(obj) // 

console.log('age'in obj2) //outputs true

그러나 hasOwnProperty() 메서드는 속성이 객체의 직접 속성인 경우에만 true를 반환합니다.

let obj={
    age:16
}
const obj2= Object.create(obj) // 
obj2['name'] = 'John' //adding the name property

obj2.hasOwnProperty('age') //false
obj2.hasOwnProperty('name') //true

메모; obj2.hasOwnProperty('age')는 나이가 obj2의 직접적인 속성이 아니기 때문에 false를 반환합니다.

개체 메서드

개체 메서드는 함수인 개체 속성입니다.

let person = {
   firstName: 'John',
   lastName: 'Doe',
   fullName: function(){
    return this.firstName + " " + this.lastName 
   }
};

console.log(person.fullName()) // John Doe

this 키워드가 개체를 참조하는 데 사용됩니다.

참고: 메소드에서 매개변수를 전달할 수도 있습니다.

결론

개체는 연결된 목록 및 최신 JavaScript 클래스와 같은 다른 많은 데이터 구조의 빌딩 블록을 형성하기 때문에 JavaScript에서 매우 중요한 데이터 유형입니다.