본문 바로가기
  • hello world
Language/Javascript

[JS] 함수

by JJoajjoa 2023. 9. 6.

 

자바스크립트에서의 함수는 특정 작업을 수행하거나 값을 계산하기 위해 정의된 코드 블록

 

함수 정의

// 함수 선언
function sayHello() {
    console.log("Hello, World!");
}

// 함수 표현식
const sayHello = function() {
    console.log("Hello, World!");
};

// 화살표 함수
const sayHello = () => {
    console.log("Hello, World!");
};

 

 

기본 매개변수

함수 매개변수에 기본값을 지정할 수 있음

function greet(name = "Guest") {
    console.log(`Hello, ${name}!`);
}

greet(); // "Hello, Guest!" 출력
greet("Alice"); // "Hello, Alice!" 출력

 

 

익명함수

이름이 없는 함수 == 주로 콜백함수에 사용

setTimeout(function() {
    console.log("This is an anonymous function.");
}, 1000);

 

 

재귀함수 Recursive Function

자기 자신을 호출하는 함수

function factorial(n) {
    if (n === 0) {
        return 1;
    }
    return n * factorial(n - 1);
}

console.log(factorial(5)); // 120 출력

 

 

고차 함수 Higher-Order Function

다른 함수를 인자로 받거나, 함수를 반환하는 함수

function makeMultiplier(x) {
    return function(y) {
        return x * y;
    };
}

const multiplyBy2 = makeMultiplier(2);
console.log(multiplyBy2(5)); // 10 출력

 

 

즉시 실행 함수 표현식 IIFE

정의되자마자 실행되는 함수

(function() {
    console.log("This is an IIFE.");
})();

 

 

예시

/* 함수 */

// 매개변수 없음
function print1() {
    console.log('hi');
}
print1();

// 매개변수 한개
function print2(a) {
    console.log(`전달받은값: ${a}`);
}
print2(21);

// 매개변수 두개
function print3(a, b) {
    console.log(`전달받은값: ${a}, ${b}`);
    return a + b;
}
let result = print3(10, 10);
console.log(`print3 결과: ${result}`);

console.log(`print1의 자료형: ${typeof (print1)}`) //function
// 자료형이 function?!
// JS에서는 함수가 변수에 들어갈 수 있다! == 함수를 1급객체로 담는다
// 왜 굳이 넣을까 : 굉장히 다양한 형태로 코드를 만들 수 있어짐
let show1 = print1;
show1();
// 변수에 함수가 들어갈 수 있는 예시
// 그래서 자료형에 function이라는 단어가 나올 수 있게 됨
let show2 = function print4() {
    console.log('print4 호출됨');
}
show2();
// 함수를 만들면서 변수에 넣어주는 것도 가능
let show22 = function () {
    console.log('print4 호출됨');
}
show22();
// 어차피 변수에 들어갈거라서 함수 이름을 그냥 없애버림
let show3 = () => {
    console.log('print5 호출됨');
}
show3();
// 화살표함수 형태로 변경 가능


/* 콜백함수 */
function add1(a, b) {
    return a + b;
}
let res = add1(10, 11);
console.log(`더하기결과: ${res}`);
// 위: 일반적인 함수 | 아래: 콜백함수
function add2(a, b, c) {
    c(a + b);
}
add2(10, 11, (result) => {
    console.log(`더하기결과: ${result}`);
})


/* for문이랑 콜백함수써서 1~10 더하기 */
// for문 사용
let sum = 0;
for (let i = 0; i < 10; i++) {
    sum = sum + (i + 1);
}
console.log(`1부터 10까지의 누적합: ${sum}`);
// 함수로 분리
let calc = (start, end) => {
    sumsum = 0;
    for (let i = start; i < end + 1; i++) {
        sumsum += i;
    }
    return sumsum;
}
let calcRes1 = calc(0, 10);
console.log(`1부터 10까지의 누적합: ${calcRes1}`);
let calcRes2 = calc(0, 100);
console.log(`1부터 100까지의 누적합: ${calcRes2}`);
// 콜백함수로 바꾸기
let calc2 = (start, end, callback) => {
    sumsum = 0;
    for (let i = start; i < end + 1; i++) {
        sumsum += i;
    }
    callback(sumsum);
}
calc2(0, 10 ,(result123) => {
    console.log(`1부터 10까지의 누적합: ${result123}`);
});
// 과제수행
function sumTotal(x, y, sumFunc) {
    if (x > y) {
        console.log('뒷숫자가 더 커야함');
    } else {
        z = 0;
        for (let i = x; i < y + 1; i++) {
            z += i;
        }
        sumFunc(z);
    }
}
sumTotal(1, 11, (result) => {
    console.log(`누적합 결과: ${result}`);
})

 

 

'Language > Javascript' 카테고리의 다른 글

[JS] 상속  (0) 2024.07.25
[JS] 자바스크립트 기초 (코딩애플 유튜브 무료강의)  (0) 2024.03.28
[JS] jQuery  (0) 2023.10.23
[JS] DOM  (0) 2023.09.07
[JS] JavaScript  (0) 2023.09.06