๐ปํ์ดํ ํจ์, Arrow Function
์๋ฐ์ ๋๋ค์ ๋น์ทํ ๊ฐ๋ ์ด๋ค.
์๋ฐ์ ๋๋ค๋ ์ต๋ช ๊ฐ์ฒด์ ์ถ์ ๋ฉ์๋๋ฅผ ํํํ๋ ๊ธฐ์ ์ด์์ง๋ง, ์๋ฐ์คํฌ๋ฆฝํธ์ ํ์ดํ ํจ์๋ ์ต๋ช ํจ์๋ฅผ ํํํ๋ ๊ธฐ์ ์ด๋ค.
๊ธฐ๋ณธ ๊ตฌ๋ฌธ
const add = (a, b) => a + b;
ํจ์ ์ ์ธ ๋ฐฉ๋ฒ
1. ํจ์ ์ ์ธ๋ฌธ
function f1() {
console.log('f1');
}
f1();
2. ํจ์ ํํ์ (๋ฆฌํฐ๋ด) == ์ต๋ช ํจ์
const f2 = function () {
console.log('f2');
}
f2();์ต๋ช ์ด๋ฏ๋ก ๊ทธ๋ฅ ํธ์ถํ ์๊ฐ ์์ด ๋ณ์์ ์ ์ฅํ์ฌ ํธ์ถํ๋ค.
๋ณ์์ ์ ์ฅํ์ง์๊ณ ํธ์ถํ๋ ๋ฐฉ๋ฒ์ธ ์ฆ์ํธ์ถ์ด ์๋ค.
์ฆ์ํธ์ถ
์ ์ฒด๋ฅผ ๋ฌถ๊ณ ํธ์ถํ๋ค.
(function() {
console.log('f2_1');
})();
3. ํ์ดํ ํจ์ == ์ต๋ช ํจ์
const f3 = () => {
console.log('f3');
};
f3();
ํ์ดํ ํจ์์ ํน์ง
1. ์คํ๋ฌธ์ด 1์ค์ผ ๋, ์คํ ๋ธ๋ญ์ ์๋ตํ ์ ์๋ค.
const f4 = () => console.log('f4');
f4();
2. ๋งค๊ฐ๋ณ์๊ฐ 1๊ฐ์ผ ๋, ์๊ดํธ๋ฅผ ์๋ตํ ์ ์๋ค.
const f5 = (num) => console.log(num);
const f6 = num => console.log(num);
3. ๋ฐํ๊ฐ์ด 1๊ฐ์ผ ๋, ์ค๊ดํธ์ return์ ์๋ตํ ์ ์๋ค.
const f8 = () => {return 100;};
const f9 = () => 100;
4. this์ ๋ฐ์ธ๋ฉ
ํ์ดํ ํจ์๋ ์์ ๋ง์ this๋ฅผ ๊ฐ์ง์ง ์๋๋ค. ์ด๋ค ์์ผ๋ก ํธ์ถ๋๋ ๊ทธ ์์์์ this๋ ํญ์ window๊ฐ์ฒด๋ฅผ ์๋ฏธํ๋ค.
๋ฐ๋ผ, ํ์ดํ ํจ์ ๋ด์์ this๋ ์ ์ฌ์ฉํ์ง ์๋๋ค.
๋น๊ต(๋ฆฌํฐ๋ด ํ๊ธฐ๋ฒ vs ํ์ดํ ํจ์)
์ด๋ฒคํธ ๋ฐ์ ๊ฐ์ฒด์ ์ ๋ณด ํ์ธํ๋ ๊ฒ์ ๋น๊ตํ๋ค.
๋ฆฌํฐ๋ด ํ๊ธฐ๋ฒ
<body>
<input type="button" value="๋ฒํผ1" id="btn1">
<input type="button" value="๋ฒํผ2" id="btn2">
<script>
document.getElementById('btn1').onclick = function() {
// alert(event.target.value); //๋ฒํผ1
alert(this.value); //๋ฒํผ 1
}
</script>
</body>event.target.value์ this.value๋ ๊ฐ์ ๊ฐ์ ๋ฐํํ๋ค.
ํ์ดํ ํจ์
<body>
<input type="button" value="๋ฒํผ1" id="btn1">
<input type="button" value="๋ฒํผ2" id="btn2">
<script>
document.getElementById('btn2').onclick = () => {
// alert(event.target.value); //๋ฒํผ2
//์๋ ์ฝ๋์ this๋ window๊ฐ์ฒด์ด๋ค
alert(this.value); // undefined
//ํ์ดํ ํจ์๋ ์ด๋ค ์์ผ๋ก ํธ์ถ๋๋ ๊ทธ ์์์์ this๋ ํญ์ window๊ฐ์ฒด๋ฅผ ์๋ฏธํ๋ค.
//ํ์ดํ ํจ์ ๋ด์์ this๋ ์ ์ฌ์ฉํ์ง ์๋๋ค.
}
</script>
</body>event.target.value์ ๋ฒํผ2๋ฅผ ์ ๋๋ก ๋ฐํํ์ง๋ง this.value๋ undefined ๋ฅผ ๋ฐํํ๋ค.
ํ์ดํ ํจ์ ๋ด์ this๋ ํญ์ window ๊ฐ์ฒด๋ฅผ ์๋ฏธํ๊ธฐ์ window.value์ ๊ฐ์ ์ฝ๋๊ฐ ๋๋ค.
window์์ value๋ฅผ ์ ์ํ ์ ์ด ์๊ธฐ์ undefined ๋ฅผ ๋ฐํํ๋ค.
๋ฐ๋ผ, ํ์ดํ ํจ์ ๋ด์์ this๋ ์ ์ฌ์ฉํ์ง ์๋๋ค.
๐ป์คํธ๋ฆผ, Stream
์ผ๋ จ์ ๋ฐ์ดํฐ๋ฅผ ์ฒ๋ฆฌํ๋๋ฐ ์ฌ์ฉ๋๋ ์ถ์ํ๋ ๊ฐ๋
์ด๋ค.
๋ฐ์ดํฐ๋ฅผ ์กฐ๊ฐ์กฐ๊ฐ์ผ๋ก ๋๋์ด ์ฒ๋ฆฌํ๋ฉฐ, ์ด๋ฅผ ํตํด ๋์ฉ๋์ ๋ฐ์ดํฐ๋ฅผ ํจ์จ์ ์ผ๋ก ๋ค๋ฃฐ ์ ์๋ค.
๋ฐฐ์ด ํ์ํ๊ธฐ
const arr = [1,2,3,4,5,6,7,8,9,10];
const farr = ['์ฌ๊ณผ', 'ํฌ๋', '๋ธ๊ธฐ', '๋ฐ๋๋', '๊ทค', '์ต๋', '์๋', '๋ฐฐ', '์ฐธ์ธ','์๋ฐ', '๋ณต์ญ์'];
1. for๋ฌธ
for (let i=0; i<arr.length; i++){
console.log(arr[i]);
}
2. ํฅ์๋ for๋ฌธ
์๋ฐ์คํฌ๋ฆฝํธ์์ ํฅ์๋ for๋ฌธ์ ํ๋กํผํฐ๋ฅผ ํ์ํ๋ ๊ฒ์ด๋ค.
๋ฐฐ์ด์ ์ธ๋ฑ์ค๋ ํ๋กํผํฐ๋ก ๊ฐ์ฃผ๋๊ธฐ ๋๋ฌธ์ ์ธ๋ฑ์ค์ฒ๋ผ ์ฌ์ฉ๊ฐ๋ฅํ๋ค.
for (let p in farr) {
console.log(p, arr[p]);
}
3. forEach() โ โ โ
์๋ฐ์ ํฅ์๋ for๋ฌธ์ ๊ฐ์ ์ญํ ์ ํ๋ค.
arr.forEach(function (num) {
console.log(num);
});
forEach
array.forEach(function(currentValue, index, array) {
// ์คํ๋ ์ฝ๋
});- currentValue (ํ์): ํ์ฌ ์ฒ๋ฆฌ ์ค์ธ ์์์ ๊ฐ
- index (์ ํ): ํ์ฌ ์ฒ๋ฆฌ ์ค์ธ ์์์ ์ธ๋ฑ์ค (0๋ถํฐ ์์)
- array (์ ํ): forEach๋ฅผ ํธ์ถํ ๋ฐฐ์ด ์์ฒด
ํ์ดํ ํจ์ ์ ์ฉ
arr.forEach(num=> console.log(num));
index
farr.forEach((f, index) => console.log(f, index));
array
farr.forEach((f, index, arr) => console.log(f, index, arr));
map()
- ์์๋ฅผ ๋ค๋ฅธ ๊ฐ์ผ๋ก ๋ณํํ ํ ์๋ก์ด ๋ฐฐ์ด์ ๋ฐํํ๋ค.
- ๊ฐ๊ณต ๋ฐ ๋ณํํ ๋ ์ฌ์ฉํ๋ค.
์ง์, ํ์๋ก ๋ฐํ
console.log(arr.map(n => n % 2 == 0 ? '์ง์':'ํ์'));
๊ธ์ ๊ธธ์ด๋ก ๋ฐํ
console.log(farr.map(item => item.length));
๊ธ์ ๊ธธ์ด๋ก ๋ฐํ
farr.map(item => item.length).forEach(length => console.log(length));
๊ฐ์ฒด n๊ฐ ์์ฑ
์์ธ์์ ๊ฑฐ์ฃผํ๋ 20์ธ์ธ ์ฌ๋์ ๊ฐ์ฒด๋ก ์์ฑํ๋ค.
const names = ['ํ๊ธธ๋', '์๋ฌด๊ฐ', 'ํํํ'];
const oarr1 = [];
//๊ฐ์ฒด 1๊ฐ ์์ฑํ ๋
const o1 = {
name: 'ํ๊ธธ๋',
age: 20,
address: '์์ธ์'
}
//๊ฐ์ฒด n๊ฐ ์์ฑํ ๋
for (let i=0; i<names.length; i++){
const o1 = {
name: names[i],
age: 20,
address: '์์ธ์'
};
oarr1[i]=o1;
}
console.log(oarr1);๊ฐ์ฒด๋ฅผ ์ฌ๋ฌ๊ฐ ์์ฑํ ๋๋ ๋ฐ๋ณต๋ฌธ ์์์ ๊ฐ์ฒด๋ฅผ ์์ฑํ ํ์ ๊ฐ์ฒด๋ฅผ ๋ด๋ ๋ฐฐ์ด์ ์ถ๊ฐํด์ค๋ค.
์คํธ๋ฆผ์ผ๋ก ์์ฑ
const oarr2 = names.map(name => {
return {
name: name,
age: 20,
address: '์์ธ์'
};
});
console.log(oarr2);์คํธ๋ฆผ์ผ๋ก ์ฝ๋ ๋ผ์ธ์ ์ค์ผ ์ ์๋ค.
filter
์กฐ๊ฑด์ ๋ง์กฑํ ๋ชจ๋ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ค.(๋ค์ค๊ฐ ๋ฐํ)
์ง์ ๋ฐฐ์ด ๋ฆฌํด
console.log(arr.filter(num=> num%2==0));
๊ธ์ ๊ธธ์ด๊ฐ 3๊ธ์ ์ด์์ธ ๊ฒ๋ง ๋ฆฌํด
console.log(farr.filter(item => item.length >= 3));
find()
์กฐ๊ฑด์ ๋ง์กฑํ๋ ์ฒซ๋ฒ์งธ ๊ฒฐ๊ณผ๋ฅผ ๋ฐํํ๋ค.(๋จ์ผ๊ฐ ๋ฐํ)
console.log(farr.find(item => item.length >=3));3๊ธ์ ์ด์์ธ ๊ฒฐ๊ณผ ('๋ฐ๋๋','๋ณต์ญ์') ์ค์์ ์ฒซ๋ฒ์งธ ๊ฒฐ๊ณผ์ธ ๋ฐ๋๋๋ง ๋ฐํํ๋ค.
'WEB > JavaScript' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
| [JavaScript] ๊ฐ์ฒด ๋ฉ์๋(Object methods) (1) | 2024.01.09 |
|---|---|
| [JavaScript] ๊ธฐ๋ฅ ๋ชจ๋ํ ์ํค๊ธฐ (0) | 2023.10.16 |
| [JavaScript] ์์ฑ์ ํจ์ (0) | 2023.10.13 |
| [JavaScript] ์คํฌ๋กค ์ด๋ฒคํธ : ๋ฐฐ๊ฒฝ์, ๊ธ์จ์ ๋ณ๊ฒฝ (0) | 2023.10.12 |
| [JavaScript] tansition ์กฐ์ : ๋ฐฐ๊ฒฝ ์ด๋ฏธ์ง ์กฐ์ (0) | 2023.10.12 |
