๋ฐ์ํ
๐ ์๋ฐ์คํฌ๋ฆฝํธ ๊ฐ์ฒด์ ๋ถ๋ฅ
- ํ์ค ๋นํธ์ธ ๊ฐ์ฒด : ECMAScript ์ฌ์์ ์ ์๋ ๊ฐ์ฒด๋ก ์๋ฐ์คํฌ๋ฆฝํธ ์คํํ๊ฒฝ๊ณผ ๊ด๊ณ์์ด ์ฌ์ฉํ ์ ์๋, ์ ์ญ ๊ฐ์ฒด์ ํ๋กํผํฐ๋ก์ ์ ๊ณต๋๋ ๊ฒ.
- ํธ์คํธ ๊ฐ์ฒด : ์๋ฐ์คํฌ๋ฆฝํธ ์คํ ํ๊ฒฝ์์ ์ถ๊ฐ๋ก ์ ๊ณตํ๋ ๊ฐ์ฒด๋ก Web API(DOM, BOM, Canvas, fetch ,requestAnimationFrame, SVG, Web Storage ๋ฑ), Node.js ๊ณ ์ ์ API.
- ์ฌ์ฉ์ ์ ์ ๊ฐ์ฒด : ์ฌ์ฉ์๊ฐ ์ง์ ์ ์ํ ๊ฐ์ฒด๋ฅผ ์๋ฏธ.
๐ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด
- ์๋ฐ์คํฌ๋ฆฝํธ๋ Object, String, Number, Boolean, Symbol, Date, Math, RefExp, Array, Map/Set, Function, Promise, Reflect, Proxy, JSON, Error ๋ฑ 40์ฌ ๊ฐ์ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๋ฅผ ์ ๊ณตํ๋ฉฐ Math, Reflect, JSON์ ์ ์ธํ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๋ ๋ชจ๋ ์ธ์คํด์ค๋ฅผ ์์ฑํ ์ ์๋ ์์ฑ์ ํจ์ ๊ฐ์ฒด
- ์์ฑ์ ํจ์ ๊ฐ์ฒด์ธ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๋ ํ๋กํ ํ์ ๋ฉ์๋์ ์ ์ ๋ฉ์๋๋ฅผ ์ ๊ณต
- ์์ฑ์ ํจ์ ๊ฐ์ฒด๊ฐ ์๋ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๋ ์ ์ ๋ฉ์๋๋ง ์ ๊ณต
- ์์ฑ์ ํจ์์ธ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด๊ฐ ์์ฑํ ์ธ์คํด์ค์ ํ๋กํ ํ์
์ ํ์ค ๋นํธ์ธ ๊ฐ์ฒด์ prototype ํ๋กํผํฐ์ ๋ฐ์ธ๋ฉ๋ ๊ฐ์ฒด
// String ์์ฑ์ ํจ์์ ์ํ String ๊ฐ์ฒด ์์ฑ const strObj = new String("Park"); // String ์์ฑ์ ํจ์๋ฅผ ํตํด ์์ ํ strObj ๊ฐ์ฒด์ ํ๋กํ ํ์ ์ String.prototype console.log(Object.getPrototypeOf(strObj) === String.prototype); // trueโ
- ํ์ค ๋นํธ์ธ ๊ฐ์ฒด์ prototype ํ๋กํผํฐ์ ๋ฐ์ธ๋ฉ๋ ๊ฐ์ฒด(String.prototype)๋ ๋ค์ํ ๊ธฐ๋ฅ์ ๋นํธ์ธ ํ๋กํ ํ์
๋ฉ์๋๋ฅผ ์ ๊ณตํ๋ฉฐ ์ธ์คํด์ค ์์ด๋ ํธ์ถ ๊ฐ๋ฅํ ๋นํธ์ธ ์ ์ ๋ฉ์๋๋ฅผ ์ ๊ณต
const numObj = new Number(3.5); //Number ๊ฐ์ฒด ์์ฑ // toFixed๋ Number.prototype์ ํ๋กํ ํ์ ๋ฉ์๋์ด๋ค. console.log(numObj.toFixed()); //4 // isInteger๋ Number์ ์ ์ ๋ฉ์๋๋ค. console.log(Number.isInteger(3.5)); //falseโ
๐ ์์๊ฐ๊ณผ ๋ํผ ๊ฐ์ฒด
๋ฌธ์์ด, ์ซ์, ๋ถ๋ฆฌ์ธ ๋ฑ์ ์์๊ฐ๊ณผ ๋ณ๊ฐ๋ก ํด๋น ๊ฐ์ฒด๋ฅผ ์์ฑํ๋ ํ์ค ๋นํธ์ธ ์์ฑ์ ํจ์๊ฐ ์กด์ฌํ๋ ์ด์ ?
- ์์๊ฐ์ ๊ฐ์ฒด๊ฐ ์๋์ง๋ง ๋ง์นจํ ํ๊ธฐ๋ฒ์ผ๋ก ์ ๊ทผํ๋ฉด ๋ง์น ๊ฐ์ฒด์ฒ๋ผ ๋์.
- ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ ์๋ฌต์ ์ผ๋ก ์ฐ๊ด๋ ๊ฐ์ฒด๋ฅผ ์์ฑํ์ฌ ์์ฑ๋ ๊ฐ์ฒด๋ก ํ๋กํผํฐ์ ์ ๊ทผํ๊ฑฐ๋ ๋ฉ์๋๋ฅผ ํธ์ถํ๊ณ ๋ค์ ์์๊ฐ์ผ๋ก ๋๋๋ฆผ.
- ์ ๋ฌธ์ฅ์์ ์ฐ๊ด๋ ๊ฐ์ฒด๋ฅผ ๋ํผ ๊ฐ์ฒด๋ผ๊ณ ํจ.
const str = "hello world"; // ๋ง์นจํ ํ๊ธฐ๋ฒ์ผ๋ก ์ ๊ทผํ๋ ์๊ฐ์ ์์ ํ์ ์ธ ๋ฌธ์์ด์ด ๋ํผ ๊ฐ์ฒด์ธ String ์ธ์คํด์ค๋ก ๋ณํ๋จ. console.log(str.length); // 11; // ๋ํผ ๊ฐ์ฒด๋ก ํ๋กํผํฐ์ ์ ๊ทผํ๊ฑฐ๋ ๋ฉ์๋๋ฅผ ํธ์ถํ ํ, ๋ค์ ์์๊ฐ์ผ๋ก ๋๋๋ฆผ. console.log(typeof str); // string;โ
- ๋ฌธ์์ด ๋ํผ ๊ฐ์ฒด์ธ String ์์ฑ์ ํจ์์ ์ธ์คํด์ค๋ String.prototype์ ๋ฉ์๋๋ฅผ ์์๋ฐ์ ์ฌ์ฉํ๊ณ ๋ํผ ๊ฐ์ฒด์ ์ฒ๋ฆฌ๊ฐ ์ข ๋ฃ๋๋ฉด ๋ํผ ๊ฐ์ฒด์ [[StringData]] ๋ด๋ถ ์ฌ๋กฏ์ ํ ๋น๋ ์์๊ฐ์ผ๋ก ์๋์ ์ํ, ์ฆ ์๋ณ์๊ฐ ์์๊ฐ์ ๊ฐ๋๋ก ๋๋๋ฆฌ๊ณ ๋ํผ ๊ฐ์ฒด๋ ๊ฐ๋น์ง ์ปฌ๋ ์ ์ ๋์์ด ๋๋ค.
-
// 1. ์๋ณ์ str์ ๋ฌธ์์ด์ ๊ฐ์ผ๋ก ๊ฐ์ง๊ณ ์์. const str = 'daniel'; // 2. str์ ์๋ฌต์ ์ผ๋ก ์์ฑ๋ ๋ํผ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํค๊ณ // str์ ๊ฐ 'daniel'์ ๋ํผ ๊ฐ์ฒด์ [[StringData]] ๋ด๋ถ ์ฌ๋กฏ์ ํ ๋น๋จ. // ๋ํผ ๊ฐ์ฒด์ name ํ๋กํผํฐ๊ฐ ๋์ ์ผ๋ก ์ถ๊ฐ๋จ str.name = 'park'; // 3. ์๋ณ์ str์ ๋ค์ ์๋์ ๋ฌธ์์ด, ์ฆ ๋ํผ ๊ฐ์ฒด์ [[StringData]] ๋ด๋ถ ์ฌ๋กฏ์ ํ ๋น๋ ์์๊ฐ์ ๊ฐ๋๋ค. // ์ด๋ 2์์ ์์ค๋ ๋ํผ ๊ฐ์ฒด๋ ์๋ฌด๋ ์ฐธ์กฐํ์ง ์๋ ์ํ์ด๋ฏ๋ก ๊ฐ๋น์ง ์ปฌ๋ ์ ์ ๋์์ด ๋๋ค. // 4. ์๋ณ์ str์ ์๋กญ๊ฒ ์๋ฌต์ ์ผ๋ก ์์ฑ๋(2์์ ์์ฑ๋ ๊ฐ์ฒด์๋ ๋ค๋ฅธ) ๋ํผ ๊ฐ์ฒด๋ฅผ ๊ฐ๋ฆฌํจ๋ค. // ์๋กญ๊ฒ ์์ฑ๋ ๋ํผ ๊ฐ์ฒด์๋ name ํ๋กํผํฐ๊ฐ ์กด์ฌํ์ง ์๋๋ค. ๋ฐ๋ผ์ undefined console.log(str.name); // undefinedโ
- ์ซ์, ๋ถ๋ฆฌ์ธ ๊ฐ๋ ์ ๋ฌธ์์ด ๊ฐ๊ณผ ๊ฐ์ง๋ง ๋ถ๋ฆฌ์ธ ๊ฐ์ผ๋ก ๋ฉ์๋๋ฅผ ํธ์ถํ๋ ๊ฒฝ์ฐ๊ฐ ์์ผ๋ฏ๋ก ์ ์ฉํ์ง ์๋ค.
- Symbol์ ๊ฒฝ์ฐ ๋ฆฌํฐ๋ด ํ๊ธฐ๋ฒ์ผ๋ก ์์ฑํ ์ ์๊ธฐ์(Symbol ํจ์๋ฅผ ํตํด ์์ฑํด์ผ ํ๋ฏ๋ก) ๋ค๋ฅธ ์์๊ฐ๊ณผ ์ฐจ์ด๊ฐ ์๋ค.
- ๋ฌธ์์ด, ์ซ์, ๋ถ๋ฆฌ์ธ์ ๋ํผ ๊ฐ์ฒด์ ์ํด ๋ง์น ๊ฐ์ฒด์ฒ๋ผ ์ฌ์ฉํ ์ ์์ผ๋ฉฐ, ํ์ค ๋นํธ์ธ ๊ฐ์ฒด์ธ String, Number, Boolean์ ํ๋กํ ํ์ ๋ฉ์๋ ๋๋ ํ๋กํผํฐ๋ฅผ ์ฐธ์กฐํ ์ ์์ผ๋ฏ๋ก new ์ฐ์ฐ์์ ํจ๊ป ํธ์ถํ์ฌ ์ธ์คํด์ค๋ฅผ ์์ฑํ ํ์๊ฐ ์๋ค.
- null, undefined์ ๊ฒฝ์ฐ ๋ํผ ๊ฐ์ฒด๋ฅผ ์์ฑํ์ง ์์ผ๋ฏ๋ก ๊ฐ์ฒด์ฒ๋ผ ์ฌ์ฉํ๋ฉด ์๋ฌ๊ฐ ๋ฐ์ํ๋ค.
๐ ์ ์ญ ๊ฐ์ฒด
์ ์ญ ๊ฐ์ฒด๋ ๊ณ์ธต์ ๊ตฌ์กฐ์ ์ด๋ค ๊ฐ์ฒด์๋ ์ํ์ง ์์ ๋ชจ๋ ๋นํธ์ธ ๊ฐ์ฒด์ ์ต์์ ๊ฐ์ฒด๋ก ํ์ค ๋นํธ์ธ ๊ฐ์ฒด์ ํธ์คํธ ๊ฐ์ฒด๋ฅผ ํ๋กํผํฐ๋ก ์์ ํ๋ค.
๋นํธ์ธ ์ ์ญ ํ๋กํผํฐ
- Infinity : ๋ฌดํ๋๋ฅผ ๋ํ๋ด๋ ์ซ์๊ฐ Infinity๋ฅผ ๊ฐ์ง
console.log(3/0); // Infinity console.log(-3/0); // -Infinity console.log(typeof Infinity); // numberโ
- NaN : ์ซ์๊ฐ ์๋(Not-a-Number)์ ๋ํ๋ด๋ ์ซ์๊ฐ NaN์ ๊ฐ์ง
console.log(Number('xyz')); // NaN console.log(1 * 'string'); // NaN console.log(typeof NaN); // numberโ
- undefined : undefined ํ๋กํผํฐ๋ ์์ํ์
undefined๋ฅผ ๊ฐ์ผ๋ก ๊ฐ์ง
var foo; console.log(foo); // undefined console.log(typeof undefined)l; // undefinedโ
๋นํธ์ธ ์ ์ญ ํจ์
- eval : ์๋ฐ์คํฌ๋ฆฝํธ ์ฝ๋๋ฅผ ๋ํ๋ด๋ ๋ฌธ์์ด์ ์ธ์๋ก ๋ฐ๊ณ , ์ ๋ฌ๋ฐ์ ๋ฌธ์์ด์ด ํํ์์ด๋ผ๋ฉด eval ํจ์๋ ๋ฌธ์์ด ์ฝ๋๋ฅผ ๋ฐํ์์ ํ๊ฐํ์ฌ ๊ฐ์ ์์ฑํ๊ณ , ์ ๋ฌ๋ฐ์ ์ธ์๊ฐ ํํ์์ด ์๋ ๋ฌธ์ด๋ผ๋ฉด eval ํจ์๋ ๋ฌธ์์ด ์ฝ๋๋ฅผ ๋ฐํ์์ ์คํํ๋ค. ๋ฌธ์์ด ์ฝ๋๊ฐ ์ฌ๋ฌ ๊ฐ์ ๋ฌธ์ผ๋ก ์ด๋ฃจ์ด์ ธ ์๋ค๋ฉด ๋ชจ๋ ๋ฌธ์ ์คํํ๋ค.
์ธ์๋ก ์ ๋ฌ๋ฐ์ ๋ฌธ์์ด ์ฝ๋๊ฐ ์ฌ๋ฌ ๊ฐ์ ๋ฌธ์ผ๋ก ์ด๋ฃจ์ด์ ธ ์๋ค๋ฉด ๋ชจ๋ ๋ฌธ์ ์คํํ ๋ค์ ๋ง์ง๋ง ๊ฒฐ๊ณผ๊ฐ์ ๋ฐํํ๋ค.// ํํ์ eval('1 + 1'); // 2 // ํํ์์ด ์๋ ๋ฌธ eval('var myName = daniel;'); // undefined //eval ํจ์์ ์ํด ๋ฐํ์์ ๋ณ์ ์ ์ธ๋ฌธ์ด ์คํ๋์ด x ๋ณ์๊ฐ ์ ์ธ๋จ. console.log(myName); // daniel //๊ฐ์ฒด ๋ฆฌํฐ๋ด๊ณผ ํจ์ ๋ฆฌํฐ๋ด์ ๊ดํธ๋ก ๋๋ฌ์ธ์ผํ๋ค. const obj = eval('({myName : `daniel`})'); console.log(obj); //{myName : 'daniel'} const greeting = eval('(function(){return `์๋ ํ์ธ์`})'); console.log(greeting()); // ์๋ ํ์ธ์โ
eval ํจ์๋ ์์ ์ด ํธ์ถ๋ ์์น์ ํด๋นํ๋ ๊ธฐ์กด์ ์ค์ฝํ๋ฅผ ๋ฐํ์์ ๋์ ์ผ๋ก ์์ ํ๋ค.eval('1 + 1; 2 + 2;'); // 4โ
์ ์ฝ๋์์ eval์ ์๋ก์ด ๋ณ์ myName์ ์ ์ธํ๋ฉฐ foo ํจ์์ ์ค์ฝํ์ ์ ์ธ๋ myName๋ณ์๋ฅผ ๋์ ์ผ๋ก ์ถ๊ฐํ๋ค. ํจ์๊ฐ ํธ์ถ๋๋ฉด ๋ฐํ์ ์ด์ ์ ๋จผ์ ํจ์ ๋ชธ์ฒด ๋ด๋ถ์ ๋ชจ๋ ์ ์ธ๋ฌธ์ ๋จผ์ ์คํํ๊ณ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ์ค์ฝํ์ ๋ฑ๋กํ๊ธฐ์ evalํจ์๊ฐ ํธ์ถ๋๋ ์์ ์์๋ ์ด๋ฏธ fooํจ์์ ์ค์ฝํ๊ฐ ์กด์ฌํ์ง๋ง eval ํจ์๋ ๊ธฐ์กด์ ์ค์ฝํ๋ฅผ ๋ฐํ์์ ๋์ ์ผ๋ก ์์ ํ๋ค. eval ํจ์์์ ์ ๋ฌ๋ ๋ฌธ์์ด ์ฝ๋๋ ์ด๋ฏธ ๊ทธ ์์น์ ์กด์ฌํ๋ ์ฝ๋์ฒ๋ผ ๋์ํ๋ฏ๋ก fooํจ์์ ์ค์ฝํ์์ ์คํ๋๋ค. (strict mode์์๋ eval ํจ์ ์์ ์ ์์ฒด์ ์ธ ์ค์ฝํ๋ฅผ ์์ฑํ๋ค.) eval์ ๋ณด์์ ๋งค์ฐ ์ทจ์ฝํ๋ฏ๋ก ์ฌ์ฉ์ ๊ธํด์ผํ๋ค.const myName = 'paul'; function foo(){ eval('var myName = `Noah`;'); console.log(myName); // Noah } foo(); console.log(myName); // paul;
- isFinite : ์ ํ์์ธ์ง ๊ฒ์ฌํ์ฌ booleanํ์ ์ ๋ฐํํ๋ค.
- isNaN : NaN์ธ์ง ๊ฒ์ฌํ์ฌ booleanํ์ ์ ๋ฐํํ๋ค.
- parseFloat : ์ ๋ฌ๋ฐ์ ๋ฌธ์์ด์ ์ค์๋ก ํด์ํ์ฌ ๋ฐํํ๋ค.
- parseInt : ์ ๋ฌ๋ฐ์ ๋ฌธ์์ด ์ธ์๋ฅผ ์ ์๋ก ํด์ํ์ฌ ๋ฐํํ๋ค.
์๋ฌต์ ์ ์ญ
ํจ์๋ด์์ ์ ์ธํ์ง ์์ ์๋ณ์์ ๊ฐ์ ํ ๋น์ ํด๋๊ณ ํจ์๋ฅผ ์คํํ๋ฉด ์ฐธ์กฐ ์๋ฌ๊ฐ ๋ฐ์ํ ๊ฒ ๊ฐ์ง๋ง ์ ์ธํ์ง ์์ ์๋ณ์๋ ๋ง์น ์ ์ธ๋ ์ ์ญ ๋ณ์์ฒ๋ผ ๋์ํ๋ค. ์ด๋ ์ ์ธํ์ง ์์ ์๋ณ์์ ๊ฐ์ ํ ๋นํ ๋ ์ด ์๋ณ์๊ฐ ์ ์ญ ๊ฐ์ฒด์ ํ๋กํผํฐ๊ฐ ๋๊ธฐ๋๋ฌธ์ด๊ณ ์ด๋ฌํ ํ์์ ์๋ฌต์ ์ ์ญ์ด๋ผ๊ณ ํ๋ค. ์ด ์๋ณ์๋ ์ ์ญ ๊ฐ์ฒด์ ํ๋กํผํฐ๊ฐ ๋์์ ๋ฟ ์ ์ญ ๋ณ์๊ฐ ์๋๊ธฐ์ ํธ์ด์คํ ์ด ๋ฐ์ํ์ง ์๋๋ค.
์ถ์ฒ : ๋ชจ๋ ์๋ฐ์คํฌ๋ฆฝํธ ๋ฅ๋ค์ด๋ธ
๋ฐ์ํ
'JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JavaScript] ํจ์์ ์ผ๊ธ ๊ฐ์ฒด (0) | 2021.11.28 |
---|---|
[JavaScript] ์์ฑ์ ํจ์ (0) | 2021.11.21 |
[JavaScript] Symbol (0) | 2021.10.23 |
[JavaScript]์ ์ญ ๋ณ์์ ๋ฌธ์ ์ (0) | 2021.10.06 |
Detail of prototype in Javascript (0) | 2021.10.06 |