[JS] Object 객체

이채현

💡 Javascript Object

객체 생성

일반적으로 생성 할 수 있는 객체

싱글 리터럴 (Literal) 객체

const object = {
	property: 'value',
	method: function () {},
}

생성자 함수 객체 // PascalCase

function NewObject(name) {
	this.name = name;
}

const newObject = new NewObject(’Lee’);

파스칼 케이스 → 암묵적, 명시적 생성자 함수

Object.Create()

const newObject2 = Object.create(Object.prototype, {
	name: {
		value: 'lee',
		writable: true, // 덮어쓸 수 있는지
		enumerable: true, // forin문과 같은 것으로 열거할 수 있는지
		configurable: true, // 객체 기술자를 수정할 수 있는지
	},
});
// const newObject2 = Object.create(프로토타입, 객체 서술자(기술자));

newObject2.name = 'Kim';

for (const key in newObject2) {
	console.log(key);
}

프로퍼티 열거

const obj = {
	prop1: 'value1',
	prop2: 'value2',
	prop3: 'value3',
	prop4: 'value4',
};

const prop = 'prop';
const prop1 = 'prop1';

obj.prop1 // value1
obj['prop1'] // value1
obj[prop + 1] // value1
obj[prop1] // value1

for (const key in obj) {
	console.log(key); // prop1, prop2, prop3, prop4
	console.log(obj[key]); // value1, value2, value3, value4
}

체인닝 방지를 위해

블록 스코프 내에 변수가 없으면 그 위로 찾아 간다…

for (const key in obj) {
	if (obj.hasOwnProperty(key)) {
		console.log(obj[key]); // value1, value2, value3, value4
	}
}
// 상속되거나 확장되어 사용 된 객체의 상위에서 꺼내오지 않도록 하는 방어문

프로퍼티 조작

const person = {
	firstName: "Chaehyeon",
	location: "Korea",
}

// 추가
person.lastName: "Lee"
// 수정
person.lastName: "lee"
// 삭제
delet person.location;

person; // { firstName: "Chaehyeon", lastName: "lee" }

// const는 재할당을 막는 것... 그래서 가능

프로퍼티 접근자 (getter, setter)

// 추가, 수정, 삭제 등을 접근해서 조작할 때 안전하게 하기 위해
const person = {
	_firstName: "Chaehyeon",
	lastName: "Lee",

	get firstName() {
		return this._firstName.toUpperCase();
	}

	set firstName(newFirstName) {
		if (typeof newFirstName !== 'string') {
			this._firstName = 'undefinedName';

			return;
		}

		this._firstName = newFirstName;
	}

	get fullName() {
		return this._firstName + this.lastName + '입니다'.
	}
}

// console.log(person.firstName); // CHAEHYEON
// console.log(person.fullName); // LeeChaehyeon입니다

person.firstName = 12345;
console.log(person.firstName); // UNDEFINDEDNAME

인스턴스

OOP

인스턴스 === 유일한, 고유한 객체?

객체 하나하나가 곧 인스턴스이다.

const me = {
	name: 'chaehyeon',
	age: 26,
	locaiton: 'korea',
};

const me2 = {
	name: 'chaehyeon',
	age: 26,
	locaiton: 'korea',
};

console.log(me === me2); // false
console.log(me.name === me2.name); // true

// 객체 그 자체를 비교할 때에는 객체의 메모리 주소를 본다.
// 당연히 메모리주소는 다르다

생성자

const me = {
	name: 'chaehyeon',
	age: 26,
	locaiton: 'korea',
};

// 객체를 자주 만들고 싶을 때 -> 생성자 함수
function Person(name, age, location) {
	this.name = name;
	this.age = age;
	this.location = location;

	this.getName = function () {
		return this.name + ' 입니다';
	}
}
// 여기서 this는 "생성 될" 인스턴스를 가리킨다.

const me2 = new Person('ChaehyeonLee', 26, 'korea');
// Person { name: 'ChaehyeonLee', age: 26, location: 'korea' }

const you new Person('Kim', 20, 'korea');
// Person { name: 'Kim', age: 20, location: 'korea' }