객체(Object)

💁‍♀️ 자바 스크립트의 객체(Object)란,
키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합.

• 프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용 가능
• 자바스크립트의 함수는 일급 객체이므로 값으로 취급 가능

---

👀 객체(object)

1) 객체 리터럴 생성

var 객체명 = {};

var student = {
    // 프로퍼티(속성) : 객체의 상태를 나타내는 값(data)으로 키-값 쌍으로 구성
    name : '유관순',
    age : 16,
    // 메소드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작(behavior)
    getinfo : function() {
        return `${this.name}(은)는 ${this.age}세 입니다.`
    }
};

console.log(typeof student); // object
console.log(student); 

var student2 = {}; // 프로퍼티를 정의하지 않을 시 빈 객체 생성 
console.log(typeof student2);
console.log(student2); // {} 출력

---

👀 프로퍼티(property)

💁‍♀️ 프로퍼티(property)란,
객체의 상태를 나타내는 값(data)으로 키-값 쌍으로 구성

---

💁‍♀️ 프로퍼티 키(property key)란,
빈 문자열을 포함하는 모든 문자열 또는 심볼 값

• 문자열이므로 따옴표를 사용하지만 식별자 네이밍 규칙을 따르는 경우 사용하지 않아도 됨
• 식별자 네이밍 규칙을 따르지 않을 때는 따옴표를 반드시 사용 (하지만 규칙을 따를 것을 권장)
• 자바스크립트에서 사용할 수 있는 모든 값이 프로퍼티 값이 될 수 있음

1) 프로퍼티 생성

var obj = {
    normal : 'normal value', // normal을 따옴표로 감싸지 않아도 자동적으로 문자열로 인식
    '@ s p a c e @' : 'space value', // 특수문자나 공백이 있을 때는 따옴표로 감싸줘야함
    '' : '',        // 빈 문자열 키는 오류가 발생하지는 않지만 권장 X
    0 : 1,          // 숫자 키는 내부적으로 문자열로 변환
    var : 'var',    // 예약어 키는 오유가 발생하지는 않지만 권장 X
    normal : 'new value' // 이미 존재하는 키를 중복 선언하면 후자의 프로퍼티로 덮어씀
};

console.log(obj);

2) 메소드

💁‍♀️ 자바스크립트에서의 메소드란,
객체 내부에 정의된 함수

var dog = {
    name : '치즈',
    // function(food) {} : 메소드
    eat : function(food) {
        console.log(`${this.name}는 ${food}를 엄청 좋아해요.`)
    }
};

dog.eat('고구마'); // 프로퍼티 접근법 중 하나 (마침표 접근법)

3) 프로퍼티 접근법

var dog = {
    name : '치즈',
    // 메소드 : 객체 내부에 정의된 함수
    eat : function(food) {
        console.log(`${this.name}는 ${food}를 엄청 좋아해요.`)
    }
};

[1] 마침표 표기법(dot notation)

객체명.프로퍼티키(인자)

console.log(dog.name);
dog.eat('꼬구미');

[2] 대괄호 표기법(square bracket notation)

객체명['프로퍼티키'](인자)

console.log(dog['name']); // 대괄호 안에 프로퍼티 키를 반드시 '문자열'로 삽입
dog['eat']('닭말랭이');

[3] 마침표 표기법을 사용할 수 없는 경우

var obj = {
    'dash-key' : 'dash-value',
    0 : 1
};

◼ 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름일 경우 반드시 대괄호 표기법을 사용

// console.log(obj.dash-key);   // 에러
// console.log(obj.'dash-key'); // 컴파일 에러
// console.log(obj[dash-key]);  // 프로퍼티 키를 문자열로 만들어야함
console.log(obj['dash-key']); 	// 정상 작동 !

◼ 프로퍼티 키가 숫자로 이루어진 문자열인 경우 대괄호 표기법에서 따옴표 생략 가능

// console.log(obj.0);
// console.log(obj.'0');
console.log(obj[0]);  	// 숫자일 때는 문자열로 바꾸지 않아도 정상작동
console.log(obj['0']);	// 정상작동

3) 프로퍼티 변경, 추가, 삭제

var dog = {
    name : '치즈'
};

[1] 프로퍼티 값 변경

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신

dog.name = '꼬순';
dog['name'] = '인절미' // 대괄호 표기법도 사용 가능
console.log(dog.name);

[2] 프로퍼티 추가

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당

dog.age = 2;
dog['age'] = 2; // 대괄호 표기법도 사용 가능
console.log(dog); // { name: '인절미', age: 2 } 출력

[3] 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제하며, 만약 존재하지 않는 프로퍼티를 삭제하면 에러없이 무시

delete dog.age;
delete dog['age']; // 이미 삭제된 age를 한번 더 삭제해도 에러없이 무시
console.log(dog); // { name: '인절미' } 출력

---

👀 ES6 추가 문법 🔥중요🔥

1) 프로퍼티 값 단축 구문

var id = 'p-00001';
var price = 30000;

var product = {
    id : id,
    price : price
};

console.log(product);

💁‍♀️ ES6에서는 프로퍼티 값으로 변수를 사용하는 경우, 변수 이름과 프로퍼티 키가 동일한 이름이면 프로퍼티 키를 생략 가능 🔥중요🔥

var product2 = { id, price }; // 프로퍼티 키는 변수 이름으로 자동 생성
console.log(product2);

2) 계산 된 프로퍼티명

var prefix = 'key';
var index = 0;
var obj = {};

[1] [ES5] 비어있는 객체에 외부에서 동적으로 추가

ES5에서는 계산 된 프로퍼티 이름으로 프로퍼티 키를 동적 생성하려면, 객체 리터럴 외부에서 대괄호 표기법을 사용

obj[prefix + '-' + index++] = index;
obj[prefix + '-' + index++] = index;
obj[prefix + '-' + index++] = index;

console.log(obj);

[2] [ES6] 내부에서 동적으로 추가

ES6에서는 객체 리터럴 내부에서도 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성 가능

var obj2 = {
    [`${prefix}-${index++}`] : index,
    [`${prefix}-${index++}`] : index,
    [`${prefix}-${index++}`] : index
};

console.log(obj2);

3) 메소드 단축

[1] [ES5] 프로퍼티의 값으로 함수를 할당

ES5에서 메소드를 정의하려면 프로퍼티의 값으로 함수를 할당

var dog = {
    name : '치즈',
    eat : function(food) {
        console.log(`${this.name}는 ${food}를 엄청 좋아해요.`);
    }
};

dog.eat('고구마');

[2] [ES6] function 키워드를 생략한 축약 표현을 사용

ES6에서는 메소드를 정의할 때 function 키워드를 생략한 축약 표현을 사용 가능

var dog2 = {
    name : '치즈',
    eat (food) { // ': function' 생략
        console.log(`${this.name}는 ${food}를 엄청 좋아해요.`);
    }
};

dog2.eat('고구마');

---

👀 in & for-in

1) in 연산자

in : 프로퍼티 존재 여부 확인

var student = {
    name : '유관순',
    age : 16,
    test : undefined
};

[1] 일치 비교 연산자로 판단

프로퍼티 값이 undefined일 뿐 프로퍼티는 존재하지만 존재하지 않는다고 판별될 수 있는 문제 발생

console.log(student.name === undefined);    // false : 존재함을 의미
console.log(student.height === undefined);  // true : 존재하지않음을 의미
console.log(student.test === undefined);    // true

[2] in 연산자로 판단

console.log("name" in student);     // true
console.log("height" in student);   // false
console.log("test" in student);     // true

2) for-in 반복문

💁‍♀️ for-in 반복문이란,
객체의 모든 키를 순회하기 위한 반복문

var student = {
    name : '유관순',
    age : 16,
    getInfo() {
        return `${this.name}은 ${this.age}세 입니다.`;
    }
};

console.log(student);

// key값을 순회하며 출력
for(var pk in student) {
    console.log(`key : ${pk}`);                     // 프로퍼티 키 값
    console.log(`student[pk] : ${student[pk]}`);    // 프로퍼티 키에 해당하는 값
 // console.log(`student[pk] : ${student.pk}`);     // 마침표 표기법 사용 불가 (student안에 pk라는 리터럴을 찾는 의미가 됨)
    
    // key : value 형식으로 출력해보기   
    console.log(`${pk} : ${student[pk]}`);
}

---

👀 object 생성자 함수

💁‍♀️ object 생성자 함수란,
new 연산자와 함께 호출하여 객체를 생성하는 함수

1) 객체 생성 후 프로퍼티 추가

// 빈 객체 생성
const student = new Object();

// 프로퍼티 추가
student.name = '유관순';
student.age = 16;

console.log(student);

2) 생성자 함수

💁‍♀️ 객체 리터럴을 이용한 객체 생성 방식은 직관적이고 간편하지만, 단 하나의 객체만 생성하므로 동일 프로퍼티를 갖는 객체를 여러 개 생성해야 하는 경우 매번 같은 프로퍼티를 기술하므로 비효율적
👉 따라서 동일 프로퍼티를 갖는 객체를 여러 개 생성 시, 생성자 함수 사용

[1] 생성자 함수에 의한 객체 생성

// 객체를 생성하기 위한 템플릿처럼 생성자 함수를 사용하여 프로퍼티 구조가 동일한 객체 여러 개 생성 가능
function Student(name, age) {
    // 생성자 함수 내부의 this는 생성자 함수가 생성할 인스턴스를 가리킴
    this.name = name;
    this.age = age;
    this.getInfo = function() {
        return `${this.name}은 ${this.age}세 입니다.`;
    }
}

// 인스턴스의 생성
const student4 = new Student('봉미선', 29);
const student5 = new Student('신형만', 35);

console.log(student4);
console.log(student5);

[2] 인스턴스 생성 과정

function Student(name, age) {
    
    // 1. 암묵적으로 인스턴스가 생성되고 this에 바인딩 되는 과정이 런타임 이전에 실행
    console.log(this); // Student {} 출력

    // 2. this에 바인딩 되어있는 인스턴스를 초기화
    this.name = name;
    this.age = age;
    this.getInfo = function() {
        return `${this.name}은 ${this.age}세 입니다.`;
    }
    // 3. 완성 된 인스턴스가 바인딩 된 this가 암묵적으로 반환
    // return {};
    // 만약 명시적으로 객체를 반환하면 암묵적인 this 반환이 무시
    // return 1; // this를 반환
    // 하지만 명시적으로 원시값을 반환하면 무시되고 this가 반환
    // 생성자 내부에서 return은 생략하는 것이 기본
}

const student = new Student('홍길둥', 20);
console.log(student);

[3] 일반 함수와의 차이점

💁‍♀️ 첫 문자를 대문자로 기술하여 구별하는 것 이외, 일반 함수와 생성자 함수의 형식적인 차이 X

• 단, new 연산자와 함께 호출할 때 생성자 함수로 동작하며 만약 new 연산자와 함께 호출하지 않으면 일반 함수로 동작

function Student(name, age) {

    this.name = name; // 여기서의 this들은 전역 객체를 가리킴
    this.age = age;
    this.getInfo = function() {
        return `${this.name}는 ${this.age}세 입니다.`;
    }
}
const student = Student('신짱구', 5); // 일반 함수
// 일반 함수로 호출된 Student는 반환문이 없으므로 undefined를 반환
console.log(student); // undefined 출력 (리턴구문이 없기 때문)
// 일반 함수로 호출된 Student 내의 this는 전역 객체를 가리킴
console.log(age);       // 5
console.log(name);      // 신짱구
console.log(getInfo()); // 신짱구는 5세 입니다.

[4] new.target

💁‍♀️ 생성자 함수가 new 연산자 없이 호출되는 것을 방지하기 위해 사용

• new 연산자와 함께 생성자 함수로써 호출되면 함수 내부의 new.target은 함수 자신
• new 연산자 없이 일반 함수로 호출된 함수 내부의 new.target은 undefined

function Dog(name, age) {

    if(!new.target) {
        // new 연산자와 함께 호출되지 않은 경우 undefined이므로
        // new 연산자와 함께 생성자 함수를 재귀 호출하여 생성 된 인스턴스를 반환
        return new Dog(name, age);
    }

    this.name = name;
    this.age = age;
}
// new 연산자 없이 호출해도 new.target을 통해 생성자 함수로써 호출됨
const dog = Dog('치즈', 2);
console.log(dog);

📌 Ref.

* 대부분의 빌트인 생성자 함수(Object, String, Number, Boolean, Date,, ...)는 new 연산자와 함께 호출되었는지 확인 후 적절한 값을 반환
* String, Number, Boolean의 경우 new 연산자 없이 호출하면 객체 값이 아닌 문자열, 숫자, 불리언 값(원시 값)을 반환. '이를 데이터 타입 변환에 활용'

---