๐Ÿ“–๋นŒํŠธ์ธ ๊ฐ์ฒด

๊ธฐ๋ก์ผ๊ธฐ๐Ÿ“ซยท2021๋…„ 4์›” 29์ผ
0

Javascript ๊ฐœ๋…์ •๋ฆฌ

๋ชฉ๋ก ๋ณด๊ธฐ
14/15

์ด๋ฒˆ ํฌ์ŠคํŒ…์—์„œ๋Š” ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋นŒํŠธ์ธ ๊ฐ์ฒด์— ๋Œ€ํ•ด ์•Œ์•„๋ณด์ž!

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๊ฐ์ฒด๋Š” ํฌ๊ฒŒ ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด, ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด, ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ์ฒด 3๊ฐœ๋กœ ๋ถ„๋ฆฌ๋œ๋‹ค.

  • ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด
  • ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด
  • ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ์ฒด

์˜ค๋Š˜์€ ์ด ์ค‘ ๋นŒํŠธ์ธ ๊ฐ์ฒด์— ๋Œ€ํ•ด ์•Œ์•„๋ณด๋„๋ก ํ•˜์ž.

ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด

ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด๋ž€?

ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด(Built-in objects)๋Š” ECMAScript ์‚ฌ์–‘์— ์ •์˜๋œ ๊ฐ์ฒด๋ฅผ ๋งํ•˜๋ฉฐ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์˜ ๊ณตํ†ต ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•œ๋‹ค. ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ํ™˜๊ฒฝ(๋ธŒ๋ผ์šฐ์ € or Nodejs)์— ์ƒ๊ด€์—†์ด ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

์‰ฝ๊ฒŒ ๋งํ•˜๋ฉด ๋ฏธ๋ฆฌ ์ •์˜๋˜์–ด ์žˆ์–ด์„œ ์„ ์–ธ ํ•˜์ง€ ์•Š์•„๋„ ๋ฐ”๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋Š” ๊ฐ์ฒด๋“ค์„ ๋งํ•œ๋‹ค.

ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด์˜ ์ข…๋ฅ˜

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์ด 40์—ฌ๊ฐœ์˜ ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด๋ฅผ ์ œ๊ณตํ•˜๋ฉฐ ์ข…๋ฅ˜๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค.

  • Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Set, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error๋“ฑ

์œ„ ๊ฐ์ฒด๋“ค์€ ๋ณ„๋„์˜ ์„ ์–ธ ์—†์ด ์ƒ์„ฑ๋˜๋ฉฐ ํ•ด๋‹น ๊ฐ์ฒด๊ฐ€ ๊ฐ€์ง€๊ณ  ์žˆ๋Š” ๋ฉ”์„œ๋“œ๋“ค ๋˜ํ•œ ์‚ฌ์šฉ ๊ฐ€๋Šฅํ•˜๋‹ค.

์›์‹œ๊ฐ’๊ณผ ๋ž˜ํผ ๊ฐ์ฒด

๊ทธ๋Ÿฌ๋ฉด ์›์‹œ๊ฐ’์ด ์žˆ๋Š”๋ฐ๋„ String, Number, Boolean๋“ฑ์˜ ํ‘œ์ค€ ๋นŒํŠธ์ธ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๊ฐ€ ์กด์žฌํ•˜๋Š” ์ด์œ ๋Š” ๋ฌด์—‡์ผ๊นŒ?

๋‹ค์Œ ์ฝ”๋“œ๋ฅผ ๋ณด์ž. ์›์‹œ๊ฐ’์€ ๊ฐ์ฒด๊ฐ€ ์•„๋‹ˆ๋ฏ€๋กœ ํ”„๋กœํผํ‹ฐ๋‚˜ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์—†๋Š”๋ฐ๋„ ์›์‹œ๊ฐ’์ธ ๋ฌธ์ž์—ด์ด ๋งˆ์น˜ ๊ฐ์ฒด์ฒ˜๋Ÿผ ๋™์ž‘ํ•œ๋‹ค.

const str = 'hello';

console.log(str.length);
console.log(str.lowerCase());

์›์‹œ๊ฐ’์€ ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์งˆ ์ˆ˜ ์—†๋Š”๋ฐ str์€ ์–ด๋–ป๊ฒŒ length ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ€์ง€๊ณ , lowerCase ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœ ํ•  ์ˆ˜ ์žˆ๋Š”๊ฑธ๊นŒ?

์ด์œ ๋Š” Javascript ์—”์ง„์ด ์•”๋ฌต์ ์œผ๋กœ ์—ฐ๊ด€๋œ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์ƒ์„ฑ๋œ ๊ฐ์ฒด๋กœ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•˜๊ฑฐ๋‚˜ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๋‹ค์‹œ ์›์‹œ๊ฐ’์œผ๋กœ ๋˜๋Œ๋ ค์ฃผ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์ด๋ ‡๊ฒŒ ์ž„์‹œ๋กœ ์ƒ์„ฑ๋˜๋Š” ๊ฐ์ฒด๋ฅผ ๋ž˜ํผ ๊ฐ์ฒด ๋ผ๊ณ  ํ•œ๋‹ค. ์ƒ์„ฑ๋œ ์ž„์‹œ ๋ž˜ํผ ๊ฐ์ฒด๋Š” ์‚ฌ์šฉ ํ›„ ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ์— ์˜ํ•ด ํ•ด์ œ๋œ๋‹ค.

์ „์—ญ ๊ฐ์ฒด

์ „์—ญ ๊ฐ์ฒด๋Š” ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋˜๊ธฐ ์ด์ „ ๋‹จ๊ณ„์— ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์— ์˜ํ•ด ์–ด๋– ํ•œ ๊ฐ์ฒด๋ณด๋‹ค๋„ ๋จผ์ € ์ƒ์„ฑ๋˜๋Š” ๊ฐ์ฒด์ด๋‹ค.

๋ธŒ๋ผ์šฐ์ €์—์„œ ์ „์—ญ ๊ฐ์ฒด๋Š” window, node์—์„œ ์ „์—ญ ๊ฐ์ฒด๋Š” global์„ ํ†ตํ•ด ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.

globalThis: ECMAScript11์—์„œ ๋„์ž…๋œ globalThis๋Š” ๋ธŒ๋ผ์šฐ์ €์™€ Node.js ํ™˜๊ฒฝ์—์„œ ์ „์—ญ ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋˜ ๋‹ค์–‘ํ•œ ์‹๋ณ„์ž๋ฅผ ํ†ต์ผํ•œ ์‹๋ณ„์ž์ด๋‹ค.

์ „์—ญ ๊ฐ์ฒด๋Š” ์•ž์„œ ์„ค๋ช…ํ•œ ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด(Object, String, Number, Function, Array ๋“ฑ)์„ ํ”„๋กœํผํ‹ฐ๋กœ ๊ฐ–๋Š”๋‹ค.

ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด

ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด(Host object)๋Š” ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ์—์„œ ์ œ๊ณตํ•˜๋Š” window, HTMLElement ๋“ฑ์˜ DOM ๋…ธ๋“œ ๊ฐ์ฒด์™€ ๊ฐ™์ด ํ˜ธ์ŠคํŠธ ํ™˜๊ฒฝ์— ์ •์˜๋œ ๊ฐ์ฒด๋ฅผ ๋งํ•œ๋‹ค. ์˜ˆ๋ฅผ ๋“ค์–ด ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ํ™˜๊ฒฝ๊ณผ ๋ธŒ๋ผ์šฐ์ € ์™ธ๋ถ€์—์„œ ๋™์ž‘ํ•˜๋Š” ํ™˜๊ฒฝ์˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ(Node.js)๋Š” ๋‹ค๋ฅธ ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ํ™˜๊ฒฝ์˜ ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด๋Š” ์ „์—ญ ๊ฐ์ฒด์ธ window, BOM(Browser Object Model)๊ณผ DOM(Document Object Model)๋“ฑ์„ ์ œ๊ณตํ•œ๋‹ค.

DOM (Document Object Model)

๋ฌธ์„œ ๊ฐ์ฒด ๋ชจ๋ธ์€ ํ˜„์žฌ ์›นํŽ˜์ด์ง€์˜ ๋ชจ๋ธ์„ ์ƒ์„ฑํ•œ๋‹ค. ์ตœ์ƒ์œ„ ๊ฐ์ฒด๋Š” document ๊ฐ์ฒด๋กœ ์ „์ฒด ๋ฌธ์„œ๋ฅผ ํ‘œํ˜„ํ•œ๋‹ค. ๋˜ํ•œ ์ด ๊ฐ์ฒด์˜ ์ž์‹ ๊ฐ์ฒด๋“ค์€ ๋ฌธ์„œ์˜ ๋‹ค๋ฅธ ์š”์†Œ๋“ค์„ ํ‘œํ˜„ํ•œ๋‹ค.

๋ธŒ๋ผ์šฐ์ €๋Š” ์‚ฌ์šฉ์ž๊ฐ€ ๋„์šด ์›น ๋ฌธ์„œ๋ฅผ ๊ตฌ์„ฑ๊ณผ ๋‚ด์šฉ์— ๋งž๊ฒŒ ๊ฐ์ฒดํ™”ํ•˜์—ฌ ๊ฐ ์š”์†Œ๋ณ„(ํ…์ŠคํŠธ, ๋ฒ„ํŠผ, ์ด๋ฏธ์ง€)๋กœ ํŠธ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ์ด์šฉํ•ด ๊ตฌ์กฐํ™” ํ•œ๋‹ค.

์ด ์›น๋ฌธ์„œ์— ๋Œ€ํ•œ ๋‚ด์šฉ์„ ๋‹ด๊ณ ์žˆ๋Š” ๊ฐ์ฒด๋ฅผ(DOM)์ด๋ผ๊ณ  ํ•œ๋‹ค.

BOM (Browser Object Model)

๋ธŒ๋ผ์šฐ์ € ๊ฐ์ฒด ๋ชจ๋ธ์€ ๋ธŒ๋ผ์šฐ์ € ํƒญ ๋˜๋Š” ๋ธŒ๋ผ์šฐ์ € ์ฐฝ์˜ ๋ชจ๋ธ์„ ์ƒ์„ฑํ•œ๋‹ค. ์ตœ์ƒ์œ„ ๊ฐ์ฒด๋Š” window ๊ฐ์ฒด๋กœ ํ˜„์žฌ ๋ธŒ๋ผ์šฐ์ € ์ฐฝ ๋˜๋Š” ํƒญ์„ ํ‘œํ˜„ํ•˜๋Š” ๊ฐ์ฒด์ด๋‹ค.

๋˜ํ•œ ์ด ๊ฐ์ฒด์˜ ์ž์‹ ๊ฐ์ฒด ๋“ค์€ ๋ธŒ๋ผ์šฐ์ €์˜ ๋‹ค๋ฅธ ๊ธฐ๋Šฅ๋“ค์„ ํ‘œํ˜„ํ•œ๋‹ค.

์ด๋ฏธ์ง€ ์ถœ์ฒ˜ : https://poiemaweb.com/js-built-in-object

DOM๊ณผ BOM์˜ ์ž์‹ ๊ฐ์ฒด๋“ค์€ ๋นŒํŠธ์ธ ๊ฐ์ฒด๊ฐ€ ๊ตฌ์„ฑ๋œ ํ›„์— ๊ตฌ์„ฑ๋œ๋‹ค.

DOM์€ ๋ˆˆ์— ๋ณด์ด๋Š” ์›น๋ฌธ์„œ์— ๋Œ€ํ•œ ์ œ์–ด์™€ ๋ณ€๊ฒฝ์„ ์ง„ํ–‰ํ•œ๋‹ค๋ฉด, BOM์€ window ๊ฐ์ฒด๋ฅผ ํ†ตํ•ด ๋ธŒ๋ผ์šฐ์ € ์ฐฝ ๋˜๋Š” ํƒญ์„ ์ œ์–ดํ•˜๊ฒŒ ๋œ๋‹ค.

reference

ํฌ์ŠคํŒ…์„ ์ž‘์„ฑํ•˜๋ฉฐ ์•„๋ž˜ ๊ธ€๋“ค์„ ์ฐธ์กฐํ•˜์˜€๋‹ค.

https://poiemaweb.com/js-built-in-object
https://goddino.tistory.com/71

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