💭객체란?

자바스크립트의 핵심 데이터 타입 중 하나로 다양한 타입의 데이터를 한 단위로 묶을 수 있는 복합 데이터 구조

• 속성(Property) : 객체의 상태를 나타내는 값(data)

• 메소드(Method) : 속성(상태 데이터)을 참조하고 조작할 수 있는 동작(behavior)

객체의 특징

• 객체는 속성의 모음이며 속성은 키(key)와 값(value)으로 구성
• key는 일반적으로 문자열이나 기호이고 value는 어떤 유형의 타입이든 될 수 있음
• 속성값이 함수인 경우 메소드라고 표현

const superman = {
     name: 'clark',  //-> property(key: name, value: 'clark')
     gender: 'male',  //-> property(key: gender, value: 'male')
     fly: function() {   //-> method
         console.log('flying');
     }
}

객체 생성 방식

1) 객체 리터럴 : 중괄호({})를 사용하는 기본적인 방식
2) 객체 생성자 함수 : new Object() 생성자를 사용하는 방식
3) 생성자 함수 : this 키워드 사용하는 방식

💭객체 리터럴에 의한 객체 생성

자바스크립트에서 객체를 생성할 때 가장 간단하고 일반적으로 사용되는 방식

• 중괄호({})안에 키(key)와 값(value)으로 속성을 정의
• 속성을 정의를 할 때 키와 값은 콜롬(:)으로 구분
• 속성이 여러 개 일 경우 쉼표(,)로 구분
• 속성과 메소드를 추가하거나 삭제할 수 있음

📌예시

const superman = {
     name: 'clark',  
     gender: 'male',  
     fly: function() {   
         console.log('flying');
     }
};

console.log(superman);
// {name: 'clark', gender: 'male', fly: ƒ}

1) 객체 속성 접근

점(.)을 사용하여 객체의 속성에 접근 (점 표기법)

console.log(superman.name);  // clark
console.log(superman.gender);  // male
console.log(superman.fly());  // flying

2) 객체 속성 추가

새로운 key-value 쌍을 할당하여 객체에 새로운 속성을 추가

superman.age = 33;
superman.height = 180;

console.log(superman);
// {name: 'clark', gender: 'male', age: 33, height: 180, fly: ƒ}

3) 객체 속성 수정

이미 존재하는 속성값을 새로운 값으로 할당하여 수정

superman.name = 'Peter Parker';
superman.age = 17;

console.log(superman);
// {name: 'Peter Parker', gender: 'male', age: 17, height: 180, fly: ƒ}

4) 객체 속성 제거

'delete' 연산자를 사용하여 속성을 삭제

delete superman.gender;
delete superman.height;

console.log(superman);
// {name: 'Peter Parker', age: 17, fly: ƒ}

5) 객체 속성 존재 여부 확인

'in' 연산자를 사용하여 객체에 속성이 부여되어 있는지 확인

console.log('birthday' in superman);  // false
console.log('name' in superman);  // true

💭생성자를 이용한 객체 생성

(1) 객체 생성자 함수

new 연산자를 이용하여 Object 생성자 함수를 먼저 호출한 후 속성을 추가해서 객체를 생성하는 방식

📌예시

const superman = new Object()        
superman.name = 'clark';
superman.gender = 'male';

console.log(superman);
// {name: 'clark', gender: 'male'}

• new Object()를 호출하면 비어있는 객체를 생성
• 객체 생성 직후 객체에는 속성을 가지고 있지 않으므로, 속성을 추가해야함

(2) 생성자 함수

기존 함수에 new 연산자를 붙여서 호출하여 해당 함수가 생성자 함수로 동작하도록 하여 객체를 생성하는 방식

📌예시

function Person(name, age) {
    this.name = name;
    this.age = age;
}

const person_1 = new Person('김민지', 17);
const person_2 = new Person('박철수', 30);

console.log(person_1);  // Person {name: '김민지', age: 17}
console.log(person_2);  // Person {name: '박철수', age: 30}

• 생성자 함수의 첫 문자는 대문자로 표기하는 것이 관례
• 리터럴과 Obejct()로 객체를 생성하는 것과 달리, 생성자 함수를 통해 객체를 생성하면 같은 속성을 가진 객체를 여러 개 생성할 수 있음

this란?

: 객체 내부에서 객체 자신을 참조할 때 사용하는 키워드

• 'this'는 사용 방법에 따라 다른 객체를 참조하는데, 메소드 내에서 사용하면 해당 메소드를 호출한 객체를 가리킴
• 기존 함수에 new 연산자를 붙이면 먼저 비어있는 객체를 생성하는데, 'this'는 이 비어있는 객체를 가리키고, 그 객체에 속성을 추가하는 것
• 생성자 함수에 반환 값이 없으면 비어있는 객체에 새로운 속성을 추가한 'this'가 반환