์ด๋ฒ ํฌ์คํ ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋นํธ์ธ ๊ฐ์ฒด์ ๋ํด ์์๋ณด์!
์๋ฐ์คํฌ๋ฆฝํธ์ ๊ฐ์ฒด๋ ํฌ๊ฒ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด, ํธ์คํธ ๊ฐ์ฒด, ์ฌ์ฉ์ ์ ์ ๊ฐ์ฒด 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)๋ฑ์ ์ ๊ณตํ๋ค.
๋ฌธ์ ๊ฐ์ฒด ๋ชจ๋ธ์ ํ์ฌ ์นํ์ด์ง์ ๋ชจ๋ธ์ ์์ฑํ๋ค. ์ต์์ ๊ฐ์ฒด๋ document ๊ฐ์ฒด๋ก ์ ์ฒด ๋ฌธ์๋ฅผ ํํํ๋ค. ๋ํ ์ด ๊ฐ์ฒด์ ์์ ๊ฐ์ฒด๋ค์ ๋ฌธ์์ ๋ค๋ฅธ ์์๋ค์ ํํํ๋ค.
๋ธ๋ผ์ฐ์ ๋ ์ฌ์ฉ์๊ฐ ๋์ด ์น ๋ฌธ์๋ฅผ ๊ตฌ์ฑ๊ณผ ๋ด์ฉ์ ๋ง๊ฒ ๊ฐ์ฒดํํ์ฌ ๊ฐ ์์๋ณ(ํ ์คํธ, ๋ฒํผ, ์ด๋ฏธ์ง)๋ก ํธ๋ฆฌ ๊ตฌ์กฐ๋ฅผ ์ด์ฉํด ๊ตฌ์กฐํ ํ๋ค.
์ด ์น๋ฌธ์์ ๋ํ ๋ด์ฉ์ ๋ด๊ณ ์๋ ๊ฐ์ฒด๋ฅผ(DOM)์ด๋ผ๊ณ ํ๋ค.
๋ธ๋ผ์ฐ์ ๊ฐ์ฒด ๋ชจ๋ธ์ ๋ธ๋ผ์ฐ์ ํญ ๋๋ ๋ธ๋ผ์ฐ์ ์ฐฝ์ ๋ชจ๋ธ์ ์์ฑํ๋ค. ์ต์์ ๊ฐ์ฒด๋ window ๊ฐ์ฒด๋ก ํ์ฌ ๋ธ๋ผ์ฐ์ ์ฐฝ ๋๋ ํญ์ ํํํ๋ ๊ฐ์ฒด์ด๋ค.
๋ํ ์ด ๊ฐ์ฒด์ ์์ ๊ฐ์ฒด ๋ค์ ๋ธ๋ผ์ฐ์ ์ ๋ค๋ฅธ ๊ธฐ๋ฅ๋ค์ ํํํ๋ค.
์ด๋ฏธ์ง ์ถ์ฒ : https://poiemaweb.com/js-built-in-object
DOM๊ณผ BOM์ ์์ ๊ฐ์ฒด๋ค์ ๋นํธ์ธ ๊ฐ์ฒด๊ฐ ๊ตฌ์ฑ๋ ํ์ ๊ตฌ์ฑ๋๋ค.
DOM์ ๋์ ๋ณด์ด๋ ์น๋ฌธ์์ ๋ํ ์ ์ด์ ๋ณ๊ฒฝ์ ์งํํ๋ค๋ฉด, BOM์ window ๊ฐ์ฒด๋ฅผ ํตํด ๋ธ๋ผ์ฐ์ ์ฐฝ ๋๋ ํญ์ ์ ์ดํ๊ฒ ๋๋ค.
ํฌ์คํ ์ ์์ฑํ๋ฉฐ ์๋ ๊ธ๋ค์ ์ฐธ์กฐํ์๋ค.
https://poiemaweb.com/js-built-in-object
https://goddino.tistory.com/71