๐Ÿ“‹ ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive | 21์žฅ ๋นŒํŠธ์ธ ๊ฐ์ฒด

waterglassesยท2022๋…„ 5์›” 7์ผ
0
post-thumbnail

๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep Dive ๋„์„œ์˜ 21์žฅ์„ ์ •๋ฆฌํ•˜์˜€์Šต๋‹ˆ๋‹ค.

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

  1. ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด
  • ECMAScript ์‚ฌ์–‘์— ์ •์˜๋œ ๊ฐ์ฒด๋ฅผ ๋งํ•˜๋ฉฐ, ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์˜ ๊ณตํ†ต ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•œ๋‹ค.
  1. ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด
  • ECMAScript ์‚ฌ์–‘์— ์ •์˜๋˜์–ด ์žˆ์ง€ ์•Š์ง€๋งŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ํ™˜๊ฒฝ์—์„œ ์ถ”๊ฐ€๋กœ ์ œ๊ณต๋˜๋Š” ๊ฐ์ฒด๋ฅผ ๋งํ•œ๋‹ค.
  1. ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ์ฒด
  • ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ์ฒด๋Š” ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด์™€ ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด์ฒ˜๋Ÿผ ๊ธฐ๋ณธ ์ œ๊ณต๋˜๋Š” ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ์ •์˜ํ•œ ๊ฐ์ฒด๋ฅผ ๋งํ•œ๋‹ค.

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

์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๊ฐ์ฒด์ธ ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด๋Š” ํ”„๋กœํ† ํƒ€์ž… ๋ฉ”์„œ๋“œ์™€ ์ •์  ๋ฉ”์„œ๋“œ๋ฅผ ์ œ๊ณตํ•˜๊ณ  ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๊ฐ์ฒด ์•„๋‹Œ ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด๋Š” ์ •์  ๋ฉ”์„œ๋“œ๋งŒ ์ œ๊ณตํ•œ๋‹ค.

ํ‘œ์ค€ ๊ฐ์ฒด์ธ String, Number, Boolean, Function, Array, Date๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœํ•˜์—ฌ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

const strObj = new String('lee'); // String {"lee"}

// String ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์ƒ์„ฑํ•œ strObj ๊ฐ์ฒด์˜ ํ”„๋กœํ† ํƒ€์ž…์€ String.prototype์ด๋‹ค.
console.log(Object.getPrototypeOf(strObj) === String.prototype); // true

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

๋ฌธ์ž์—ด์ด๋‚˜ ์ˆซ์ž, ๋ถˆ๋ฆฌ์–ธ ๋“ฑ์˜ ์›์‹œ๊ฐ’์ด ์žˆ๋Š”๋ฐ๋„ ๋ฌธ์ž์—ด, ์ˆซ์ž, ๋ถˆ๋ฆฌ์–ธ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜๋Š” String, Number, Boolean ๋“ฑ์˜ ํ‘œ์ค€ ๋นŒํŠธ์ธ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๊ฐ€ ์กด์žฌํ•˜๋Š” ์ด์œ ๋Š”?

์ด๋Š” ์›์‹œ๊ฐ’์— ๋Œ€ํ•ด ๋งˆ์น˜ ๊ฐ์ฒด์ฒ˜๋Ÿผ ๋งˆ์นจํ‘œ ํ‘œ๊ธฐ๋ฒ•์œผ๋กœ ์ ‘๊ทผํ•˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์ด ์ผ์‹œ์ ์œผ๋กœ ์›์‹œ๊ฐ’์„ ์—ฐ๊ด€๋œ ๊ฐ์ฒด๋กœ ๋ณ€ํ™˜ํ•ด ์ฃผ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.

์ด๋ ‡๊ฒŒ ๋ฌธ์ž์—ด, ์ˆซ์ž, ๋ถˆ๋ฆฌ์–ธ ๊ฐ’์— ๋Œ€ํ•ด ๊ฐ์ฒด์ฒ˜๋Ÿผ ์ ‘๊ทผํ•˜๋ฉด ์ƒ์„ฑ๋˜๋Š” ์ž„์‹œ ๊ฐ์ฒด๋ฅผ ๋ž˜ํผ ๊ฐ์ฒด๋ผ๊ณ  ํ•œ๋‹ค.

21.4 ์ „์—ญ ๊ฐ์ฒด

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

var ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธํ•œ ์ €์—ญ๋ณ€์ˆ˜์™€ ์„ ์–ธํ•˜์ง€ ์•Š์€ ๋ณ€์ˆ˜์— ๊ฐ’์„ ํ• ๋‹นํ•œ ์•”๋ฌต์  ์ „์—ญ, ๊ทธ๋ฆฌ๊ณ  ์ „์—ญ ํ•จ์ˆ˜๋Š” ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋œ๋‹ค.

21.4.1 ๋นŒํŠธ์ธ ์ „์—ญ ํ”„๋กœํผํ‹ฐ

์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

Infinity
๋ฌดํ•œ๋Œ€๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ์ˆซ์ž๊ฐ’ Infinity๋ฅผ ๊ฐ–๋Š”๋‹ค.

console.log(window.Infinity === Infinity); // true

console.log(3/0); // Infinity
console.log(-3/0); // -Infinity
console.log(typeof Infinity); //number

NaN
(Not-a-Number)์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ˆซ์ž๊ฐ’ NaN์„ ๊ฐ–๊ณ  NaN ํ”„๋กœํผํ‹ฐ๋Š” Number.NaN ํ”„๋กœํผํ‹ฐ์™€ ๊ฐ™๋‹ค.

undefined
์›์‹œ ํƒ€์ž… undefined๋ฅผ ๊ฐ’์œผ๋กœ ๊ฐ–๋Š”๋‹ค.

console.log(window.undefined); //undefined

21.4.2 ๋นŒํŠธ์ธ ์ „์—ญ ํ•จ์ˆ˜

์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์—์„œ ํ˜ธ์ถœํ•  ์ˆ˜ ์žˆ๋Š” ๋นŒํŠธ์ธ ํ•จ์ˆ˜๋กœ์„œ ์ „์—ญ ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋‹ค.

eval
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฌธ์ž์—ด์„ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›๋Š”๋‹ค.

-> ์ž์‹ ์ด ํ˜ธ์ถœ๋œ ์œ„์น˜์— ํ•ด๋‹นํ•˜๋Š” ๊ธฐ์กด์˜ ์Šค์ฝ”ํ”„๋ฅผ ๋Ÿฐํƒ€์ž„์— ๋™์ ์œผ๋กœ ์ˆ˜ํ–‰ํ•œ๋‹ค.
-> ๋‹จ, strict mode์—์„œ๋Š” eval ํ•จ์ˆ˜๋Š” ๊ธฐ์กด์˜ ์Šค์ฝ”ํ”„๋ฅผ ์ˆ˜์ •ํ•˜์ง€ ์•Š๊ณ  eval ํ•จ์ˆ˜ ์ž์‹ ์˜ ์ž์ฒด์ ์ธ ์Šค์ฝ”ํ”„๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.
-> ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด ์ฝ”๋“œ๊ฐ€ let, const ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•œ ๋ณ€์ˆ˜ ์„ ์–ธ๋ฌธ์ด๋ผ๋ฉด ์•”๋ฌต์ ์œผ๋กœ strict mode๊ฐ€ ์ ์šฉ๋œ๋‹ค.
-> eval ํ•จ์ˆ˜์˜ ์‚ฌ์šฉ์€ ๊ธˆ์ง€ํ•ด์•ผ ํ•œ๋‹ค.

isFinite

์ „๋‹ฌ๋ฐ›์€ ์ธ์ˆ˜๊ฐ€ ์ •์ƒ์ ์ธ ์œ ํ•œ์ˆ˜์ด๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•˜๊ณ , ๋ฌดํ•œ์ˆ˜์ด๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

isNaN
์ „๋‹ฌ๋ฐ›์€ ์ธ์ˆ˜๊ฐ€ NaN์ธ์ง€ ๊ฒ€์‚ฌํ•˜์—ฌ ๊ทธ ๊ฒฐ๊ณผ๋ฅผ ๋ถˆ๋ฆฌ์–ธ ํƒ€์ž…์œผ๋กœ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ์ „๋‹ฌ๋ฐ›์€ ์ธ์ˆ˜์˜ ํƒ€์ž…์ด ์ˆซ์ž๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ ์ˆซ์ž๋กœ ํƒ€์ž…์„ ๋ณ€ํ™˜ํ•œ ํ›„ ๊ฒ€์‚ฌ๋ฅผ ์ˆ˜ํ–‰ํ•œ๋‹ค.

parseFloat
์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด ์ธ์ˆ˜๋ฅผ ๋ถ€๋™ ์†Œ์ˆ˜์ , ์ฆ‰ ์‹ค์ˆ˜๋กœ ํ•ด์„ํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

parseInt
์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด ์ธ์ˆ˜๋ฅผ ์ •์ˆ˜๋กœ ํ•ด์„ํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.

encodeURI
์™„์ „ํ•œ URI๋ฅผ ๋ฌธ์ž์—ด๋กœ ์ „๋‹ฌ๋ฐ›์•„ ์ด์Šค์ผ€์ดํ”„ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด ์ธ์ฝ”๋”ฉํ•œ๋‹ค.

decodeURI
์ธ์ฝ”๋”ฉ๋œ URI๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์•„ ์ด์Šค์ผ€์ดํ”„ ์ฒ˜๋ฆฌ ์ด์ „์œผ๋กœ ๋””์ฝ”๋”ฉํ•œ๋‹ค.

encodeURIComponent / decodeURIComponent
encodeURIComponent๋Š” URI ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์•„ ์ธ์ฝ”๋”ฉํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ์ฟผ๋ฆฌ ์ŠคํŠธ๋ง ๊ตฌ๋ถ„์ž๋กœ ์‚ฌ์šฉ๋˜๋Š” =, ?, &๊นŒ์ง€ ์ธ์ฝ”๋”ฉํ•œ๋‹ค. decodeURIComponent๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ๋œ URI ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋””์ฝ”๋”ฉํ•œ๋‹ค.

Ref

  • ์ด์›…๋ชจ ์ €, โŒœ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ Deep DiveโŒŸ, ์œ„ํ‚ค๋ถ์Šค
profile
๋งค ์ˆœ๊ฐ„ ์„ฑ์žฅํ•˜๋Š” ๊ฐœ๋ฐœ์ž๊ฐ€ ๋˜๋ ค๊ณ  ๋…ธ๋ ฅํ•˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

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