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

c_yjยท2022๋…„ 6์›” 28์ผ
0

DeepDive

๋ชฉ๋ก ๋ณด๊ธฐ
18/42
post-thumbnail

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

์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ๋Š” Object, String, Number, Boolean, Symbol, Date, Math, RegExp, Array, Map/Sat, WeakMap/WeakSet, Function, Promise, Reflect, Proxy, JSON, Error ๋“ฑ 40์—ฌ ๊ฐœ์˜ ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด๋ฅผ ์ œ๊ณตํ•œ๋‹ค.
tring, Number, Boolean,Function, Array, Date๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ํ˜ธ์ถœํ•˜์—ฌ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋‹ค.

โœ”๏ธ ์›์‹œ๊ฐ’๊ณผ ๋ž˜ํผ ๊ฐ์ฒด

์›์‹œ๊ฐ’์„ ๊ฐ์ฒด์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์•”๋ฌต์ ์œผ๋กœ ์—ฐ๊ด€๋œ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•˜์—ฌ ์ƒ์„ฑ๋œ ๊ฐ์ฒด๋กœ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•˜๊ฑฐ๋‚˜ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ๋‹ค์‹œ ์›์‹œ๊ฐ’์œผ๋กœ ๋˜๋Œ๋ฆฐ๋‹ค.
๋ฌธ์ž์—ด, ์ˆซ์ž, ๋ถˆ๋ฆฌ์–ธ ๊ฐ’์— ๋Œ€ํ•ด ๊ฐ์ฒด์ฒ˜๋Ÿผ ์ ‘๊ทผํ•˜๋ฉด ์ƒ์„ฑ๋˜๋Š” ์ž„์‹œ ๊ฐ์ฒด๋ฅผ ๋ž˜ํผ ๊ฐ์ฒด๋ผ ํ•œ๋‹ค.

const str = 'hi';

// ์›์‹œ ํƒ€์ž…์ธ ๋ฌธ์ž์—ด์ด ๋ž˜ํผ ๊ฐ์ฒด์ธ String ์ธ์Šคํ„ด์Šค๋กœ ๋ณ€ํ™˜๋œ๋‹ค.
console.log(str.length); // 2
console.log(str.toUpperCase()); // HI

// ๋ž˜ํผ ๊ฐ์ฒด๋กœ ํ”„๋กœํผํ‹ฐ์— ์ ‘๊ทผํ•˜๊ฑฐ๋‚˜ ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ํ›„, ๋‹ค์‹œ ์›์‹œ๊ฐ’์œผ๋กœ ๋˜๋Œ๋ฆฐ๋‹ค.
console.log(typeof str); // string

๋ฌธ์ž์—ด ๋ž˜ํผ ๊ฐ์ฒด์ธ String ์ƒ์„ฑ์ž ํ•จ์ˆ˜์˜ ์ธ์Šคํ„ด์Šค๋Š” String.prototype์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์ƒ์†๋ฐ›์•„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.
๊ทธ ํ›„ ๋ž˜ํผ ๊ฐ์ฒด์˜ ์ฒ˜๋ฆฌ๊ฐ€ ์ข…๋ฃŒ๋˜๋ฉด ๋ž˜ํผ ๊ฐ์ฒด์˜ [[StringData]] ๋‚ด๋ถ€ ์Šฌ๋กฏ์— ํ• ๋‹น๋œ ์›์‹œ๊ฐ’์œผ๋กœ ์›๋ž˜์˜ ์ƒํƒœ, ์ฆ‰ ์‹๋ณ„์ž๊ฐ€ ์›์‹œ๊ฐ’์„ ๊ฐ–๋„๋ก ๋˜๋Œ๋ฆฌ๊ณ  ๋ž˜ํผ ๊ฐ์ฒด๋Š” ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰์…˜์˜ ๋Œ€์ƒ์ด ๋œ๋‹ค.

โœ”๏ธ ์ „์—ญ ๊ฐ์ฒด

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

์ „์—ญ ๊ฐ์ฒด์˜ ํŠน์ง•

  • ์ „์—ญ ๊ฐ์ฒด๋Š” ๊ฐœ๋ฐœ์ž๊ณ  ์˜๋„์ ์œผ๋กœ ์ƒ์„ฑํ•  ์ˆ˜ ์—†๋‹ค. ์ฆ‰ ์ „์—ญ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•  ์ˆ˜ ์žˆ๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜๊ฐ€ ์ œ๊ณต๋˜์ง€ ์•Š๋Š”๋‹ค.
  • ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐํ•  ๋•Œ window๋ฅผ ์ƒ๋žตํ•  ์ˆ˜ ์žˆ๋‹ค.

โ˜‘๏ธ ๋นŒํŠธ์ธ ์ „์—ญ ํ”„๋กœํผํ‹ฐ

๋นŒํŠธ์ธ ์ „์—ญ ํ”„๋กœํผํ‹ฐ๋Š” ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์˜๋ฏธํ•œ๋‹ค. ์ฃผ๋กœ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜ ์ „์—ญ์—์„œ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ’์„ ์ œ๊ณตํ•œ๋‹ค.
Infinity

// ์ „์—ญ ํ”„๋กœํผํ‹ฐ๋Š” window๋ฅผ ์ƒ๋žตํ•˜๊ณ  ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค.
console.log(window.Infinity = Infinity); // true

// ์–‘์˜ ๋ฌดํ•œ๋Œ€
console.log(3/0); // Infinity
// ์Œ์˜ ๋ฌดํ•œ๋Œ€
console.log(-3/0); // -Infinity
// Infinity๋Š” ์ˆซ์ž๊ฐ’์ด๋‹ค.
console.log(typeof Infinity); // number

NaN

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

console.log(Number('xyz')); // NaN
console.log(1 * 'string'); // NaN
console.log(typeof NaN); // number

undefined

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

var foo;
console.log(foo); // undefined
console.log(typeof undefined); // undefined

โ˜‘๏ธ ๋นŒํŠธ์ธ ์ „์—ญ ํ•จ์ˆ˜

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

  • ์ „๋‹ฌ๋ฐ›์€ ๋ฌธ์ž์—ด ์ฝ”๋“œ๊ฐ€ ํ‘œํ˜„์‹์ด๋ผ๋ฉด eval ํ•จ์ˆ˜๋Š” ๋ฌธ์ž์—ด ์ฝ”๋“œ๋ฅผ ๋Ÿฐํƒ€์ž„์— ํ‰๊ฐ€ํ•˜์—ฌ ๊ฐ’์„ ์ƒ์„ฑํ•˜๊ณ ,
  • ํ‘œํ˜„์‹์ด ์•„๋‹Œ ๋ฌธ์ด๋ผ๋ฉด eval ํ•จ์ˆ˜๋Š” ๋ฌธ์ž์—ด ์ฝ”๋“œ๋ฅผ ๋Ÿฐํƒ€์ž„์— ์‹คํ–‰, ๋ฌธ์ž์—ด ์ฝ”๋“œ๊ฐ€ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋ฌธ์œผ๋กœ ์ด๋ฃจ์–ด์ ธ ์žˆ๋‹ค๋ฉด ๋ชจ๋“  ๋ฌธ์„ ์‹คํ–‰
// ํ‘œํ˜„์‹์ธ ๋ฌธ
eval('1 + 2;'); // 3
// ํ‘œํ˜„์‹์ด ์•„๋‹Œ ๋ฌธ
eval('var x = 5;'); // undefined

// eval ํ•จ์ˆ˜์— ์˜ํ•ด ๋Ÿฐํƒ€์ž„์— ๋ณ€์ˆ˜ ์„ ์–ธ๋ฌธ์ด ์‹คํ–‰๋˜์–ด x ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋˜์—ˆ๋‹ค.
console.log(x); // 5

// ๊ฐ์ฒด ๋ฆฌํ„ฐ๋Ÿด์€ ๋ฐ˜๋“œ์‹œ ๊ด„ํ˜ธ๋กœ ๋‘˜๋Ÿฌ์‹ผ๋‹ค.
const o = eval('({a:1})');
console.log(o); // {a: 1}

// ํ•จ์ˆ˜ ๋ฆฌํ„ฐ๋Ÿด์€ ๋ฐ˜๋“œ์‹œ ๊ด„ํ˜ธ๋กœ ๋‘˜๋Ÿฌ์‹ผ๋‹ค.
const f = eval('(function() { return 1; })');
console.log(f()); // 1

eval ํ•จ์ˆ˜๋Š” ์ž์‹ ์ด ํ˜ธ์ถœ๋œ ์œ„์น˜์— ํ•ด๋‹นํ•˜๋Š” ๊ธฐ์กด์˜ ์Šค์ฝ”ํ”„๋ฅผ ๋Ÿฐํƒ€์ž„์— ๋™์ ์œผ๋กœ ์ˆ˜์ •.

  • eval ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ์‚ฌ์šฉ์ž๋กœ๋ถ€ํ„ฐ ์ž…๋ ฅ๋ฐ›์€ ์ฝ˜ํ…์ธ ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์€ ๋ณด์•ˆ์— ๋งค์šฐ ์ทจ์•ฝ
  • ์ผ๋ฐ˜์ ์ธ ์ฝ”๋“œ ์‹คํ–‰์— ๋น„ํ•ด ์†๋„๊ฐ€ ๋А๋ฆฌ๋‹ค.
    ๋”ฐ๋ผ์„œ eval ํ•จ์ˆ˜์˜ ์‚ฌ์šฉ์€ ๊ธˆ์ง€ํ•ด์•ผํ•œ๋‹ค

isFinite

์ „๋‹ฌ๋ฐ›์€ ์ธ์ˆ˜๊ฐ€ ์ •์ƒ์ ์ธ ์œ ํ•œ์ˆ˜์ธ์ง€ ๊ฒ€์‚ฌํ•˜์—ฌ ์œ ํ•œ์ˆ˜์ด๋ฉด true๋ฅผ ๋ฐ˜ํ™˜, ๋ฌดํ•œ์ˆ˜์ด๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค ์ „๋‹ฌ๋ฐ›์€ ์ธ์ˆ˜์˜ ํƒ€์ž…์ด ์ˆซ์ž๊ฐ€ ์•„๋‹Œ ๊ฒฝ์šฐ, ์ˆซ์ž๋กœ ํƒ€์ž…์„ ๋ณ€ํ™˜ํ•œ ํ›„ ๊ฒ€์‚ฌ ์ธ์ˆ˜๊ฐ€ NaN์œผ๋กœ ํ‰๊ฐ€๋˜๋Š” ๊ฐ’์ด๋ผ๋ฉด false๋ฅผ ๋ฐ˜ํ™˜

// ์ธ์ˆ˜๊ฐ€ ์œ ํ•œ์ˆ˜์ด๋ฉด true๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
isFinite(0); // true
isFinite(2e64); // true
isFinite('10'); // true: '10' = 10
isFinite(null) // true: null 0

// ์ธ์ˆ˜๊ฐ€ ๋ฌดํ•œ์ˆ˜ ๋˜๋Š” NaN์œผ๋กœ ํ‰๊ฐ€๋˜๋Š” ๊ฐ’์ด๋ผ๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
isFinite(Infinity); // false
isFinite(-Infinity); // false

// ์ธ์ˆ˜๊ฐ€ NaN์œผ๋กœ ํ‰๊ฐ€๋˜๋Š” ๊ฐ’์ด๋ผ๋ฉด false๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
isFinite(NaN); // false
isFinite('Hello'); // false
isFinite('2005/12/12'); // fale

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

// ์ˆซ์ž
isNaN(NaN); // true
isNaN(10); // false

// ๋ฌธ์ž์—ด
isNaN('blabla'); // true: 'blabla' => NaN
isNaN('10'); // true: '10' => 10
isNaN('10.12'); // true: '10.12' => 10.12
isNaN(''); // true: '' => 0
isNaN(' '); // true: ' ' => 0

// ๋ถˆ๋ฆฌ์–ธ
isNaN(true); // false: true > 1
isNaN(false); // false: null > 0

// undefined
isNaN(undefined); // true: undefined => NaN

// ๊ฐ์ฒด
isNaN({}); // true: {} => NaN

// date
isNaN(new Date()); // false: new Date() => number
isNaN(new Date().toString()); // true: String => NaN

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

// ๋ฌธ์ž์—ด์„ ์‹ค์ˆ˜๋กœ ํ•ด์„ํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
parseFloat('3.14'); // 3.14
parseFloat('10.00'); // 10

// ๊ณต๋ฐฑ์œผ๋กœ ๊ตฌ๋ถ„๋œ ๋ฌธ์ž์—ด์€ ์ฒซ ๋ฒˆ์จฐ ๋ฌธ์ž์—ด๋งŒ ๋ณ€ํ™˜ํ•œ๋‹ค.
parseFloat('34 45 66'); // 34
parseFloat('40 years'); // 40

// ์ฒซ ๋ฒˆ์งธ ๋ฌธ์ž์—ด์„ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•  ์ˆ˜ ์—†๋‹ค๋ฉด NaN์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
parseFloat('He was 40'); // NaN

// ์•ž๋’ค ๊ณต๋ฐฑ์€ ๋ฌด์‹œ๋œ๋‹ค
parseFloat(' 60 '); // 60

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

// ๋ฌธ์ž์—ด์„ ์ •์ˆ˜๋กœ ํ•ด์„ํ•˜์—ฌ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
parseInt('10'); // 10
parseInt('10.123'); // 10

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

๋ฐ˜๋ฉด encodeURI ํ•จ์ˆ˜๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜๋กœ ์ „๋‹ฌ๋œ ๋ฌธ์ž์—ด์„ ์™„์ „ํ•œ URI ์ „์ฒด๋ผ๊ณ  ๊ฐ„์ฃผํ•ด ์ฟผ๋ฆฌ ์ŠคํŠธ๋ง ๊ตฌ๋ถ„์ž๋Š” ์ธ์ฝ”๋”ฉํ•˜์ง€ ์•Š๋Š”๋‹ค.

decodeURIComponent ํ•จ์ˆ˜๋Š” ๋งค๊ฐœ๋ณ€์ˆ˜ ์ „๋‹ฌ๋œ URI ๊ตฌ์„ฑ ์š”์†Œ๋ฅผ ๋””์ฝ”๋”ฉํ•œ๋‹ค.

โ˜‘๏ธ ์•”๋ฌต์  ์ „์—ญ

var x = 10; // ์ „์—ญ ๋ณ€์ˆ˜
function foo () {
//์„ ์–ธํ•˜์ง€ ์•Š์€ ์‹๋ณ„์ž์— ๊ฐ’์„ ํ• ๋‹น
 y = 20; //window.y = 20;
}
foo();

//์„ ์–ธํ•˜์ง€ ์•Š์€ ์‹๋ณ„์ž y๋ฅผ ์ „์—ญ์—์„œ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ๋‹ค.
console.log(x + y); // 30

foo ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ y ๋ณ€์ˆ˜์— ๊ฐ’์„ ํ• ๋‹คํ•˜๊ธฐ ์œ„ํ•ด ๋จผ์ € ์Šค์ฝ”ํ”„ ์ฒด์ธ์„ ํ†ตํ•ด ์„ ์–ธ๋œ ๋ณ€์ˆ˜์ธ์ง€ ํ™•์ธํ•œ๋‹ค. ์ด๋–„ foo ํ•จ์ˆ˜์˜ ์Šค์ฝ”ํ”„์™€ ์ „์—ญ ์Šค์ฝ”ํ”„ ์–ด๋””์—์„œ๋„ y ๋ณ€์ˆ˜์˜ ์„ ์–ธ์„ ์ฐพ์„ ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ์ฐธ์กฐ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.
ํ•˜์ง€๋งŒ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ y = 20์„ window.y = 20์œผ๋กœ ํ•ด์„ํ•˜์—ฌ ์ „์—ญ ๊ฐ์ฒด์— ํ”„๋กœํผํ‹ฐ๋ฅผ ๋™์  ์ƒ์„ฑํ•œ๋‹ค. ๊ฒฐ๊ตญ y๋Š” ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๊ฐ€ ๋˜์–ด ๋งˆ์น˜ ์ „์—ญ ๋ณ€์ˆ˜์ฒ˜๋Ÿผ ๋™์ž‘ํ•œ๋‹ค. ์ด๋Ÿฌํ•œ ํ˜„์ƒ์„ ์•”๋ฌต์  ์ „์—ญ์ด๋ผ ํ•œ๋‹ค.

profile
FrontEnd Developer

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