๐TIL JavaScript๊ฐ์ฒด(Object)
๊ฐ์ฒด(Object)
JavaScript ์์๋ ์์ํ์
์ ์ ์ธํ ๋ชจ๋ ๋ฐ์ดํฐ ํ์
์ ๊ฐ์ฒด(Object)์
๋๋ค.
๊ฐ์ฒด(Object)๋ ์ฌ๋ฌ ์์ฑ์ ํ๋์ ๋ณ์์ ์ ์ ํ ์ ์๋๋ก ํด์ฃผ๋ ๋ฐ์ดํฐ ํ์
์ผ๋ก ํคkey
์ ๊ฐvalue
์ผ๋ก ๊ตฌ์ฑ๋ ํ๋กํผํฐ(Property)๋ค์ ์งํฉ๋๋ค.
- ํ๋กํผํฐ ํค: ๋น ๋ฌธ์์ด์ ํฌํจํ๋ ๋ชจ๋ ๋ฌธ์์ด ๋๋ ์ฌ๋ณผ ๊ฐ์ด ๋ค์ด๊ฐ ์ ์์
- ํ๋กํผํฐ ๊ฐ: ๋ชจ๋ ๊ฐ์ด ๋ค์ด๊ฐ ์ ์์
๊ฐ์ฒด(Object)์์ฑ ๋ฐฉ๋ฒ
๊ฐ์ฒด(Object)๋ฅผ ์ ์ธํ๋ ๋ฐฉ๋ฒ์ ์ธ๊ฐ์ง ์ ๋๊ฐ ์์ต๋๋ค.
๊ธฐ๋ณธobject()
๊ฐ์ฒด ์์ฑ์ ํจ์ ์ฌ์ฉ, ๊ฐ์ฒด ๋ฆฌํฐ๋ด ๋ฐฉ์ ์ฌ์ฉ, ์์ฑ์ ํจ์ ์ฌ์ฉ
Object() ๊ฐ์ฒด ์์ฑ์ ํจ์ ์ฌ์ฉ
์ด ๋ฐฉ๋ฒ์ JavaScript์ ๋ด์ฅ๋์ด ์๋ Object()
์์ฑ์ ํจ์๋ฅผ ์ฌ์ฉํ๋ ๋ฐฉ๋ฒ์
๋๋ค.
new Object
๋ฅผํตํด ๋น ๊ฐ์ฒด๋ฅผ ์์ฑํ๊ณ ๊ฐ์ฒด์ ํ๋กํผํฐ๋ฅผ ํ ๋นํ๊ธฐ
//๋น ๊ฐ์ฒด ์์ฑ
let person = new Object();
//person ๊ฐ์ฒด์ ํ๋กํผํฐ ํ ๋น
person.name = "ํ์";
person.age = 25;
person.frontend = "True";
console.log(person);
//๊ฒฐ๊ณผ
{ name: 'ํ์', age: 25, frontend: 'True' }
๊ฐ์ฒด ๋ฆฌํฐ๋ด ๋ฐฉ์ ์ฌ์ฉ
์ด ๋ฐฉ๋ฒ์ ๊ฐ์ฒด ๋ฆฌํฐ๋ด ๋ฐฉ์์ผ๋ก {}
๋ฅผ ์ฌ์ฉํ์ฌ ๊ฐ์ฒด๋ฅผ ์์ฑ ํ ์ ์์ต๋๋ค.
let person = {
name: "ํ์",
age: 25,
frontend: "Yes"
};
console.log(peroson);
//๊ฒฐ๊ณผ
{ name: 'ํ์', age: 25, frontend: 'Yes' }
์์ฑ์ ํจ์ ์ฌ์ฉ
์ด ๋ฐฉ๋ฒ์ ํจ์๋ฅผ ํตํด์ ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ ๋ฐฉ์์ ๋๋ค.
function person (name, age, frontend) {
this.name = name;
this.age = age;
this.frontend = frontend;
}
let person1 = new person("ํ์", 25, "Yes");
console.log(person1)
//๊ฒฐ๊ณผ
person = {
name: "ํ์",
age: 25,
frontend: "Yes"
}
๊ฐ์ฒด ํ๋กํผํฐ
ํ๋กํผํฐ๋ ํ๋กํผํฐ ํคkey
์ ํ๋กํผํฐ ๊ฐvalue
์ผ๋ก ๊ตฌ์ฑ๋์ด ์์ต๋๋ค. ๊ฐ์ฒด์์๋ ํ๋กํผํฐ ํค๋ก ํ๋กํผํฐ๋ฅผ ์๋ณ ํฉ๋๋ค.
- ํ๋กํผํฐ ํค : ๋น ๋ฌธ์์ด์ ํฌํจํ๋ ๋ชจ๋ ๋ฌธ์์ด ๋๋ ์ฌ๋ณผ ๊ฐ
- ํ๋กํผํฐ ๊ฐ : ๋ชจ๋ ๊ฐ
์ด์ ๊ฐ์ฒด ํ๋กํผํฐ ๊ฐ์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ์ด๋ ๊ฐ์ ์์ , ๊ฐ์ ์ญ์ ํ๋ ๋ฐฉ๋ฒ๋ค์ ์์๋ณด๊ฒ ์ต๋๋ค
๊ฐ์ฒด ํ๋กํผํฐ ๊ฐ ์ ๊ทผ ๋ฐฉ๋ฒ
๊ฐ์ฒด์ ํ๋กํผํฐ ๊ฐ์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ์ ๋๊ฐ์ง๊ฐ ์์ต๋๋ค.
๋ง์นจํ .
(Dot notation)์ผ๋ก ์ ๊ทผํ๋ ๋ฐฉ๋ฒ๊ณผ ๋๊ดํธ []
(Braket notation)์ผ๋ก ์ ๊ทผ ํ๋ ๋ฐฉ๋ฒ์ด ์์ต๋๋ค.
๋ง์นจํ(Dot notation)
๋ง์นจํ ๋๋ ๋ท ์ผ๋ก ๋ถ๋ฆฌ๋ (.)
์ผ๋ก ์ผ๋ก ํ๋กํผํฐ์ ์ ๊ทผํ๋ ๋ฐฉ๋ฒ์
๋๋ค.
Dot notation ์์์ key
๋ ๊ฐ์ฒด์ ํ๋กํผํฐ๋ง ํ์ฉ๋๊ธฐ ๋๋ฌธ์ ๋ณ์๋ฅผ ํตํด key๊ฐ์ ์ฐธ์กฐ ํ ์ ์์ต๋๋ค.
let person = {
name: "ํ์",
age: 25,
frontend: "Yes"
};
//๊ฐ๋ฅ
console.log(person.name); //"ํ์"
console.log(person.age); // 25
console.log(person.frontend); // "True"
//๋ถ๊ฐ๋ฅ
let keyName = "name";
console.log(person.keyName); //underfined
๋๊ดํธ(Braket notation)
Braket notation์ []
์ฌ์ด์ key ๊ฐ์ ๋ฌธ์์ด๋ก ๋ฃ์ด์ ํ๋กํผํฐ ์ ๊ทผ ๊ฐ๋ฅํ ๋ฐฉ๋ฒ์
๋๋ค.
๋ณ์๋ฅผ ํตํด key๊ฐ์ ์ฐธ์กฐํ๋๊ฒ Dot notation์์ ๋ถ๊ฐ๋ฅ์ด์์ง๋ง Braket notation ์์ ๊ฐ๋ฅํฉ๋๋ค.
let person = {
name: "ํ์",
age: 25,
frontend: "Yes"
};
console.log(person["name"]); //"ํ์"
console.log(person["age"]); // 25
console.log(person["frontend"]); // "True"
//๋ณ์๋ก ์ ๊ทผ
let keyName = "age"
console.log(person[keyName]) // 25
ํ๋กํผํฐ ๊ฐ ์ถ๊ฐ/์์ /์ญ์
ํ๋กํผํฐ ๊ฐ ์ถ๊ฐ
๊ฐ์ฒด๊ฐ ์์ ์๋ ํ๋กํผํฐ ํค์ ๊ฐ์ ํ ๋นํด์ฃผ๋ฉด ์ฃผ์ด์ง ํค์ ๊ฐ์ผ๋ก ํ๋กํผํฐ๋ฅผ ๋ง๋ค์ด ๊ฐ์ฒด์ ์ถ๊ฐ ํ ์ ์์ต๋๋ค.
let person = {
name: "ํ์",
age: 25,
frontend: "Yes"
};
person.MBTI = "ESFJ";
console.log(person);
// ์์ console.log ๊ฐ
name: 'ํ์',
age: 25,
frontend: 'Yes',
MBTI: 'ESFJ'
ํ๋กํผํฐ ๊ฐ ์์
๊ฐ์ฒด ์์ ์๋ ํ๋กํผํฐ์ ์๋ก์ด ๊ฐ์ ํ ๋นํ๋ฉด ๊ทธ ๊ฐ์ผ๋ก ์์ ๋ฉ๋๋ค.
let person = {
name: "ํ์",
age: 25,
frontend: "Yes",
MBTI: 'ESFJ'
};
person.name = "TaeYang";
console.log(person.name); //"TeaYang"
ํ๋กํผํฐ ์ญ์
์ฐ์ฐ์ delete
๋ฅผ ์ฌ์ฉํ์ฌ ํ๋กํผํฐ๋ฅผ ์ญ์ ํ ์ ์์ต๋๋ค. ์ด๋ ํผ์ฐ์ฐ์๋ ํ๋กํผํฐ ํค์ฌ์ผ๋ง ํฉ๋๋ค!.
let person = {
name: "ํ์",
age: 25,
frontend: "Yes",
MBTI: 'ESFJ'
};
delete person.frontend;
console.log(person);
//์์ console.log ๊ฐ
name: "ํ์",
age: 25,
MBTI: 'ESFJ'
์ฐธ๊ณ
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐TIL JavaScript๊ฐ์ฒด(Object)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค
https://velog.io/@xodid157/TIL-JavaScriptObject
์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์
๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ
์ธ ๋ฐ๊ฒฌ์ ์ ๋
(Collection and Share based on the CC Protocol.)
Author And Source
์ด ๋ฌธ์ ์ ๊ดํ์ฌ(๐TIL JavaScript๊ฐ์ฒด(Object)), ์ฐ๋ฆฌ๋ ์ด๊ณณ์์ ๋ ๋ง์ ์๋ฃ๋ฅผ ๋ฐ๊ฒฌํ๊ณ ๋งํฌ๋ฅผ ํด๋ฆญํ์ฌ ๋ณด์๋ค https://velog.io/@xodid157/TIL-JavaScriptObject์ ์ ๊ท์: ์์์ ์ ๋ณด๊ฐ ์์์ URL์ ํฌํจ๋์ด ์์ผ๋ฉฐ ์ ์๊ถ์ ์์์ ์์ ์ ๋๋ค.
์ฐ์ํ ๊ฐ๋ฐ์ ์ฝํ ์ธ ๋ฐ๊ฒฌ์ ์ ๋ (Collection and Share based on the CC Protocol.)
์ข์ ์นํ์ด์ง ์ฆ๊ฒจ์ฐพ๊ธฐ
๊ฐ๋ฐ์ ์ฐ์ ์ฌ์ดํธ ์์ง
๊ฐ๋ฐ์๊ฐ ์์์ผ ํ ํ์ ์ฌ์ดํธ 100์ ์ถ์ฒ ์ฐ๋ฆฌ๋ ๋น์ ์ ์ํด 100๊ฐ์ ์์ฃผ ์ฌ์ฉํ๋ ๊ฐ๋ฐ์ ํ์ต ์ฌ์ดํธ๋ฅผ ์ ๋ฆฌํ์ต๋๋ค