대장님(👨🌾)께서 OOP 기준으로 객체를 설명해주실때 썼던 비슷한... 그림
근데 나는 이게 더 이해가 잘 됐던듯ㅋㅋㅋ
여튼 js를 공부하다보면 객체 객체 객체 이야기를 많이 듣는다.
처음엔 배열[]과 많이 헷갈리다가 이제 조금 머리에 구별되는듯 싶다.
자 어찌됐던 피할수 없는 너 객체 공부 좀 해보자.... (다시 스타 하고싶다..)
const food1 = {
name: '햄버거',
price: 5000,
vegan: false
};
console.log(food1);우선 프로퍼티에 접근하는 방법은 . 이걸 사용하는거다.
🤡 : food1.name 을 찍으면 햄버거가 나올것이야.
👻 : fodd1['price']를 찍으면 5000이 나왕 낄낄
빈 객체를 생성하는 방법은 const food2 = {} 요렇게 쓴다.
빈 객체에 프로퍼티를 추가하는 방법은 🤡👻 얘네가 알려준거처럼
// 프로터피 추가
food2.name = '샐러드';
food2.price = '6000';
food2['vegan'] = true;
console.log(food2);이렇게 쓰면 된다. 수정하는 방법도 똑같음. 점 찍거나 대괄호 쓰거나!
근데 식별자 명명 규칙에 벗어나는 애들은 대괄호만 써야함.
프로퍼티 삭제를 하고 싶을 땐 delete 연산자를 사용, key 값을 대괄호 안에 string화 하여 넣는다.
const person1 = {
name: '홍길동',
age: 24,
school: '한국대',
major: '컴퓨터공학'
};
console.log(person1);
delete person1.age;
console.log(person1);
delete person1['major'];
console.log(person1);-
객체에다가 뭔가를 선언하거나 접근할때 어떤 객체를 넣어주면 그것이 문자열로 치환되어 들어감
그래서 객체가 아닌 다른 엉뚱한 객체를 넣어도 대괄호 안에object라는 문자열로 치환되어 그 값에 접근이 가능함 -
배열의 경우 object의 키 값으로 넣거나 그 접근자로 사용했을때 그 내용을
,로 이어 붙힌 문자열이 키값으로 들어간다.
즉 실제 객체나 배열이 키 값이 되는게 아닌, 치환된 문자열이 키가 되어 의도한대로 작동하지 않음❗
그나마 배열은 값들에 따라 string이 만들어지지만, 객체는 무조건 object가 되어버림
객체에는 객체나 배열을 key로 쓰면 안된다
const product1 = {
name: '노트북',
color: 'gray',
price: 800000
}
function addModifyProperty (obj, key, value) {
// obj.key = value; // ⚠️ 의도와 다른 작업 수행
obj[key] = value;
}
function deleteProperty (obj, key) {
// delete obj.key // ⚠️ 의도와 다른 작업 수행
delete obj[key];
}
addModifyProperty (product1, 'inch', 16);
console.log(product1);여기서 보면 .key가 아닌 [key]를 쓴 이유는 key의 값에 접근하겠다는 뜻이다.
그냥 obj.key = value; 였다면, key의 값이 아니라 단순 key 문자열로 들어갔을거다.
즉 결과값이
- 대괄호 표기법
{ name: '노트북', color: 'gray', price: 800000, inch: 16 } - 점 표기법
{ name: '노트북', color: 'gray', price: 800000, key: 16 }
요렇게 차이가 났을거라는거 낄낄👻👻👻 활용성을 위해 대괄호 표기법이 좋은거같다
동적으로 key 값을 사용하려면 대괄호 프로퍼티안에 해당 변수나 상수같은 것들을 넣어주는 식으로 사용해야한다
ES6 version
- 객체 선언시 프로퍼티 키와 대입할 상수/변수명이 동일할 시 단축표현
const x = 1, y = 2;
const obj1 = {
x: x,
y: y
}
console.log(obj1);
// ✨ES6로 변신
const obj2 = { x, y }
console.log(obj2);// ES6
function createProduct (name, price, quantity) {
return { name, price, quantity };
}
const product1 = createProduct('선풍기', 50000, 50);
const product2 = createProduct('청소기', 125000, 32);
console.log(product1, product2);- 메서드 Method
// 일반 함수 프로퍼티 정의
const person = {
name: '홍길동',
salutate: function (formal) {
return formal
? `안녕하십니까, ${this.name}입니다.`
: `안녕하세요, ${this.name}이에요.`;
}
}
console.log(person.salutate(true));
// ⭐️ 메서드 정의
const person = {
name: '홍길동',
salutate (formal) {
return formal
? `안녕하십니까, ${this.name}입니다.`
: `안녕하세요, ${this.name}이에요.`;
}
}
console.log(person.salutate(true));- ⭐ ES6부터는 위의 표현으로 정의된 함수만 메서드라고 부름
- 일반 함수 프로퍼티와 특성이 다름 - 이후 자세히 배울 것
이리저리 만들어진 객체의 차이
// 생성자 함수로 만들어짐
function YalcoChicken (name, no) {
this.name = name;
this.no = no;
this.introduce = function () {
return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
}
}
// 객체를 직접 반환하는 함수
function createYalcoChicken (name, no) {
return {
name, no,
introduce () {
return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
}
}
}
// 객체 리터럴
const chain1 = {
name: '판교', no: 3,
introduce: function () {
return `안녕하세요, ${this.no}호 ${this.name}점입니다!`;
}
};
// 객체 반환 함수
const chain2 = createYalcoChicken('강남', 17);
// 생성자 함수
const chain3 = new YalcoChicken('제주', 24);
console.log(chain1, chain1 instanceof YalcoChicken);
console.log(chain2, chain2 instanceof YalcoChicken);
console.log(chain3, chain3 instanceof YalcoChicken);- 객체 자체의 로그도 상세가 다름 유의 앞에 생성자 함수명이 붙음
instanceof: 객체가 특정 생성자 함수에 의해 만들어졌는지 여부 반환- 프로토타입의 constructor의 체인이 해당 생성자 함수 포함하는지 여부
- 콘솔에서 [[Prototype]] 펼쳐서 확인해볼 것
