[Javascript]자바스크립트 함수 정리

[Javascript]자바스크립트 함수 정리

안녕하세요 미나라이입니다.

 

이번포스팅에서는 자바스크립트의 함수의 종류 및 활용법을 정리해보았습니다.

 

기본 형태 및 호출 방법

자바스크립트의 기본적인 함수 사용법과 호출 방법입니다.

function print() {
    console.log("Hello");
}
// 함수 호출 방법
print();

파라미터

자바스크립트 함수의 파라미터는 변수와 마찬가지로 데이터 타입을 가변으로 받을 수 있습니다.

function printName(obj) {
    console.log(obj.name);
}

function changeName(obj) {
    obj.name = 1;
}

// 문자열로 선언
const change = {name : 'name'};
printName(change);

// 숫자로 변환
changeName(change);
printName(change);

 

파라미터에 기본값을 지정 할 수 있습니다.(ES6이상)

기본값을 지정하지 않으면 undefined가 출력됩니다.

function showMessage(message, from = 'default') {
    console.log(`${message} by ${from}`);
}

// 두번째 파라미터를 지정하지 않으면 'default'를 출력
showMessage('Hello!');

파라미터에 인자를 가변 배열 형태로도 전달 할 수 있습니다. (ES6이상)

function printAll(...args) {
    // 반복문 처리 예 1
    for (let i = 0; i < args.length; i++) {
        console.log(args[i]);
    }

    // 반복문 처리 예 2
    for (const arg of args) {
        console.log(arg);
    }
}

printAll(1,2,3);

함수 안에 함수넣기

자바스크립트는 함수 안에 함수를 넣을 수 있습니다.

이 경우에 Scope에 주의해야 합니다.

let globalMsg = 'global';
function printMsg() {
    let localMsg = 'local';
    console.log(localMsg);
    console.log(globalMsg);

    function childPrintMsg() {
        let childMsg = 'child';
        console.log(childMsg);
        console.log(localMsg);
        console.log(globalMsg);
    }
    // 에러
    // console.log(childMsg);
    childPrintMsg();
}

printMsg();
// 에러
// console.log(localMsg);

// 에러
//childPrintMsg();

함수의 리턴값

다른 언어와 마찬가지로 자바스크립트 함수에도 리턴값은 존재합니다.

리턴타입은 가변으로 할 수 있지만 리턴이 없을경우에는 기본적으로 undefined를 리턴합니다.

함수의 종류

Declaration Function(선언형 함수)

흔히 일반적으로 알고있는 기본 함수의 형태입니다.

함수를 호출하지 않으면 실행하지 않습니다.

Hoisting이 가능합니다. (선언 전에 사용 가능)

// 함수 작성 전에 사용을 해도 에러가 안남
print();

function print() {
    console.log("Hello");
}

print();

Expression Function(표현형 함수)

함수가 선언과 동시에 변수에 할당됩니다.

Hoisting이 불가능합니다.

변수로 할당된 이름을 변경 할 수 있습니다.

Anonymous Function

표현형 함수를 쓰면서 함수에 이름이 없을 경우를 의미합니다.

const anPrint = function() {
    console.log('anPrint');
}

anPrint();

// 함수명 변경
const anPrintRe = anPrint;
anPrintRe();

Named Function

표현형 함수를 쓰면서 함수명을 정의하는 경우를 의미합니다.

const naFunction = function naPrint () {
    console.log('Named Function');
}

naFunction();

 

 

Arrow Function

함수를 심플하게 사용하려고 할 경우 해당 함수를 많이 씁니다.

중간에 화살표 기호가 들어가서 Arrow Function이라고 합니다.

const simplePrint = () => console.log('Arrow Function');
simplePrint();

CallBack함수

함수를 호출할때 조건을 보고 조건에 맞으면 다른 함수 파라미터를 호출하는 함수를 Callback함수라고 합니다.

// Callback함수
function randomQuiz(answer, printYes, printNo) {
    // 조건에 따라 파라미터로 받은 함수를 호출
    if(answer === 'test1') {
        printYes();
    }
    else {
        printNo();
    }
}

const yesFunction = function () {
    console.log('Yes');
}

const noFunction = function noPrint () {
    console.log('No');
}

// 파라미터에 함수를 넣는다
randomQuiz('test', yesFunction, noFunction);
randomQuiz('test1', yesFunction, noFunction);

IIFE(Immediately Invoked Function Expression)

함수를 선언과 동시에 바로 실행하고 싶을 때 사용하는 방식입니다.

(function Hello() {
    console.log('IIFE!');
})();

이상으로 간단하게 자바스크립트 함수에 대해서 정리하는 시간을 가져보았습니다.