Front/JavaScript

[JavaScript] ๋ณ€์ˆ˜์™€ ์ƒ์ˆ˜

ddo04 2024. 7. 2. 23:31
728x90

โ€Š๐Ÿ”‹๋ณ€์ˆ˜๋ž€?

  • ํ”„๋กœ๊ทธ๋žจ์˜ ํ”ผ์š”ํ•œ ๊ฐ’๋“ค์„ ์ €์žฅํ•ด๋‘๋Š” ๊ณต๊ฐ„
  • ๊ณต๊ฐ„๋งˆ๋‹ค ์„œ๋กœ ๋‹ค๋ฅธ ์ด๋ฆ„์„ ๋ถ™์—ฌ์„œ ๊ทธ ๊ฐ’์„ ๊ฐ€์ ธ์™€์„œ ์—ฐ์‚ฐ์„ ํ•˜๊ฑฐ๋‚˜ ์—ฐ์‚ฐํ•œ ๊ฒฐ๊ณผ๊ฐ’์„ ์ €์žฅ
  • ํ”„๋กœ๊ทธ๋žจ ์•ˆ์—์„œ ๊ฐ’์ด ๋ณ€๊ฒฝ๋  ์ˆ˜ ์žˆ๋Š” ์ž๋ฃŒ 
  • ์˜๋ฏธ๋ฅผ ๋ถ€์—ฌํ•œ ์–ด๋–ค ๊ฐ’์œผ๋กœ ์ •์˜ํ•ด ๋‘๊ณ  ๊ทธ ๊ฐ’์„ ์ถœ๋ ฅํ•  ์ˆ˜ ์žˆ์Œ
  • <์ €์žฅํ•˜๊ณ  ์‹ถ์€ ๊ฐ’> -> ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„
  • ๊ทธ ๊ฐ’์ด ๊ณ ์ •๋œ ๊ฒƒ์ด ์•„๋‹Œ ๋‚˜์ค‘์— ์›ํ•  ๋•Œ ๋ณ€๊ฒฝํ•  ์ˆ˜๋„ ์žˆ๋Š” ๊ทธ๋Ÿฐ ์ €์žฅ ๊ณต๊ฐ„
  • ์ด๋ฆ„์„ ์ •์˜ํ•˜๊ณ  ๋“ค์–ด๊ฐˆ ๊ฐ’์„ ์šฐ์ธก์— ์ •์˜ํ•œ ํ›„ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ํ• ๋‹น
  • ์„ ์–ธ๋œ ๊ฐ’์„ ์–ด๋””์„œ๋“ ์ง€ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  • let ํ‚ค์›Œ๋“œ ์‚ฌ์šฉ

๐Ÿ”‹์ƒ์ˆ˜๋ž€?

  • ํ•œ ๋ฒˆ ์ •ํ•ด๋†“์œผ๋ฉด ๋ณ€ํ•˜์ง€ ์•Š๊ณ  ๋ณ€๊ฒฝํ•  ์ˆ˜ ์—†๋Š” ๊ฐ’์„ ์ €์žฅํ•˜๋Š” ๊ณต๊ฐ„
  • ์„ ์–ธํ•  ๋•Œ const ํ‚ค์›Œ๋“œ ์‚ฌ์šฉ
  • ํ‚ค์›Œ๋“œ๋ฅผ ์ž‘์„ฑํ•˜๊ณ  ์‚ฌ์šฉํ•  ์ƒ์ˆ˜ ์ด๋ฆ„์„ ์ง€์ •ํ•˜์—ฌ ๋’ค์— ๊ฐ’์„ ๋„ฃ์–ด์ฃผ๋Š” ๊ฒƒ์„ ์˜๋ฏธ
  • ์ˆ˜์ •์„ ํ•˜๋ ค๊ณ  ํ•ด๋„ ์ˆ˜์ •๋˜์ง€ ์•Š์Œ

๐Ÿ”‹var, let, const

  • JavaScript์—์„œ ๋ณ€์ˆ˜๋กœ ์„ ์–ธํ•  ๋•Œ ์‚ฌ์šฉ๋˜๋Š” ์„ธ ๊ฐ€์ง€ ์˜ˆ์•ฝ์–ด
  • let๊ณผ const๋Š” var๊ฐ€ ๊ฐ€์ง€๋Š” ๋‹จ์ ์„ ๊ทน๋ณตํ•˜๊ธฐ ์œ„ํ•ด ๋งŒ๋“ค์–ด์ง„ ์ƒˆ๋กœ์šด ํ‚ค์›Œ๋“œ
  • ํ‚ค์›Œ๋“œ ๋’ค์— ๋ณ€์ˆ˜ ์ด๋ฆ„์„ ๋ถ™์—ฌ ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธ
  • ๋ณ€์ˆ˜์— ๊ฐ’์„ ์ž…๋ ฅํ•˜์—ฌ ์ฃผ๋Š” ๊ฒƒ์„ ๋ณ€์ˆ˜์— ๊ฐ’์„ ํ• ๋‹นํ•œ๋‹ค๊ณ  ํ•จ
  • ์„ ์–ธ๊ณผ ํ• ๋‹น์„ ๋”ฐ๋กœ ํ•  ์ˆ˜๋„ ์žˆ๊ณ  ํ•œ๋ฒˆ์— ๊ฐ™์ด ์„ ์–ธ๊ณผ ํ• ๋‹น์„ ํ•  ์ˆ˜๋„ ์žˆ์Œ
  • ๋ณ€์ˆ˜์•  ํ• ๋‹นํ•˜๊ณ  ๊ทธ ๋ณ€์ˆ˜์˜ ๊ฐ’์„๊ฐ€์ ธ์™€์„œ ๊ณ„์‚ฐํ•  ์ˆ˜ ์žˆ์Œ
var currentYear;
currentYear = 2021;


var birthYear = 2000;

๐Ÿ”‹var

  • let, const ์—†๋˜ ์˜ˆ์ „ JS์—์„œ ์‚ฌ์šฉ
  • ํ˜„์žฌ๋„ ์˜ˆ์ „ ์ฝ”๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ๊ณณ์—์„œ๋Š” ๋™์ž‘๋˜๊ณ  ์žˆ์Œ
  • ๋ณ€์ˆ˜์˜ ์ค‘๋ณต์„ ์ œํ•œํ•˜๊ณ  ์žˆ์ง€ ์•Š์•„์„œ ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š๊ณ  ๊ทธ๋ƒฅ ์‹คํ–‰๋˜์–ด ๋ฒ„๋ฆฌ๋Š” ์น˜๋ช…์ ์ธ ๋‹จ์ ์ด ์žˆ์Œ
  • ๋‹จ์ ์„ ๋ณด์™„ํ•˜๊ธฐ ์œ„ํ•ด let, const๋ฅผ ์‚ฌ์šฉ

๐Ÿ”‹let

  • ํ•œ๋ฒˆ ์„ ์–ธํ•˜๊ณ  ๋‚˜์„œ ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ๋ณ€๊ฒฝ ๊ฐ€๋Šฅ
  • ํ‚ค์›Œ๋“œ ๋’ค์— ์‚ฌ์šฉํ•  ๋ณ€์ˆ˜ ์ด๋ฆ„์„ ์ž‘์„ฑ
  • ๋ณ€์ˆ˜ ์ด๋ฆ„ ๊ณต๊ฐ„์— ๊ฐ’์„ ๋„ฃ๊ธฐ ์œ„ํ•ด ์šฐ์ธก์— ์›ํ•˜๋Š” ๊ฐ’์„ ์ž…๋ ฅํ•˜์—ฌ ๊ณต๊ฐ„์— ์ €์žฅ
  • ๋จผ์ € ์„ ์–ธ์„ ํ•˜๊ณ  ๋‚˜์ค‘์— ๊ฐ’์„ ์ดˆ๊ธฐํ™”ํ•ด๋„ ๋ฌธ์ œ ์—†์Œ
  • ๊ฐ’์„ ๋ฐ”๊ฟ€๋•Œ ๏ฝŒ๏ฝ…๏ฝ”์„ ๋‹ค์‹œ ์ •์˜ํ•˜๋Š” ๊ฒƒ์ด ์•„๋‹Œ ๋ณ€์ˆ˜์˜ ์ด๋ฆ„์„ ๋†“๊ณ  ์šฐ์ธก์—๋‹ค๊ฐ€ ๋„ฃ์„ ๊ฐ’์„ ์ž…๋ ฅ
  • ํ•œ ๋ฒˆ์— ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๊ณ  ์ดˆ๊ธฐํ™” ํ•  ์ˆ˜ ์žˆ์Œ
let hi = '์ด๋„ํ˜œ';

console.log(hi);
  • ์ฝ˜์†”๋กœ๊ทธ๋Š” ๊ด„ํ˜ธ ์•ˆ์— ์–ด๋–ค ๊ฐ’์„ ๋„ฃ์œผ๋ฉด ์ฝ˜์†”์ฐฝ์— ์ถœ๋ ฅ ํ•ด์ฃผ๋Š” ์—ญํ• ์„ ํ•˜๋Š” ํ•จ์ˆ˜
let hi = '์ด๋„ํ˜œ';
let hi = '์•ˆ๋…•ํ•˜์„ธ์š”';

console.log(hi);
  • ๋ณ€์ˆ˜๋Š” ์›ํ•  ๋•Œ ๊ฐ’ ๋ณ€๊ฒฝ์ด ๊ฐ€๋Šฅํ•˜๋ฏ€๋กœ ๋ณ€๊ฒฝํ•˜๋ฉด 2๋ฒˆ์จฐ hi๊ฐ€ ์ฝ˜์†”์ฐฝ์— ์ถœ๋ ฅ๋จ

โ€Š

โ€Š๐Ÿ”‹const

  • ์ƒ์ˆ˜๋ผ๊ณ  ํ•˜๋Š” ๊ฒƒ์€ ํ•œ๋ฒˆ ๊ฐ’์„ ์ •์˜ํ•˜๊ณ  ๋‚˜๋ฉด ๋’ค์—๋Š” ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€
  • ๋ณ€์ˆ˜์˜ ์ด๋ฆ„ ์ชฝ์—๋Š” ๊ฒ€์€์ƒ‰์ด ์˜ค๊ณ  ์™ผ์ชฝ์—๋Š” ๋ณด๋ผ์ƒ‰์œผ๋กœ ํ‘œ์‹œ
  • ์„ ์–ธํ•  ๋•Œ ๊ฐ’์„ ์ดˆ๊ธฐํ™”ํ•ด ์ฃผ์–ด์•ผ ํ•จ
  • ๊ฐ’์„ ์ดˆ๊ธฐํ™” ํ•œ๋‹ค๋Š” ๊ฒƒ์€ ๋ณ€์ˆ˜์˜ ๊ฐ’์„ ํ• ๋‹น
const hello = '์•ˆ๋…•!!';

console.log(hi);

โ€Š๐Ÿ”‹๋ณ€์ˆ˜์™€ ์ƒ์ˆ˜ ์ด๋ฆ„ ์ •ํ•˜๋Š” ๊ทœ์น™?

  1. ๋ณ€์ˆ˜๋‚˜ ์ƒ์ˆ˜ ์ด๋ฆ„์˜ ์ฒซ ๋ฒˆ์งธ ๊ธ€์ž๋Š” ์˜์–ด, $, _๋งŒ ๊ฐ€๋Šฅ < ์ˆซ์ž๋กœ ์‹œ์ž‘ํ•˜๋Š” ๋ณ€์ˆ˜๋ช…์€ ํ—ˆ์šฉ๋˜์ง€ ์•Š์Œ >
  2. ์ฒซ ๊ธ€์ž ์ด์™ธ์—๋Š” ์ˆซ์ž๋„ ์‚ฌ์šฉ ๊ฐ€๋Šฅ
  3. ์˜์–ด ์†Œ๋ฌธ์ž์™€ ๋Œ€๋ฌธ์ž๋Š” ๊ตฌ๋ณ„๋จ
  4. let, const ์™€ ๊ฐ™์€ ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์˜ˆ์•ฝ์–ด๋Š” ์‚ฌ์šฉ ๋ถˆ๊ฐ€
  5. ์ด๋ฆ„์— ๊ณต๋ฐฑ์€ ํ—ˆ์šฉ๋˜์ง€ ์•Š์Œ

โ€Š๐Ÿ”‹๊ฟ€ํŒ

  • ๋ณ€์ˆ˜ = let, ์ƒ์ˆ˜ = const
  • const๋กœ ๋จผ์ € ์„ ์–ธ
  • ๊ฐ’ ๋ณ€๊ฒฝ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ -> let์œผ๋กœ ๋ณ€๊ฒฝ
  • ํ”„๋กœ๊ทธ๋žจ์„ ํ•˜๋ฉด์„œ ๊ฐ’์ด ๋ฐ”๋€Œ๋Š” ๊ฒฝ์šฐ๊ฐ€ ๋งŽ์ง€ ์•Š์Œ
  • ๊ฐœ๋ฐœ์ž์˜ ์‹ค์ˆ˜๋กœ ์ƒ๊ธฐ๋Š” ๋ฎ์–ด์“ฐ๊ธฐ ๊ฐ™์€ ๋ฌธ์ œ๋ฅผ ์ค„์ผ ์ˆ˜ ์žˆ์Œ

โ€Š