코딩/Javascript

자바스크립트 함수의 모든 것!

우당당쿵당콩탕 2023. 2. 27. 19:35
728x90
반응형

자바스크립트의 함수

자바스크립트의 함수는 하나의 작업 또는 여러 작업을 수행하는 코드로 익명 함수, 매개 변수, 리턴 함수 등이 있습니다. 

오늘은 그 함수들에 대해서 알아보겠습니다.

 

선언 함수 - 함수의 기본 문법

{
    function func(){
        document.write("실행되었습니다.");
    }
    func(); //실행문
}

가장 대중적인 방법으로 함수의 이름은 'func'이 됩니다. *호이스팅이 되기 때문에 이 함수는 어느 스코프에서는 호출 할 수 있는 함수가 됩니다.

호이스팅이란?

함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것.

익명 함수

 {
    const func = function(){
        document.write("익명함수");
    }
    func(); // func()가 실행문
}

익명 함수는 함수를 정의할 때 함수 이름을 생략하고 작성하는 함수입니다.

즉, 함수 이름 대신에 function 키워드와 함께 매개변수와 코드 블록을 작성하는 것입니다.

 

매개변수 함수

{
    let str = "실행되었습니다.<br>";
    function func(str){
        document.write(str);
    }// 함수선언
    func(str);
}	 // 함수 호출

{
    function func(str){
        document.write(str);
    } // 함수선언
    func("실행되었습니다.<br>");
}     // 함수 호출

 

함수에는 매개변수(parameter)와 인자(argument)가 있습니다.

매개변수는 함수를 선언할 때 주는 값이고, 인자는 함수를 호출할 때 입력하는 실제 값입니다.

function abc(a,b){ // 괄호 안의 ab가 매개변수이다
	document.write(a+b);
  }

abc(3, 1); // 3,1이 인자이며 결과값은 4

리턴( 결과 / 끝 ) 함수

{
    function func(){
        const str = "실행되었습니다."; // 함수가 변수안에 있는 것
        return str;
    }
    document.write(func());
}

return 함수의 결괏값을 돌려주는 명령어입니다. 함수는 입력값을 받아 어떤 처리를 한 후에 결괏값을 돌려주는 형태이기 때문인데요. 함수에서는 결괏값을 오직 return 명령어로만 돌려받을 수 있습니다.

만약 결괏값이 없는 경우라면 반환값으로 None을 출력할 것입니다.

 

화살표 함수

위에서 배운 함수표현 식들을 보다 단순하고 간결한 문법으로 만들 수 있는 방법이 있습니다.

바로 화살표 함수 인데요. 화살표 함수 라는 이름은 문법의 생김새를 차용해 지어졌습니다.

 {
    func = () => {
        document.write("실행되었습니다.<br>");
    }
    func();
}
// 선언함수의 약식

 {
    const func = () => {
        document.write("실행되었습니다.<br>");
    }
    func();
}
// 익명 함수의 약식

{
    func = (str) => { 				//str이라는 변수를 만든것
    document.write(str);
    }
    func("실행되었습니다.<br>");
}
// 매개변수 함수의 약식

{
    func = () => {
        const str = "실행되었습니다.<br>";
        return str; 
    }
    document.write(func());
}    
// 리턴 함수의 약식

보시다 시피 =과 >을 이용하여 축약하는 방식입니다. 기존에 있던 function를 삭제하고 화살표만 사용합니다.

축약된 방식으로 편리하고 가독성이 좋습니다.


오늘 이렇게 함수와 표현 방식에 대해서 알아보았습니다!

공부 화이팅!!