๋ชฉ์ฐจ
๊ฐ์ฒด
JS๋ ๊ฐ์ฒด์งํฅ์ธ์ด์ด๋ค.
๊ฐ์ฒด๋ ํ๋กํผํฐ์ ๋ฉ์๋๋ก ์ด๋ฃจ์ด์ ธ ์๋๋ฐ
๋ํ ํ๋กํผํฐ๋ key: value๋ก ๊ตฌ์ฑ์ด ๋์ด์๋ค.
-> key(๋ฌธ์์ดor์ฌ๋ณผ), value(์ ์ฅํ ๋ฐ์ดํฐ)
์ฐธ๊ณ ๋ก ํจ์์ ๋ฐฐ์ด์ ๊ฐ์ฒด์ ์ํ๋ค.
๊ฐ์ฒด ์์ฑ ๋ฐฉ๋ฒ
๊ฐ์ฒด ๋ฆฌํฐ๋ด ๋ฐฉ์
"{ }"๋ก ๊ฐ์ฒด๋ฅผ ํํํ๋ ๊ฒ์ ๋ฆฌํฐ๋ด ๋ฐฉ์์ด๋ผ๊ณ ํ๋ค. (ํ์ด์ฌ dict์ ๋น์ท)
const ๊ฐ์ฒด๋ช
= {
key : value,
...
};
๊ฐ์ฒด๋ฅผ ์์ฑํ ๋์๋ ๋ณดํต const๋ฅผ ์ด์ฉํด ์์ ์ ์ธ์ ํด์ค๋ค.
๊ทธ์ ๋ฐ๋ผ ๊ฐ์ฒด ์์ฒด๋ฅผ ๋ฐ๊ฟ ์ ์์ง๋ง,
๋ด๋ถ์ ํ๋กํผํฐ, ๋ฉ์๋ ๋ฑ์ ๋ณ๊ฒฝ์ด ๊ฐ๋ฅํ๋ค!
(let์ ์ด์ฉํด ์์ฑํ๋ฉด ๊ฐ์ฒด ์์ฒด๋ ๋ฐ๊ฟ ์ ์๋ค.)
key
ํ๋กํผํฐ๋ช (key)์
๋ฐ์ดํ๋ฅผ ๋ถ์ด์ง ์์๋ ๋๊ณ ์ด๋ฌํ ๊ฒฝ์ฐ,
๋ฌธ์, ์ธ๋๋ฐ, ๋ฌ๋ฌ ๊ธฐํธ($) ๋ก ์์ํด์ผํ๋ฉฐ
ํ์ดํ๊ณผ ๋์ด์ฐ๊ธฐ๋ ํ ์ ์๋ค.
๋ํ
ํค์ ๋ฐ์ดํ('')๋ฅผ ๋ถ์ฌ์ผํ๋ ๊ฒฝ์ฐ๊ฐ ์๋๋ฐ
"์ซ์๋ก ์์ํ๋ ๊ฒฝ์ฐ, ํน์๋ฌธ์, ํ์ดํ, ๋์ด์ฐ๊ธฐ๊ฐ ์๋ ๊ฒฝ์ฐ" ์ด๋ค.
value
ํ๋กํผํฐ์ ๊ฐ(value)์
๋ชจ๋ ์๋ฃํ์ด ๊ฐ๋ฅํ๋ค.
- ์์
const newObject = {
title : "newtitle", //key, value
author : "Kassid",
"Y-M-D" : "20XX-0X-XX",
say : function(){ //๋ฉ์๋
console.log("Hi!");
}
};
console.log(newObject.title); //๊ฐ์ฒด ํ๋กํผํฐ์ ์ ๊ทผ
console.log(newObject.author);
newObject.say(); //๋ฉ์๋
>>>
newtitle
Kassid
Hi!
๊ฐ์ฒด์ CRUD
๊ฐ์ฒด ์ ๊ทผ๋ฒ (Read)
๊ฐ์ฒด๋ก์ ์ ๊ทผ์ ์ ํ๊ธฐ๋ฒ๊ณผ ๋๊ดํธํ๊ธฐ๋ฒ์ด ์๋ค.
const newObject = {
title : "newtitle",
author : "Kassid",
};
console.log(newObject.title); // ๋ฐฉ๋ฒ 1
console.log(newObject['title']); // ๋ฐฉ๋ฒ 2
>>>
newtitle
newtitle
์ ํ๊ธฐ๋ฒ ์ฌ์ฉ ์
๋ฐ์ดํ๋ฅผ ํ์ฉ์ ํ key๋ ์ ๊ทผํ ์ ์๋ค.
์ด๋ฌํ ๊ฒฝ์ฐ ๋๊ดํธํ๊ธฐ๋ฒ์ ํ์ฉํ์ฌ ์ ๊ทผํ ์ ์๋ค.
๋๊ดํธ ํ๊ธฐ๋ฒ ํ์ฉ์
์ฐ์ฐ์๋ ๋ณ์๋ ํ์ฉํ ์ ์๋ค.
let obj = {
'next Year' : 2023,
};
console.log(obj['next '+'Year']) //์ฐ์ฐ์ ํตํด์๋ ์ ๊ทผ ๊ฐ๋ฅ
let name = 'next Year'
console.log(obj[name]) //๋ณ์๋ฅผ ์ด์ฉํด๋ ์ ๊ทผ ๊ฐ๋ฅ
--------
2023
2023
๋ง์ฝ ์กด์ฌํ์ง ์๋ ํ๋กํผํฐ์ ์ ๊ทผํ๋ฉด undefined๋ฅผ ๋ฐํํ๋ค.
ํ๋กํผํฐ ์ถ๊ฐ, ์ ๊ฑฐ , ์์ (C, U, D)
- ์ถ๊ฐ
๊ฐ์ฒด.key = value ํน์ ๊ฐ์ฒด['key'] = value ๋ฅผ ์ด์ฉํ์ฌ
์๋ก์ด ํ๋กํผํฐ๋ฅผ ์ถ๊ฐํ ์ ์๋ค. (๊ฐ์ฒด์ ๋ํ ์์ ๋ ๊ฐ๋ฅ)
const newObject = {
title : "newtitle", //key, value
author : "Kassid",
};
// ํ๋กํผํฐ ์ถ๊ฐ
newObject.content = "newContents";
console.log(newObject.content);
// ๊ฐ์ฒด ์ถ๊ฐ
newObject.get = function(){ //ํจ์ ๊ฐ์ฒด๋ฅผ ์ถ๊ฐ
console.log('Hello!');
};
newObject.get();
>>>
newContents
Hello!
- ์์
์์ ์ญ์ ๊ฐ์ฒด.key = value ํน์ ๊ฐ์ฒด['key'] = value ๋ฅผ ์ด์ฉํ๋ค.
const newObject = {
title : "newtitle", //key, value
author : "Kassid",
};
// ํ๋กํผํฐ ์์
newObject.title = "My Post";
console.log(newObject.title);
>>>
My Post
- ์ ๊ฑฐ
์ ๊ฑฐ๋ฅผ ํ ๋์๋ "delete"๋ฅผ ์ด์ฉํ๋ค.
์ ๊ฑฐ๋ ํ๋กํผํฐ์ ์ ๊ทผํ๋ฉด undefined๋ฅผ ๋ฐํํ๋ค.
const newObject = {
title : "newtitle", //key, value
author : "Kassid",
};
// ํ๋กํผํฐ ์ ๊ฑฐ
delete newObject.author;
console.log(newObject.author);
>>>
undefined //์กด์ฌํ์ง ์์ผ๋ฏ๋ก undefined
๊ฐ์ฒด ์์ ๊ฐ์ฒด
const newObject = {
title : "newtitle",
author : "Kassid",
say : function(){
console.log("Hi!");
},
moreInfo : {
date : "2022-02-09",
pages : 1
}
};
console.log(newObject.moreInfo);
console.log(newObject.moreInfo.date);
>>>
{ date: '2022-02-09', pages: 1 }
2022-02-09
์ ๊ทผ ๋ฐฉ์์ ์ ํ๊ธฐ๋ฒ ํน์ ๋๊ดํธ ํ๊ธฐ๋ฒ์ผ๋ก ํธ๋ฆฌ๋ฅผ ๋ง๋ ๋ค.
ex) obj.Info.name OR obj.Info['name']
this
const newObject = {
title : "newtitle",
author : "Kassid",
show : function() {
console.log("title :",this.title);
console.log("author :",this.author);
}
};
nObject.show();
>>>
title : newtitle
author : Kassid
ํ์ด์ฌ์ self์ ๋น์ทํ ๊ฐ๋ ์ผ๋ก
JS์๋ this๊ฐ ์๊ณ ํ์ฌ ๊ฐ์ฒด๋ฅผ ๋ปํ๋ค!
get, set
JS์์ ๊ฐ์ฒด์ ํ๋กํผํฐ์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ์ผ๋ก ์ ๊ณตํ๋ ๊ฒ์ด๋ค.
(๊ฐ์ฒด ์งํฅ์ ์บก์ํ ์ปจ์ ?)
๊ฐ์ฒด ๋น๊ตํ๊ธฐ
๊ฐ์ฒด ๊ฐ์ ๋น๊ต์ ์ฃผ์ํ ์ ์ด ์๋ค.
1 === 1
'1' === '1'
undefined === undefined
>>>
true
true
true
๋๋ถ๋ถ์ ๊ฒฝ์ฐ ์์ ๊ฐ์ด ๋น๊ต๋ฅผ ํ ๊ฒฝ์ฐ true๋ฅผ ๋ฐํํ๋ค.
๊ทธ๋ฌ๋ ๊ฐ์ฒด๋ ๋ณ์์ ํ ๋นํ์ง ์๊ณ ๋ฐ๋ก ๋น๊ต๋ฅผ ํ๋ ๊ฒฝ์ฐ
false๋ฅผ ๋ฐํํ๋ค. (ํจ์, ๋ฐฐ์ด๋ ์ญ์ ํฌํจ)
{} === {};
{a : 1} === {a : 1};
>>>
false
--------
// ๋ณ์์ ํ ๋นํ ํ ๋น๊ต
let obj = {a : 1}
obj === obj;
>>>
true
์ด๋ { }๋ก ๋ฌถ๋ ๊ฒ ์์ฒด๊ฐ ์๋ก์ด ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์
๋์ ์๋ก ๋ค๋ฅธ ๊ฐ์ฒด๊ฐ ๋๋ ๊ฒ์ด๋ค.
๋ฐ๋ผ์ ๋ณ์์ ํ ๋น์ ํ ํ ๋น๊ตํด์ผ ์ํ๋ ๊ฒฐ๊ณผ๋ฅผ ์ป์ ์ ์๋ค.
๊ฐ์ฒด ๊ฐ ์ฐธ์กฐ๊ด๊ณ
const a = {
title : 'newTitle',
}
const b = a;
console.log(b.title);
>>>
newTitle
--------
a.title = 'newTitle2';
console.log(b.title);
>>>
newTitle2 //a๋ฅผ ์์ ํ์์ง๋ง b์ ํ๋กํผํฐ๋ ๋ณ๊ฒฝ๋จ
์ด๋ ์์ ๋ณต์ฌ๊ฐ ์ด๋ฃจ์ด์ง๋ ๊ฒ์ด๊ธฐ ๋๋ฌธ์ "์ฃผ์๊ฐ์ ๋ณต์ฌํ๋ ๊ฒ"์ด๋ค.
์ด๋ฌํ ์ฐธ์กฐํ๋ ๊ฐ์ด ๊ฐ์ a, b์ ๊ด๊ณ๋ฅผ ๊ฐ์ฒด ๊ฐ์ ์ฐธ์กฐ๊ด๊ณ๊ฐ ์๋ค๊ณ ํ๋ค.
๊ฐ์ฒด๊ฐ ์๋ ๊ฐ๋ค์ ์ด๋ฌํ ๊ด๊ณ๋ฅผ ๊ฐ์ง์ง ์๋๋ค.
let a = 'apple';
b = a;
a = 'banana';
console.log(a);
console.log(b);
>>> banana
>>> apple
์๋ฅผ ํตํด b์ a๋ฅผ ํ ๋นํ๊ณ a์ ์๋ก์ด ๊ฐ์ ๋ฃ์ ๊ฒฝ์ฐ
a๋ ์๋ก์ด ๋ฉ๋ชจ๋ฆฌ ๊ณต๊ฐ์ ํ ๋นํ๋ ๊ฒ์ ์ ์ ์๋ค.
class
๋ค๋ฅธ ๊ฐ์ฒด์งํฅ ์ธ์ด๋ค๊ณผ ์ ์ฌํ class๋ฌธ๋ฒ์ด ์๋ค!
constructor๋ ์์ฑ์์ด๋ค.
class Product {
constructor(subject, name, price) {
this.subject = subject;
this.name = name;
this.price = price;
}
}
const apple = new Product('Fruits','apple',1000);
console.log(apple);
>>>
Product { subject: 'Fruits', name: 'apple', price: 1000 }
์์, ๋คํ์ฑ๋ ์ง์ํ๋ค.
class Product {
constructor(name, price) {
this.name = name;
this.price = price;
}
show() {
console.log('Unknown subject');
}
}
class Food extends Product {
constructor(subject, name, price, color){
super(name,price);
this.subject = subject;
this.color = color;
}
show() {
console.log("suject :",this.subject, "name :",this.name, "price :",this.price, "color :",this.color);
return this;
}
}
const apple = new Food("Fruits", "apple", 1000, "red"); //new ํจ์()๋ฅผ ์ฌ์ฉํด ๊ฐ์ฒด๋ก ์ ์ธํ ์ ์๋ค.
apple.show()
extends๋ฅผ ์ด์ฉํด์ ์์์ ๋ฐ์ ์ ์๋ค.
๋ํ functionํค์๋ ์์ด ๊ทธ๋ฅ ๋ฐ๋ก ๋ฉ์๋๋ฅผ ์ ์ธํ๋ค.
๋คํ์ฑ ๋ถ๋ถ์์๋
์ธ์ ๊ฐ์ ๋ฑ์ ์๊ด์์ด ๊ทธ๋ฅ ํจ์๊ฐ ๋ฎ์ด์์์ง๋ค.
'๐ | WEB DEV > Vanilla JS' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
JS_๊ธฐ๋ณธ๋ฌธ๋ฒ (5)_๋ฐฐ์ด 1 (0) | 2022.02.15 |
---|---|
JS_๊ธฐ๋ณธ๋ฌธ๋ฒ (4)_๋ฐ๋ณต๋ฌธ (0) | 2022.02.11 |
JS_๊ธฐ๋ณธ ๋ฌธ๋ฒ (2)_์ฐ์ฐ์&ํจ์ (0) | 2022.02.08 |
JS_๊ธฐ๋ณธ ๋ฌธ๋ฒ (1)_๋ณ์ ~ ๋ฐ์ดํฐํ์ (0) | 2022.02.07 |
JS_์ฝ๋ฉํ๊ฒฝ ๊ตฌ์ถ(w. VSCODE) (0) | 2022.02.07 |
๋๊ธ