๋ณธ๋ฌธ ๋ฐ”๋กœ๊ฐ€๊ธฐ
JavaScript

[JavaScript] ๋‚ด์žฅ ํ•จ์ˆ˜

by ์ฝ”๋”ฉ๊ณต์ฑ… 2022. 8. 13.
๋ฐ˜์‘ํ˜•

๋‚ด์žฅ ํ•จ์ˆ˜

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์— ๊ธฐ๋ณธ์ ์œผ๋กœ ๋‚ด์žฅ๋˜์–ด ์žˆ๋Š” ํ•จ์ˆ˜๋“ค์„ ๋งํ•œ๋‹ค.


์ธ์ฝ”๋”ฉ, ๋””์ฝ”๋”ฉ ํ•จ์ˆ˜

'https://www.google.com/search?query=์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ'

์œ„์™€ ๊ฐ™์ด URL ์ฃผ์†Œ์— ์ฟผ๋ฆฌ ์ •๋ณด๋ฅผ ์ „์†กํ•ด ๋ฐ์ดํ„ฐ๋ฅผ ์ฒ˜๋ฆฌํ•ด์•ผ ํ•˜๋Š” ํ”„๋กœ๊ทธ๋žจ์˜ ๊ฒฝ์šฐ ํ•œ๊ธ€๊ณผ ๊ฐ™์€ ์œ ๋‹ˆ์ฝ”๋“œ ๋ฌธ์ž๊ฐ€ ํฌํ•จ๋˜์–ด ์žˆ์œผ๋ฉด ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•  ์ˆ˜ ์žˆ๋Š”๋ฐ ์ด๋Ÿฐ ๊ฒฝ์šฐ ์ธ์ฝ”๋”ฉ ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ๋ฌธ์ž๋ฅผ ๋ถ€ํ˜ธํ™”์‹œํ‚ค๊ณ  ๋ถ€ํ˜ธํ™”๋œ ๋ฌธ์ž๋ฅผ ๋‹ค์‹œ ๋””์ฝ”๋”ฉ ํ•จ์ˆ˜๋ฅผ ์ด์šฉํ•ด ์›๋ž˜ ๋ฌธ์ž๋กœ ๋˜๋Œ๋ฆด ์ˆ˜ ์žˆ๋‹ค.

ํ•จ์ˆ˜๋ช… ์„ค๋ช…
encodeURIComponent() ์˜๋ฌธ, ์ˆซ์ž์™€ ( ) - _ . ~ * ! ' ์„ ์ œ์™ธํ•œ ๋ฌธ์ž๋ฅผ ์ธ์ฝ”๋”ฉํ•œ๋‹ค.
decodeURIComponent() encodeURIComponent()์˜ ๋””์ฝ”๋”ฉ ํ•จ์ˆ˜

์˜ˆ์ œ ์ฝ”๋“œ ๋ณด๊ธฐ

var encodeStr = '์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ';
console.log(encodeURIComponent(encodeStr));     // ๋ฌธ์ž ๋ถ€ํ˜ธํ™”๋˜์–ด ์™ธ๊ณ„์–ด(?)์ถœ๋ ฅ
var decodeStr = encodeURIComponent(encodeStr);
console.log(decodeURIComponent(decodeStr));     // ๋ถ€ํ˜ธํ™”๋œ ๊ฒƒ์„ ๋‹ค์‹œ ๋ฌธ์ž๋กœ ๋””์ฝ”๋”ฉํ•ด์„œ '์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ' ์ œ๋Œ€๋กœ ์ถœ๋ ฅ๋จ
๊ฒฐ๊ณผ ๋ณด๊ธฐ
%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8
์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ

์ˆซ์ž, ์œ ยท๋ฌดํ•œ ๊ฐ’ ํŒ๋ณ„ ํ•จ์ˆ˜

ํ•จ์ˆ˜๋ช… ์„ค๋ช…
isNaN() ์ˆซ์ž์ธ์ง€ ์•„๋‹Œ์ง€๋ฅผ ํŒ๋ณ„ํ•˜๋Š” ํ•จ์ˆ˜. ์ˆซ์ž๋ฉด false, ์ˆซ์ž๊ฐ€ ์•„๋‹ˆ๋ฉด true๋ฅผ ๋ฐ˜ํ™˜.
NaN์€ Not a Number์˜ ์•ฝ์ž.
isFinite() ์œ ํ•œ๊ฐ’์ธ์ง€ ๋ฌดํ•œ๊ฐ’์ธ์ง€๋ฅผ ํŒ๋ณ„ํ•˜๋Š” ํ•จ์ˆ˜. ์œ ํ•œ๊ฐ’์ด๋ฉด true, ๋ฌดํ•œ๊ฐ’์ด๋ฉด false๋ฅผ ๋ฐ˜ํ™˜.

์˜ˆ์ œ ์ฝ”๋“œ ๋ณด๊ธฐ

var num1 = '์ˆซ์ž';
if (!isNaN(num1)) {     // isNaN์ด ์•„๋‹Œ !isNaN์ž„์— ์ฃผ๋ชฉ!
    console.log('์ˆซ์ž');
} else {
    console.log('์ˆซ์ž์•„๋‹˜');    // num1์€ ๋ฌธ์ž์—ด์ด๋ฏ€๋กœ true๋ฅผ ๋ฐ˜ํ™˜ํ•ด์•ผ ํ•˜์ง€๋งŒ isNan ์•ž์— ๋Š๋‚Œํ‘œ๊ฐ€ ๋ถ™์–ด์„œ ๋ฐ˜๋Œ€๋กœ false ๋ฐ˜ํ™˜
}

var num2 = 1 / 0;
if (isFinite(num2)) {
    console.log('์œ ํ•œ๊ฐ’');
} else {
    console.log('๋ฌดํ•œ๊ฐ’');
}
๊ฒฐ๊ณผ ๋ณด๊ธฐ
์ˆซ์ž์•„๋‹˜
๋ฌดํ•œ๊ฐ’

์ˆซ์ž, ๋ฌธ์ž ๋ณ€ํ™˜ ํ•จ์ˆ˜

ํ•จ์ˆ˜๋ช… ์„ค๋ช…
Number() ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜
parselnt() ์ˆซ์ž์™€ ๋ฌธ์ž๊ฐ€ ํฌํ•จ๋์„ ๊ฒฝ์šฐ ์ •์ˆ˜ ๋ถ€๋ถ„๋งŒ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜
parseFloat() ์ˆซ์ž์™€ ๋ฌธ์ž๊ฐ€ ํฌํ•จ๋์„ ๊ฒฝ์šฐ ์†Œ์ˆ˜ ๋ถ€๋ถ„๊นŒ์ง€ ์ˆซ์ž๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜
String() ๋ฌธ์ž๋กœ ๋ณ€ํ™˜ํ•ด์ฃผ๋Š” ํ•จ์ˆ˜

์˜ˆ์ œ ์ฝ”๋“œ ๋ณด๊ธฐ

var num3 = '10';
console.log(Number(num3));      // ๋”ฐ์˜ดํ‘œ ์•ˆ์— ์žˆ๋Š” ๋ฌธ์ž์—ด '10'์„ ์ˆซ์ž 10์œผ๋กœ ๋ณ€๊ฒฝ

var num4 = '100px';
console.log(parseInt(num4));    // ์ •์ˆ˜๋ถ€๋ถ„ 100 ์ œ์™ธํ•˜๊ณ  px ๋ฌด์‹œํ•จ

var num5 = '33.3%';
console.log(parseFloat(num5));      // ์†Œ์ˆ˜ ๋ถ€๋ถ„๊นŒ์ง€ ์ˆซ์ž ๋ณ€ํ™˜, ๋ฌธ์ž '%' ๋ฌด์‹œ

var num6 = 10;
console.log(typeof num6);       // typeof๋Š” ๋ณ€์ˆ˜ ์•ˆ ๋ฐ์ดํ„ฐ๊ฐ€ ์–ด๋–ค ํ˜•ํƒœ์ธ์ง€๋ฅผ ํŒ๋ณ„ํ•ด์คŒ, ์ˆซ์ž์ด๋ฏ€๋กœ number์ถœ๋ ฅ
console.log(typeof String(num6));   // String(num6)์œผ๋กœ 10์„ '10'(๋ฌธ์ž์—ด)๋กœ ๋ฐ”๊ฟˆ --> ํƒ€์ž…์ด string์œผ๋กœ ๋ณ€ํ–ˆ์Œ
๊ฒฐ๊ณผ ๋ณด๊ธฐ
10
100
33.3
number
string

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ ๋ณ€๊ฒฝ ํ•จ์ˆ˜

ํ•จ์ˆ˜๋ช… ์„ค๋ช…
eval() ๋ฌธ์ž๋ฅผ ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ ์ฝ”๋“œ๋กœ ๋ณ€๊ฒฝํ•ด์ฃผ๋Š” ํ•จ์ˆ˜

์˜ˆ์ œ ์ฝ”๋“œ ๋ณด๊ธฐ

var str1 = 'var num7 = 10';
var str2 = 'var num8 = 20';

//eval ํ•จ์ˆ˜๋ฅผ ํ†ตํ•ด ๋ฌธ์ž์—ด์—์„œ js์ฝ”๋“œ๋กœ ๋ณ€๊ฒฝ
eval(str1);
eval(str2);
consloe.log(num7 + num8);   //๋ฌด์‚ฌํžˆ ๋‘˜์„ ๋”ํ•ด 30 ์ถœ๋ ฅ
๊ฒฐ๊ณผ ๋ณด๊ธฐ
30
๋ฐ˜์‘ํ˜•

๋Œ“๊ธ€


Reference Book

JavaScript
HTML
CSS
๊ด‘๊ณ  ์ค€๋น„์ค‘์ž…๋‹ˆ๋‹ค.