개발

js 함수

explosion149 2024. 11. 5.

 

 

JavaScript 함수는 특정 작업을 수행하는 코드 블록입니다.
함수는 재사용 가능하고, 입력값을 받아 처리한 후 결과를 반환할 수 있습니다.
아래에서 JavaScript 함수의 기본 개념, 정의 방법, 인수, 반환값, 그리고 고급 개념에 대해 알아봅시다.

 

 

 

 

 

함수정의

 

함수 선언 (Function Declaration)

 

function 함수이름(매개변수1, 매개변수2) {
    // 실행할 코드
    return 반환값; // 선택 사항
}

 

 

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

 

 

함수 표현식 (Function Expression)

 

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

 

 

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

 

 

화살표 함수 (Arrow Function)

 

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

 

const add = (a, b) => a + b;

 

 

함수 호출

 

const result = add(2, 3); // result는 5가 됩니다.

 

 

매개변수: 함수 정의에서 사용하는 변수입니다.
인수: 함수를 호출할 때 전달하는 값입니다.
JavaScript 함수는 기본적으로 매개변수를 지정하지 않아도 호출할 수 있으며, 

지정된 매개변수 수와 다르게 인수를 전달할 수 있습니다. 

전달되지 않은 매개변수는 undefined로 설정됩니다.

 

반환값

function multiply(a, b) {
    return a * b;
}
const result = multiply(4, 5); // result는 20이 됩니다.

 

함수는 return 문을 사용하여 값을 반환할 수 있습니다. return 문이 없으면 함수는 undefined를 반환합니다.

 

 

고급 개념

 

 콜백 함수 (Callback Function)

 

function doSomething(callback) {
    // 작업 수행
    callback(); // 콜백 호출
}

doSomething(() => {
    console.log("작업이 완료되었습니다!");
});

 

함수의 인수로 다른 함수를 전달하는 것입니다. 주로 비동기 작업이나 이벤트 처리에서 사용됩니다.

 

고차 함수 (Higher-Order Function)

 

function createMultiplier(multiplier) {
    return function(x) {
        return x * multiplier;
    };
}

const double = createMultiplier(2);
console.log(double(5)); // 10

 

함수를 인수로 받거나 함수를 반환하는 함수를 말합니다.

 

 

클로저 (Closure)

 

function outerFunction() {
    let count = 0;
    return function innerFunction() {
        count++;
        return count;
    };
}

const counter = outerFunction();
console.log(counter()); // 1
console.log(counter()); // 2

 

함수가 자신의 외부 스코프에 있는 변수에 접근할 수 있는 기능입니다. 이는 주로 캡슐화와 데이터 은닉에 사용됩니다.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

'개발' 카테고리의 다른 글

js 조건문  (0) 2024.11.05
js 스코프 및 화살표 함수  (0) 2024.11.05
깊은 복사 얕은 복사  (0) 2024.11.05
JavaScript 소개  (0) 2024.11.04
CSS Animation  (0) 2024.11.01

댓글

💲 추천 글