드림코딩강의와 모던자바스크립트 딥다이브 내용을 정리하였습니다.

✅객체란?

서로 연관있는 속성(데이터-프로퍼티)과 행동을 묶어주기 위해(함수-메서드)사용된다

• 자바스크립트는 객체(object)기반의 프로그래밍 언어이다. 원시값을 제외한 (함수, 배열, 정규 표현식 등)은 모두 객체이다.
• 원시타입의 값은 변경이 불가능한 값이지만 객체타입은 변경이 가능한 값이다.
• 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성되어있다. {key:value}
• 프로퍼티값이 함수일 경우, 일반함수와 구분하기 위해 메서드라 부른다.

1.객체 리터럴에 의한 객체 생성, 프로퍼티(속성) 접근

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

{key:value}
key (문자, 숫자, 문자열, 심볼)
value (원시값, 객체(함수))

let apple = {
	name: 'apple', //key:value로 이루어져있다
	'hello-bye': '안녕',
    0: 1,
    ['hello-bye1']: '안녕',
}
    

프로퍼티 접근

console.log(apple.name); //마침표 표기법
console.log(apple['name']); //대괄호 표기법
console.log(apple['hello-bye1']); //대괄호 표기법 (-들어있는 것은 .으로 접근이 안되고 []를 써서 접근이가능하다)

2.프로퍼티 동적 생성, 삭제하는 법

프로퍼티 동적 생성

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

var person = {
	name: 'Jo'
};

person.age = 20; //이렇게 추가할수가 있다
console.log(person); //{name: 'Jo', age: 20}

프로퍼티 삭제

속성 삭제하는 법

var person = {
	name: 'Jo'
    age: 20;
};

delete person.age; 
console.log(person); //{name: 'Jo'}

3.객체 동적으로 접근하기

const obj = {
	name: 'lion',
    age: 20,
};

//코딩하는 시점에, 정적으로 접근이 확정됨
obj.name; //lion (value 값을 얻을 수 있다) 
obj.age; //20


//동적으로 속성에 접근하고 싶을때 대괄호 표기법 사용! 
function getValue(obj, key) {
	return obj[key];
}
console.log(getValue(obj, name)); //lion

//동적으로 추가하기
function addKey(obj, key, value) {
	obj[key] = value;	
}
addKey(obj, 'job', 'engineer');
console.log(obj); // { name: 'lion', age: 20, job: 'engineer' }

//동적으로 삭제하기
function deleteKey(obj, key) {
	delete object[key];
}

4.객체 축약 버전

const x = 0;
const y = 0;
const coordinate = { x, y }; //{ x:x, y:y };
console.log(coordinate);

function makeObj(name, age) {
	return {
	name,
	age,
	};
}

5. 객체 안의 함수

객체에도 함수를 넣을 수 있다.
객체는 연관된 정보와 함수들을 묶어서 관리할 수 있다.

const apple = {
    name: 'apple',
    display: function() {
        console.log(`${this.name}: 사과`) //객체안에서 자기자신 데이터에 접근할때는 thus를 사용
    },
    
};
apple.display(); // apple: 사과

6. 생성자 함수

const apple = {
    name: 'apple',
    display: function () {
        console.log(`${this.name}: 사과`);
    },
};

const orange = {
    name: 'orange',
    display: function () {
        console.log(`${this.name}: 오렌지`);
    },
};

console.log(apple);
console.log(orange); 

{name: 'apple', display: ƒ}
display: ƒ ()
name: "apple"
[[Prototype]]: Object

{name: 'orange', display: ƒ}
display: ƒ ()
name: "orange"
[[Prototype]]: Object

생성자 함수를 이용해서 좀 더 간략하고 실용적인 코드를 만들수 있다.

1. 함수이름 첫 번째 글자를 대문자로 접근해야한다.
2. 이 객체는 이름, 한국이름을 출력해야 하므로 인자로 받아오자.
3. 함수안에서 객체를 만든다.
4. this를 사용하여 자기자신을 가리킨다. this.name(자기자신의 속성에 접근) = name(인자);
5. this에 함수를 넣을 수도 있다.

function Fruit(name, koreaName) {
    this.name = name;
    this.koreaName = koreaName;
    this.display = () => {
        console.log(`${this.name}: ${this.emoji}`);
    };
    // return this; //생략가능
};

const apple = new Fruit('apple', '사과');
const orange = new Fruit('orange', '오렌지');

console.log(apple); //Fruit {name: 'apple', koreaName: '사과', display: ƒ}
console.log(orange); //Fruit {name: 'orange', koreaName: '오렌지', display: ƒ}