front-end/JavaScript

[JavaScript] 19. ๋นŒํŠธ์ธ ๊ฐ์ฒด

gaan 2023. 5. 9. 08:25

๐Ÿ“– ๋ชจ๋˜ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ๊ต์žฌ) 21์žฅ. ๋นŒํŠธ์ธ ๊ฐ์ฒด

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

* 3๊ฐœ์˜ ๊ฐ์ฒด๋กœ ๋ถ„๋ฅ˜

- ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด : ECMAScript ์‚ฌ์–‘์— ์ •์˜๋œ ๊ฐ์ฒด. ์‹คํ–‰ํ™˜๊ฒฝ์— ๊ด€๊ฒŒ์—†์ด ์–ธ์ œ๋‚˜ ์‚ฌ์šฉ ๊ฐ€๋Šฅ

- ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด : ์‹คํ–‰ ํ™˜๊ฒฝ (๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ ๋˜๋Š” Node.js ํ™˜๊ฒฝ)์—์„œ ์ถ”๊ฐ€๋กœ ์ œ๊ณตํ•˜๋Š” ๊ฐ์ฒด

- ์‚ฌ์šฉ์ž ์ •์˜ ๊ฐ์ฒด : ๊ธฐ๋ณธ ์ œ๊ณต๋˜๋Š” ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ, ์‚ฌ์šฉ์ž๊ฐ€ ์ง์ ‘ ์ •์˜ํ•œ ๊ฐ์ฒด


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

  • Object, String, Number, Date, Math, RegExp, Array, Map, Set, Promise, Reflect, Proxy, JSON, Error ๋“ฑ 40์—ฌ ๊ฐœ์˜ ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด
  • ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๊ฐ์ฒด : ํ”„๋กœํ† ํƒ€์ž… ๋ฉ”์„œ๋“œ, ์ •์  ๋ฉ”์„œ๋“œ ์ œ๊ณต
  • ์ƒ์„ฑ์ž ํ•จ์ˆ˜ ๊ฐ์ฒด๊ฐ€ ์•„๋‹Œ ๊ฐ์ฒด(Math, Reflect, JSON) : ์ •์  ๋ฉ”์„œ๋“œ ์ œ๊ณต

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

๋ฌธ์ž์—ด, ์ˆซ์ž, ๋ถˆ๋ฆฌ์–ธ ๋“ฑ์˜ ์›์‹œ๊ฐ’์ด ์žˆ์Œ์—๋„ ์ด๋“ค์„ ์ƒ์„ฑํ•˜๋Š” ์ƒ์„ฑ์ž ํ•จ์ˆ˜๊ฐ€ ์กด์žฌํ•˜๋Š” ์ด์œ ๋Š”?

 

(๐Ÿ’ฅ ๊ฒฐ๋ก ์€ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ํ•„์š”๊ฐ€ ์—†์–ด ๊ถŒ์žฅํ•˜์ง€ ์•Š์Œ)

const str = 'hello';

console.log(str.length); // 5
console.log(str.toUpperCase()); // HELLO

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

(์œ„ ์ฃผ์„์ฒ˜๋Ÿผ ๊ฐ€๋Šฅํ•œ ์ด์œ )

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

 

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

 

ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐํ•˜๊ณ  ๋ฉ”์„œ๋“œ๋ฅผ ํ˜ธ์ถœํ•œ ๋’ค, ๋‹ค์‹œ ์›์‹œ๊ฐ’์œผ๋กœ ๋˜๋Œ๋ฆฐ๋‹ค.

โžก๏ธ ๋ž˜ํผ ๊ฐ์ฒด์— ์˜ํ•ด ๋ฌธ์ž์—ด, ์ˆซ์ž, ๋ถˆ๋ฆฌ์–ธ์„ ๊ฐ์ฒด์ฒ˜๋Ÿผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋œ๋‹ค.

 

๐Ÿ’ฅ ํ•˜์ง€๋งŒ,, ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ๋ฌธ์ž์—ด, ์ˆซ์ž, ๋ถˆ๋ฆฌ์–ธ ์ธ์Šคํ„ด์Šค๋ฅผ ์ƒ์„ฑํ•  ํ•„์š”๊ฐ€ ์—†๊ณ , ๊ถŒ์žฅํ•˜์ง€ ์•Š๋Š”๋‹ค.


04. ์ „์—ญ ๊ฐ์ฒด

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

  • ๋ธŒ๋ผ์šฐ์ € ํ™˜๊ฒฝ : window๊ฐ€ ์ „์—ญ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ด
  • Node.js ํ™˜๊ฒฝ : global์ด ์ „์—ญ๊ฐ์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚ด
  • ์ „์—ญ ๊ฐ์ฒด๊ฐ€ ๊ฐ–๊ณ  ์žˆ๋Š” ํ”„๋กœํผํ‹ฐ
    • ํ‘œ์ค€ ๋นŒํŠธ์ธ ๊ฐ์ฒด
    • ํ™˜๊ฒฝ์— ๋”ฐ๋ฅธ ํ˜ธ์ŠคํŠธ ๊ฐ์ฒด (ํด๋ผ์ด์–ธํŠธ Web API๋‚˜ Node.js์˜ ํ˜ธ์ŠคํŠธ API)
    • var ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธํ•œ ์ „์—ญ ๋ณ€์ˆ˜์™€ ์ „์—ญ ํ•จ์ˆ˜

* ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐํ•  ๋•Œ๋Š” window(๋˜๋Š” global) ์ƒ๋žต ๊ฐ€๋Šฅ

 

์ „์—ญ ๊ฐ์ฒด๋Š” ๋ช‡ ๊ฐ€์ง€ ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค.

์•„๋ž˜์—์„œ ์‚ดํŽด๋ณด์ž.

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

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

1. Infinity

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

2. NaN

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

3. undefined

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

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

๋นŒํŠธ์ธ ์ „์—ญ ํ•จ์ˆ˜๋Š” ์ „์—ญ ๊ฐ์ฒด์˜ ๋ฉ”์„œ๋“œ๋ฅผ ์˜๋ฏธํ•œ๋‹ค.

1. eval

๊ฒฐ๋ก ์€, eval ํ•จ์ˆ˜์˜ ์‚ฌ์šฉ์€ ๊ธˆ์ง€ํ•ด์•ผ ํ•œ๋‹ค.

 

2. isFinite

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

3. isNaN

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

4. parseFloat

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

5. parseInt

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

6. encodeURI / decodeURI

  • URI(Uniform Resource Identifier): ์ธํ„ฐ๋„ท์— ์žˆ๋Š” ์ž์›์„ ๋‚˜ํƒ€๋‚ด๋Š” ์ฃผ์†Œ
  • encodeURI ํ•จ์ˆ˜ : URI๋ฅผ ๋ฌธ์ž์—ด๋กœ ์ „๋‹ฌ๋ฐ›์•„ ์ด์Šค์ผ€์ดํ”„ ์ฒ˜๋ฆฌ๋ฅผ ์œ„ํ•ด ์ธ์ฝ”๋”ฉ
  • decodeURI ํ•จ์ˆ˜ : ์ธ์ฝ”๋”ฉ๋œ URI๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌ๋ฐ›์•„ ๋””์ฝ”๋”ฉ
  • ์•ŒํŒŒ๋ฒณ, 0~9์ˆซ์ž, ! ~ * ๋“ฑ ๋ฌธ์ž๋Š” ์ด์Šค์ผ€์ดํ”„ ์ฒ˜๋ฆฌ์—์„œ ์ œ์™ธ

7. encodeURIComponent / decodeURIComponent

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

3) ์•”๋ฌต์  ์ „์—ญ

  • ์•”๋ฌต์  ์ „์—ญ : ์„ ์–ธํ•˜์ง€ ์•Š์€ ์‹๋ณ„์ž์— ๊ฐ’์„ ํ• ๋‹นํ•˜๋ฉด ์ „์—ญ ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ ( *์ „์—ญ๋ณ€์ˆ˜๋Š” ์•„๋‹ˆ์ง€๋งŒ, ๋งˆ์น˜ ์ „์—ญ๋ณ€์ˆ˜์ธ ๊ฒƒ์ฒ˜๋Ÿผ ๋™์ž‘ )

 

๐Ÿ“– ์ฐธ๊ณ ์ž๋ฃŒ

https://www.inflearn.com/course/%EB%AA%A8%EB%8D%98-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%94%A5%EB%8B%A4%EC%9D%B4%EB%B8%8C/dashboard