๐Ÿง‘๐Ÿปโ€๐Ÿซ ํ”„๋ก ํŠธ์—”๋“œ ๊ธฐ์ˆ  ๋ฉด์ ‘ ๋‹จ๊ณจ ๊ฐœ๋…๋“ค ์ •๋ฆฌ (์ž๋ฐ”์Šคํฌ๋ฆฝ ํŽธ)

leehyunjuยท2023๋…„ 3์›” 7์ผ
400

FE๋ฉด์ ‘์ค€๋น„

๋ชฉ๋ก ๋ณด๊ธฐ
1/3
post-thumbnail

๊ณ„์† ์ถ”๊ฐ€ํ•  ์˜ˆ์ •์ž…๋‹ˆ๋‹ค.

๐Ÿง‘๐Ÿปโ€๐Ÿซ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋™์ž‘๋˜๊ฒŒ ํ•˜๋ ค๋ฉด ๋ธŒ๋ผ์šฐ์ € ์ž์ฒด์—์„œ ๋‚ด์žฅ๋˜์–ด์žˆ๋Š” JS ์—”์ง„์ด ํ•„์š”ํ•˜๋‹ค. ์ด๊ฒƒ์ด ๋™์ž‘ํ•˜๋Š” ์‹œ๊ฐ„์„ ๋Ÿฐํƒ€์ž„์ด๋ผ๊ณ  ํ•˜๋Š”๋ฐ ๋Ÿฐํƒ€์ž„ ํ•˜๋Š” ๊ณผ์ •์—์„œ ์ฝ”๋“œ๋ฅผ ํ•œ ์ค„ ํ•œ ์ค„ ์ฝ๊ณ  ๋ฒˆ์—ญํ•ด์„œ ์‹คํ–‰์„ ํ•ด์ฃผ๋Š” ๊ฒƒ์ด ์ธํ„ฐํ”„๋ฆฌํ„ฐ ๋ผ๊ณ  ํ•œ๋‹ค.

๐Ÿง‘๐Ÿปโ€๐Ÿซ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€?

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

๐Ÿง‘๐Ÿปโ€๐Ÿซ ์Šค์ฝ”ํ”„๋ž€?

  • ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐ(=์ ‘๊ทผ)ํ•  ์ˆ˜ ์žˆ๋Š” ์œ ํšจํ•œ ๋ฒ”์œ„, ์˜์—ญ์„ ์ง€์ •ํ•˜๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.
  • ์„ ์–ธ ๋œ ์œ„์น˜์— ๋”ฐ๋ผ ์œ ํšจ ๋ฒ”์œ„๊ฐ€ ๊ฒฐ์ •๋œ๋‹ค.
  • ๋ฒ”์œ„๋Š” ์ฝ”๋“œ ๋ธ”๋ก { } ์•ˆ์—์„œ๋งŒ ์œ ํšจํ•œ๋‹ค.
  • ๋ธ”๋ก ๋ฐ–์—์„œ๋Š” ์ฐธ์กฐํ•  ์ˆ˜ ์—†๋‹ค.

๐Ÿ”ฅ ์žฅ์ 
1. ์ด๋ฆ„ ์ถฉ๋Œ์ด ๋ฐฉ์ง€๋œ๋‹ค.
2. ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์ ˆ์•ฝํ•  ์ˆ˜ ์žˆ๋‹ค.

๐Ÿ”ฅ ๊ฒฐ๋ก 

  • ๋ณ€์ˆ˜๋Š” ์ตœ๋Œ€ํ•œ ํ•„์š”ํ•œ ๊ณณ์—์„œ ์ •์˜ํ•ด์•ผํ•œ๋‹ค!

๐Ÿ”ฅ ์ฝ”๋“œ ๋ธ”๋ก์ด ์“ฐ์ด๋Š” ๊ณณ๋“ค

{ }

if() {

}

for() {

}

function() {

}

๐Ÿง‘๐Ÿปโ€๐Ÿซ ์ง€์—ญ๋ณ€์ˆ˜

function sum (a, b) {
  console.log(a,b)
} // ์ด๋Ÿฐ ๋งค๊ฐœ๋ณ€์ˆ˜๋“ค๋„ ๋ธ”๋ก์•ˆ์—์„œ๋งŒ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ๋ธ”๋ก ์™ธ๋ถ€์—์„œ๋Š” ๋ธ”๋ก ๋‚ด๋ถ€ ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์—†๋‹ค.
  • ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ๋Š” ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์—†๋‹ค.
  • ํ•จ์ˆ˜ ์™ธ๋ถ€์—์„œ๋Š” ํ•จ์ˆ˜ ๋งค๊ฐœ๋ณ€์ˆ˜๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์—†๋‹ค.
{
  const x = 1;
  {
    const y = 2;
    console.log(x); 
  }
    console.log(x); // 1
    console.log(y); // ๋ธ”๋ก ์™ธ๋ถ€์—์„œ๋Š” ๋‚ด๋ถ€๋ฅผ ์ฐธ์กฐํ•  ์ˆ˜ ์—†์œผ๋ฏ€๋กœ ์•ฑ์ด ์ฃฝ๋Š”๋‹ค.
}

const x = 1 ์€ ์ „์ฒด์ ์ธ ์ฝ”๋“œ ๋ธ”๋ก ๋‚ด๋ถ€์—์„œ ์œ ํšจํ•˜๋‹ค. ๊ทธ๋ž˜์„œ ์•ˆ์—์„œ ์™ธ๋ถ€๋ฅผ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.


๐Ÿง‘๐Ÿปโ€๐Ÿซ ๊ธ€๋กœ๋ฒŒ ์Šค์ฝ”ํ”„

// ๐Ÿ“ ์ „์—ญ ๋ณ€์ˆ˜, ์ „์—ญ ์Šค์ฝ”ํ”„, ๊ธ€๋กœ๋ฒŒ ๋ณ€์ˆ˜, ๊ธ€๋กœ๋ฒŒ ์Šค์ฝ”ํ”„ ๋ผ๊ณ ํ•œ๋‹ค.
const text ='global'; 

{
// ๐Ÿ“ ์ง€์—ญ ๋ณ€์ˆ˜, ๋กœ์ปฌ ๋ณ€์ˆ˜, ์ง€์—ญ ์Šค์ฝ”ํ”„, ๋กœ์ปฌ ์Šค์ฝ”ํ”„
  const text = 'inside block1'; 
  {
    console.log(text)
  }
}
  • ๋‹ต์€ 'inside block1' ์ด ๋œ๋‹ค. ๋‚ด๋ถ€์— ์žˆ๋Š” ๊ฒƒ์€ ์™ธ๋ถ€์— ์žˆ๋Š” ๊ฒƒ์— ์ ‘๊ทผ์ด ์•ˆ๋˜๊ธฐ ๋•Œ๋ฌธ์—. ๋งŒ์•ฝ inside block1 ๊ฐ’์ด ์—†๋‹ค๋ฉด ํ•œ ๋‹จ๊ณ„ ์œ„๋กœ ์ƒ์œ„ ๋ณ€์ˆ˜์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค. ์‰ฝ๊ฒŒ ๋งํ•ด ๊ฐ€์žฅ ๊ฐ€๊นŒ์šด ๊ทผ์ ‘ํ•œ ๋ณ€์ˆ˜์— ์ ‘๊ทผ ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

๐Ÿง‘๐Ÿปโ€๐Ÿซ ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ (= ์“ฐ๋ ˆ๊ธฐ ์ˆ˜์ง‘)

  • ํ”„๋กœ๊ทธ๋ž˜๋ฐ์„ ํ•  ๋•Œ ์“ฐ๋ ˆ๊ธฐ ์ˆ˜์ง‘์„ ํ•ด์ค˜์•ผํ•œ๋‹ค. ์—ฌ๊ธฐ์„œ ๋งํ•˜๋Š” ์“ฐ๋ ˆ๊ธฐ ์ˆ˜์ง‘์ด๋ž€ ๋ฉ”๋ชจ๋ฆฌ ์ฒญ์†Œ๋ฅผ ํ•ด์ค˜์•ผ ํ•œ๋‹ค๋Š” ๋œป์œผ๋กœ ๋ณด๋ฉด ๋œ๋‹ค.

๋ฉ”๋ชจ๋ฆฌ ๊ตฌ์กฐ

let apple = {
  name : 'apple',
}

let orange = apple;

orange = null;
apple = null;

์˜ค๋ธŒ์ ํŠธ๋ฅผ ๋ณ€์ˆ˜์— ํ• ๋‹นํ•˜๋ฉด ์˜ค๋ธŒ์ ํŠธ๋Š” ๋ฉ”๋ชจ๋ฆฌ ์–ด๋”˜๊ฐ€์— heap์ด๋ผ๋Š” ๊ณณ์— ๋งŒ๋“ค์–ด์ง„๋‹ค. ๋ณ€์ˆ˜๋Š” ๋ฉ”๋ชจ๋ฆฌ๊ฐ€ ๋งŒ๋“ค์–ด์ง„ ์ฃผ์†Œ๋ฅผ ๊ฐ€๋ฆฌํ‚ค๊ฒŒ ๋œ๋‹ค. ๊ทธ๋Ÿฐ๋ฐ ๋ฉ”๋ชจ๋ฆฌ ์•ˆ์— ์•„๋ฌด๊ฒƒ๋„ ์—†์„ ๊ฒฝ์šฐ์— (Null) ์ฐธ์กฐํ•˜๋Š” ๊ฒƒ์ด ์—†๋‹ค๋ฉด, ์“ฐ๋ ˆ๊ธฐ๋กœ ๊ฐ„์ฃผํ•˜๊ณ  ๋ฉ”๋ชจ๋ฆฌ์—์„œ ๊น”๋”ํ•˜๊ฒŒ ์ฒญ์†Œ๋ฅผ ํ•ด์ค€๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰์…˜์ด ๋ฐœ์ƒํ•˜๋Š” ์›๋ฆฌ๋Š” ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ๋ผ๋Š” ์• ๊ฐ€ ์žˆ๋Š”๋ฐ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„ ์ž์ฒด์—์„œ ์ œ๊ณตํ•ด์ฃผ๊ณ  ๋ฐฑ๊ทธ๋ผ์šด๋“œ ํ”„๋กœ์„ธ์Šค์—์„œ ๋™์ž‘ํ•ด์ค€๋‹ค. ๋Œ€์‹  ์ด๋Ÿฐ ์ ์—์„œ CPU๊ฐ€ ๋ฐœ์ƒํ•˜๊ฒŒ ๋œ๋‹ค. (์ฆ‰, ๋น„์šฉ์ด ๋ฐœ์ƒํ•œ๋‹ค๋Š” ๊ฒƒ!!)

const global = 1;
{
 const local = 1;
}

์ด์ฒ˜๋Ÿผ ๊ธ€๋กœ๋ฒŒ ๋ณ€์ˆ˜๋Š” ์•ฑ์ด ์ข…๋ฃŒ๋  ๋•Œ๊นŒ์ง€ ๊ณ„์† ๋ฉ”๋ชจ๋ฆฌ์— ์œ ์ง€๋œ๋‹ค. ๋ธ”๋ก ์Šค์ฝ”ํ”„๋Š” ๋ธ”๋ก ์Šค์ฝ”ํ”„์˜ ์—ญํ• ์ด ๋๋‚˜๋ฉด ์ž๋™์œผ๋กœ ์†Œ๋ฉธ๋œ๋‹ค. => ๊ฐ€๋น„์ง€ ์ปฌ๋ ‰ํ„ฐ๊ฐ€ ๋ฉ”๋ชจ๋ฆฌ๋ฅผ ์ฒ˜๋ฆฌํ•ด์คŒ.
๊ทธ๋ž˜์„œ ๊ฐ€๊ธ‰์  ๊ธ€๋กœ๋ฒŒํ•˜๊ฒŒ ์ „์—ญ์ ์œผ๋กœ ์“ฐ๋Š” ๊ฒƒ์€ ์ข‹์ง€ ์•Š๋‹ค โŒ
๋ฉ”๋ชจ๋ฆฌ ์ธก๋ฉด์—์„œ ์ข‹์ง€ ์•Š๊ธฐ ๋•Œ๋ฌธ์— ๊ฐ€๊ธ‰์ ์ด๋ฉด ํ•„์š”ํ•œ ๊ณณ์—์„œ๋งŒ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹๋‹ค. ๐Ÿ‘


๐Ÿง‘๐Ÿปโ€๐Ÿซ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ

๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์„ ์•Œ์•„๋ณด๊ธฐ ์ „์— ์‹คํ–‰ ์ปจํ…์ŠคํŠธ์— ๋Œ€ํ•ด ์งง๊ฒŒ ์•Œ์•„๋ณด์ž.

์‹คํ–‰ ์ปจํ…์ŠคํŠธ

  • ์ฝœ์Šคํƒ๊ณผ ๋ฐ€์ ‘ํ•˜๊ฒŒ ๊ด€๋ จ์ด ์žˆ๋‹ค. ์ฝ”๋“œ์˜ ์‹คํ–‰ ์ˆœ์„œ์™€ ์Šค์ฝ”ํ”„๋ฅผ ๊ธฐ์–ตํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
  • ๋‚ด๋ถ€์—์„œ ์™ธ๋ถ€๋กœ ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ–ˆ๋‹ค. ์ „์—ญ์—์„œ ์„ ์–ธ๋œ ๊ฒƒ์„ ์ „์—ญ ์Šค์ฝ”ํ”„๋ผ ํ•˜๊ณ  ๋‚ด๋ถ€์— ์žˆ๋Š” ๊ฒƒ์„ ๋ธ”๋ก ์Šค์ฝ”ํ”„๋ผ๊ณ  ํ•œ๋‹ค. ๋ธ”๋ก ์•ˆ์— ๋˜ ๋‹ค๋ฅธ ์Šค์ฝ”ํ”„๊ฐ€ ์กด์žฌํ•  ์ˆ˜๋„ ์žˆ๋‹ค.
const a = 1;
{
  const a = 2;
   {
    const a = 3;
   }
}

์ด๋Ÿฌํ•œ ์ฝ”๋“œ๊ฐ€ ์žˆ๋‹ค๊ณ  ๊ฐ€์ •ํ–ˆ์„ ๋•Œ, ๊ทผ์ ‘ํ•œ ๋ถ€๋ชจ์— ์Šค์ฝ”ํ”„๋ฅผ ์–ด๋–ป๊ฒŒ ์ฐพ๋Š”๊ฑธ๊นŒ ? ํ–ˆ๋‹ค๋ฉด ์ด์œ ๋Š” ๊ฐ๊ฐ์˜ ๋ธ”๋ก์—์„œ๋Š” ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์ด๋ผ๋Š” ๋‚ด๋ถ€ ์˜ค๋ธŒ์ ํŠธ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ๋‹ค. ๊ทธ๋ž˜์„œ ๊ฐ ๋ธ”๋ก๋งˆ๋‹ค ์–ด๋–ค ๋ณ€์ˆ˜๊ฐ€ ๋“ค์–ด์žˆ๋Š”์ง€ ๋ถ€๋ชจ๋Š” ๋ˆ„๊ตฌ์ธ์ง€? ์ด๋Ÿฐ ๊ฒƒ์„ ์ถ”์ ํ•˜๋Š” ๊ฒƒ์ด ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์ด๋ผ๊ณ  ํ•œ๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„์€ ์ด๋Ÿฐ ์‹คํ–‰ ์ˆœ์„œ์™€ ๊ฐ๊ฐ์˜ ๋ธ”๋ก์˜ ์ •๋ณด๋“ค์„ ํ•œ ์˜ค๋ธŒ์ ํŠธ์— ๋ฐ์ดํ„ฐ๋ฅผ ๋‹ด์•„๋‘๊ณ  ์žˆ๋‹ค.

๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ ์•ˆ์— ์†ํ•ด์žˆ๋Š” ๊ฒƒ๋“ค์€ ์ด์™€ ๊ฐ™๋‹ค.

  1. ํ™˜๊ฒฝ ๋ ˆ์ฝ”๋“œ
  2. ์™ธ๋ถ€ ํ™˜๊ฒฝ ์ฐธ์กฐ

์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ

const a = 1; // ์ „์—ญ ์Šค์ฝ”ํ”„
{
  const a = 2; // ๋ธ”๋ก ์Šค์ฝ”ํ”„ 1
   {
    const a = 3; // ๋ธ”๋ก ์Šค์ฝ”ํ”„ 2
   }
}
  • ์ด์™€๊ฐ™์ด ์ „์—ญ ์Šค์ฝ”ํ”„ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์ด ๋งŒ๋“ค์–ด์กŒ์Œ
  • ์œ„์ฒ˜๋Ÿผ ๋ธ”๋ก ์Šค์ฝ”ํ”„1์˜ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์ด ์žˆ๊ณ  ๋ธ”๋ก์Šค์ฝ”ํ”„2๊ฐ€ ์žˆ๋‹ค. ์ด๋ ‡๊ฒŒ ์ด์–ด์ง€๋Š” ๊ฒƒ์„ ์Šค์ฝ”ํ”„ ์ฒด์ธ์ด๋ผ๊ณ  ํ•œ๋‹ค.

๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ๊ณผ ์Šค์ฝ”ํ”„ ์ฒด์ธ๋ฅผ ํ†ตํ•ด ๋ฐฐ์šด์ 

  1. ๋ฉ”๋ชจ๋ฆฌ ์ ˆ์•ฝ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ ์„ฑ๋Šฅ์„ ์œ„ํ•ด์„œ๋ผ๋„ ๋ณ€์ˆ˜๋Š” ์ตœ๋Œ€ํ•œ ํ•„์š”ํ•œ ๊ณณ์— ์ •์˜ ํ•ด์•ผ๋˜๋Š”๊ตฌ๋‚˜
  2. ์ค‘์ฒฉ๋œ ์Šค์ฝ”ํ”„๋‚˜ ์ค‘์ฒฉ๋œ ํ•จ์ˆ˜๊ฐ€ ์žˆ๋‹ค๋ฉด ๋ชจ๋“  ์ฒด์ธ์„ ๊ฒ€์‚ฌํ•˜๋ฉฐ ๋Œ์•„๋‹ค๋‹ˆ๋‹ˆ ์„ฑ๋Šฅ์— ์ข‹์ง€ ์•Š๊ฒ ๋‹ค.

์Šค์ฝ”ํ”„ ๊ฐœ๋… ์ •๋ฆฌ

์Šค์ฝ”ํ”„๋Š” ์‹๋ณ„์ž๊ฐ€ ์œ ํšจํ•œ ๋ฒ”์œ„๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š”๋ฐ, ์Šค์ฝ”ํ”„ ๋ฐ–์—์„œ๋Š” ์Šค์ฝ”ํ”„ ๋‚ด๋ถ€์— ์žˆ๋Š” ๊ฒƒ์„ ์ ‘๊ทผํ•  ์ˆ˜ ์—†์ง€๋งŒ ์Šค์ฝ”ํ”„ ๋‚ด๋ถ€์—์„œ๋Š” ์Šค์ฝ”ํ”„ ์™ธ๋ถ€์— ์žˆ๋Š” ์–ด๋–ค ๋ถ€๋ชจ์˜ ๋ฐ์ดํ„ฐ๋„ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋‹ค.
์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ์ด์œ ๋Š”? ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ ์ฐธ์กฐ์™€ ์Šค์ฝ”ํ”„ ์ฒด์ธ์„ ํ†ตํ•ด ๋ถ€๋ชจ์— ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์ด๋‹ค!


๐Ÿง‘๐Ÿปโ€๐Ÿซ ํ˜ธ์ด์ŠคํŒ…

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„(์ธํ„ฐํ”„๋ฆฌํ„ฐ)์ด ์ฝ”๋“œ๋ฅผ ์‹คํ–‰ํ•˜๊ธฐ ์ „์— ๋ณ€์ˆ˜์™€ ํ•จ์ˆ˜, ํด๋ž˜์Šค์˜ ์„ ์–ธ๋ฌธ์„ ๋Œ์–ด์˜ฌ๋ฆฌ๋Š” ๊ฒƒ์„ ๋งํ•œ๋‹ค.
  • ๋ณ€์ˆ˜์˜ ์„ ์–ธ๊ณผ ์ดˆ๊ธฐํ™”๋ฅผ ๋ถ„๋ฆฌํ•œ ํ›„, ์„ ์–ธ๋งŒ ์ฝ”๋“œ์˜ ์ตœ์ƒ๋‹จ์œผ๋กœ ์˜ฎ๊ธด๋‹ค.

๋ณ€์ˆ˜

  • ๊ฐ’์„ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ๊ณต๊ฐ„
  • ์ž๋ฃŒ๋ฅผ ์ €์žฅํ•  ์ˆ˜ ์žˆ๋Š” ์ด๋ฆ„์ด ์ฃผ์–ด์ง„ ๊ธฐ์–ต ์žฅ์†Œ

๋ณดํ†ต let๊ณผ const๋ฅผ ๋งŽ์ด ์‚ฌ์šฉํ•œ๋‹ค.

  • let : ์žฌํ• ๋‹น์ด ํ•„์ˆ˜๋กœ ํ•„์š”ํ•  ๊ฒฝ์šฐ์—๋งŒ ์‚ฌ์šฉ
  • const : ์žฌํ• ๋‹น์ด ํ•„์š” ์—†๋Š” ๊ฒฝ์šฐ (๊ฐ€๋Šฅํ•œ const ์„ ํ˜ธ)

์œ„ ๋ณ€์ˆ˜ ํ‚ค์›Œ๋“œ๊ฐ€ ์ƒ๊ธฐ๊ธฐ ์ „๊นŒ์ง€๋Š” ๋ฌธ์ œ ๋ฉ์–ด๋ฆฌ์ธ var๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.

์–ด๋–ค ์ด์œ ๋กœ var๋ฅผ ์“ฐ์ง€ ๋ง๋ผ๊ณ  ํ•œ ๊ฒƒ์ผ๊นŒ?

๊ธฐ๋ณธ์ ์œผ๋กœ ํ•จ์ˆ˜์˜ ํ˜ธ์ด์ŠคํŒ…์€ ํ•จ์ˆ˜์˜ ์„ ์–ธ๋ฌธ ์ „์— ํ˜ธ์ถœ์ด ๊ฐ€๋Šฅํ•˜๊ฒŒ ํ•ด์ค€๋‹ค.
ํ•จ์ˆ˜์˜ ์„ ์–ธ๋ฌธ์€ ์„ ์–ธ ์ด์ „์—๋„ ํ˜ธ์ถœ์ด ๊ฐ€๋Šฅํ•˜๋‹ค๋Š” ๊ฒƒ์ด๋‹ค.

print();

function print() {
  console.log('hello');
}

ํ•˜์ง€๋งŒ ! ๋ณ€์ˆ˜๋Š” ๋ณ€์ˆ˜ ์„ ์–ธํ•˜๊ธฐ ์ด์ „์— ํ˜ธ์ถœํ•˜๋ฉด ์•ฑ์ด ์ฃฝ์–ด๋ฒ„๋ฆฐ๋‹ค.

console.log(hi); // โ˜ ๏ธ
let hi = 'hi';

ํ•จ์ˆ˜ ์„ ์–ธ๋งŒ ํ˜ธ์ด์ŠคํŒ…์ด ๊ฐ€๋Šฅํ•ด์„œ ํ˜ธ์ถœ์ด ๊ฐ€๋Šฅํ•˜๊ณ , ๋ณ€์ˆ˜(let, const)์™€ ํด๋ž˜์Šค๋Š” ์„ ์–ธ๋œ ์ด๋ฆ„๋งŒ ํ˜ธ์ด์ŠคํŒ…์ด ๊ฐ€๋Šฅํ•˜๊ณ  ๊ฐ’ ์ž์ฒด๋Š” ์ˆœ์„œ๋Œ€๋กœ ์ฝ”๋“œ ์ฐจ๋ก€๊ฐ€ ์™”์„ ๋•Œ๋งŒ ๊ฐ€๋Šฅํ•˜๋‹ค.

var

var๋Š” let๊ณผ const์™€ ๋‹ค๋ฅด๊ฒŒ๋„ ํ˜ธ์ถœ์ด ๊ฐ€๋Šฅํ•จ!
์ด๊ฒƒ ๋ฟ๋งŒ ์•„๋‹ˆ๋ผ var์˜ ๋‹ค๋ฅธ ํŠน์ง•์— ๋Œ€ํ•ด์„œ๋„ ์Š์–ด๋ณธ๋‹ค๋ฉด

var ํŠน์ง•

  • ์ฝ”๋“œ์˜ ๊ฐ€๋…์„ฑ๊ณผ ์œ ์ง€๋ณด์ˆ˜์„ฑ์— ์ข‹์ง€ ์•Š๋‹ค.
  • ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋Š” ํ‚ค์›Œ๋“œ ์—†์ด ์„ ์–ธ๊ณผ ํ• ๋‹น์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
  • ์„ ์–ธ์ธ์ง€ ์žฌํ• ๋‹น์ธ์ง€ ๊ตฌ๋ถ„ํ•˜๊ธฐ ์–ด๋ ต๋‹ค.
  • ์ค‘๋ณต์„ ์–ธ์ด ๊ฐ€๋Šฅํ•˜๋‹ค--> var๋ผ๋Š” ๋ณ€์ˆ˜๋ฅผ ํ•œ ๋ฒˆ ์„ ์–ธํ•˜๊ฒŒ ๋˜๋ฉด ์„ ์–ธํ•˜๊ณ  ๋‚˜์„œ ๋‹ค์‹œ ๋˜‘๊ฐ™์€ ์ด๋ฆ„์œผ๋กœ ์žฌ์„ ์–ธ์ด ๊ฐ€๋Šฅํ•˜๋‹ค.
var hi = '1';
var hi = '2';

์ด๋ ‡๊ฒŒ ๊ฐ€๋Šฅ! ๊ทธ๋ž˜์„œ let์„ ์‚ฌ์šฉํ•˜๋ฉด ์žฌ์„ ์–ธ ํ•  ์ˆ˜ ์—†๋‹ค๊ณ  ์นœ์ ˆํ•˜๊ฒŒ ์˜ค๋ฅ˜ ๋ฌธ๊ตฌ๋กœ ์•ˆ๋‚ด๊ฐ€ ๋˜์ง€๋งŒ var๋Š” ๊ฐ€๋Šฅ

  • ๋ธ”๋ก ๋ ˆ๋ฒจ ์Šค์ฝ”ํ”„ ์ง€์›์ด ์•ˆ๋œ๋‹ค. ํ•จ์ˆ˜ ๋ ˆ๋ฒจ์Šค์ฝ”ํ”„๋งŒ ์ง€์›๋œ๋‹ค.

๐Ÿง‘๐Ÿปโ€๐Ÿซ ์—„๊ฒฉ๋ชจ๋“œ

๋ฆฌ์•กํŠธ์™€ ๊ฐ™์€ ํ”„๋ ˆ์ž„์›Œํฌ ์‚ฌ์šฉ์‹œ ๊ธฐ๋ณธ์ ์œผ๋กœ ์—„๊ฒฉ๋ชจ๋“œ๊ฐ€ ํƒ‘์žฌ๋˜์–ด์žˆ๋‹ค.
๊ทธ๋ž˜๋„ ์—„๊ฒฉ๋ชจ๋“œ๊ฐ€ ๋ญ”์ง€ ์•Œ์•„๋ณด์ž.

for(i=1; i<5; i++) {

}

์ด๋Ÿฐ์‹์œผ๋กœ ์„ ์–ธํ•˜๊ฒŒ ๋  ๊ฒฝ์šฐ, ๋ณ€์ˆ˜ ์„ ์–ธ ํ‚ค์›Œ๋“œ๋ฅผ ์ œ๋Œ€๋กœ ์‚ฌ์šฉํ•˜์ง€ ์•Š์•˜์„ ๋•Œ
์—„๊ฒฉ๋ชจ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋ฉด ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋‚˜์œ ๋ฒ„๋ฆ‡๋“ค์„ ์žก์•„์ค€๋‹ค.


๐Ÿง‘๐Ÿปโ€๐Ÿซ ํด๋กœ์ €

  • ์ด๋ฆ„๋งŒ ๋ด๋„ ํ์‡„, ๋‹ซํžˆ๋Š” ๋“ฏํ•œ ๋Š๋‚Œ์ด ๋“ ๋‹ค.
  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์—์„œ ํด๋กœ์ €๋ž€ ์ฝค๋น„๋„ค์ด์…˜์ด๋ผ๊ณ  ๋ณด๋ฉด๋œ๋‹ค. ๋ฐ”๋กœ ํ•จ์ˆ˜์™€ ๊ทธ ์™ธ๋ถ€๋ฅผ ๋‘˜๋Ÿฌ์‹ธ๊ณ ์žˆ๋Š” ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์˜ ์กฐํ•ฉ์ด๋ผ๊ณ  ๋ณด๋ฉด ๋˜๋Š”๋ฐ, ์‰ฝ๊ฒŒ ๋งํ•ด ๋‚ด๋ถ€ ํ•จ์ˆ˜์™€ ๊ทธ ์™ธ๋ถ€์— ์žˆ๋Š” ํ•จ์ˆ˜์˜ ์Šค์ฝ”ํ”„๋ฅผ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ๋Š” ๊ฒƒ์„ ํด๋กœ์ €๋ผ๊ณ  ํ•œ๋‹ค.
function outer() {
 const x = 0;
 
 function inner() {
   x; // ๊ฐ์‹ธ๊ณ ์žˆ๋Š” ํ•จ์ˆ˜์˜ ๋ณ€์ˆ˜์— ์ ‘๊ทผ์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ์ด์œ ๋Š” ํด๋กœ์ € ๋ฒ„ํ”„ ๋•Œ๋ฌธ
 }
 inner();
}
outer();

์ด๋Ÿฐ ํ•จ์ˆ˜๊ฐ€ ์žˆ๋‹ค๊ณ  ๋ณธ๋‹ค๋ฉด, ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ์Šคํƒ์— ์ „์—ญ ์Šค์ฝ”ํ”„ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์ด ๋จผ์ € ๋“ค์–ด์˜ค๊ณ  ๊ทธ ๋‹ค์Œ์— outer๋ผ๋Š” ์Šค์ฝ”ํ”„ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์ด ๋“ค์–ด์˜จ๋‹ค. ๊ทธ๋ž˜์„œ outer ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ ์•ˆ์— inner ์Šค์ฝ”ํ”„๊ฐ€ ๋“ค์–ด์˜ค๊ฒŒ ๋œ๋‹ค.

ํด๋กœ์ €๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

  • ๋˜ํ•œ ํด๋กœ์ €๋Š” ๋‚ด๋ถ€ ์ •๋ณด๋ฅผ ์€๋‹‰ํ•˜๊ณ , ๊ณต๊ฐœ ํ•จ์ˆ˜(public, ์™ธ๋ถ€)๋ฅผ ํ†ตํ•œ ๋ฐ์ดํ„ฐ ์กฐ์ž‘์„ ์œ„ํ•ด ์“ฐ์ธ๋‹ค.
  • ์บก์Šํ™”์™€ ์ •๋ณด์€๋‹‰์„ ์œ„ํ•ด ์“ฐ์ธ๋‹ค.
  • ํด๋ž˜์Šค private ํ•„๋“œ ๋˜๋Š” ๋ฉ”์†Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•˜๋Š” ํšจ๊ณผ์™€ ๋™์ผํ•˜๋‹ค.

๐Ÿง‘๐Ÿปโ€๐Ÿซ this

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

๊ธ€๋กœ๋ฒŒ ์ปจํ…์ŠคํŠธ์—์„œ this๋ž€?

๊ธ€๋กœ๋ฒŒ ์ปจํ…์ŠคํŠธ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ 2๊ฐ€์ง€๊ฐ€ ์žˆ๋‹ค. (1) ๋ธŒ๋ผ์šฐ์ € (2) Node ๊ฐ€ ์žˆ๋Š”๋ฐ

  • ๐Ÿ™Œ ๋ธŒ๋ผ์šฐ์ € --> this๋Š” window ๋‹ค. window์— ํƒ‘์žฌ๋œ ์†์„ฑ๋“ค์ด ์ถœ๋ ฅ๋˜๋Š” ๊ฒƒ์„ ๋ณผ ์ˆ˜ ์žˆ๋‹ค.
  • ๐Ÿ™Œ ๋…ธ๋“œ --> ๋ชจ๋“ˆ์„ ๊ฐ€๋ฆฌํ‚จ๋‹ค. ์ฝ˜์†”๋กœ๊ทธ์— ๋…ธ๋“œ์˜ this๋ฅผ ์ถœ๋ ฅํ•˜๋ฉด ํ……ํ…… ๋นˆ ๊ฐ์ฒด๊ฐ€ ์ถœ๋ ฅ์ด ๋œ๋‹ค. globalThis ๋ฅผ ์ถœ๋ ฅํ•˜๋ฉด ๋…ธ๋“œ์—์„œ ์‚ฌ์šฉ๋˜๋Š” ์ „์—ญ ๊ฐ์ฒด๋“ค์ด ์ถœ๋ ฅ๋œ๋‹ค.

(ex) setTimeout, setInterver ๊ฐ™์€ ๊ฒƒ๋“ค

ํ•จ์ˆ˜ ๋‚ด๋ถ€์—์„œ this

function hello() {
  console.log(this)
}
hello();
  • ์—„๊ฒฉ๋ชจ๋“œ (use stric)๋ฅผ ์‚ฌ์šฉํ•˜๊ฒŒ ๋  ๊ฒฝ์šฐ๋Š” undefined๊ฐ€ ๋œฌ๋‹ค.
  • ๋Š์Šจํ•œ ๋ชจ๋“œ์—์„œ๋Š” globalThis๋ฅผ ๊ฐ€๋ฆฌํ‚ค๋Š” ๊ฒƒ์„ ํ™•์ธํ•ด๋ณผ ์ˆ˜ ์žˆ๋‹ค.

์ƒ์„ฑ์žํ•จ์ˆ˜ ๋˜๋Š” ํด๋ž˜์Šค์—์„œ this

  • ์•ž์œผ๋กœ ์ƒ์„ฑ๋  ์ธ์Šคํ„ด์Šค ์ž์ฒด๋ฅผ ๊ฐ€๋ฆฌํ‚จ๋‹ค. == ๋™์ ๋ฐ”์ธ๋”ฉ

๋™์ ๋ฐ”์ธ๋”ฉ

  • ํ˜„์žฌ this๋Š” ๋ˆ„๊ตฌ์ธ์ง€ ๋ชจ๋ฅธ๋‹ค. ๋ˆ„๊ฐ€ ํ˜ธ์ถœํ•˜๋ƒ์— ๋”ฐ๋ผ this๊ฐ€ ๋‹ฌ๋ผ์ง„๋‹ค.

์ •์ ๋ฐ”์ธ๋”ฉ

  • this๋ผ๋Š” ํ•จ์ˆ˜๊ฐ€ ๊ณ„์† ๋™์ ์œผ๋กœ ๋ณ€๊ฒฝ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ด๊ฑธ ์ •์ ์œผ๋กœ ์–ผ๋ ค๋ฒ„๋ฆฌ๋Š” ๋ฐฉ๋ฒ•์ด ์žˆ๋‹ค.
  1. bind ๋ผ๋Š” ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•˜์—ฌ ์ˆ˜๋™์ ์œผ๋กœ ๋ฐ”์ธ๋”ฉ ํ•ด์ค€๋‹ค.
this.myName = this.myName.bind(this)
  1. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ์‚ฌ์šฉ
  • ์ด๊ฒƒ์€ ๋ ‰์‹œ์ปฌ ํ™˜๊ฒฝ์—์„œ this๋ฅผ ๊ธฐ์–ตํ•œ๋‹ค.
this.myName = () => {
  console.log(`ํ•˜์ด ${this.name}`);
}

์ด๋Ÿฐ์‹์œผ๋กœ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๋‹ค.

ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์˜ ํŠน์ง•

  1. ๋ฌธ๋ฒ•์ด ๊น”๋”
  2. ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ์‚ฌ์šฉ์ด ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.
  3. ํ•จ์ˆ˜ ์ž์ฒด arguments
  4. this์— ๋Œ€ํ•œ ๋ฐ”์ธ๋”ฉ์ด ์ •์ ์œผ๋กœ ๊ฒฐ์ •๋œ๋‹ค.
    (ํ•จ์ˆ˜์—์„œ ์ œ์ผ ๊ทผ์ ‘ํ•œ ์ƒ์œ„ ์Šค์ฝ”ํ”„์˜ this์— ์ •์ ์œผ๋กœ ๋ฐ”์ธ๋”ฉ ๋œ๋‹ค)

๐Ÿง‘๐Ÿปโ€๐Ÿซ ํƒ€์ž…์Šคํฌ๋ฆฝํŠธ ์‚ฌ์šฉํ•˜๋Š” ์ด์œ 

  1. ํƒ€์ž…์„ ์ง์ ‘ ์ง€์ •ํ•ด์ฃผ๊ณ  ์ปดํŒŒ์ผ ์‹œ์ ์— ์—๋Ÿฌ๋ฅผ ์žก์•„๋‚ผ ์ˆ˜ ์žˆ๋‹ค.
  2. ๋งŒ์•ฝ ๋ณ€์ˆ˜์— ์ง€์ •๋œ ํƒ€์ž…์ด ์•„๋‹Œ ๋‹ค๋ฅธ ํƒ€์ž…์„ ์ง€์ •ํ•ด์ฃผ๋ฉด ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•œ๋‹ค.

์ด๋Ÿฐ ์ด์œ ๋“ค๋กœ ์ธํ•ด ์ฝ”๋“œ์˜ ์•ˆ์ „์„ฑ๊ณผ ๋” ๋‚˜์€ ๊ฐœ๋ฐœ ๋””๋ฒ„๊น…์ด ๊ฐ€๋Šฅํ•˜๋‹ค. ๋ฐ์ดํ„ฐ๊ฐ€ ์–ด๋–ค ํƒ€์ž…์ธ์ง€ ์ง๊ด€์ ์œผ๋กœ ์•Œ ์ˆ˜ ์žˆ์Œ! ๊ทธ๋ž˜์„œ ์ฝ”๋“œ ํ€„๋ฆฌํ‹ฐ๋ฅผ ๋†’ํ˜€์ค€๋‹ค.

๐Ÿง‘๐Ÿปโ€๐Ÿซ ์ด๋ฒคํŠธ ์บก์ณ๋ง๊ณผ ๋ฒ„๋ธ”๋ง

์ด๋ฒคํŠธ ์บก์ณ๋ง

  • ๋ถ€๋ชจ ์ปดํฌ๋„ŒํŠธ์—์„œ ์‹œ์ž‘๋ผ์„œ ์ž์‹๊นŒ์ง€ ์ด๋ฒคํŠธ์˜ ์˜ํ–ฅ์„ ๋ผ์นœ๋‹ค.

์ด๋ฒคํŠธ ๋ฒ„๋ธ”๋ง (โญ๏ธ์ด๊ฒŒ ๋” ์ค‘์š”)

  • ์ƒ์œ„์— ์žˆ๋Š” ๋ถ€๋ชจ์—๊ฒŒ ์ด๋ฒคํŠธ๊ฐ€ ํ˜ธ์ถœํ•˜๊ฒŒ ๋œ๋‹ค. ๋˜ ๊ทธ ์œ„์˜ ์ƒ์œ„ ๋ถ€๋ชจํ•œํ…Œ๋„ ์ด๋ฒคํŠธ๊ฐ€ ํ˜ธ์ถœ๋œ๋‹ค.
  • event.stopPropagation()๋Š” ์œ„๋กœ ์ „๋‹ฌํ•˜๋Š” ๊ฒƒ์„ ์ค‘์ง€ ์‹œ์ผœ์ค€๋‹ค. ํ•˜์ง€๋งŒ ๊ฐ€๋Šฅํ•˜๋ฉด ์‚ฌ์šฉํ•˜์ง€ ์•Š๋Š” ๊ฒƒ์ด ์ข‹๋‹ค.

์ด๋ฒคํŠธ ์œ„์ž„

  • ์ด๋ฒคํŠธ ์œ„์ž„์ด๋ž€ ํ•˜์œ„ ์—˜๋ฆฌ๋จผํŠธ๋“ค์ด ์—ฌ๋Ÿฌ๊ฐœ ์žˆ์„ ๋•Œ, ํ•˜์œ„ ์—˜๋ฆฌ๋จผํŠธ์— ๊ฐ๊ฐ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ๋‹ฌ์ง€ ์•Š๊ณ  ์ƒ์œ„ ์—˜๋ฆฌ๋จผํŠธ์— ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋ฅผ ๋‹ฌ์•„ ํ•˜์œ„ ์—˜๋ฆฌ๋จผํŠธ๋“ค์„ ์ œ์–ดํ•˜๋Š” ๋ฐฉ์‹์ด๋‹ค. ์ด ํŒจํ„ด์œผ๋กœ ์–ป๋Š” ์ด์ ๋“ค์€ ์ด์™€ ๊ฐ™๋‹ค.
  1. ๋™์ ์œผ๋กœ ์—˜๋ฆฌ๋จผํŠธ ์ถ”๊ฐ€ ์‹œ ํ•ธ๋“ค๋Ÿฌ ๊ณ ๋ คํ•  ํ•„์š” ์—†์Œ
  2. ์ƒ์œ„ ์—˜๋ฆฌ๋จผํŠธ์— ํ•˜๋‚˜์˜ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๋งŒ ์ถ”๊ฐ€ํ•˜๋ฉด ๋˜๊ธฐ ๋•Œ๋ฌธ์— ์ฝ”๋“œ๊ฐ€ ํ›จ์”ฌ ๊น”๋”ํ•˜๋‹ค.
  3. ๋ฉ”๋ชจ๋ฆฌ์— ์žˆ๊ฒŒ๋˜๋Š” ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ๊ฐ€ ์ ์–ด์ง€๊ธฐ ๋•Œ๋ฌธ์— ํผํฌ๋จผ์Šค ์ธก๋ฉด์—์„œ ์ด์ ์ด ์žˆ๋‹ค.

๐Ÿง‘๐Ÿปโ€๐Ÿซ ์ด๋ฒคํŠธ ๋ฃจํ”„ โญ๏ธ (๋‹จ๊ณจ ์งˆ๋ฌธ TOP5)

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ์‹ฑ๊ธ€ ์Šค๋ ˆ๋“œ ๊ธฐ๋ฐ˜ ์–ธ์–ด๋กœ, ๋‹จ์ผ ์ฝœ ์Šคํƒ์„ ๊ฐ€์ง„๋‹ค. ์ด ๋ง์€ ์š”์ฒญ์ด ๋™๊ธฐ์ ์œผ๋กœ ์ฒ˜๋ฆฌ๋˜๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.
๊ทธ๋ ‡๋‹ค๋ฉด ๋น„๋™๊ธฐ ์š”์ฒญ์€ ์–ด๋–ป๊ฒŒ ์ฒ˜๋ฆฌ ๋  ์ˆ˜ ์žˆ์„๊นŒ ? ๐Ÿคท๐Ÿปโ€โ™€๏ธ
๊ทธ๊ฒƒ์€ ๋ฐ”๋กœ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ์‹คํ–‰ํ•˜๋Š” ํ™˜๊ฒฝ์ธ ๋ธŒ๋ผ์šฐ์ €๋‚˜ Node.js๊ฐ€ ๋‹ด๋‹นํ•œ๋‹ค. ์—ฌ๊ธฐ์„œ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์—”์ง„๊ณผ ๊ทธ ์‹คํ–‰ํ™˜๊ฒฝ์„ ์ƒํ˜ธ ์—ฐ๋™ ์‹œ์ผœ์ฃผ๋Š” ์žฅ์น˜๊ฐ€ ๋ฐ”๋กœ ์ด๋ฒคํŠธ ๋ฃจํ”„์ด๋‹ค.

์ด๋ฒคํŠธ ๋ฃจํ”„๋Š” 2๊ฐœ์˜ ํ๋ฅผ ๊ฐ์‹œํ•˜๊ณ  ์žˆ๋‹ค๊ฐ€ ์ฝœ ์Šคํƒ์ด ๋น„๊ฒŒ ๋˜๋ฉด, ์ฝœ๋ฐฑํ•จ์ˆ˜๋ฅผ ๊บผ๋‚ด์™€์„œ ์‹คํ–‰ํ•œ๋‹ค. ์ด ๋•Œ ๋งˆ์ดํฌ๋กœ ํƒœ์Šคํฌ ํ์˜ ์ฝœ๋ฐฑํ•จ์ˆ˜๊ฐ€ ์šฐ์„ ์ˆœ์œ„๋ฅผ ๊ฐ€์ง€๊ณ  ๋•Œ๋ฌธ์— ๋งˆ์ดํฌ๋กœํƒœ์Šคํฌ ํ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋ฅผ ์ „๋ถ€ ์‹คํ–‰ํ•˜๊ณ ๋‚˜์„œ ๋งคํฌ๋กœํƒœ์Šคํฌ ํ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋“ค์„ ์‹คํ–‰ํ•œ๋‹ค. (๋‹จ, UI ๋ Œ๋”๋ง์ด ๋งคํฌ๋กœํƒœ์Šคํฌ ํ์— ์†ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋งˆ์ดํฌ๋กœํƒœ์Šคํฌ ํ์˜ ํƒœ์Šคํฌ๊ฐ€ ๋งŽ์œผ๋ฉด ๋ Œ๋”๋ง์ด ์ง€์—ฐ๋  ์ˆ˜ ์žˆ๋‹ค.)

๋งคํฌ๋กœํƒœ์Šคํฌ ํ์™€ ๋งˆ์ดํฌ๋กœํƒœ์Šคํฌ ํ

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ์‹คํ–‰ ํ™˜๊ฒฝ์€ 2๊ฐ€์ง€ ํ๋ฅผ ๊ฐ€์ง€๊ณ  ์žˆ์œผ๋ฉฐ ๊ฐ๊ฐ ์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰, ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ, ์ฝœ๋ฐฑํ•จ์ˆ˜ ๋“ฑ์˜ ํƒœ์Šคํฌ๊ฐ€ ๋‹ด๊ธฐ๋Š” ๊ณต๊ฐ„์ด๋‹ค. ํƒœ์Šคํฌ๊ฐ€ ์ฝœ๋ฐฑํ•จ์ˆ˜๋ผ๋ฉด ๊ทธ ์ข…๋ฅ˜์— ๋”ฐ๋ผ ๋‹ค๋ฅธ ํ์— ๋‹ด๊ธฐ๋ฉฐ ๋Œ€ํ‘œ์ ์œผ๋กœ๋Š” ์ด์™€ ๊ฐ™์€ ๊ฒƒ๋“ค์ด ์žˆ๋‹ค.

  • ๋งคํฌ๋กœํƒœ์Šคํฌ ํ

    • setTimeout(), setInterval(), UI ๋ Œ๋”๋ง, requsetAnimationFrame(), script, mousemove

      ์ผ๋ฐ˜์ ์ธ ์ด๋ฒคํŠธ ํ•ธ๋“ค๋Ÿฌ, ์ฝœ๋ฐฑํ•จ์ˆ˜๋ผ๊ณ  ๋ณด๋ฉด ๋œ๋‹ค.

  • ๋งˆ์ดํฌ๋กœํƒœ์Šคํฌ ํ

    • Promise (.then/catch/finally), MutationObserver, await

์˜ˆ์‹œ๋ฅผ ํ†ตํ•œ ๋™์ž‘๋ฐฉ์‹์˜ ์ดํ•ด

console.log('์•ˆ๋…•');
setTimeout(() => console.log('ํ!'),0);
Promise.resolve().then(() => console.log('๋งˆ์ดํฌ๋กœ ํ!'));

์œ„์™€ ๊ฐ™์€ ์ฝ”๋“œ๊ฐ€ ์žˆ์„ ๋•Œ, ๊ฒฐ๊ณผ๋Š” ์ด์™€ ๊ฐ™๋‹ค.

์•ˆ๋…•
๋งˆ์ดํฌ๋กœ ํ!
ํ!

์ฒ˜์Œ ์Šคํฌ๋ฆฝํŠธ๊ฐ€ ๋กœ๋“œ๋  ๋•Œ, ์Šคํฌ๋ฆฝํŠธ ์‹คํ–‰ ์ด๋ผ๋Š” ํƒœ์Šคํฌ๊ฐ€ ๋จผ์ € ํƒœ์Šคํฌ ํ์— ๋“ค์–ด๊ฐ„๋‹ค. ๊ทธ๋ฆฌ๊ณ ๋‚˜์„œ ์ด๋ฒคํŠธ ๋ฃจํ”„๊ฐ€ ํƒœ์Šคํฌ ํ์—์„œ ํ•ด๋‹น ํƒœ์Šคํฌ๋ฅผ ๊ฐ€์ ธ์™€ ์ฝœ ์Šคํƒ์„ ์‹คํ–‰ํ•˜๋Š” ๊ฒƒ์ด๋‹ค.

๐Ÿง‘๐Ÿปโ€๐Ÿซ ํ”„๋กœํ† ํƒ€์ž… (Prototype)

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ฅผ ๋‹ค๋ฃจ๋Š”๋ฐ ์žˆ์–ด์„œ ๊ต‰์žฅํžˆ ์ค‘์š”ํ•œ ์—ญํ• ์„ ํ•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐ˜๋“œ์‹œ ์ดํ•ดํ•˜์—ฌ์•ผ ํ•œ๋‹ค!

์ •์˜

  • ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ชจ๋“  ๊ฐ์ฒด๋Š” ์ž์‹ ์˜ ์›ํ˜•์ด ๋˜๋Š” ๊ฐ์ฒด๋ฅผ ๊ฐ€์ง€๋ฉฐ ์ด๋ฅผ ํ”„๋กœํ† ํƒ€์ž…์ด๋ผ๊ณ  ํ•œ๋‹ค. ๋ณด์ด์ง€ ์•Š๋Š” ์†์„ฑ์ธ [[Prototype]]์ด ์ž์‹ ์˜ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•œ๋‹ค. ์ด๋ฅผ __proto__ ๋ผ๋Š” ์†์„ฑ์œผ๋กœ ์ฐธ์กฐํ•  ์ˆ˜ ์žˆ์œผ๋‚˜ ์ด๋Š” ๋น„ํ‘œ์ค€์ด๊ณ  ๋ชจ๋“  ๋ธŒ๋ผ์šฐ์ €์—์„œ ๋™์ž‘ํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๊ธฐ ๋•Œ๋ฌธ์— ์‹ค์ œ๋กœ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์€ ํ”ผํ•ด์•ผ ํ•œ๋‹ค.
  • [[Prototype]] : ์ž์‹ ์˜ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋ฅผ ์ฐธ์กฐํ•˜๋Š” ์†์„ฑ
  • .prototype : new ์—ฐ์‚ฐ์ž๋กœ ์ž์‹ ์„ ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ์‚ฌ์šฉํ•œ ๊ฒฝ์šฐ, ๊ทธ๊ฑธ๋กœ ๋งŒ๋“ค์–ด์ง„ ์ƒˆ๋กœ์šด ๊ฐ์ฒด์˜ [[Prototype]] ์ด ์ฐธ์กฐํ•˜๋Š” ๊ฐ’์ด๋‹ค.
function Func() {}
var a = new Func();

ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ

  • ์–ด๋–ค ๊ฐ์ฒด์˜ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐํ•˜๊ฑฐ๋‚˜ ๊ฐ’์„ ํ• ๋‹นํ•  ๋•Œ ํ•ด๋‹น ๊ฐ์ฒด์— ํ”„๋กœํผํ‹ฐ๊ฐ€ ์—†์„ ๊ฒฝ์šฐ, ๊ทธ ๊ฐ์ฒด์˜ ํ”„๋กœํ† ํƒ€์ž… ๊ฐ์ฒด๋ฅผ ์—ฐ์‡„์ ์œผ๋กœ ๋ณด๋ฉด์„œ ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐพ๋Š” ๋ฐฉ์‹ ์„ ํ”„๋กœํ† ํƒ€์ž… ์ฒด์ธ์ด๋ผ๊ณ  ํ•œ๋‹ค.
    ๋‹จ, ์ฐธ์กฐํ•  ๋•Œ์™€ ๊ฐ’์„ ํ• ๋‹นํ•  ๋•Œ์˜ ๋ฉ”์ปค๋‹ˆ์ฆ˜์ด ๋‹ค๋ฅด๋‹ˆ ๊ธฐ์–ตํ•˜๊ธฐ! ๐Ÿ™‚

  • ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐธ์กฐํ•  ๋•Œ

    • ์ฐพ๊ณ ์ž ํ•˜๋Š” ํ”„๋กœํผํ‹ฐ๊ฐ€ ๊ฐ์ฒด์— ์กด์žฌํ•˜๋ฉด ์‚ฌ์šฉ
    • ์—†์œผ๋ฉด [[Prototype]] ๋งํฌ๋ฅผ ํƒ€๊ณ  ๋๊ฐ€์ง€ ์˜ฌ๋ผ๊ฐ€๋ฉด์„œ ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐพ๋Š”๋‹ค.
    • ์ฐพ์œผ๋ฉด ๊ทธ ๊ฐ’์„ ์‚ฌ์šฉํ•˜๊ณ  ์—†์œผ๋ฉด undefined๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
  • ํ”„๋กœํผํ‹ฐ์— ๊ฐ’์„ ํ• ๋‹นํ•  ๋•Œ

    • ์ฐพ๊ณ ์ž ํ•˜๋Š” ํ”„๋กœํผํ‹ฐ๊ฐ€ ๊ฐ์ฒด์— ์กด์žฌํ•˜๋ฉด ๊ฐ’์„ ๋ฐ”๊พผ๋‹ค.
    • ํ”„๋กœํผํ‹ฐ๊ฐ€ ์—†๊ณ  [[Prototype]] ๋งํฌ๋ฅผ ํƒ€๊ณ  ์˜ฌ๋ผ๊ฐ€์„œ ํ•ด๋‹น ํ”„๋กœํผํ‹ฐ๋ฅผ ์ฐพ์•˜์„ ๊ฒฝ์šฐ

โญ๏ธ ๋ธŒ๋ผ์šฐ์ €์— URL์„ ์ž…๋ ฅํ•˜๋ฉด ์ผ์–ด๋‚˜๋Š” ์ผ (๋‹จ๊ณจ ์งˆ๋ฌธ)

Q. ์›น ๋ธŒ๋ผ์šฐ์ €์— www.naver.com์„ ์ž…๋ ฅํ•˜๋ฉด ์ผ์–ด๋‚˜๋Š” ์ผ์„ ์„ค๋ช…ํ•ด๋ณด์•„๋ผ.

A. ์ฃผ์†Œ์ฐฝ์— URL ๊ฐ’ ๋„๋ฉ”์ธ ๋„ค์ž„(DNS)์„ ์ž…๋ ฅ์„ ํ–ˆ์„ ๋•Œ, DNS ์„œ๋ฒ„๋กœ ์ „์†กํ•˜์—ฌ IP ์ฃผ์†Œ๋ฅผ ๋ฐ›์•„์˜ต๋‹ˆ๋‹ค. ํ•ด๋‹น IP ์ฃผ์†Œ๋กœ HTML๊ณผ ๊ฐ™์€ ๋ฆฌ์†Œ์Šค ํŒŒ์ผ(JS, HTML, CSS)์„ ์š”์ฒญํ•˜๊ณ  ๋ฐ›์•„์˜จ ๋ฆฌ์†Œ์Šค ํŒŒ์ผ์„ ๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ Œ๋”๋งํ•˜์—ฌ ์‚ฌ์šฉ์ž์—๊ฒŒ ๋ณด์—ฌ์ค๋‹ˆ๋‹ค.

๋ธŒ๋ผ์šฐ์ €๊ฐ€ ๋ฐ›์•„์˜จ ๋ฆฌ์†Œ์Šค๋ฅผ ์–ด๋–ป๊ฒŒ ๋ Œ๋”๋ง ํ•˜๋ƒ๋ฉด, HTML ํŒŒ์ผ์„ ํŒŒ์‹ฑํ•˜์—ฌ DOM ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์„ฑ -> CSS ํŒŒ์ผ ๋˜ํ•œ ํŒŒ์‹ฑํ•ด์„œ CSSOM ํŠธ๋ฆฌ๋ฅผ ๊ตฌ์„ฑํ•˜๊ณ  ์ด ๋‘ ํŠธ๋ฆฌ๋ฅผ ํ•ฉ์ณ ๋ Œ๋” ํŠธ๋ฆฌ(render tree)๋ฅผ ๊ตฌ์„ฑํ•ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿผ ์ด ๋ Œ๋” ํŠธ๋ฆฌ ๊ธฐ๋ฐ˜์œผ๋กœ ๋ Œ๋”๋งํ•˜๊ฒŒ ๋ฉ๋‹ˆ๋‹ค.

profile
์•„๋Š‘ํ•œ ๋‡Œ๊ณต๊ฐ„ ๐Ÿง 

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

comment-user-thumbnail
2023๋…„ 3์›” 14์ผ

์•Œ๋˜๊ฑฐ์˜€๋Š”๋ฐ ๋‹ค ๊นŒ๋จน์—ˆ๋„ค์š” ๋‚˜์ค‘์— ๋‹ค์‹œํ•œ๋ฒˆ ๊ณต๋ถ€ํ•ด์•ผ ๊ฒ ์Šต๋‹ˆ๋‹ค

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2023๋…„ 3์›” 15์ผ

๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค !

1๊ฐœ์˜ ๋‹ต๊ธ€
comment-user-thumbnail
2024๋…„ 2์›” 21์ผ

์ž˜ ์ฝ์—ˆ์Šต๋‹ˆ๋‹ค!

๋‹ต๊ธ€ ๋‹ฌ๊ธฐ