Frontend ๐Ÿ“š/JavaScript 6

[JS] ๋ฐ์ดํ„ฐ ํƒ€์ž…, ํƒ€์ž… ๋ณ€ํ™˜, ๋‹จ์ถ• ํ‰๊ฐ€ etc.

1. ๋ฐ์ดํ„ฐ ํƒ€์ž… 1) ๋ฐ์ดํ„ฐ ํƒ€์ž… ์ข…๋ฅ˜๊ตฌ๋ถ„๋ฐ์ดํ„ฐ ํƒ€์ž…์„ค๋ช…์›์‹œ ํƒ€์ž…์ˆซ์ž(number) ํƒ€์ž…์ˆซ์ž, ์ •์ˆ˜์™€ ์‹ค์ˆ˜ ๊ตฌ๋ถ„ ์—†์ด ํ•˜๋‚˜์˜ ์ˆซ์ž ํƒ€์ž…๋งŒ ์กด์žฌ์›์‹œ ํƒ€์ž…๋ฌธ์ž์—ด(string) ํƒ€์ž…๋ฌธ์ž์—ด์›์‹œ ํƒ€์ž…๋ถˆ๋ฆฌ์–ธ(boolean) ํƒ€์ž…๋…ผ๋ฆฌ์  ์ฐธ(true)์™€ ๊ฑฐ์ง“(false)์›์‹œ ํƒ€์ž…undefined ํƒ€์ž…var ํ‚ค์›Œ๋“œ๋กœ ์„ ์–ธ๋˜๋Š” ๋ณ€์ˆ˜์— ์•”๋ฌต์ ์œผ๋กœ ํ• ๋‹น๋˜๋Š” ๊ฐ’์›์‹œ ํƒ€์ž…null ํƒ€์ž…๊ฐ’์ด ์—†๋‹ค๋Š” ๊ฒƒ์„ ์˜๋„์ ์œผ๋กœ ๋ช…์‹œํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ฐ’์›์‹œ ํƒ€์ž…์‹ฌ๋ฒŒ(symbol) ํƒ€์ž…ES6์—์„œ ์ถ”๊ฐ€๋œ 7๋ฒˆ์งธ ํƒ€์ž…์›์‹œ ํƒ€์ž…BigInt ํƒ€์ž…๊ธธ์ด์˜ ์ œ์•ฝ ์—†์ด ์ •์ˆ˜๋ฅผ ๋‹ค๋ฃฐ ์ˆ˜ ์žˆ๊ฒŒ ํ•ด์ฃผ๋Š” ์ˆซ์žํ˜•๊ฐ์ฒด ํƒ€์ž… ๊ฐ์ฒด, ํ•จ์ˆ˜, ๋ฐฐ์—ด ๋“ฑ* ์›์‹œ ๊ฐ’(ํƒ€์ž…)2) ์‹ฌ๋ฒŒ ํƒ€์ž…์ด๋ž€ES6์—์„œ ์ถ”๊ฐ€๋œ 7๋ฒˆ์งธ ํƒ€์ž…์œผ๋กœ, ๋ณ€๊ฒฝ ๋ถˆ๊ฐ€๋Šฅํ•œ ์›์‹œ ํƒ€์ž…์˜ ๊ฐ’์‹ฌ๋ฒŒ ๊ฐ’์€ ๋‹ค๋ฅธ ๊ฐ’๊ณผ ์ค‘๋ณต๋˜์ง€..

[JS] ์‹๋ณ„์ž, ํ˜ธ์ด์ŠคํŒ…, ํ‚ค์›Œ๋“œ(var, let, const) etc.

1. ๋ณ€์ˆ˜๋ž€ํ•˜๋‚˜์˜ ๊ฐ’์„ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•ด ํ™•๋ณดํ•œ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„ ์ž์ฒด ๋˜๋Š” ๊ทธ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ์‹๋ณ„ํ•˜๊ธฐ ์œ„ํ•ด ๋ถ™์ธ ์ด๋ฆ„1) ๋ณ€์ˆ˜ ์„ ์–ธvar score;๋ณ€์ˆ˜ ์„ ์–ธ์ด๋ž€ ๋ณ€์ˆ˜๋ฅผ ์ƒ์ƒํ•˜๋Š” ๊ฒƒ๊ฐ’์„ ์ €์žฅํ•˜๊ธฐ ์œ„ํ•œ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์„ ํ™•๋ณดํ•˜๊ณ  ๋ณ€์ˆ˜ ์ด๋ฆ„๊ณผ ํ™•๋ณด๋œ ๋ฉ”๋ชจ๋ฆฌ ๊ณต๊ฐ„์˜ ์ฃผ์†Œ๋ฅผ ์—ฐ๊ฒฐํ•ด์„œ ๊ฐ’์„ ์ €์žฅํ•  ์ˆ˜ ์žˆ๊ฒŒ ์ค€๋น„ํ•˜๋Š” ๊ฒƒ๋ณ€์ˆ˜๋ฅผ ์‚ฌ์šฉํ•˜๋ ค๋ฉด ๋ฐ˜๋“œ์‹œ ์„ ์–ธ์ด ํ•„์š”ํ•˜๊ณ , ๋ณ€์ˆ˜๋ฅผ ์„ ์–ธํ•  ๋•Œ๋Š” var, let, const ํ‚ค์›Œ๋“œ๋ฅผ ์‚ฌ์šฉํ•จ 2. ์‹๋ณ„์ž๋ž€ โญ๏ธ์‹๋ณ„์ž(identifier)๋ณ€์ˆ˜์˜ ์ด๋ฆ„, ์–ด๋–ค ๊ฐ’์„ ๊ตฌ๋ณ„ํ•ด์„œ ์‹๋ณ„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ณ ์œ ํ•œ ์ด๋ฆ„, ๊ฐ’์ด ์•„๋‹ˆ๋ผ ๋ฉ”๋ชจ๋ฆฌ ์ฃผ์†Œ๋ฅผ ๊ธฐ์–ตํ•จ์‹๋ณ„์ž๋ผ๋Š” ์šฉ์–ด๋Š” ๋ณ€์ˆ˜ ์ด๋ฆ„์—๋งŒ ๊ตญํ•œํ•ด์„œ ์‚ฌ์šฉํ•˜์ง€ ์•Š์Œ. (์˜ˆ๋ฅผ ๋“ค์–ด, ๋ณ€์ˆ˜, ํ•จ์ˆ˜, ํด๋ž˜์Šค ๋“ฑ์˜ ์ด๋ฆ„์€ ๋ชจ๋‘ ์‹๋ณ„์ž์ž„)์‹๋ณ„์ž์ธ ๋ณ€์ˆ˜ ์ด๋ฆ„์œผ๋กœ๋Š” ๋ฉ”๋ชจ๋ฆฌ ์ƒ์— ์กด์žฌํ•˜๋Š”..

[JS] ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋ž€

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

[JS] for...of ๋ช…๋ น๋ฌธ

์˜ค๋Š˜์€ ์ž๋ฐ”์ŠคํŠธ๋ฆฝํŠธ์˜ ๋ฐ˜๋ณต๋ฌธ ์ค‘ ํ•˜๋‚˜์ธ for...of ๋ช…๋ น๋ฌธ์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•ด๋ณด์ž.for...of ๋ช…๋ น๋ฌธ์€ ๋ฐ˜๋ณต๊ฐ€๋Šฅํ•œ ๊ฐ์ฒด(์˜ˆ๋ฅผ ๋“ค์–ด Array, TypedArray, Set, Map...)์— ๋Œ€ํ•ด์„œ ๋ฐ˜๋ณตํ•˜๊ณ  ๊ฐ ๊ฐœ๋ณ„ ์†์„ฑ๊ฐ’์— ๋Œ€ํ•ด ์‹คํ–‰๋˜๋Š” ๋ฌธ์ด ์žˆ๋Š” ์‚ฌ์šฉ์ž ์ •์˜ ๋ฐ˜๋ณต ํ›„ํฌ๋ฅผ ํ˜ธ์ถœํ•˜๋Š” ๋ฃจํ”„๋ฅผ ์ƒ์„ฑํ•œ๋‹ค.๊ตฌ๋ฌธfor (variable of iterable) { statement;}variable๊ฐ ๋ฐ˜๋ณต์— ์„œ๋กœ ๋‹ค๋ฅธ ์†์„ฑ๊ฐ’์ด variable์— ํ• ๋‹น๋œ๋‹ค.iterable๋ฐ˜๋ณต๋˜๋Š” ์—ด๊ฑฐ๊ฐ€๋Šฅ(enumerable)ํ•œ ์†์„ฑ์ด ์žˆ๋Š” ๊ฐ์ฒด. ์˜ˆ์ œlet iterable = [10, 20, 30];for (let value of iterable) { // let ๋Œ€์‹  const ์‚ฌ์šฉ๋„ ๊ฐ€๋Šฅ console.log(value);}..

[JS] parseInt() ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

์˜ค๋Š˜์€ ์ž๋ฐ”์Šคํฌ๋ฆฝ์˜ parseInt() ํ•จ์ˆ˜์— ๋Œ€ํ•ด ๊ณต๋ถ€ํ•ด๋ณด์ž.parseInt() ํ•จ์ˆ˜๋Š” ๋ฌธ์ž์—ด ์ธ์ž๋ฅผ ํŒŒ์‹ฑํ•˜์—ฌ ํŠน์ • ์ง„์ˆ˜์˜ ์ •์ˆ˜๋ฅผ ๋ฐ˜ํ™˜ํ•œ๋‹ค. (ํŒŒ์‹ฑ์ด๋ž€ ๋ฐ์ดํ„ฐ๋ฅผ ๋ถ„ํ•ด ๋ถ„์„ํ•ด์„œ ์›ํ•˜๋Š” ํ˜•ํƒœ๋กœ ์กฐ๋ฆฝํ•˜๊ณ  ๋‹ค์‹œ ๋นผ๋‚ด๋Š” ํ”„๋กœ๊ทธ๋žจ)๊ตฌ๋ฌธparseInt(string);parseInt(string, radix); ๋งค๊ฐœ๋ณ€์ˆ˜stringํŒŒ์‹ฑํ•  ๊ฐ’์ด๋‹ค. ๋ฌธ์ž์—ด์ด ์•„๋‹Œ ๊ฒฝ์šฐ toString ์ถ”์ƒ ์—ฐ์‚ฐ์„ ์‚ฌ์šฉํ•ด ๋ฌธ์ž์—ด๋กœ ๋ณ€ํ™˜ํ•  ๊ฒƒ์ด๋‹ค. ๋ฌธ์ž์—ด์˜ ์„ ํ–‰ ๊ณต๋ฐฑ์€ ๋ฌด์‹œํ•œ๋‹ค.radixstring์˜ ์ง„์ˆ˜๋ฅผ ๋‚˜ํƒ€๋‚ด๋Š” 2๋ถ€ํ„ฐ 36๊นŒ์ง€์˜ ์ •์ˆ˜์ด๋‹ค. ์ฃผ์˜! ๊ธฐ๋ณธ ๊ฐ’์ด 10์ด ์•„๋‹ˆ๋‹ค! Number ์ž๋ฃŒํ˜•์ด ์•„๋‹Œ ๊ฒฝ์šฐ Number๋กœ ๋ณ€ํ™˜ํ•œ๋‹ค. ๋ฐ˜ํ™˜ ๊ฐ’์ฃผ์–ด์ง„ string์—์„œ ํŒŒ์‹ฑํ•œ ์ •์ˆ˜์ด๋‹ค. ์•„๋ž˜์™€ ๊ฐ™์€ ๊ฒฝ์šฐ์—๋Š” NaN์„ ๋ฐ˜ํ™˜ํ•œ๋‹ค.radix๊ฐ€ 2๋ณด๋‹ค ..