자바스크립트 함수

자바스크립트 함수

---

자바스크립트 함수 정의

자바스크립트 함수는 function 키워드, 함수명, 괄호 () 로 정의됩니다.

함수명을 지을 때는 다른 언어와 동일한 규칙을 적용합니다.

function add(num1, num2) {
    return num1 + num2;
}

 

자바스크립트 함수 호출

정의된 함수를 호출하려면 함수 이름과 괄호를 사용합니다.

add(10, 20)    // 30 반환

 

매개변수와 인수

• 매개변수 : 함수 정의에서 사용되는 변수
• 인수 : 함수 호출 시 전달되는 값

function add(a, b) {
    return a + b;
}

let sum = add(5, 3); // sum은 8

 

반환 값

함수는 return 문을 통해 값을 반환할 수 있습니다. 반환하지 않으면 undefined를 반환합니다.

 

익명 함수

함수를 이름 없이 정의할 수도 있습니다. 이러한 함수를 익명 함수라고 합니다.

const multiply = function(x, y) {
    return x * y;
};

주로 콜백 함수나 즉시 실행 함수(IIFE)로 사용됩니다.

 

즉시 실행 함수(IIFE)

(function() {
    console.log("즉시 실행 함수입니다.");
})();

즉시 실행 함수는 정의하자마자 실행되는 함수입니다.

 

자바스크립트 콜백함수

// 기본적인 콜백 함수
function greet(name, callback) {
    console.log("안녕하세요, " + name + "님!");
    callback();
}

function sayGoodbye() {
    console.log("안녕히 가세요!");
}

// 콜백 함수로 sayGoodbye를 전달
greet("홍길동", sayGoodbye);

// 배열 메서드에서의 콜백
const numbers = [1, 2, 3, 4, 5];

// forEach에서 콜백 함수 사용
numbers.forEach(function(num) {
    console.log(num * 2); // 2, 4, 6, 8, 10
});

// map에서 콜백 함수 사용
const squared = numbers.map(function(num) {
    return num * num;
});

console.log(squared); // [1, 4, 9, 16, 25]

// 비동기 처리에서의 콜백
console.log("시작");
setTimeout(function() {
    console.log("2초 후에 실행");
}, 2000);
console.log("끝");

// 화살표 함수와 함께 사용
const numbers = [1, 2, 3, 4, 5];
const doubled = numbers.map(num => num * 2);

console.log(doubled); // [2, 4, 6, 8, 10]

자바스크립트에서 콜백 함수(Callback Function)는 다른 함수의 인자로 전달되어 실행되는 함수를 말합니다.

 

화살표 함수

const 함수이름 = (매개변수1, 매개변수2) => {
    // 함수의 코드
    return 반환값; // 선택 사항
};

화살표 함수는 => 기호를 사용하여 정의합니다.

 

단일 표현식

const add = (a, b) => a + b; // return이 자동으로 생략됨

화살표 함수는 중괄호와 return을 생략할 수 있으며, 단일 표현식의 결과가 자동으로 반환됩니다.

 

this 바인딩

function Person() {
    this.age = 0;

    setInterval(() => {
        this.age++; // 'this'는 Person 객체를 참조
        console.log(this.age);
    }, 1000);
}

const p = new Person(); // 1초마다 나이가 증가

화살표 함수는 일반 함수와 달리 자신만의 this 값을 가지지 않습니다. 대신, 외부 함수의 this를 그대로 사용합니다.

 

 

출처

W3school

W3Schools.com