๐Ÿ“JavaScript - ๋ณ€์ˆ˜๋ž€ ?

pjw__98ยท2023๋…„ 11์›” 1์ผ
1

JavaScript(JS) [๊ฐœ์ธ ํ•™์Šต์šฉ]

๋ชฉ๋ก ๋ณด๊ธฐ
2/9
post-thumbnail
๐Ÿ“Œ ๋ณ€์ˆ˜๋Š” ๋ฌด์—‡์ธ์ง€, ๊ฐ ๋ณ€์ˆ˜ ํ‚ค์›Œ๋“œ ๋“ค์˜ ํŠน์ง•์„ ์•Œ์•„๋ณด์ž

๐Ÿค” ๋ณ€์ˆ˜๋ž€ ๋ฌด์—‡์ธ๊ฐ€ ?

๋ณ€์ˆ˜(variable)๋ž€ ๊ฐ’์„ ์ €์žฅํ•˜๋Š” ๊ณต๊ฐ„์ด๋ผ๊ณ  ํ•œ๋‹ค.

๊ณต๊ฐ„์ด๋ฆ„ = ์ €์žฅํ•  ๊ฐ’; ์„ ์„ ์–ธํ•ด์ค€๋‹ค๋ฉด ๊ฐ’์ด ๊ณต๊ฐ„์— ์ €์žฅ์ด ๋œ๋‹ค.

๋ณ€์ˆ˜ ์„ ์–ธ ๋ฐฉ์‹์€ var , let , const ๋ผ๋Š” ํ‚ค์›Œ๋“œ๋ฅผ ์•ž์— ์„ ์–ธํ•˜๊ณ  ๋ณ€์ˆ˜๋ฅผ ์ €์žฅํ•˜๋Š” ๋ฐฉ์‹์ด ์žˆ๋‹ค.

1๏ธโƒฃ var

var์˜ ํŠน์ง•

  • var๋Š” ES6 ์ด์ „์˜ ๋ธŒ๋ผ์šฐ์ €์—์„œ ํ˜ธํ™˜์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ํ•จ์ˆ˜ ๋ฐ–์—์„œ var ๋ณ€์ˆ˜๊ฐ€ ์„ ์–ธ๋˜๋ฉด ์ „์—ญ ๋ณ€์ˆ˜(๊ธ€๋กœ๋ฒŒ ๋ณ€์ˆ˜)๊ฐ€ ๋˜์–ด ์–ด๋””์„œ๋‚˜ ํ•ด๋‹น ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ณ , ํ•จ์ˆ˜ ์•ˆ์—์„œ ์„ ์–ธ๋˜๋ฉด ํ•จ์ˆ˜ ์•ˆ(๋กœ์ปฌ ๋ณ€์ˆ˜)์—์„œ๋งŒ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ์ค‘๋ณต์„ ์–ธ์ด ๊ฐ€๋Šฅํ•˜๊ธฐ์— ๋ณ€์ˆ˜์˜๊ฐ’์ด ์˜๋„์น˜์•Š๊ฒŒ ์‰ฝ๊ฒŒ ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ๋‹ค.
  • ๋ณ€์ˆ˜๋ฅผ ์ •์˜ํ•˜๊ธฐ ์ „์— ์‚ฌ์šฉํ•ด๋„ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š”๋‹ค.
    ํ˜ธ์ด์ŠคํŒ…์œผ๋กœ ์ธํ•ด ํ•ด๋‹น ๋ณ€์ˆ˜์˜ ์ •์˜๊ฐ€ ์œ„์ชฝ์œผ๋กœ ๋Œ์–ด์˜ฌ๋ ค์กŒ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
1. ํ˜ธ์ด์ŠคํŒ…(Hoisting)์ด๋ž€?
๋ณ€์ˆ˜์˜ ์ •์˜๊ฐ€ ๋ฒ”์œ„์— ๋”ฐ๋ผ ์„ ์–ธ๊ณผ ํ• ๋‹น์œผ๋กœ ๋ถ„๋ฆฌ๋˜์–ด ๋ณ€์ˆ˜์˜ ์„ ์–ธ์„ ํ•ญ์ƒ ์ตœ์ƒ์œ„๋กœ ๋Œ์–ด์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์„ ์˜๋ฏธ
์ฆ‰, ๋ณ€์ˆ˜ ์„ ์–ธ์˜ ์œ„์น˜์™€ ์ƒ๊ด€์—†์ด ํ•ด๋‹น ๋ฒ”์œ„ ๋‚ด์˜ ์‹คํ–‰ ์ฝ”๋“œ๋ณด๋‹ค ๊ฐ€์žฅ ๋จผ์ € ์‹คํ–‰๋˜์–ด ์„ ์–ธ๋˜๋Š” ๊ฒƒ
์„ ์–ธ์€ ํ˜ธ์ด์ŠคํŒ…์ด ๋˜์ง€๋งŒ, ํ• ๋‹น์€ ํ˜ธ์ด์ŠคํŒ…์ด ๋˜์ง€ ์•Š์Œ
์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ์—์„œ๋Š” var ๋ณ€์ˆ˜์—์„œ ํ˜ธ์ด์ŠคํŒ…์ด ๊ฐ€๋Šฅ

๐Ÿ“Œ var์˜ ํŠน์ง•์€ ๋ฌธ์ œ์ ์ด๋ผ๊ณ  ๋ณผ์ˆ˜๋„์žˆ๋‹ค.์ค‘๋ณต์„ ์–ธ์ด ๋˜์–ด ๋ฒ„๊ทธ๋กœ๋„ ๋ฐœ์ƒํ• ์ˆ˜์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ๊ทธ๋ ‡๊ธฐ ๋•Œ๋ฌธ์— var๋Š” ์ตœ๋Œ€ํ•œ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ ค๊ณ ํ•œ๋‹ค.์š”์ฆ˜ ๊ฐœ๋ฐœ์ž๋“ค์€ ์ด ๋ฌธ์ œ์ ์„ ๋Œ€์ฒดํ•˜๋Š” let, const ๋ณ€์ˆ˜๋“ค์„ ์‚ฌ์šฉํ•˜๋Š” ์ถ”์„ธ์ด๋‹ค.


2๏ธโƒฃ let

let์˜ ํŠน์ง•

  • let์€ ์žฌ์„ ์–ธ์€ ๋ชปํ•˜์ง€๋งŒ ์—…๋ฐ์ดํŠธ๋Š” ๊ฐ€๋Šฅํ•˜๋‹ค.
  • let ๋ณ€์ˆ˜์˜ ๋ฒ”์œ„๋Š” ๋ธ”๋ก๋ฒ”์œ„๋‹ค.
  • let ๋ณ€์ˆ˜๋Š” ํ•ด๋‹น ๋ธ”๋ก ์•ˆ์—์„œ๋งŒ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • let๋„ var์™€ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ํ˜ธ์ด์ŠคํŒ…์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ํ•˜์ง€๋งŒ undefined๋กœ ๊ฐ’์ด ์ดˆ๊ธฐํ™”๋˜์ง€์•Š๋Š”๋‹ค.
  • ์„ ์–ธ ์ด์ „์— let ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๊ณ  ํ•˜๋ฉด ์ฐธ์กฐ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

3๏ธโƒฃ const

const ์˜ ํŠน์ง•

  • const๋Š” ๋ฐ˜๋ณต์„ ์–ธ , ํ•œ๋ฒˆ์„ ์–ธํ•œ ๊ฐ’์€ ์—…๋ฐ์ดํŠธ๋„ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.
  • const๋„ let๊ณผ ๋งˆ์ฐฌ๊ฐ€์ง€๋กœ ๋ธ”๋ก๋ฒ”์œ„์ด๋‹ค.
    ๋”ฐ๋ผ์„œ ์„ ์–ธ๋œ ๋ธ”๋ก ๋ฒ”์œ„์•ˆ์—์„œ๋งŒ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • const๋Š” ์„ ์–ธ๊ณผ ๋™์‹œ์— ์ดˆ๊ธฐํ™”๊ฐ€๋˜์–ด์•ผํ•œ๋‹ค. const๋กœ ํ•œ๋ฒˆ ์„ ์–ธ๋œ ๋ณ€์ˆ˜๋Š” ์ˆ˜์ •์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค. ๋‹จ ์˜ค๋ธŒ์ ํŠธ ๋‚ด ์†์„ฑ๋“ค์€ ์ˆ˜์ •์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
const USER_PROFILE = {
      name :'jack'
      age  : 25,
}
USER_PROFILE.name = 'sam';

console.log(USER_NAME.name);

์ถœ๋ ฅ๊ฐ’ = sam

๐Ÿ‘๐Ÿป Reference

๐Ÿ‘๐Ÿป Reference

profile
โ˜„๏ธ

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