user-img
Language/JS 31
thumbnail
์ฝœ๋ฐฑ (Call Back)
1. ์ฝœ๋ฐฑ์ด๋ž€? ํ•˜๋‚˜์˜ ์ฝ”๋“œ์— ์ธ์ˆ˜๋กœ ๋“ค์–ด๊ฐ€๋Š” ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ์ฝ”๋“œ๋ฅผ Call back์ด๋ผ ํ•œ๋‹ค. ์–ด๋–ค ํ•จ์ˆ˜์˜ ์ธ์ž๋กœ ๋“ค์–ด๊ฐ€๋Š” ์‹คํ–‰ ๊ฐ€๋Šฅํ•œ ํ•จ์ˆ˜๋ฅผ Call back ํ•จ์ˆ˜๋ผ๊ณ  ํ•œ๋‹ค. 2. ์ฝœ๋ฐฑ ์˜ˆ์ œ 3๊ฐ€์ง€ (1) ๊ธฐ๋ณธ์ ์ธ ๊ฒƒ const a = (callback) => { console.log("A"); callback(); }; const b = () => { console.log("B"); }; a(b); ๋งจ ๋งˆ์ง€๋ง‰ ๋ฌธ์„ ๋ณด๋ฉด, a๋ผ๋Š” ํ•จ์ˆ˜์˜ ์ธ์ˆ˜๋กœ b ํ•จ์ˆ˜ ์ž์ฒด๋ฅผ ๋„ฃ์—ˆ๋‹ค. ๊ทธ๋Ÿฌ๋ฉด console.log(b) ํ–ˆ์„ ๋•Œ ์ฒ˜๋Ÿผ b ํ•จ์ˆ˜ ์ž์ฒด๊ฐ€ a์˜ ์ธ์ˆ˜๋กœ ๋“ค์–ด๊ฐ„๋‹ค. ๊ทธ๋ฆฌ๊ณ  3๋ฒˆ์งธ ์ค„์„ ๋ณด๋ฉด callback()์€ ์ธ์ˆ˜๋กœ ๋ฐ›์€ b() ํ•จ์ˆ˜ ์ž์ฒด๋ฅผ ์‹คํ–‰ํ•˜๊ฒ ๋‹ค๋Š” ์˜๋ฏธ์ด๋‹ค. ๋”ฐ๋ผ์„œ ์ถœ๋ ฅ์ด ๋‹ค์Œ๊ณผ ๊ฐ™๋‹ค. (2) ์‘์šฉ // ..
2023.04.20
Language/JS
์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜ (IIFE)
1. ์ฆ‰์‹œ์‹คํ–‰ํ•จ์ˆ˜ ํ•จ์ˆ˜๋Š” ์›๋ž˜ ์„ ์–ธ๋ถ€ (ํ˜น์€ ํ‘œํ˜„์‹)๊ณผ ํ˜ธ์ถœ๋ถ€๊ฐ€ ๋”ฐ๋กœ ํ•„์š”ํ•˜๋‹ค. ์™œ๋ƒํ•˜๋ฉด ์„ ์–ธ๋ถ€๋Š” ํ•จ์ˆ˜์˜ ๋‚ด์šฉ์— ๋Œ€ํ•ด ๊ธฐ์ˆ ๋งŒ ํ•˜์—ฌ ๋†“์€ ๊ณณ์ด๊ณ , ํ˜ธ์ถœ๋ถ€๋Š” ํ•จ์ˆ˜์˜ ๋‚ด์šฉ์„ ์“ฐ๋Š” ๊ณณ ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค. ์ฆ‰์‹œ ์‹คํ–‰ํ•จ์ˆ˜๋Š” ํ•จ์ˆ˜์˜ ์„ ์–ธ๊ณผ ํ˜ธ์ถœ์„ ํ•œ๋ฒˆ์— ํ•˜๋Š” ํ•จ์ˆ˜๋ฅผ ๋งํ•œ๋‹ค. ๋ฐ‘์— ์ฆ‰์‹œ ์‹คํ–‰ํ•จ์ˆ˜ ์‚ฌ์šฉ ํŒจํ„ด์„ ๋ฐฐ์šฐ๊ฒ ์ง€๋งŒ, ๋Œ€ํ‘œ์ ์ธ ํŒจํ„ด์œผ๋กœ ์ฆ‰์‹œ์‹คํ–‰ํ•จ์ˆ˜์˜ ๋ชจ์Šต์„ ์‚ดํŽด๋ณด๋ฉด, //(์‹คํ–‰ํ•  ํ•จ์ˆ˜)(์ธ์ˆ˜); // ์˜ˆ์‹œ ((a) => { console.log(a*2); })(7); ์ด์™€ ๊ฐ™๋‹ค. ()() ๊ฐ€ ๋ถ™์–ด ์žˆ๋Š” ํ˜•ํƒœ๋กœ, ์ฒซ๋ฒˆ์งธ ()์—๋Š” ์‹คํ–‰ํ•  ํ•จ์ˆ˜, ๋‘๋ฒˆ์งธ ()์—๋Š” ํ•จ์ˆ˜์— ๋“ค์–ด๊ฐˆ ์ธ์ž๋ฅผ ๊ธฐ์ˆ ํ•˜๋ฉด ๋œ๋‹ค. 2. ํŒจํ„ด // ์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜ ํŒจํ„ด // 1. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜ ์‚ฌ์šฉ ํŒจํ„ด -> ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋กœ ์ฆ‰์‹œ ์‹คํ–‰ ํ•จ์ˆ˜๋ฅผ ์“ธ ์ˆ˜ ์žˆ๋Š” ํŒจํ„ด์€..
2023.04.20
Language/JS
thumbnail
ํ™”์‚ดํ‘œ ํ•จ์ˆ˜
0. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜๋Š” ๋ณ€์ˆ˜์— ์ต๋ช… ํ•จ์ˆ˜๋ฅผ ํ• ๋‹นํ•˜๋Š” ํ˜•์‹์ด๋ฏ€๋กœ ํ•จ์ˆ˜ ์„ ์–ธ์ด ์•„๋‹ˆ๋ผ ํ•จ์ˆ˜ ํ‘œํ˜„์‹ ์ทจ๊ธ‰์„ ๋ฐ›๋Š”๋‹ค. (ํ˜ธ์ด์ŠคํŒ… ๋ถˆ๊ฐ€) 1. ํ™”์‚ดํ‘œ ํ•จ์ˆ˜์˜ ํŒจํ„ด const a = () => {}; // ๋งค๊ฐœ๋ณ€์ˆ˜๊ฐ€ ํ•˜๋‚˜์ด๋ฉด ์†Œ๊ด„ํ˜ธ ์ƒ๋žต ๊ฐ€๋Šฅ const b = x => {}; const c = (x, y) => {}; // ๋งŒ์•ฝ ํ•จ์ˆ˜ ๋™์ž‘๋ถ€๋ถ„์— ๋‹ค๋ฅธ ๋กœ์ง ์—†์ด return๋ฌธ๋งŒ ์žˆ๋‹ค๋ฉด {}์™€ return ํ‚ค์›Œ๋“œ ์ƒ๋žต์ด ๊ฐ€๋Šฅํ•˜๋‹ค. const d = (x) => {return x * x;}; const e = (x) => x * x; // ๋งŒ์•ฝ ํ•จ์ˆ˜ ๋™์ž‘๋ถ€๋ถ„ ๋‚ด์— return ๋ง๊ณ  ๋‹ค๋ฅธ ๋กœ์ง์ด ์žˆ๋‹ค๋ฉด { return} ํ˜•ํƒœ๋กœ ์ ์–ด์ค˜์•ผ ํ•จ. const f = (x) => { console.log(x * x); return x..
2023.04.19
Language/JS
thumbnail
๋งค๊ฐœ๋ณ€์ˆ˜ ํŒจํ„ด
0. ๊ธฐ๋ณธํ˜• function sum(a, b) { // ์—ฌ๊ธฐ๋Š” ์ธ์ˆ˜๋ฅผ ๋ฐ›๋Š” ๋งค๊ฐœ์ฒด ๋งค๊ฐœ๋ณ€์ˆ˜ return a + b; } console.log(sum(1, 2)); // ์—ฌ๊ธฐ๊ฐ€ ๋“ค์–ด์˜จ ๊ฐ’ ์ธ์ˆ˜ ์ธ์ˆ˜, ๋งค๊ฐœ๋ณ€์ˆ˜ ๋‘ ์šฉ์–ด๋ฅผ ํ—ท๊ฐˆ๋ ธ์—ˆ๋Š”๋ฐ, ์ธ์ˆ˜๋Š” ํ•จ์ˆ˜๊ฐ€ ํ˜ธ์ถœ๋˜์–ด ์‹ค์ œ ๋“ค์–ด์˜ค๋Š” ๊ฐ’์„ ๋œปํ•˜๊ณ , ๋งค๊ฐœ๋ณ€์ˆ˜๋Š” ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ์— ์ ํžˆ๋Š” ์ธ์ˆ˜๋ฅผ ๋ฐ›๋Š” ๋งค๊ฐœ์ฒด๋ฅผ ๋œปํ•œ๋‹ค. 1. ๊ธฐ๋ณธ๊ฐ’ ์œ„์˜ ํ•จ์ˆ˜์—์„œ ๋งŒ์•ฝ์— ์‚ฌ์šฉ์ž๊ฐ€ sum ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ•˜๊ณ  ์ธ์ˆ˜๋ฅผ ํ•˜๋‚˜๋งŒ ์“ด ๊ฒฝ์šฐ ์–ด๋–ป๊ฒŒ ๋ ๊นŒ? console.log(sum(7)); // 7๊ณผ undefined๋ฅผ ๋” ํ•ด์„œ not a number ๋‘ ๋ฒˆ์งธ ์ธ์ˆ˜๋กœ๋Š” undefined๊ฐ€ ๋“ค์–ด๊ฐ€์„œ 7 + undefined๊ฐ€ ๋˜์–ด NaN์ด ์ถœ๋ ฅ๋  ๊ฒƒ์ด๋‹ค. ์ด๋ฅผ ๋ฐฉ์ง€ํ•˜๊ธฐ ์œ„ํ•ด์„œ ๋งค๊ฐœ๋ณ€์ˆ˜์— ์กฐ์น˜๋ฅผ ์ทจํ•  ์ˆ˜ ์žˆ๋‹ค. '..
2023.04.19
Language/JS
thumbnail
ํ•จ์ˆ˜์˜ ๋ฐ˜ํ™˜๊ณผ ์ข…๋ฃŒ
1. return (1) ๋ฐ˜ํ™˜ํ•˜๋Š” ์—ญํ•  return ์˜†์— ์ ํžŒ ๋‚ด์šฉ์„ ๋ฐ˜ํ™˜ ๊ฐ’์ด๋ผ ํ•œ๋‹ค. ๋ฐ˜ํ™˜ ๊ฐ’์€ ํ•จ์ˆ˜๋ฅผ ํ˜ธ์ถœํ–ˆ์„ ๋•Œ, ํ˜ธ์ถœ๋ฌธ ์ž๋ฆฌ์— ๋Œ€์‹ ํ•ด์„œ ์ ํž ๊ฐ’์ด๋‹ค. function hello() { return "hello~"; } console.log(hello()); // console.log("hello~")์™€ ๊ฐ™์€ ๋ง์ด๋‹ค. ** return ์˜†์— ์•„๋ฌด๊ฒƒ๋„ ์•ˆ ์ ์–ด์คฌ์„ ์‹œ? ** return ๋’ค์— ์•„๋ฌด๊ฒƒ๋„ ์•ˆ ์ ์–ด์ฃผ๋ฉด undefined๊ฐ€ ์ถœ๋ ฅ๋œ๋‹ค. function hello2() { return; } console.log(hello2()); (2) ํ•จ์ˆ˜๋ฅผ ์ข…๋ฃŒํ•˜๋Š” ์—ญํ•  ํ•จ์ˆ˜ ์ฝ”๋“œ๋ฅผ ์œ„์—์„œ ์•„๋ž˜๋กœ ์ง„ํ–‰ํ•˜๋‹ค๊ฐ€ return ๋ฌธ์„ ๋งŒ๋‚˜๋ฉด ๊ทธ ์ž๋ฆฌ์—์„œ ํ•จ์ˆ˜๋ฅผ ์ข…๋ฃŒํ•˜๊ณ  return ๊ฐ’ ๋ฐ˜ํ™˜ ๋’ค, ํƒˆ์ถœํ•œ๋‹ค. ๋”ฐ๋ผ์„œ ..
2023.04.18
Language/JS
thumbnail
ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ๊ณผ ํ•จ์ˆ˜ ํ‘œํ˜„ ์‹์˜ ์ฐจ์ด ๊ทธ๋ฆฌ๊ณ  ํ˜ธ์ด์ŠคํŒ…
1. ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ ํ•จ์ˆ˜ ์„ ์–ธ Keyword๋กœ ์‹œ์ž‘ํ•ด์„œ ํ•จ์ˆ˜๋ฅผ ์„ ์–ธํ•˜๋Š” ๋ฌธ์žฅ. //ํ•จ์ˆ˜ ์„ ์–ธ๋ฌธ function hello () {} function ํ•จ์ˆ˜์ด๋ฆ„ (์ธ์ˆ˜ ๋„ฃ๋Š” ์ž๋ฆฌ) {๋™์ž‘ ๋กœ์ง} ํ˜•ํƒœ๋กœ ์ ํžŒ๋‹ค. 2. ํ•จ์ˆ˜ ํ‘œํ˜„์‹ ๋ณ€์ˆ˜์— ์ต๋ช…ํ•จ์ˆ˜๋‚˜ ๊ธฐ๋ช… ํ•จ์ˆ˜๋ฅผ ๋Œ€์ž…ํ•˜๋Š” ํ˜•ํƒœ์˜ ํ‘œํ˜„์‹์ด๋‹ค. // ํ‘œํ˜„์‹ 1. ๊ธฐ๋ช…ํ•จ์ˆ˜๋ฅผ ๋ณ€์ˆ˜์— ๋Œ€์ž… const world = function hello () {} // ํ‘œํ˜„์‹ 2. ์ต๋ช…ํ•จ์ˆ˜๋ฅผ ๋ณ€์ˆ˜์— ๋Œ€์ž… const world2 = function () {} const world3 = () => {} ํ‘œํ˜„์‹ 1์ธ ๊ธฐ๋ช…ํ•จ์ˆ˜๋ฅผ ๋ณ€์ˆ˜์— ๋Œ€์ž…ํ•  ์‹œ ์›๋ž˜ ํ•จ์ˆ˜์˜ ์ด๋ฆ„์œผ๋กœ ๋” ์ด์ƒ ํ˜ธ์ถœํ•˜์—ฌ ์“ฐ์ง€ ๋ชปํ•œ๋‹ค. ๋ฌด์กฐ๊ฑด ๋Œ€์ž…ํ•œ ๋ณ€์ˆ˜ ์ด๋ฆ„์œผ๋กœ๋งŒ ํ˜ธ์ถœํ•˜์—ฌ ์“ธ ์ˆ˜ ์žˆ๋‹ค. hello(); // error -> ์—ฅ..
2023.04.18
Language/JS
HTML์—์„œ JavaScript ์“ฐ๊ธฐ
1. HTML ๋‚ด๋ถ€์— JavaScript๋ฅผ ์“ฐ๋Š” ๊ฒƒ (CSS ์ธ๋ผ์ธ ํ˜•์‹๊ณผ ์œ ์‚ฌ) html ๋‚ด์—์„œ script๋ž€ ํƒœ๊ทธ๋ฅผ ์“ฐ๋ฉด ๊ทธ ํƒœ๊ทธ ์•ˆ ์ชฝ์— ์ž๋ฐ” ์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋ฅผ ์“ธ ์ˆ˜ ์žˆ๋‹ค. 2. ์™ธ๋ถ€ ํŒŒ์ผ๋กœ๋ถ€ํ„ฐ JavaScript ์ฝ”๋“œ ๊ฐ€์ ธ์˜ค๊ธฐ ์‚ฌ์ด์— ์™ธ๋ถ€ ํŒŒ์ผ์˜ JS ์ฝ”๋“œ ์ „์ฒด๊ฐ€ ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ๊ณผ ๋™์ผํ•˜๋‹ค. ๋งŒ์•ฝ ์ด๋ ‡๊ฒŒ ์“ด๋‹ค๋ฉด? ํ•ด๋‹น ๊ฒฝ์šฐ, ์‚ฌ์ด์— ์“ฐ์ธ ์ฝ”๋“œ ๋‚ด์šฉ์€ ๋ฌด์‹œ๋œ๋‹ค. ์™œ๋ƒํ•˜๋ฉด scr์— ์ ํžŒ ๋‚ด์šฉ์ด ์•ˆ์œผ๋กœ ๋“ค์–ด๊ฐ€๋Š” ๊ฒƒ์ด๊ธฐ ๋•Œ๋ฌธ์ด๋‹ค.
2023.04.17
Language/JS
thumbnail
While, do while
1. while break ํ•  ์ˆ˜ ์žˆ๊ฒŒ ๋งŒ๋“ค์–ด์ฃผ์ง€ ์•Š์œผ๋ฉด ๋ฌดํ•œ ๋ฃจํ”„๊ฐ€ ๋Œ ์ˆ˜ ์žˆ๋‹ค. ๋”ฐ๋ผ์„œ ( ) ์•ˆ์ด๋“  { } ์•ˆ์ด๋“  ์ฆ๊ฐ๊ณผ ์กฐ๊ฑด๋ฌธ์„ ๋‹ฌ์•„์ค˜์•ผ ํ•œ๋‹ค. 2. do while while ์กฐ๊ฑด์— ์ฒ˜์Œ ๋ถ€ํ„ฐ ์•ˆ ๋งž์•„์„œ ๋ช…๋ น ์‹คํ–‰ ๋ถ€๊ฐ€ ์•„์˜ˆ ์‹คํ–‰์ด ์•ˆ๋  ์ˆ˜ ์žˆ๋‹ค. ์ด๊ฒƒ์„ ๋ง‰๊ณ ์ž ์“ฐ๋Š” do while ๋ฌธ์€ ์ฒ˜์Œ ํ•œ๋ฒˆ์€ ๋ฌธ์žฅ์ด ์‹คํ–‰๋˜๋„๋ก ํ•ด์ค€๋‹ค. do {} while ()์€ ๋จผ์ € ๋ช…๋ น์–ด ๋ถ€๋ถ„์„ ํ•œ ๋ฒˆ ์‹คํ–‰ํ•˜๊ณ , ๋ฃจํ”„์— ์ง„์ž…ํ•œ๋‹ค. 0์€ ๋Œ€ํ‘œ์ ์ธ falsey ๊ฐ’์ด๋ผ ์ฐธ์ด ์•ˆ๋œ๋‹ค. ์ด ๋ฌธ์žฅ์„ ๋งจ ์ฒ˜์Œ ํ•œ๋ฒˆ์€ ์‹คํ–‰ํ•˜๊ณ  ์‹ถ๋‹ค๋ฉด, ์ด๋ ‡๊ฒŒ ํ•˜๋ฉด ๋ฌธ์žฅ์„ ํ•œ ๋ฒˆ ์‹คํ–‰ํ•˜๊ณ  ๋ฃจํ”„์— ์ง„์ž…ํ•œ๋‹ค.
2023.04.14
Language/JS