[Javascript] 함수

자바스크립트에서 함수는 소스코드의 집합으로 메소드, 모듈, 기능, 프로시저 등을 말하며, 자바스크립트에서는 function 자료형이다. 함수는 인자/매개변수, 리턴값을 가질 수 있다.

function 키워드에 함수명을 작성하여 사용하는방법(선언적함수)과 function에 함수명 작성하지않고 변수에대입하는방법(익명함수), 그리고 호출없이 바로 사용하는 스스로 동작하는 함수가 있다. 

 

1. 함수 선언

1) 선언적 함수

function 함수명([매개변수]){
	처리로직;
	[return 되돌려줄값;]
}

2) 익명함수

이벤트 핸들러에서 주로 사용된다.

varf1 = function ([매개변수]){
		처리로직;
		[return 되돌려줄값;]
	}
    
    
<button id = "btn2">실행확인 </button>
<p id="p2"></p>
<script>
    var btn2 = document.getElementById("btn2")

    btn2.onclick = function(){
        document.getElementById("p2").innerHTML = "이벤트 핸들러를 통해 함수실행됨"
    }
</script>

• 버튼의 요소를 받아서 btn2에 저장하고 .onclick메소드로 버튼이 클릭되었을 때 실행될 익명함수 작성

 

3) 스스로 동작하는 함수

(function(){
	처리로직
})();

 

 2. 함수 호출

함수는 반드시 선언이 되어야만 실행이 가능하다. 원하는 기능에 대한 함수를 호출하는 것을 함수 실행이라고 부르며 return값이 있다면 리턴 값을 받을 변수가 있어야 한다.

return 값이없는경우
	함수명();
	함수명(인자값1, 인자값2, …);
return 값이있는경우
	var변수명= 함수명();
	var변수명= 함수명(인자값1, 인자값2, …);

 

3. 매개변수

1) arguments : 모든 함수는 내부에 arguments라는 배열을 자동으로 생성하여 매개변수를 저장한다. 

    <button onclick="test5(11,22,33,1,2,6)">실행확인</button>
    <p id="p5"></p>
    <script>
        function test5(){
            console.log(arguments)
            console.log(arguments.length)

            var sum = 0;
            for(var i=0; i<arguments.length; i++){
                sum += arguments[i]
            }
            document.getElementById("p5").innerText = "더하기 결과 : "+sum;  //innerText : 문자열만 넣을 때
        }
    </script>

console.log(arguments)

2) 매개변수 함수에 this요소 전달하기

매개변수에 this를 넣어서 자신의 요소를 전달할 수도 있다.

• 버튼1 매개변수 : this                   ==> <button onclick="testFn(this);">버튼1</button>
• 버튼2 매개변수 : this.innerHTML    ==> 버튼2
• 버튼3 매개변수 : this.value            ==> 버튼3

    <button onclick="testFn(this);">버튼1</button>
    <button onclick="testFn(this.innerHTML);">버튼2</button>
    <input type="button" onclick="testFn(this.value);" value="버튼3">

    <script>  //element 아니고 v 적어도 된다.
        function testFn(element){
            console.log(element)
        }
    </script>

결과

 

4. 함수의 리턴

1) 익명함수를 리턴하는 함수

• test7()함수는 익명함수를 리턴하는 함수이다.
• id가 btnTest인 버튼을 클릭할 경우 btnTest.onclick()함수가 실행된다.
  따라서 test7()함수가 실행이 되므로 익명함수가 리턴된다.
• console.log(test7())는 아래와 같으므로 익명함수가 리턴된 것을 확인할 수 있다.
  ƒ (){
            alert(userName + "님 환영합니다.")
        }

    이름 : <input type="text" id="name">
    <button onclick="test7()()"> 실행확인</button>  
    <button id="btnTest">익명함수 리턴 확인</button>  
    <script>
        function test7(){

            var userName = document.getElementById("name").value
            return function(){
                alert(userName + "님 환영합니다.")
            }
        }

        btnTest.onclick = ()=>{
            console.log(test7())
        }
    </script>

 

2) 호이스팅

함수와 변수는 코드를 실행하기 전에 실행될 내용을 메모리에 저장하는데 이것을 호이스팅이라고 한다.

• 함수는 전체 함수에 대한 참조와 함께 저장된다.
  따라서 호출보다 함수의 선언식이 아래에 있어도 호이스팅이 일어나서 참조가 가능하다.
• var 변수/함수 : 선언은 호이스팅이 되지만 값을 할당하는 것은 호이스팅이 되지 않는다.  따라서 undefined로 저장된다.
• let, const 변수 : 호이스팅이 발생하지 않아서 ReferenceError: Cannot access 'name11' before initialization 에러를 발생시킨다.

    <button onclick="test6()()"> 실행확인</button>  
    <P id="p6"></P>
    <script>
        function test6(){

            alert(test11);
            var test11 = 5;  //undefined -> 선언만 호이스팅되고 할당은 안됨
            let name11 = "test5"  //var 제외한 변수는 호이스팅안됨

            var p6 = document.getElementById("p6")
            var value = returnFunction();
            p6.innerHTML = value;
          
            //1. 함수 선언식 -> 호출보다 아래에 있어도 위로 끌어올려지는(호이스팅)이 일어나서 제대로 호출이 된다.
            function returnFunction(){
                return Math.floor(Math.random()*100)+1
            }

            //2. 함수표현식 -> 같은 함수 내에서는 (호이스팅)이 일어나지 않아서 제대로 호출이 되지 않는다.
            //이 함수 밖에 적으면 전역처럼 먼저 읽혀져서 밖에 적으면 가능하다.
            /*
            var returnFunction = function(){
                return Math.floor(Math.random()*100)+1
            }
            */
        }
    </script>

 

5. Array.prototype.map()

map() 메서드는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환한다.

• 반환값 : 배열의 각 요소에 대해 실행한 callback의 결과를 모은 새로운 배열
  (각 배열의 요소마다 callback실행한다!)

arr.map(callback(currentValue[, index[, array]])[, thisArg])

매개변수로 다음 인수들을 갖는 callback함수를 가진다.

1. currentValue : 처리할 현재 요소
2. [optional]  index : 처리할 현재 요소의 인덱스
3. [optional]  array : map()을 호출한 배열
4. [optional]  thisArg : callback을 실행할 때 this로 사용되는 값

 

6. 화살표함수

화살표 함수는 ES6문법으로 function키워드를 사용해서 함수를 만든 것보다 간단하게 표현할 수 있다.

그리고 화살표 함수는 항상 익명함수이다.

// 매개변수 지정 방법
    () => { ... } // 매개변수가 없을 경우
     x => { ... } // 매개변수가 한 개인 경우, 소괄호를 생략할 수 있다.
(x, y) => { ... } // 매개변수가 여러 개인 경우, 소괄호를 생략할 수 없다.

// 함수 몸체 지정 방법
x => { return x * x }  // single line block
x => x * x             // 함수 몸체가 한줄의 구문이라면 중괄호를 생략할 수 있으며 암묵적으로 return된다. 위 표현과 동일하다.

() => { return { a: 1 }; }
() => ({ a: 1 })  // 위 표현과 동일하다. 객체 반환시 소괄호를 사용한다.

() => {           // multi line block.
  const x = 10;
  return x * x;
};

• var test1 = ( ) => { }
• var test1 = ( ) => console.log('test1');
  
  • 한 줄로 표현할 때는 "{ }"없이 적을 수 있다.

        /*function test1(){
            var p1 = document.getElementById("p1")
            p1.innerHTML = "test1()함수를 실행"
        }*/

        //매개변수 없을 때 ()축약형
        const test1 = ()=>{  
            var p1 = document.getElementById("p1")
            p1.innerHTML = "test1()함수를 실행"
        }

 

 

 

참고 및 출처

1. kh정보교육원 강의자료

2. https://velog.io/@hoo00nn/%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85Hoisting-%EC%9D%B4%EB%9E%80

3. https://poiemaweb.com/es6-arrow-function