๐ ๊ณ์ฐ๊ธฐ
๐ค ์์๋ ๊ทธ๋ฆฌ๊ธฐ
์ด๋ฐ ์์ผ๋ก ์์ฑํ์ง๋ง ํ๋ ธ๋ค.
๊ณ์ฐ๊ธฐ๋ ์ฌ์ฉ์๊ฐ ์ซ์๋ ์ฐ์ฐ์ ( ๋ํ๊ธฐ, ๋นผ๊ธฐ, ๋๋๊ธฐ, ๊ณฑํ๊ธฐ ๋ฑ ) ๋ฒํผ์ ํด๋ฆญํด ์ฌ๋ฌ ๊ณ์ฐ์ ํ๋ ์ฅ์น์ด๋ค.
๋ฐ๋ผ์ ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ง์ด ๋ฐ์ํ๋ค.
๋ํ, ์ฌ์ฉ์๊ฐ ์ ๋ ฅํ ์ซ์๋ ์ฐ์ฐ์๋ฅผ ์ ์ฅํ๊ณ ์์ด์ผ = ์ฐ์ฐ์๋ฅผ ์ฌ์ฉํ ์ ์๋ค.
๋ฐ๋ผ์ ํ๋ก๊ทธ๋จ์ด ์์๋ ๋ ์ซ์ 2๊ฐ์ ์ฐ์ฐ์๋ฅผ ์ ์ฅํ ๋ณ์๋ฅผ ๋ง๋ จํด์ผ ํ๋ค.
| ์ซ์ 1 | numOne |
| ์ฐ์ฐ์ | operator |
| ์ซ์ 2 | numTwo |
1์ numOne ๋ณ์์ ์ ์ฅํ ํ + ๋ฒํผ์ ๋๋ฅด๋ฉด + ๊ฐ operator ๋ณ์์ ์ ์ฅ๋๋ค.
๊ทธ๋ฆฌ๊ณ 2 ๋ฅผ ๋๋ฅด๋ฉด operator ๋ณ์์ ๊ฐ์ด ์ ์ฅ๋์ด ์์ผ๋ฏ๋ก numTwo ๋ณ์์ 2 ๊ฐ ์ ์ฅ๋๋ค.
๋ง์ง๋ง์ผ๋ก
= ๋ฒํผ์ ๋๋ฅด๋ฉด numOne ์ ์ ์ฅ๋์ด ์๋ 1 ๊ณผ numTwo ์ ์ ์ฅ๋์ด ์๋ 2 ๋ฅผ operator ์ ์ ์ฅ๋์ด ์๋ + ๋ก ๊ณ์ฐํ๋ค.
๋ง์ฝ์?
10 - 5 ์ผ ๋
๋จผ์ 1์ ๋๋ฅด๋ฉด numOne ๋ณ์์ ์ ์ฅ๋๋ค. ๊ทธ ๋ค์ 0์ ๋๋ฅด๋ฉด ์์ง operator ๋ณ์์ ๊ฐ์ด ์ ์ฅ์ด ์๋์ด์์ผ๋ฏ๋ก
0๋ numOne ๋ณ์์ ์ ์ฅํด์ผ ํ๋ค.
์ด๋ป๊ฒ ์ ์ฅํ ๊น?
1. ๋ฐฐ์ด์์ ์ ๊ณตํ๋ join ๋ฉ์๋ ํ์ฉ.
//1.๋ฌธ์์ด ํฉ์น๊ธฐ [1, 0].join('') == '10' //2.์ซ์๋ก ๋ฐ๊พธ๊ธฐ Number([1, 0].join('')) == 10 //์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ2. ๋ฌธ์์ด ์ฌ์ฉํ๊ธฐ
๋ฌธ์์ด์ ์๋ก ๋ํ๋ฉด ์ด์ด์ง๋ ์ฑ์ง์ด ์๋ค.
numOne ๊ณผ numTwo ์ ์ซ์๊ฐ ์๋๋ผ ๋ฌธ์์ด์ ์ ์ํ๋ค๋ฉด ๋ฌธ์์ด๋ก ํฉ์น๊ณ ,
= ๋ฒํผ์ ๋๋ฌ ๊ณ์ฐํ ๋ ์ซ์๋ก ๋ฐ๊ฟ์ ๊ณ์ฐํ๋ฉด ๋๋ค.
๋ง์ฝ์?
์ซ์๋ฅผ ๋๋ฅด์ง ์๊ณ ์ฐ์ฐ์ ๋ฒํผ or = ๋ฒํผ์ ๋จผ์ ๋๋ฅธ ๊ฒฝ์ฐ
์ด๋ด ๋๋ ๊ฒฝ๊ณ ๋ฉ์์ง ( alert ํจ์ ) ์ฐฝ์ ๋์ฐ์.
์ฐ์ฐ์ ๋ฒํผ์ ๋๋ฅผ ๋ numOne ์ ๊ฐ์ด ์๋์ง ํ์ธ. = ๋ฒํผ์ ๋๋ฅผ ๋ numTwo ์ ๊ฐ์ด ์๋์ง ํ์ธ. ๋ณ์์ ๊ด๊ณ
๐ค ๊ณ์ฐ๊ธฐ ํ๋ฉด ๋ง๋ค๊ณ ์ด๋ฒคํธ ๋ฌ๊ธฐ
ํ๋ฉด์ ๋ง๋ค์.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>๊ณ์ฐ๊ธฐ</title>
<style>
* {
box-sizing: border-box;
}
#result {
width: 180px;
height: 50px;
margin: 5px;
text-align: right;
}
#operator {
width: 50px;
height: 50px;
margin: 5px;
text-align: center;
}
button {
width: 50px;
height: 50px;
margin: 5px;
}
</style>
</head>
<body>
<input readonly id="operator">
<input readonly type="number" id="result">
<div class="row">
<button id="num-7">7</button>
<button id="num-8">8</button>
<button id="num-9">9</button>
<button id="plus">+</button>
</div>
<div class="row">
<button id="num-4">4</button>
<button id="num-5">5</button>
<button id="num-6">6</button>
<button id="minus">-</button>
</div>
<div class="row">
<button id="num-1">1</button>
<button id="num-2">2</button>
<button id="num-3">3</button>
<button id="divide">/</button>
</div>
<div class="row">
<button id="clear">c</button>
<button id="num-0">0</button>
<button id="calculate">=</button>
<button id="multiply">x</button>
</div>
</body>
</html>
์ด๋ฒคํธ ๋ฆฌ์ค๋ ๋ฌ๊ธฐ
<script>
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
document.querySelector('#num-0').addEventListener('click',() => {});
document.querySelector('#num-1').addEventListener('click',() => {});
document.querySelector('#num-2').addEventListener('click',() => {});
document.querySelector('#num-3').addEventListener('click',() => {});
document.querySelector('#num-4').addEventListener('click',() => {});
document.querySelector('#num-5').addEventListener('click',() => {});
document.querySelector('#num-6').addEventListener('click',() => {});
document.querySelector('#num-7').addEventListener('click',() => {});
document.querySelector('#num-8').addEventListener('click',() => {});
document.querySelector('#num-9').addEventListener('click',() => {});
document.querySelector('#plus').addEventListener('click',() => {});
document.querySelector('#minus').addEventListener('click',() => {});
document.querySelector('#divide').addEventListener('click',() => {});
document.querySelector('#multiply').addEventListener('click',() => {});
document.querySelector('#calculate').addEventListener('click',() => {});
document.querySelector('#clear').addEventListener('click',() => {});
</script>ํจ์๋ฅผ ๋ง๋ค ๋๋ ๋ณดํต function ์์ฝ์ด๋ฅผ ์ฌ์ฉํ๊ฑฐ๋ => ( ํ์ดํ ) ๊ธฐํธ๋ฅผ ์ฌ์ฉํ๋ค.
ํ์ดํ ๊ธฐํธ๋ฅผ ์ฌ์ฉํ ํจ์๋ฅผ ํ์ดํ ํจ์ ( arrow function ) ๋ผ๊ณ ํ๋ค.
function () {}
// ๋๋ () => {}
//์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
numOne ๊ณผ numTwo๋ฅผ ์ซ์๊ฐ ์๋ ๋ฌธ์์ด๋ก ์ ์ฅํ ์ด์ ?
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
document.querySelector('#num-0').addEventListener('click',() => {
if (operator){
numTwo += '0';
} else {
numOne += '0';
}
$result.value += '0';
});๋ง์ฝ 34 + 26 ์ ๊ณ์ฐํ๊ณ ์ถ๋ค๋ฉด 3,4,+,2,6 ๋ฒํผ์ ์์๋๋ก ๋๋ฌ์ผ ํ๋ค.
์ซ์๋ผ๋ฉด 3๊ณผ 4๊ฐ ๋ํด์ ธ 7์ด ๋ ๊ฒ์ด๋ค.
๋ฌธ์์ด๋ก ํ๋ค๋ฉด '3' + '4' = '34' ๊ฐ ๋๋ค. ์ผ๋จ ๋ฌธ์์ด๋ก ๋ง๋ค์ด ๊ณ์ฐํ ๋ ์ซ์๋ก ๋ฐ๊พผ๋ค.
$result.value ๋ถ๋ถ์ ๋ณ์์ ์ ์ฅํ ๊ฐ์ ํ๋ฉด์ ํ์ํ๊ธฐ ์ํ ์ฝ๋์ด๋ค.
์ด์ ์ค๋ณต๋๋ ์ฝ๋๋ค์ ์ค์ฌ๋ณด์.
๐ค ํจ์ ์ค๋ณต ์ ๊ฑฐํ๊ธฐ ( ๊ณ ์ฐจํจ์ )
์ค๋ณต์ ์ ๊ฑฐํ๊ณ ์ถ์ผ๋ฉด ํจ์์ ํน์ฑ์ ์ด์ฉํ๋ค.
ํจ์๋ ํธ์ถํ๋ฉด ์ด๋ค ๊ฐ์ ๋ฐํํ๋ค. ์ด ๊ฐ์ ์๋ฐ์คํฌ๋ฆฝํธ์ ๋ชจ๋ ์๋ฃํ์ด ๋ ์ ์๋ค.
์ฆ, ํจ์๊ฐ ํจ์๋ฅผ ๋ฐํํ ์๋ ์๋ค.
//1๋ฒ์งธ ๋ฐฉ๋ฒ
const func = () => {
return () => {
console.log('hello');
};
};
const innerFunc = func();
innerFunc(); // hello
//2๋ฒ์งธ ๋ฐฉ๋ฒ
const innerFunc = () => {
console.log('hello');
};
innerFunc(); // hello
//์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐfunc ํจ์๋ฅผ ํธ์ถํ๋ฉด ํจ์๋ฅผ ๋ฐํํ๋ค
๋ฐํ๋ ํจ์๋ ๋ค๋ฅธ ๋ณ์์ ์ ์ฅํ๊ฑฐ๋ ๋ณ์์ ์ ์ฅ๋ ํจ์๋ฅผ ๋ค์ ํธ์ถํ ์ ์๋ค.
ํจ์๊ฐ ํธ์ถ๋ ์ฝ๋ ( ํจ์ ์ด๋ฆ ๋ค์ () ๊ฐ ๋ถ์ ์ฝ๋ ) ๊ฐ ์๋ค๋ฉด ๊ทธ ๋ถ๋ถ์ ์ค์ return ๊ฐ์ผ๋ก ์นํํ๋ฉด ์ดํด๊ฐ ์ฝ๋ค.
hello๋ผ๋ ๋ฌธ์์ด์ ๋ค๋ฅธ ๊ฐ์ผ๋ก ๋ฐ๊พธ๋ ค๋ฉด ์ด๋ป๊ฒ ํด์ผํ ๊น?
๋ฐํํ๋ ๊ฐ์ ๋ฐ๊พธ๊ณ ์ถ์ ๋๋ ๋งค๊ฐ๋ณ์๋ฅผ ์ฌ์ฉํ๋ค. ์ฆ, ๋ฐ๊พธ๊ณ ์ถ์ ์๋ฆฌ๋ฅผ ๋งค๊ฐ๋ณ์๋ก ๋ง๋ ๋ค.
const func = (msg) => {
return () => {
console.log(msg);
};
};
const innerFunc1 = func('hello');
const innerFunc2 = func('javascript');
const innerFunc3 = func();
innerFunc1(); // hello
innerFunc2(); // javascript
innerFunc3(); // undefined
//์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐfunc ์ฒ๋ผ ํจ์๋ฅผ ๋ง๋๋ ํจ์๋ฅผ ๊ณ ์ฐจ ํจ์ ( high order function ) ์ด๋ผ๊ณ ํ๋ค.
๋ง์ฝ ํจ์์ ๋ณธ๋ฌธ์์ ๋ฐ๋ก ๋ฐํ๋๋ ๊ฐ์ด ์์ผ๋ฉด { ์ return ์ ์๋ตํ ์ ์๋ค.
//์ด๊ฒ์
const func = (msg) => {
return () => {
console.log(msg);
};
};
//์ด๋ ๊ฒ ๋ฐ๊ฟ ์ ์๋ค.
//๊ต์ฐจ ํจ์์์์ {์ return ์๋ต
const func = (msg) => () => {
console.log(msg);
};
//์ฝ๋ ์ถ์ฒ (๋์)Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ๊ณ ์ฐจ ํจ์๋ฅผ ์ฌ์ฉํด 0๋ถํฐ 9๊น์ง ์ ์ฅํ๋ ๋ถ๋ถ์ ๋งค๊ฐ๋ณ์๋ก ๋ง๋ค๊ณ ๋ค๋ฅธ ๋ถ๋ถ์ ํจ์๋ก ๋ง๋ค ์ ์๋ค.
<script>
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
//return ์๋ตํ ๊ณ ์ฐจํจ์ ๋ฐฉ๋ฒ
const onClickNumber = (number) => () => {
if (operator){
numTwo += number;
} else {
numOne += number;
}
$result.value += number;
};
//return์ด ์๋ ์๋ตํ ๊ณ ์ฐจํจ์ ๋ฐฉ๋ฒ
const onClickNumber2 = (number) => {
return () => {
if (operator) {
numTwo += number;
} else {
numOne += number;
}
$result.value += number;
}
};
document.querySelector('#num-0').addEventListener('click',onClickNumber('0'));
document.querySelector('#num-1').addEventListener('click',onClickNumber('1'));
document.querySelector('#num-2').addEventListener('click',onClickNumber('2'));
document.querySelector('#num-3').addEventListener('click',onClickNumber('3'));
document.querySelector('#num-4').addEventListener('click',onClickNumber('4'));
document.querySelector('#num-5').addEventListener('click',onClickNumber('5'));
document.querySelector('#num-6').addEventListener('click',onClickNumber('6'));
document.querySelector('#num-7').addEventListener('click',onClickNumber('7'));
document.querySelector('#num-8').addEventListener('click',onClickNumber('8'));
document.querySelector('#num-9').addEventListener('click',onClickNumber('9'));
document.querySelector('#plus').addEventListener('click',() => {});
document.querySelector('#minus').addEventListener('click',() => {});
document.querySelector('#divide').addEventListener('click',() => {});
document.querySelector('#multiply').addEventListener('click',() => {});
document.querySelector('#calculate').addEventListener('click',() => {});
document.querySelector('#clear').addEventListener('click',() => {});
</script>Note!
๊ณ ์ฐจ ํจ์๋ฅผ ์ฌ์ฉํ์ง ์๊ณ ๋ ์ค๋ณต์ ์ ๊ฑฐํ ์ ์๋ค.
์์ ์ฝ๋์์ ๊ณ ์ฐจ ํจ์๋ฅผ ์ฌ์ฉํ ์ด์ ๋
onClickNumber ํจ์ ๋ด๋ถ์ ๋ค๋ฅธ ์ฝ๋๋ ๊ฐ์๋ฐ 0 ~ 9 ๋ผ๋ ์ซ์๋ง ๋ค๋ฅด๊ธฐ ๋๋ฌธ์ด๋ค.
์ซ์๋ฅผ ๊ฐ๊ฒ ๋ง๋ค ์ ์๋ค๋ฉด ๋ชจ๋ ์ฝ๋๊ฐ ๋๊ฐ์์ง๋ฏ๋ก ์ฝ๊ฒ ์ค๋ณต์ ์ ๊ฑฐํ ์ ์๋ค.
์ด๋ป๊ฒ ์ซ์ ๋ถ๋ถ์ ๊ฐ๊ฒ ๋ง๋ค๊น? ์ซ์๋ค์ ๊ณตํต์ ์ ์ฐพ์์ผ ํ๋ค.
์ซ์๋ ๋ชจ๋ ๋ฒํผ ์์ ๋ค์ด ์๋ ๋ฌธ์์ด๋ค.
๋ฒํผ์ ํด๋ฆญํ ๋ ๋ฒํผ ๋ด๋ถ์ ๋ฌธ์๋ฅผ event.target.textContent ๋ก ๊ฐ์ ธ์ฌ ์ ์๋ค.
๋ฐ๋ผ์ onClickNumber ํจ์์ ์ฝ๋๋ฅผ ๊ฐ๊ฒ ๋ง๋ค ์ ์๋ค.
//return ์๋ตํ ๊ณ ์ฐจํจ์ ๋ฐฉ๋ฒ const onClickNumber = (event) => { if (operator){ numTwo += event.target.textContent; } else { numOne += event.target.textContent; } $result.value += event.target.textContent; }; document.querySelector('#num-0').addEventListener('click',onClickNumber); document.querySelector('#num-1').addEventListener('click',onClickNumber); document.querySelector('#num-2').addEventListener('click',onClickNumber); document.querySelector('#num-3').addEventListener('click',onClickNumber); document.querySelector('#num-4').addEventListener('click',onClickNumber); document.querySelector('#num-5').addEventListener('click',onClickNumber); document.querySelector('#num-6').addEventListener('click',onClickNumber); document.querySelector('#num-7').addEventListener('click',onClickNumber); document.querySelector('#num-8').addEventListener('click',onClickNumber); document.querySelector('#num-9').addEventListener('click',onClickNumber);์ ์ด๋ ค์ด ๊ณ ์ฐจ ํจ์๋ฅผ ์ฐ๋๊ฑธ๊น?
'๋ชจ๋ ๋ด๋ถ ์ฝ๋๊ฐ ๊ฐ์' ํจ์๋ณด๋ค '๋ค ๋น์ทํ๋ฐ ํน์ ๋ถ๋ถ๋ง ๋ค๋ฅธ' ํจ์๊ฐ ์ค๋ฌด์์ ๋ ๋ง์ด ๋์ค๊ธฐ ๋๋ฌธ์ด๋ค.
์ด๋ด ๋ ๊ณ ์ฐจ ํจ์๋ฅผ ์ฌ์ฉํด ํจ์์ ์ค๋ณต์ ์ ๊ฑฐํด์ผ ํ๋ค.
์ฐ์ฐ์ ๋ฒํผ์ ๋๋ฅผ ๋๋ ๊ณ ์ฐจ ํจ์๋ฅผ ์ฌ์ฉํด ์ฐ์ฐ์๋ฅผ ์ ์ฅํ ์ ์๋ค.
<script>
let numOne = '';
let operator = '';
let numTwo = '';
const $operator = document.querySelector('#operator');
const $result = document.querySelector('#result');
//return ์๋ตํ ๊ณ ์ฐจํจ์ ๋ฐฉ๋ฒ
const onClickNumber = (number) => (event) => {
if (operator){
numTwo += number;
} else {
numOne += number;
}
$result.value += number;
};
const onClickOperator = (op) => () => {
if (numOne){
//์ฐ์ฐ์๋ฅผ operator ๋ณ์์ ์ ์ฅํ๋ฉด์
//ํ๋ฉด( $operator )์๋ ํ์ํ๋ค.
operator = op;
$operator.value = op;
} else {
alert('์ซ์๋ฅผ ๋จผ์ ์
๋ ฅํ์ธ์.');
}
};
document.querySelector('#num-0').addEventListener('click',onClickNumber);
document.querySelector('#num-1').addEventListener('click',onClickNumber);
document.querySelector('#num-2').addEventListener('click',onClickNumber);
document.querySelector('#num-3').addEventListener('click',onClickNumber);
document.querySelector('#num-4').addEventListener('click',onClickNumber);
document.querySelector('#num-5').addEventListener('click',onClickNumber);
document.querySelector('#num-6').addEventListener('click',onClickNumber);
document.querySelector('#num-7').addEventListener('click',onClickNumber);
document.querySelector('#num-8').addEventListener('click',onClickNumber);
document.querySelector('#num-9').addEventListener('click',onClickNumber);
document.querySelector('#plus').addEventListener('click',onClickOperator('+'));
document.querySelector('#minus').addEventListener('click',onClickOperator('-'));
document.querySelector('#divide').addEventListener('click',onClickOperator('/'));
document.querySelector('#multiply').addEventListener('click',onClickOperator('*'));
document.querySelector('#calculate').addEventListener('click',() => {});
document.querySelector('#clear').addEventListener('click',() => {});
</script>-(๋์) Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
Let's Get IT ์๋ฐ์คํฌ๋ฆฝํธ ํ๋ก๊ทธ๋๋ฐ
๋๋ถ(TheBook): (์ฃผ)๋์์ถํ ๊ธธ๋ฒ์์ ์ ๊ณตํ๋ IT ๋์ ์ด๋ ์๋น์ค์ ๋๋ค.
thebook.io
-(๊ฐ์ข) ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ
[๋ฌด๋ฃ] [๋ฆฌ๋ด์ผ] ๋ ์ธ ๊ธฐ๋ฆฟ ์๋ฐ์คํฌ๋ฆฝํธ - ์ธํ๋ฐ | ๊ฐ์
๋ณธ ๊ฐ์์์๋ ์๋ฐ์คํฌ๋ฆฝํธ๋ฅผ ํ์ฉํด ํ๋ก๊ทธ๋๋ฐ ์ฌ๊ณ ๋ ฅ์ ๊ธฐ๋ฅด๋ ์ฐ์ต์ ํฉ๋๋ค. ์น ๊ฒ์์ธ ๊ตฌ๊ตฌ๋จ์ ์์์ผ๋ก ๋๋ง์๊ธฐ, ์ซ์ ์ผ๊ตฌ, ๋ฐ์ ์๋ ํ ์คํธ, ํฑํํ , ๋ก๋ ์ถ์ฒจ๊ธฐ, ๊ฐ์๋ฐ์๋ณด, ์นด
www.inflearn.com
