js-object

hazel'sยท2022๋…„ 3์›” 17์ผ
0

javascript

๋ชฉ๋ก ๋ณด๊ธฐ
5/12
post-custom-banner

๐Ÿ“•Object(๊ฐ์ฒด)

๊ฐ์ฒด๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๋ฐ์ดํ„ฐ ํƒ€์ž… ์ค‘์˜ ํ•˜๋‚˜์ด๋ฉฐ, ์˜์–ด๋กœ๋Š” object๋ผ๊ณ  ํ‘œํ˜„ํ•ฉ๋‹ˆ๋‹ค.

key๊ฐ’๊ณผ value๊ฐ’์„ ์Œ์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๊ณ , ๋ฐฐ์—ด๊ณผ๋Š” ๋‹ค๋ฅด๊ฒŒ ์ˆœ์„œ๊ฐ€ ์ค‘์š”ํ•˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.
๊ฐ์ฒด๋Š” 0๊ฐœ ์ด์ƒ์˜ ํ”„๋กœํผํ‹ฐ๋กœ ๊ตฌ์„ฑ๋œ ์ง‘ํ•ฉ์ด๋‹ค.
ํ”„๋กœํผํ‹ฐ๋Š” {key:value}๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค.

let person={
name:"lee",
age:20,
major:'physics'
}

์ด๋Ÿฐ ๊ฐ์ฒด๋Š” ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด(object literal) ์ด๋ผ๊ณ  ๋ถ€๋ฆ…๋‹ˆ๋‹ค. ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•  ๋•Œ ์ปจํ…์ธ ๋ฅผ ๊ทธ๋Œ€๋กœ ๋Œ€์ž…ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์€ ํด๋ž˜์Šค๋กœ๋ถ€ํ„ฐ ์ƒ์„ฑํ•˜๋Š” ๋ฐฉ์‹๊ณผ๋Š” ๋‹ค๋ฆ…๋‹ˆ๋‹ค.
๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์„ ์‚ฌ์šฉํ•ด์„œ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” ๊ฒƒ์€ ์—ฐ์†๋œ ๊ตฌ์กฐ์ฒด๋‚˜ ์—ฐ๊ด€๋œ ๋ฐ์ดํ„ฐ๋ฅผ ์ผ์ •ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ณ€ํ™˜ํ•˜๊ณ ์ž ํ•  ๋•Œ ๋งŽ์ด ์“ฐ์ด๋Š” ๋ฐฉ๋ฒ•์ด๋‹ค. ์˜ˆ๋ฅผ ๋“ค๋ฉด ์„œ๋ฒ„์—๊ฒŒ ์ฃผ์†Œ๋ฅผ ๋ฐ์ดํ„ฐ๋ฒ ์ด์Šค์— ๋„ฃ์–ด๋‹ฌ๋ผ๊ณ  ์š”์ฒญํ•˜๋Š” ๊ฒฝ์šฐ์ด๋‹ค. ๊ฐ ์•„์ดํ…œ๋“ค์„ ํ•˜๋‚˜ ํ•˜๋‚˜ ๊ฐœ๋ณ„ ์ „์†กํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค, ํ•˜๋‚˜์˜ ๊ฐ์ฒด๋ฅผ ์ „์†กํ•˜๋Š” ๊ฒƒ์ด ํ›จ์”ฌ ํšจ์œจ์ ์ž„. ๋˜ ๊ฐ ์•„์ดํ…œ๋“ค์„ ์ด๋ฆ„์œผ๋กœ ๊ตฌ๋ถ„ํ•ด์„œ ์‚ฌ์šฉํ•˜๊ธฐ ์›ํ•  ๋•Œ๋„ ๋ฐฐ์—ด์„ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ๋ณด๋‹ค ํ›จ์”ฌ ์‰ฝ๋‹ค.

Dot Notation vs Bracket Notation

๐Ÿ”น Dot Notation(์  ํ‘œ๊ธฐ๋ฒ•)
-.(์˜จ์ )์„ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

person.name;
person.age;

๊ฐ์ฒด ์ด๋ฆ„(person)์€ ๋„ค์ž„์ŠคํŽ˜์ด์Šค์ฒ˜๋Ÿผ ๋™์ž‘ํ•ฉ๋‹ˆ๋‹ค. ๊ฐ์ฒด๋‚ด์— ์บก์Šํ™”๋˜์–ด์žˆ๋Š”๊ฒƒ์— ์ ‘๊ทผํ•˜๋ ค๋ฉด ๋จผ์ € ์ ์„ ์ž…๋ ฅํ•ด์•ผํ•ฉ๋‹ˆ๋‹ค. ๊ทธ ๋‹ค์Œ ์ ์„ ์ฐ๊ณ  ์ ‘๊ทผํ•˜๊ณ ์ž ํ•˜๋Š” ํ•ญ๋ชฉ์„ ์ ์Šต๋‹ˆ๋‹ค. ๊ฐ„๋‹จํ•œ ํ”„๋กœํผํ‹ฐ์˜ ์ด๋ฆ„์ผ ์ˆ˜๋„ ์žˆ์„ ๊ฒƒ์ด๊ณ , ๋ฐฐ์—ด์˜ ์ผ๋ถ€์ด๊ฑฐ๋‚˜ ๊ฐ์ฒด์˜ ๋ฉ”์†Œ๋“œ๋ฅผ ํ˜ธ์ถœํ•  ์ˆ˜๋„ ์žˆ์Šต๋‹ˆ๋‹ค.

let person={
name:{"first":"hj","last":"lee"},
age:20,
major:'physics'
}
person.name.first;
//
"hj"

ํ•˜์œ„ namespace ๋’ค์— ์ ์„ ์ฐ์–ด์ฃผ๋ฉด ๋œ๋‹ค.

๐Ÿ”น Bracket Notation
-[]๊ณผ ''์„ ์ด์šฉํ•˜๋Š” ๋ฐฉ๋ฒ•

person['name'];
person.['age'];

์ด๋Ÿฐ ๋ฐฉ์‹์€ ๋ฐฐ์—ด ์†์— ์žˆ๋Š” ํ•ญ๋ชฉ์— ์ ‘๊ทผํ•˜๋Š” ๋ฐฉ๋ฒ•๊ณผ ๋งค์šฐ ์œ ์‚ฌํ•ด ๋ณด์ด๋Š”๋ฐ ์‹ค์ œ๋กœ๋„ ์ด๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ๋™์ผํ•œ ๊ฒƒ์ž…๋‹ˆ๋‹ค. ํ•œ ํ•ญ๋ชฉ์„ ์„ ํƒํ•˜๊ธฐ ์œ„ํ•ด ์ธ๋ฑ์Šค ์ˆซ์ž๋ฅผ ์ด์šฉํ•˜๋Š” ๋Œ€์‹ ์— ๊ฐ ๋ฉค๋ฒ„์˜ ๊ฐ’๋“ค๊ณผ ์—ฐ๊ฒฐ๋œ ์ด๋ฆ„์„ ์ด์šฉํ•ฉ๋‹ˆ๋‹ค. ๊ฐ์ฒด๊ฐ€ ๊ฐ„ํ˜น ์—ฐ๊ด€๋ฐฐ์—ด (associative arrays)์ด๋ผ๊ณ  ๋ถˆ๋ฆฌ๋Š” ๊ฒƒ์ด ๋‹น์—ฐํ•ฉ๋‹ˆ๋‹ค. ์—ฐ๊ด€๋ฐฐ์—ด์€ ๋ฐฐ์—ด์ด ์ˆซ์ž๋ฅผ ๊ฐ’์— ์—ฐ๊ฒฐํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€ ๋ฐฉ๋ฒ•์œผ๋กœ ๋ฌธ์ž์—ด์„ ๊ฐ’์— ๋งคํ•‘ํ•ฉ๋‹ˆ๋‹ค.

let person={
name:{"first":"hj","last":"lee"},
age:20,
major:'physics'
}
person['name']['first'];
//
"hj"

profile
์ข‹์•„ํ•˜๋Š” ๊ฒƒ์„ ํ•˜๋‚˜ํ•˜๋‚˜ ์ฑ„์›Œ๊ฐ€๋ฉด ํ–‰๋ณตํ•ด์งˆ๊บผ์•ผ
post-custom-banner

0๊ฐœ์˜ ๋Œ“๊ธ€