์๋ฌ๊ฐ ๋ฐ์ํ์ง ์๋ ์ฝ๋๋ฅผ ์์ฑํ๋ ๊ฒ์ ๋ถ๊ฐ๋ฅํ๋ค.. ๋ฐ๋ผ์ ์๋ฌ๋ ์ธ์ ๋ ๋ฐ์ํ ์ ์๋ค. ๋ฐ์ํ ์๋ฌ์ ๋ํด ๋์ฒํ์ง ์๊ณ ๋ฐฉ์นํ๋ฉด ํ๋ก๊ทธ๋จ์ ๊ฐ์ ์ข ๋ฃ๋๋ค.
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 ๋ฌธ์ 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 ์์ฑ์ ํจ์์๋ ์๋ฌ๋ฅผ ์์ธํ ์ค๋ช ํ๋ ์๋ฌ ๋ฉ์์ง๋ฅผ ์ธ์๋ก ์ ๋ฌํ ์ ์๋ค.
const error = new Error('invalid');
Error ์์ฑ์ ํจ์๊ฐ ์์ฑํ ์๋ฌ ๊ฐ์ฒด๋ message ํ๋กํผํฐ์ stack ํ๋กํผํฐ๋ฅผ ๊ฐ๋๋ค. message ํ๋กํผํฐ์ ๊ฐ์ Error ์์ฑ์ ํจ์์ ์ธ์๋ก ์ ๋ฌํ ์๋ฌ ๋ฉ์์ง์ด๊ณ , stack ํ๋กํผํฐ์ ๊ฐ์ ์๋ฌ๋ฅผ ๋ฐ์์ํจ ์ฝ์คํ์ ํธ์ถ ์ ๋ณด๋ฅผ ๋ํ๋ด๋ ๋ฌธ์์ด์ด๋ฉฐ ๋๋ฒ๊น ๋ชฉ์ ์ผ๋ก ์ฌ์ฉ
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์ด๋ ํ๋ก๋ฏธ์ค ํ์ ์ฒ๋ฆฌ ๋ฉ์๋์ ์ฝ๋ฐฑ ํจ์๋ ํ์คํฌ ํ๋ ๋ง์ดํฌ๋กํ์คํฌ ํ์ ์ผ์ ์ ์ฅ๋์๋ค๊ฐ ์ฝ ์คํ์ด ๋น๋ฉด ์ด๋ฒคํธ ๋ฃจํ์ ์ํด ์ฝ ์คํ์ผ๋ก ํธ์๋์ด ์คํ๋๋ค. ์ด๋ ์ฝ ์คํ์ ํธ์๋ ์ฝ๋ฐฑํจ์์ ์คํ ์ปจํ
์คํธ๋ ์ฝ ์คํ์ ๊ฐ์ฅ ํ๋ถ์ ์กด์ฌํ๊ฒ ๋๋ค. ๋ฐ๋ผ์ ์๋ฌ๋ฅผ ์ ํํ ํธ์ถ์๊ฐ ์กด์ฌํ์ง ์๋๋ค.