๐Ÿ“– ์—๋Ÿฌ ์ฒ˜๋ฆฌ

c_yjยท2022๋…„ 7์›” 23์ผ
0

DeepDive

๋ชฉ๋ก ๋ณด๊ธฐ
41/42

์—๋Ÿฌ ์ฒ˜๋ฆฌ์˜ ํ•„์š”์„ฑ โ“

์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒˆํ•˜์ง€ ์•Ÿ๋Š” ์ฝ”๋“œ๋ฅผ ์ž‘์„ฑํ•˜๋Š” ๊ฒƒ์€ ๋ถˆ๊ฐ€๋Šฅํ•˜๋‹ค.. ๋”ฐ๋ผ์„œ ์—๋Ÿฌ๋Š” ์–ธ์ œ๋‚˜ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋‹ค. ๋ฐœ์ƒํ•œ ์—๋Ÿฌ์— ๋Œ€ํ•ด ๋Œ€์ฒ˜ํ•˜์ง€ ์•Š๊ณ  ๋ฐฉ์น˜ํ•˜๋ฉด ํ”„๋กœ๊ทธ๋žจ์€ ๊ฐ•์ œ ์ข…๋ฃŒ๋œ๋‹ค.

try... catch ๋ฌธ์„ ์‚ฌ์šฉํ•ด ๋ฐœ์ƒํ•œ ์—๋Ÿฌ์— ์ ์ ˆํ•˜๊ฒŒ ๋Œ€์‘ํ•˜๋ฉด ํ”„๋กœ๊ทธ๋žจ์ด ๊ฐ•์ œ ์ข…๋ฃŒ๋˜์ง€ ์•Š๊ณ  ๊ณ„์†ํ•ด์„œ ์ฝ”๋“œ๋ฅผ ์‹คํ–‰์‹œํ‚ฌ ์ˆ˜ ์žˆ๋‹ค.

console.log('[Start]');

try{
  foo();
} catch (error) {
  console.error('[์—๋Ÿฌ ๋ฐœ์ƒ]', error);
  // [์—๋Ÿฌ ๋ฐœ์ƒ] ReferenceError: foo is not defined
}

// ๋ฐœ์ƒํ•œ ์—๋Ÿฌ์— ์ ์ ˆํ•œ ๋Œ€์‘์„ ํ•˜๋ฉด ํ”„๋กœ๊ทธ๋žจ์ด ๊ฐ•์ œ ์ข…๋ฃŒ๋˜์ง€ ์•Š๋Š”๋‹ค.
console.log('[End]')

์ง์ ‘์ ์œผ๋กœ ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒํ•˜์ง€ ์•Š๋Š” ์˜ˆ์™ธ์ ์ธ ์ƒํ™ฉ์ด ๋ฐœ์ƒํ•  ์ˆ˜๋„ ์žˆ๋‹ค. ์˜ˆ์™ธ์ ์ธ ์ƒํ™ฉ์— ์ ์ ˆํ•˜๊ฒŒ ๋Œ€์›…ํ•˜์ง€ ์•Š์œผ๋ฉด ์—๋Ÿฌ๋กœ ์ด์–ด์งˆ ๊ฐ€๋Šฅ์„ฑ์ด ํฌ๋‹ค.

// DOM์— button ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š์œผ๋ฉด querySelector ๋ฉ”์„œ๋“œ๋Š” ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š๊ณ  null์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
const $button = document.querySelector('button'); // null

$button.classList.add('disabled');
// TypeError

์œ„ ์˜ˆ์ œ์˜ querySelector ๋ฉ”์„œ๋“œ๋Š” ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ๋ฌธ์ž์—ด์ด CSS ์„ ํƒ์ž ๋ฌธ๋ฒ•์— ๋งž์ง€ ์•Š๋Š” ๊ฒฝ์šฐ ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ

const $elem = document.querySelector('#1');
// DOMException: Failed to exexute 'querySelector' on 'Document' : '#1' is not a valid selector.

ํ•˜์ง€๋งŒ querySelector ๋ฉ”์„œ๋“œ๋Š” ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ CSS ์„ ํƒ์ž ๋ฌธ์ž์—ด๋กœ DOM์—์„œ ์š”์†Œ ๋…ธ๋“œ๋ฅผ ์ฐพ์„ ์ˆ˜ ์—†๋Š” ๊ฒฝ์šฐ ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š๊ณ  null์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค. ์ด๋–„ if ๋ฌธ์œผ๋กœ querySelector ๋ฉ”์„œ๋“œ์˜ ๋ฐ˜ํ™˜๊ฐ’์„ ํ™•์ธํ•˜๊ฑฐ๋‚˜ ๋‹จ์ถ• ํ‰๊ฐ€ ๋˜๋Š” ์˜ต์…”๋„ ์ฒด์ด๋‹ ์—ฐ์‚ฐ์ž 7.๋ฅผ ์‚ฌ์šฉํ•˜์ง€ ์•Š์œผ๋ฉด ๋‹ค์Œ ์ฒ˜๋ฆฌ์—์„œ ์—๋Ÿฌ๋กœ ์ด์–ด์งˆ ๊ฐ€๋Šฅ์„ฑ์ด ํฌ๋‹ค.

// DOM์— button ์š”์†Œ๊ฐ€ ์กด์žฌํ•˜๋Š” ๊ฒฝ์šฐ querySelector ๋ฉ”์„œ๋“œ๋Š” ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚ค์ง€ ์•Š๊ณ  null์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.
const $button = document.querySelector('button'); // null
$button?.classList.add('disabled');

try...catch...finally๋ฌธ ๐Ÿ˜ฎ

try...catch...finally ๋ฌธ์€ 3๊ฐœ์˜ ์ฝ”๋“œ ๋ธ”๋ก์œผ๋กœ ๊ตฌ์„ฑ๋œ๋‹ค. finally ๋ฌธ์€ ๋ถˆํ•„์š”ํ•˜๋‹ค๋ฉด ์ƒ๋žต๊ฐ€๋Šฅํ•˜๋‹ค.

try {
  // ์‹คํ–‰ํ•  ์ฝ”๋“œ(์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๋Š” ์ฝ”๋“œ)
} catch (err) {
  // trye ์ฝ”๋“œ ๋ธ”๋ก์—์„œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ด ์ฝ”๋“œ ๋ธ”๋ก์˜ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋œ๋‹ค.
  // err์—๋Š” try ์ฝ”๋“œ ๋ธ”๋ก์—์„œ ๋ฐœ์ƒํ•œ Error ๊ฐ์ฒด๊ฐ€ ์ „๋‹ฌ๋œ๋‹ค
} finally {
  // ์—๋Ÿฌ ๋ฐœ์ƒ๊ณผ ์ƒ๊ด€์—†์ด ๋ฐ˜๋“œ์‹œ ํ•œ ๋ฒˆ ์‹คํ–‰๋œ๋‹ค
}

try... catch...finally ๋ฌธ์„ ์‹คํ–‰ํ•˜๋ฉด ๋จผ์ € try ์ฝ”๋“œ ๋ธ”๋ก์ด ์‹คํ–‰ try ์ฝ”๋“œ ๋ธ”๋ก์— ํฌํ•จ๋œ ๋ฌธ ์ค‘์—์„œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ๋ฐœ์ƒํ•œ ์—๋Ÿฌ๋Š” catch ๋ฌธ์˜ err ๋ณ€์ˆ˜์— ์ „๋‹ฌ๋˜๊ณ  catch ์ฝ”๋“œ ๋ธ”๋ก์ด ์‹คํ–‰๋œ๋‹ค. catch๋ฌธ์˜ err ๋ณ€์ˆ˜(๋ณ€์ˆ˜ ์ด๋ฆ„์€ ๋ฌด์—‡์ด๋“  ์ƒ๊ด€์—†๋‹ค)๋Š” try ์ฝ”๋“œ ๋ธ”๋ก์— ํฌํ•จ๋œ ๋ฌธ ์ค‘์—์„œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ƒ์„ฑ๋˜๊ณ  catch ์ฝ”๋“œ ๋ธ”๋ก์—์„œ๋งŒ ์œ ํšจํ•˜๋‹ค. finally ์ฝ”๋“œ ๋ธ”๋ก์€ ์—๋Ÿฌ ๋ฐœ์ƒ๊ณผ ์ƒ๊ด€์—†์ด ๋ฐ˜๋“œ์‹œ ํ•œ๋ฒˆ ์‹คํ–‰๋œ๋‹ค. try...catch...finally ๋ฌธ์œผ๋กœ ์—๋Ÿฌ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋ฉด ํ”„๋กœ๊ทธ๋žจ์ด ๊ฐ•์ œ ์ข…๋ฃŒ๋˜์ง€ ์•Š๋Š”๋‹ค.

console.log('[Start]')

try {
  // ์‹คํ–‰ํ•  ์ฝ”๋“œ(์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•  ๊ฐ€๋Šฅ์„ฑ์ด ์žˆ๋Š” ์ฝ”๋“œ)
  foo();
} catch (err) {
  // try ์ฝ”๋“œ ๋ธ”๋ก์—์„œ ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋ฉด ์ด ์ฝ”๋“œ ๋ธ”๋ก์˜ ์ฝ”๋“œ๊ฐ€ ์‹คํ–‰๋œ๋‹ค.
  // err์—๋Š” try ์ฝ”๋“œ ๋ธ”๋ก์—์„œ ๋ฐœ์ƒํ•œ Error ๊ฐ์ฒด๊ฐ€ ์ „๋‹ฌ๋œ๋‹ค.
  console.error(err); // ReferenceError: foo is not defined
} finally {
  // ์—๋Ÿฌ ๋ฐœ์ƒ๊ณผ ์ƒ๊ด€์—†์ด ๋ฐ˜๋“œ์‹œ ํ•œ๋ฒˆ ์‹คํ–‰๋œ๋‹ค
  console.log('finally')
}

// try...catch... finally ๋ฌธ์œผ๋กœ ์—๋Ÿฌ๋ฅผ ์ฒ˜๋ฆฌํ•˜๋ฉด ํ”„๋กœ๊ทธ๋žจ์ด ๊ฐ•์ œ ์ข…๋ฃŒ๋˜์ง€ ์•Š๋Š”๋‹ค.
console.log('[End]')

Error ๊ฐ์ฒด ๐Ÿ˜™

Error ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋Š” ์—๋Ÿฌ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ๋‹ค. Error ์ƒ์„ฑ์ž ํ•จ์ˆ˜์—๋Š” ์—๋Ÿฌ๋ฅผ ์ƒ์„ธํžˆ ์„ค๋ช…ํ•˜๋Š” ์—๋Ÿฌ ๋ฉ”์‹œ์ง€๋ฅผ ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•  ์ˆ˜ ์žˆ๋‹ค.

const error = new Error('invalid');

Error ์ƒ์„ฑ์ž ํ•จ์ˆ˜๊ฐ€ ์ƒ์„ฑํ•œ ์—๋Ÿฌ ๊ฐ์ฒด๋Š” message ํ”„๋กœํผํ‹ฐ์™€ stack ํ”„๋กœํผํ‹ฐ๋ฅผ ๊ฐ–๋Š”๋‹ค. message ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’์€ Error ์ƒ์„ฑ์ž ํ•จ์ˆ˜์— ์ธ์ˆ˜๋กœ ์ „๋‹ฌํ•œ ์—๋Ÿฌ ๋ฉ”์‹œ์ง€์ด๊ณ , stack ํ”„๋กœํผํ‹ฐ์˜ ๊ฐ’์€ ์—๋Ÿฌ๋ฅผ ๋ฐœ์ƒ์‹œํ‚จ ์ฝœ์Šคํƒ์˜ ํ˜ธ์ถœ ์ •๋ณด๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” ๋ฌธ์ž์—ด์ด๋ฉฐ ๋””๋ฒ„๊น… ๋ชฉ์ ์œผ๋กœ ์‚ฌ์šฉ

throw ๋ฌธ ๐Ÿ˜—

Error ์ƒ์„ฑ์ž ํ•จ์ˆ˜๋กœ ์—๋Ÿฌ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ๋‹ค๊ณ  ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค. ์ฆ‰, ์—๋Ÿฌ ๊ฐ์ฒด ์ƒ์„ฑ๊ณผ ์—๋Ÿฌ ๋ฐœ์ƒ์€ ์˜๋ฏธ๊ฐ€ ๋‹ค๋ฅด๋‹ค.

try {
  // ์—๋Ÿฌ ๊ฐ์ฒด๋ฅผ ์ƒ์„ฑํ•œ๋‹ค๊ณ  ์—๋Ÿฌ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ์€ ์•„๋‹ˆ๋‹ค.
  new Error('something wrong');
} catch (error) {
  console.log(error);
}

throw ํ‘œํ˜„์‹

throw ๋ฌธ์˜ ํ‘œํ˜„์‹์€ ์–ด๋–ค ๊ฐ’์ด๋ผ๋„ ์ƒ๊ด€์—†์ง€๋งŒ ์ผ๋ฐ˜์ ์œผ๋กœ ์—๋Ÿฌ ๊ฐ์ฒด๋ฅผ ์ง€์ •ํ•œ๋‹ค. ์—๋Ÿฌ๋ฅผ ๋˜์ง€๋ฉด catch ๋ฌธ์˜ ์—๋Ÿฌ ๋ณ€์ˆ˜๊ฐ€ ์ƒ์„ฑ๋˜๊ณ  ๋˜์ ธ์ง„ ์—๋Ÿฌ ๊ฐ์ฒด๊ฐ€ ํ• ๋‹น๋œ๋‹ค. ๊ทธ๋ฆฌ๊ณ  catch ์ฝ”๋“œ ๋ธ”๋ก์ด ์‹คํ–‰๋˜๊ธฐ ์‹œ์ž‘ํ•œ๋‹ค.

try {
  // ์—๋Ÿฌ ๊ฐ์ฒด๋ฅผ ๋˜์ง€๋ฉด catch ์ฝ”๋“œ ๋ธ”๋ก์ด ์‹คํ–‰๋˜๊ธฐ ์‹œ์ž‘ํ•œ๋‹ค.
  throw new Error('something wrong');
} catch (error) {
  console.log(error);
}

์—๋Ÿฌ์˜ ์ „ํŒŒ ๐Ÿ™

์—๋Ÿฌ ์ฒ˜๋ฆฌ์˜ ํ•œ๊ณ„์—์„œ ์‚ดํŽด๋ณธ ๋ฐ”์™€ ๊ฐ™์ด ์—๋Ÿฌ๋Š” ํ˜ธ์ถœ์ž๋ฐฉํ–ฅ์œผ๋กœ ์ „ํŒŒ๋œ๋‹ค. ์ฆ‰, ์ฝœ ์Šคํƒ์˜ ์•„๋ž˜ ๋ฐฉํ–ฅ(์‹คํ–‰ ์ค‘์ธ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๊ฐ€ ํ‘ธ์‹œ๋˜๊ธฐ ์ง์ „์— ํ‘ธ์‹œ๋œ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ ๋ฐฉํ–ฅ)์œผ๋กœ ์ „ํŒŒ๋œ๋‹ค.

const foo = () => {
  throw Error('foo์—์„œ ๋ฐœ์ƒํ•œ ์—๋Ÿฌ'); // 4
};

const bar = () => {
  foo(); // 2
}

const baz = () => {
  bar(); // 2
};

try {
  baz(); // 1
} catch (err) {
  console.error(err);
}

1์—์„œ baze ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๋ฉด 2์—์„œ ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๊ณ  3์—์„œ ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜๊ณ  foo ํ•จ์ˆ˜๋Š” 4์—์„œ ์—๋Ÿฌ๋ฅผ throwํ•œ๋‹ค. ์ด๋–„ foo ํ•จ์ˆ˜๊ฐ€ throwํ•œ ์—๋Ÿฌ๋Š” ๋‹ค์Œ๊ณผ ๊ฐ™์ด ํ˜ธ์ถœ์ž์—๊ฒŒ ์ „ํŒŒ๋˜์–ด ์ „์—ญ์—์„œ ์บ์น˜๋œ๋‹ค.
์ด์ฒ˜๋Ÿผ throw๋œ ์—๋Ÿฌ๋ฅผ ์บ์น˜ํ•˜์ง€ ์•Š์œผ๋ฉด ํ˜ธ์ถœ์ž ๋ฐฉํ–ฅ์œผ๋กœ ์ „ํŒŒ๋œ๋‹ค. ์ด๋–„ throw ๋œ ์—๋Ÿฌ๋ฅผ ์บ์น˜ํ•˜์—ฌ ์ ์ ˆํžˆ ๋Œ€์‘ํ•˜๋ฉด ํ”„๋กœ๊ทธ๋žจ์„ ๊ฐ•์ œ ์ข…๋ฃŒ์‹œํ‚ค์ง€ ์•Š๊ณ  ์ฝ”๋“œ์˜ ์‹คํ–‰ ํ๋ฆ„์„ ๋ณต๊ตฌํ•  ์ˆ˜ ์žˆ๋‹ค throw๋œ ์—๋Ÿฌ๋ฅผ ์–ด๋””์—์„œ๋„ ์บ์น˜ํ•˜์ง€ ์•Š์œผ๋ฉด ํ”„๋กœ๊ทธ๋žจ์€ ๊ฐ•์ œ ์ข…๋ฃŒ๋œ๋‹ค.
์ฃผ์˜ํ•  ๊ฒƒ์€ ๋น„๋™๊ธฐ ํ•จ์ˆ˜์ธ setTimeout์ด๋‚˜ ํ”„๋กœ๋ฏธ์Šค ํ›„์† ์ฒ˜๋ฆฌ ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ํ˜ธ์ถœ์ž๊ฐ€ ์—†๋‹ค๋Š” ๊ฒƒ์ด๋‹ค. setTimeout์ด๋‚˜ ํ”„๋กœ๋ฏธ์Šค ํ›„์† ์ฒ˜๋ฆฌ ๋ฉ”์„œ๋“œ์˜ ์ฝœ๋ฐฑ ํ•จ์ˆ˜๋Š” ํƒœ์Šคํฌ ํ๋‚˜ ๋งˆ์ดํฌ๋กœํƒœ์Šคํฌ ํ์— ์ผ์‹œ ์ €์žฅ๋˜์—ˆ๋‹ค๊ฐ€ ์ฝœ ์Šคํƒ์ด ๋น„๋ฉด ์ด๋ฒคํŠธ ๋ฃจํ”„์— ์˜ํ•ด ์ฝœ ์Šคํƒ์œผ๋กœ ํ‘ธ์‹œ๋˜์–ด ์‹คํ–‰๋œ๋‹ค. ์ด๋•Œ ์ฝœ ์Šคํƒ์— ํ‘ธ์‹œ๋œ ์ฝœ๋ฐฑํ•จ์ˆ˜์˜ ์‹คํ–‰ ์ปจํ…์ŠคํŠธ๋Š” ์ฝœ ์Šคํƒ์˜ ๊ฐ€์žฅ ํ•˜๋ถ€์— ์กด์žฌํ•˜๊ฒŒ ๋œ๋‹ค. ๋”ฐ๋ผ์„œ ์—๋Ÿฌ๋ฅผ ์ „ํŒŒํ•  ํ˜ธ์ถœ์ž๊ฐ€ ์กด์žฌํ•˜์ง€ ์•Š๋Š”๋‹ค.

profile
FrontEnd Developer

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