04-1. νλ‘κ·Έλλ°μ κ½, ν¨μ
ν¨μ: λμν΄μΌ ν λͺ©μ λλ‘ μ¬λ¬ κ°μ λͺ λ Ήμ λ¬Άλ κ²
ν¨μλ₯Ό μ¬μ©νλ μ΄μ
- μ²λ¦¬ν΄μΌν κΈ°λ₯μ΄ λ§μ§λ§, ν¨μ μμ΄ μμ±νλ€λ©΄ μ¬μ©μκ° μ λ ₯ν λλ§λ€ κ°μ λͺ λ Ήμ κ³μ λ°λ³΅ν΄μΌν¨
- νμ§λ§, κΈ°λ₯λ³λ‘ ν¨μλ₯Ό λ°λ‘ λ§λ€μ΄ λλ€λ©΄ νμν λλ§λ€ μ μ ν ν¨μλ₯Ό μ¬μ©ν΄μ ν¨μλ³λ‘ μ€νν μ μμ
ν¨μ μ μΈνκ³ νΈμΆνκΈ°
- μλ°μ€ν¬λ¦½νΈμλ λ€μν ν¨μλ€μ΄ 미리 λ§λ€μ΄μ Έ μμΌλ―λ‘ κ°λ°μλ ν΄λΉ ν¨μλ₯Ό κ°μ Έμμ μ¬μ©λ§ νλ©΄ λ¨
- ν¨μλ₯Ό μ μΈν λλ functionμ΄λΌλ μμ½μ΄λ₯Ό μ¬μ©νκ³ , ν¨μ μ΄λ¦μ μ μ ν μ€κ΄νΈ μμ μ€νν μ¬λ¬ κ°μ λͺ λ Ήμ λ¬Άμ
- ν¨μ μ΄λ¦μ μ λ μ΄μ : λμ€μ μ΄λ¦μ μ¬μ©ν΄ ν¨μλ₯Ό μ€ννκΈ° μν΄μ
function ν¨μλͺ
(){
λͺ
λ Ή(λ€)
}
- μ μΈν ν¨μλ₯Ό μ€νν λ ν¨μ μ΄λ¦μ μ¬μ©νμ¬ νΈμΆν¨
- νΈμΆν λλ ν¨μ μ΄λ¦ λ€μ κΌ μκ΄νΈ(( ))λ₯Ό λΆμ¬μΌ ν¨
- ν¨μ μ μΈ μμ€λ μ΄λμ λ£μ΄λ μκ΄ μμ. νμ§λ§ μΉ λΈλΌμ°μ μμ μλ°μ€ν¬λ¦½νΈ μμ€λ₯Ό ν΄μν λ λ³μ μ μΈμ΄λ ν¨μ μ μΈ λΆλΆμ κ°μ₯ λ¨Όμ ν΄μνλ―λ‘ λ³΄ν΅ ν¨μλ₯Ό μ μΈνλ μμ€λ₯Ό μ€ν μμ€λ³΄λ€ μμ μ μ
맀κ°λ³μμ μΈμ, return λ¬Έ
맀κ°λ³μ
- 맀κ°λ³μ: ν¨μλ₯Ό μ μΈν λ μΈλΆμμ κ°μ λ°λ λ³μ
- ν¨μ μ΄λ¦ μ μκ΄νΈ μμ 맀κ°λ³μ μ΄λ¦μ λ£μ
- 맀κ°λ³μλ μ μΈλ ν¨μμμλ§ μ¬μ©νκ³ , ν¨μμ μ¬λ¬ κ°μ 맀κ°λ³μκ° νμν λλ 맀κ°λ³μ μ¬μ΄μ μΌν(,)λ₯Ό λ£μΌλ©΄μ λμ΄
μΈμ
μΈμ: 맀κ°λ³μκ° μλ ν¨μλ₯Ό νΈμΆν λ μ€μ λ‘ κ°μ λ겨주λ κ²
(맀κ°λ³μμ μΈμλ₯Ό ν΅νμ΄μ 'μΈμ'λΌκ³ λ ν¨)
function sum(a, b){ // a, b: 맀κ°λ³μ
let result = a + b;
alert(`λ μμ ν©: ${result}`)
}
sum(10, 20); // 10, 20: μΈμ
return λ¬Έ
- ν¨μμμ μ€νν ν κ²°κ³ΌκΉμ§ μ²λ¦¬ν μ μμ§λ§, ν¨μμ μ€ν κ²°κ³Όλ₯Ό λ°μ λ λ€μ μ²λ¦¬ν΄μΌ ν κ²½μ°λ μμ. μ΄λ ν¨μμ μ€ν κ²°κ³Όλ₯Ό ν¨μλ₯Ό μ€νν μμ μΌλ‘ λ겨μ€μΌν¨ → 'ν¨μκ°μ λ°ννλ€'
κΈ°λ³Έ 맀κ°λ³μ
- μν¬λ§μ€ν¬λ¦½νΈ 2015λΆν° 맀κ°λ³μκ° μλ ν¨μλ₯Ό μ μΈν λ 맀κ°λ³μμ κΈ°λ³Έκ°μ μ§μ νλ κΈ°λ₯λ μκΉ
→ ν¨μλ₯Ό μ€νν λ μΈμκ° λΆμ‘±νλ©΄ κΈ°λ³Έκ°μ μ¬μ©ν¨
function multiple(a, b = 5, c = 10){
return a * b + c;
}
console.log(multiple(5, 10, 20)); // a = 5, b = 10, c = 20
console.log(multiple(10, 20)); // a = 10, b = 20, c = 10(default)
console.log(multiple(10)); // a = 10, b = 5(default), c = 10(default)
04-2. λ³μμ μ ν¨ λ²μ, μ€μ½ν
μ€μ½ν: μ μΈν λ³μκ° μ΄λ λ²μκΉμ§ μν₯μ λ―ΈμΉλμ§λ₯Ό λνλ΄λ κ²
μ€μ½ν
- μ€μ½ν: μ μΈν λ³μμ μ μ© λ²μλ₯Ό κ°λ¦¬ν΄ → μ΄λ μμΉμμ λ³μλ₯Ό μ κ·Όν μ μλμ§λ₯Ό κ°λ¦¬ν΄
- νλ‘κ·Έλ¨μμ λ³μλ₯Ό μ μΈνλ©΄ μλ°μ€ν¬λ¦½νΈ ν΄μκΈ°μμ μμ€λ₯Ό μ½μ΄λ΄λ €κ°λ©΄μ λ³μμ λν μ€μ½νλ₯Ό λ§λ¦
- var(λ³μ μ μΈνλ μμ½μ΄)λ‘ μ μΈν λ³μλ ν¬κ² 'μ§μ μ€μ½ν'μ 'μ μ μ€μ½ν'λ₯Ό κ°μ§
μ§μ μ€μ½ν
- λ³μμ νΉμ μμμμλ§ μ¬μ©ν μ μμ λ 'μ§μ μ€μ½νλ₯Ό κ°μ§κ³ μλ€'κ³ λ§ν¨ → 'μ§μ λ³μ'
- ν¨μ μ€μ½ν: λ³μλ₯Ό μ μΈν ν¨μμμλ§ ν΄λΉ λ³μλ₯Ό μ¬μ©ν μ μλ€λ μλ―Έ
→ ν¨μ μμμλ§ μ¬μ©ν μ μλ μ§μ μ€μ½νκ° λ¨
fuction sum(a, b){
var result = a + b;
}
console.log(result); // ReferenceError
- result λ³μκ° sum ν¨μ μμ μ μΈλμμΌλ―λ‘, result λ³μλ ν¨μ μ€μ½νλ₯Ό κ°μ§κ³ , ν¨μλ₯Ό λ²μ΄λλ μκ° result λ³μμ μ€μ½νλ μ¬λΌμ§
μ μ μ€μ½ν
- νλ‘κ·Έλ¨ μμ λΆλΆμμ λ³μλ₯Ό μ μΈνλ©΄ νλ‘κ·Έλ¨ μ 체μμ μ¬μ©ν μ μλ μ€μ½ν
- μ μ λ³μ: μ μ μ€μ½νλ₯Ό κ°μ§μ§λ λ³μ
var hi = "hello"; // μ μ λ³μ
function greeting(){
console.log(hi);
}
greeting()
- μ μ λ³μλ ν¨μμ μ΄λμμλ κ°μ λ³κ²½ν μ μμ
- νμ§λ§ 곡λ μμ νλ νλ‘κ·Έλ¨μ κ²½μ° λ€λ₯Έ ν¨μμμ μ μ λ³μλ₯Ό μμ νλ©΄ μμνμ§ λͺ»ν κ²°κ³Όκ° λμ¬ μ μμΌλ―λ‘ μ£Όμν΄μΌν¨
- λ³μ μ΄λ¦ μμ var μμ½μ΄λ₯Ό λΆμ΄μ§ μμΌλ©΄ μλ°μ€ν¬λ¦½νΈλ μ μ λ³μλ‘ μΈμν¨
- μ΄λ¬ν λ¬Έμ λ‘ μ μ λ³μλ₯Ό μ¬μ©νμ§ μλ κ²μ΄ κ°μ₯ μ’μ
- letμ΄λ constλ₯Ό μ¬μ©ν λ³μλ νλ‘κ·Έλ¨μ 맨 μμ μ μΈνλ©΄ νλ‘κ·Έλ¨ μ 체μμ μ¬μ©ν μ μμ
→ 'μ€ν¬λ¦½νΈ μ€μ½νλ₯Ό κ°μ§λ€' ('μ μ μ€μ½νλ₯Ό κ°μ§λ€'λΌκ³ νμ§ μμ)
λΈλ‘ μ€μ½ν
- μλ°μ€ν¬λ¦½νΈμ λΈλ‘: μ€κ΄νΈ({ })λ‘ λλ¬μΈμΈ μμμ κ°λ¦¬ν΄
λΈλ‘ μ€μ½ν: λΈλ‘λ³λ‘ λ³μμ μ ν¨ λ²μκ° κ²°μ λλ κ² - letμ΄λ constλ₯Ό μ¬μ©ν΄ λ§λ λ³μλ κΈ°λ³Έμ μΌλ‘ λ³μκ° μ μΈλ λΈλ‘μμλ§ μ ν¨ν¨ → 'λΈλ‘ μ€μ½νλ₯Ό κ°μ§λ€'
- λΈλ‘ λ³μ: λΈλ‘ μ€μ½νλ₯Ό κ°μ§ λ³μ
const factor = 5; // factor: λͺ¨λ λΈλ‘μ μ¬μ© κ°λ₯
function calc(){ // 첫λ²μ§Έ λΈλ‘
return num * factor; // num λ³μμ μ κ·Όν μ μμ
}
{// λλ²μ§Έ λΈλ‘
const num = 10;
let result = calc();
document.write(`result : ${result}`);
}
// κ²°κ³Ό: ReferenceError
// μμ μ½λ μμ
const factor = 5;
function calc(num){
return num * factor;
}
{
let result = calc(10);
document.write(`result : ${result}`);
}
μλ°μ€ν¬λ¦½νΈ λ³μ, μ΄λ κ² μ¬μ©νμΈμ
μλ°μ€ν¬λ¦½νΈ
- μ₯μ : μ μ°ν μΈμ΄μ¬μ λ€μνκ² μ¬μ©ν μ μλ λΆλΆμ΄ λ§μ
- λ¨μ : νλ‘κ·Έλ¨μ΄ 컀μ§μλ‘ κ°λ μ±μ΄λ λλ²κΉ μ΄ μ΄λ €μμ§
→ μλ°μ€ν¬λ¦½νΈ λ¬Έλ²μ λ²μ΄λμ§ μμΌλ©΄μ κ°λ μ±μ λμ΄κ³ λλ²κΉ μ΄ μ½λλ‘ λ³μλ₯Ό μ¬μνλ λ°©λ²μ μ λ¦¬ν΄ λ³΄μ
β var λ³μλ³΄λ€ let, const λ³μλ₯Ό μ¬μ©νλ€
- var λ³μλ λ€μ μ μΈν μ μμ΄μ μ€μλ‘ κ°μ λ³μλ₯Ό λ€μ μ μΈν΄λ μ€λ₯κ° λ°μνμ§ μμ. μ¬μ§μ΄ λ³μλ₯Ό λ¨Όμ μ€νν ν λμ€μ μ μΈν΄λ μ€λ₯κ° λ°μνμ§ μμ
- 곡λ νλ‘μ νΈλΌλ©΄ λ³μλ₯Ό μ¬μ μΈν μ μμΌλ―λ‘ νΈμ΄μ€ν μλ letμ΄λ const λ³μλ₯Ό μ¬μ©νλ κ²μ΄ μμ ν¨
β‘ μ μ λ³μλ μ΅μνμΌλ‘ μ¬μ©νλ€
- μ μ λ³μλ νλ‘κ·Έλ¨μ λͺ¨λ κ³³μμ μ κ·Όν μ μμ΄μ νΈλ¦¬νκ² μ¬μ©ν μ μμ
- νμ§λ§ μ΄λμλ κ°μ λ³κ²½ν μ μμΌλ―λ‘ μμνμ§ λͺ»ν κ³³μμ κ°μ΄ λ¬λΌμ§ μ μμΌλ―λ‘ κ·Έλ§νΌ μ€λ₯κ° λ°μν νλ₯ μ΄ λμμ§
- κ·Έλ¬λ―λ‘ μ μ λ³μ μ¬μ©μ μ€μ΄κ³ , νλ‘κ·Έλ¨μμ κ°μ΄ λ³νμ§ μλλ€λ©΄ constλ‘ μ μΈνλ κ²μ΄ μ’μ
β’ κ°μ²΄ μ μΈμ constλ₯Ό μ¬μ©νλ€
- κ°μ²΄λ₯Ό μ μΈν λ νλ‘κ·Έλλ° λμ€ κ°μ²΄ μμ²΄κ° λ°λμ§ μλλ‘ constλ₯Ό μ¬μ©ν΄ μ μΈν¨
- κ°μ²΄λ₯Ό constλ‘ μ μΈν΄λ κ°μ²΄ μμ μλ νλ‘νΌν°λ μΌλ§λ μμ κ°λ₯ν¨
|
04-3. μ΄λ¦ μμ΄ μ¬μ©νλ ν¨μ ννμ
μ΅λͺ ν¨μ
λ³μμ ν λΉν΄μ μ¬μ©νλ μ΅λͺ ν¨μ
- μ΄λ¦μ΄ μλ ν¨μμ κ²½μ°, ν¨μλ₯Ό λ³μμ ν λΉν΄μ μ¬μ©ν μ μμ
let sum = function(a, b){
return a + b;
}
console.log(`ν¨μ μ€ν κ²°κ³Ό : ${sum(10, 20)}`)
μ¦μ μ€ν ν¨μ
- ν λ²λ§ μ€ννλ ν¨μμΌ κ²½μ° ν¨μλ₯Ό μ μνλ©΄μ λμμ μ€νν μ μμ
(function(a, b){
let sum = a + b;
console.log(`ν¨μ μ€ν κ²°κ³Ό : ${sum}`)
}(100, 200)); // λ§μ§λ§ μΈλ―Έμ½λ‘ (;) λΆμ΄κΈ°
νμ΄ν ν¨μ
- μν¬λ§μ€ν¬λ¦½νΈ 2015 λ²μ λΆν° => νκΈ°λ²(νμ΄ν νκΈ°λ²)μ μ¬μ©ν΄ ν¨μλ₯Ό μ’ λ κ°λ¨ν μ μΈν μ μκ² λ¨
- 'νμ΄ν ν¨μ' λλ 'μ λ‘ νμ (arrow function)' μ΄λΌ λΆλ¦
(맀κ°λ³μ) => {ν¨μ λ΄μ©}
맀κ°λ³μκ° μμ λ
- 맀κ°λ³μκ° μμ λλ 맀κ°λ³μκ° λ€μ΄κ°λ μκ΄νΈ λΆλΆμ λΉμλ
- ν¨μμμ μ€νν λͺ λ Ήμ΄ ν μ€λΏμ΄λΌλ©΄ μ€κ΄νΈ({ })λ₯Ό μλ΅ν μ μμ
- ν μ€ λͺ λ Ήμ return λ¬Έμ΄ ν¬ν¨λμ΄ μλ€λ©΄ returnλ μλ΅ κ°λ₯ν¨
let hi = function(){
return `μλ
νμΈμ?`;
}
hi()
// ↓
let hi = () => {return `μλ
νμΈμ?`};
hi();
// ↓
let hi() = () => `μλ
νμΈμ?`;
hi();
맀κ°λ³μκ° 1κ°μΌ λ
- 맀κ°λ³μκ° 1κ°μΈ κ²½μ° λ§€κ°λ³μμ μκ΄νΈλ₯Ό μλ΅ν΄μ μ¬μ© κ°λ₯ν¨
let hi = function(user){
console.log(`${user}λ, μλ
νμΈμ?`);
}
hi("νκΈΈλ");
// ↓
let hi = user => console.log(`${user}λ, μλ
νμΈμ?`);
hi("νκΈΈλ");
맀κ°λ³μκ° 2κ° μ΄μμΌ λ
- 맀κ°λ³μκ° 2κ° μ΄μμ΄λ©΄ (맀κ°λ³μ) => { ... }μ²λΌ μ¬μ©ν¨
let sum = function(a, b){
return a + b;
}
sum(10, 20);
// ↓
let sum = (a, b) => a + b;
sum(10, 20);
μ½λ°± ν¨μ
- μ½λ°± ν¨μ: λ€λ₯Έ ν¨μμ μΈμλ‘ μ¬μ©νλ ν¨μ
ν¨μ μ΄λ¦ μ¬μ©ν΄ μ½λ°± ν¨μ μ€ννκΈ°
const bttn = document.querySelector("button"); // λ²νΌ μμλ₯Ό κ°μ Έμ΄
function display(){
alert("ν΄λ¦νμ΅λλ€.");
}
bttn.addEventListener("click", display); // λ²νΌμ ν΄λ¦νλ©΄ display ν¨μλ₯Ό μ€νν¨
- addEventListener() ν¨μμμ 미리 μ μΈν display() ν¨μλ₯Ό μΈμλ‘ μ¬μ©ν¨
→ μ΄λ κ² λ€λ₯Έ ν¨μμ μΈμκ° λλ ν¨μλ₯Ό 'μ½λ°± ν¨μ' λΌκ³ ν¨ - addEventListener() ν¨μ μμ display() ν¨μλ₯Ό λ£μ λ ν¨μ μ΄λ¦ λ€μ μκ΄νΈκ° μμ
ν¨μμ μ§μ μμ±ν΄μ μ½λ°± ν¨μ μ€ννκΈ°
- ν¨μ μ΄λ¦μ νμν λλ§λ€ μ¬λ¬ λ² μ¬μ©ν΄ μ€ννκ±°λ μ½λ°± ν¨μλ‘ μ¬μ©ν μ μμ
νμ§λ§ λ± ν λ²λ§ ν¨μλ₯Ό μ€ννλ€λ©΄ λ°λ‘ ν¨μλ₯Ό μ μΈνμ§ μκ³ ν¨μμ μ§μ μ½λ°± ν¨μλ₯Ό μμ±ν μ μμ
const bttn = document.querySelector("button"); // λ²νΌ μμλ₯Ό κ°μ Έμ΄
bttn.addEventListener("click", () => { // λ²νΌμ ν΄λ¦νμ¬ alertλ₯Ό μ€ν
alert("ν΄λ¦νμ΅λλ€.");
});
μλ°μ€ν¬λ¦½νΈ ν¨μλ 1κΈ μλ―Ό
- λ³μμ ν λΉν μ μμ΄μΌ νλ€
- λ€λ₯Έ ν¨μμ μΈμλ‘ μ¬μ©ν μ μμ΄μΌ νλ€
- λ€λ₯Έ ν¨μμμ λ°νκ°μΌλ‘ λ°νν μ μμ΄μΌ νλ€
λ³μμ ν¨μ ν λΉνκΈ°
let sum = (a, b) => a + b;
sum(2, 10);
// ↓
function add(a, b){
return a + b;
}
let sum = add; // add λ€μ () λΆμ΄μ§ X. λΆμ΄λ©΄ ν¨μλ₯Ό μ€ννλ€λ λ»
sum(2, 10);
ν¨μλ₯Ό λ€λ₯Έ ν¨μλ‘ μ λ¬νκΈ°
function hello(){
return "μλ
νμΈμ?";
}
function bye(){
return "μλ
ν κ°μΈμ.";
}
function userCheck(name, fn){ // fn ν¨μλ₯Ό μ λ¬λ°μ μ€ν
console.log(`${name}λ`, fn());
}
userCheck("νκΈΈλ", hello); // νκΈΈλ, μλ
νμΈμ?
userCheck("λλ λ―Έ", bye); // λλ λ―Έ, μλ
ν κ°μΈμ.
- hello() ν¨μλ₯Ό 미리 μ μν΄ λκ³ login() ν¨μλ₯Ό μ€νν λ fn 맀κ°λ³μμ hello() ν¨μλ₯Ό μΈμλ‘ λκ²¨μ€ μ μμ
ν¨μμμ λ€λ₯Έ ν¨μ λ°ννκΈ°
// init() ν¨μμμ λ€λ₯Έ ν¨μ λ°ννκΈ°
let ini = () => {
return function(a, b){
return a - b > 0 ? a - b : b - a;
}
}
// console.log(`init(30, 20) : ${init(30, 20)}`); // (1)
console.log(`init()(30, 20) : ${init()(10, 20)}`); // (2)
(1)μ κ²°κ³Ό
(2)μ κ²°κ³Ό
04-4. μ κ° κ΅¬λ¬Έ
μ κ° κ΅¬λ¬Έ: λ°°μ΄μ²λΌ κ°μ΄ λ€μν μλ£λ₯Ό νκΊΌλ²μ μΈμλ‘ λ겨주거λ λ°°μ΄κ³Ό λ°°μ΄μ ν©ν λμ²λΌ λ°°μ΄μ νλμ λ©μ΄λ¦¬λ‘ μ²λ¦¬ν΄μΌν λ μ μ©
μ κ° κ΅¬λ¬Έμ μμ± λ°©λ²
- μ κ° κ΅¬λ¬Έμ΄λ, λ§ κ·Έλλ‘ 'κ°μ νΌμ³ μ£Όλ' ꡬ문
fruits = ["apple", "banana", "grape"]
console.log(fruits)
console.log(...fruits)
- '...' κΈ°νΈλ₯Ό μ¬μ©
→ λ¬Έμμ΄μ΄λ λ°°μ΄, κ°μ²΄μ²λΌ μ¬λ¬ κ°μ κ°μ λ΄κ³ μλ μλ£νμμ λ€λ₯Έ μ 보λ νμ μκ³ κ·Έ μμ κ°λ§ κΊΌλ΄ μ¬μ©νλ €κ³ ν λ μ κ° κ΅¬λ¬Έ μ μ©
λλ¨Έμ§ λ§€κ°λ³μ
- μ κ° κ΅¬λ¬Έμ ν¨μλ₯Ό μ μΈν λλ μ¬μ© κ°λ₯
- ν¨μλ₯Ό μ μΈνλ©΄μ λμ€μ λͺ κ°μ μΈμλ₯Ό λ°κ² λ μ§ μ μ μλ κ²½μ° → μ κ° κ΅¬λ¬Έμ μ¬μ©ν΄ 맀κ°λ³μ λ§λ¦ → 'λλ¨Έμ§ λ§€κ°λ³μ' λΌκ³ ν¨
function addNum(a, b){
return a + b;
}
addNum(1, 3); // 4
addNum(1, 3, 5, 7); // 4
- addNum(1, 3, 5, 7): μμμ 2κ°μ μΈμλ§ μ¬μ©νκ³ λλ¨Έμ§ μΈμλ λ²λ¦Ό
function addNum(...numbers){
let sum = 0;
for(let number of numbers)
sum += number;
return sum;
}
console.log(addNum(1, 3)); // 4
console.log(addNum(1, 3, 5, 7)); // 16
- μ κ° κ΅¬λ¬Έμ μ¬μ©ν΄ 맀κ°λ³μλ₯Ό νλμ μ΄λ¦μΌλ‘ μ μΈ
μ΄λ κ² νλ©΄ 맀κ°λ³μλ‘ λμ΄μ¨ κ°μ λͺ¨λ νΌμ³μ μ¬μ©νκ² λ¨
// μΈμμ μΌλΆλΆλ§ λλ¨Έμ§ λ§€κ°λ³μλ‘ λ°κΈ°
function displayFavorites(first, ...fav){
let str = `κ°μ₯ μ’μνλ κ³ΌμΌμ "${first}"κ΅°μ`;
return str;
}
console.log(displayFavorites("μ¬κ³Ό", "ν¬λ", "λ°λλ"));
04-5. μκ°μ κ³ λ €νλ νμ΄λ¨Έ ν¨μ
- μλ°μ€ν¬λ¦½νΈμλ νΉμ μκ°μ΄ λμμ λ ν¨μλ₯Ό μ€ννκ±°λ νΉμ μκ° λμ ν¨μλ₯Ό λ°λ³΅νκΈ° μν΄ μκ°μ μ¬λ ν¨μκ° μμ → νμ΄λ¨Έ ν¨μ
- νμ΄λ¨Έ ν¨μ: μ€νν ν¨μμ μκ°μ μ§μ νλ ν¨μ
→ νμ΄λ¨Έ ν¨μμ μ€νν ν¨μλ₯Ό μΈμλ‘ λ°κΈ° λλ¬Έμ μ½λ°± ν¨μλ₯Ό 맀κ°λ³μλ‘ μ¬μ©ν¨
μΌμ μκ°λ§λ€ λ°λ³΅νκΈ° - setInterval()
- setInterval() : μΌμ ν μκ°λ§λ€ ν¨μλ₯Ό λ°λ³΅ν΄μ μ€ννλ ν¨μ (μκ°μ λ°λ¦¬μ΄ λ¨μ μ¬μ©)
- ν λ² μ€ννλ©΄ μΉ λΈλΌμ°μ λ₯Ό μ’ λ£νκΈ° μ κΉμ§λ λ¬Έμλ₯Ό μλ‘κ³ μΉ¨ νκ±°λ λ€λ₯Έ νμ΄μ§λ‘ μ΄λν΄λ κ³μ μ€νλ¨
setInterval(μ½λ°± ν¨μ, μκ°)
function greeting(){
console.log("μλ
νμΈμ?");
}
setInterval(greeting, 2000); // 2μ΄λ§λ€ greeting() ν¨μ νΈμΆ
// ↓
setInterval(() => {
console.log("μλ
νμΈμ?")
}, 2000);
λ°λ³΅ μ€ν λ©μΆκΈ° - clearInterval()
- ν¨μλ₯Ό κ³μ λ°λ³΅νλ κ²μ΄ μλλΌ νΉμ μ‘°κ±΄μ΄ λμμ κ²½μ° λ°λ³΅ μ€νμ λ©μΆλ €λ©΄ setInterval() ν¨μμ ν¨κ» clearInterval() ν¨μλ₯Ό μ¬μ©ν΄μΌ ν¨
- clearInterval() : μμν νμ΄λ¨Έλ₯Ό μ’ λ£νλ ν¨μ
clearInterval(νμ΄λ¨Έ)
let counter = 0;
let timer = setInterval(() => { // νμ΄λ¨Έ μμ
console.log("μλ
νμΈμ?");
counter++; // μΈμ¬λ§ νμ νμκ° 1 μ¦κ°
if(counter === 5)
clearInterval(tiemr); // counter = 5μ΄λ©΄ νμ΄λ¨Έλ₯Ό μ’
λ£
}, 2000);
νΉμ μκ° μ΄νμ μ€ννκΈ° - setTimerout()
- setInterval() ν¨μλ μΌμ ν μκ°λ§λ€ μ½λ°± ν¨μλ₯Ό λ°λ³΅νμ§λ§, setTimerout() ν¨μλ μ§μ ν μκ°μ΄ μ§λ ν μ½λ°± ν¨μλ₯Ό μ€ν
setTimerout(μ½λ°± ν¨μ, μκ°)
setTimeout(() => {
console.log("μλ
νμΈμ?")
}, 3000); // 3μ΄ ν μΈμ¬λ§ νμλ¨
κ΅μ¬: Do it! λͺ¨λ μλ°μ€ν¬λ¦½νΈ νλ‘κ·Έλλ°μ μ μ
'Study > JavaScript' μΉ΄ν κ³ λ¦¬μ λ€λ₯Έ κΈ
[λͺ¨λμλ°μ€ν¬λ¦½νΈ]06 μ΄λ²€νΈμ μ΄λ²€νΈ μ²λ¦¬κΈ° (0) | 2023.03.29 |
---|---|
[λͺ¨λμλ°μ€ν¬λ¦½νΈ]05 DOMμ κΈ°μ΄ (0) | 2023.03.23 |
[λͺ¨λμλ°μ€ν¬λ¦½νΈ]03 μ°μ°μμ μ μ΄λ¬Έ (0) | 2023.03.21 |
[λͺ¨λμλ°μ€ν¬λ¦½νΈ]02 νλ‘κ·Έλλ°μ κΈ°λ³Έ, λ³μμ μλ£ν μ΄ν΄λ³΄κΈ° (0) | 2023.01.19 |
[λͺ¨λμλ°μ€ν¬λ¦½νΈ]01 μλ°μ€ν¬λ¦½νΈ μμνκΈ° (0) | 2023.01.19 |