[JavaScript] 3. JS의 객체(Object)

1. 객체란?

- 키(Key)와 값(Value)로 구성된 프로퍼티(Property)들의 집합

- 프로퍼티를 동적으로 추가하거나 삭제 가능

- JS의 함수는 일급객체로, 프로퍼티 값으로 함수 사용 가능 

 

 

 

2. 객체 생성 방법

1. 객체 리터럴

- { }내에 프로퍼티를 넣어 객체 생성

let person = {
    name: "홍길동",
    age : 25,
    introduce : function(){
        console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`);
    }
}
console.log(person.name);//홍길동
console.log(person["name"]);//홍길동
person.introduce();//이름은 홍길동이고, 나이는 25입니다.

 

 

2. Object 생성자 함수

- new연산자와 Object 생성자 함수를 호출하여 빈 객체 생성

- 빈 객체 생성 후, 프로퍼티 or 메소드를 추가

let person = new Object(); //빈 객체 생성
//property 추가
person.name = "홍길동";
person.age = 25;
person.introduce = function(){
    console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`);
};

console.log(person.name);
console.log(person["name"]);
person.introduce();

 

 

3. 생성자 함수

- 동일한 프로퍼티를 갖는 객체를 여러 개 생성할 때 유용

function Person(name, age){
    this.name = name;
    this.age = age;
    this.introduce = function(){
        console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`);
    };
}

let p1 = new Person("홍길동", 25);
let p2 = new Person("내이름", 21);

p1.introduce();
p2.introduce();

 

 

+) 이미 정의된 변수의 값을 객체에 변수명과 값을 같게 설정하기

+) 객체 함수 단축 = function 키워드 제거

const name='홍길동', age=25;
let person = {
    name,
    age,
    introduce(){
        console.log(`이름은 ${this.name}이고, 나이는 ${this.age}입니다.`);
    }
}
console.log(person.introduce());
//이름은 홍길동이고, 나이는 25입니다.

 

 

 

3. 속성 값 조회

- dot(.)이나 대괄호([" "])를 사용하여 조회

let person = {
    "my-name" : "홍길동",
    "age" : 25
}

console.log(person.region || "지역없음"); //or연산 가능 => 없으면 "지역없음"을 출력
console.log(person["my-name"]); //연산자가 중간에 있으면 []만 가능
console.log(person.age);
console.log(pereson.my-name);//error

 

 

 

4. 속성 값 변경/추가/삭제

1. 속성 값 변경/추가/삭제하기

let person = {
    "my-name" : "홍길동",
    "age" : 25
}
//1. 속성 값 변경
person.age = 26;

//2. 속성 값 추가 = 값을 할당할 때 속성이 없을 경우, 추가됨
person.region = "서울";
console.log(person);

//3. 속성 삭제
delete person.region;
console.log(person.region);//undefined

//+) 없는 속성 참조시 undefined로
console.log(person.hobby);//undefined

 

 

2. 객체는 복사X, 참조O

- p1이 person과 같은 곳을 참조하기 때문에, p1의 값을 바꾸면 person의 값도 변경됨.

let person = {
    "my-name" : "홍길동",
    "age" : 25
}

let p1 = person;
p1.age = 30;
console.log(person.age);//30

 

 

 

5. 객체 분류

- 사용자 정의 = 앞서 본 것처럼 직접 객체를 생성해서 사용하는 객체들을 말함

- Built-in Object = 제공되는 것