argument/rest parameter/익명함수/즉시실행함수/화살표함수/함수스코프

매개변수 없이 함수에 전달된 값 받아오기 

함수 정의문에서 arguments를 사용하면 매개변수를 사용하는 것처럼 함수의 인수값을 받아올 수 있다. 

arguments는 전달된 인수를 배열에 담아 저장한다. 

하지만 arguments의 배열은 배열처럼 생겼지만 실제로 배열은 아니다. 

이렇게 배열처럼 생겼지만 배열은 아닌 배열들을 '유사 배열' 또는 'array-like'이라고 부른다.

 

이렇게 인수의 갯수를 알 수 없는 가변 인자 함수의 경우  arguments 객체를 통해 인수를 확인할 수 있고

인수는 유사배열 안에 순차적으로 저장된다.

 

가변인자함수는 매개변수를 통해 인수를 전달받는 것이 불가능하므로 arguments객체를 통해 인수를 전달받는다.

하지만 arguments는 유사배열이라서 배열의 메서드를 사용하려면 "Function.prototype.call"을 사용해야하는 번거로움이 있다. 

 

[기본형]

function 함수명(){

   arguments; //[인수1, 인수2, 인수3...]

}

 

함수명(인수1, 인수2, 인수3...)

<script>

      function myFnc() {

        arguments; //유사배열안에 인수들을 모두 참조한다.

        //arguments[0] : argument의 0번 인덱스의 데이터 꺼내기

        console.log(arguments[0]);

        //메서드를 사용할 경우

        let arr = Array.prototype.slice.call(arguments);

        console.log(arguments);

      }

      myFnc(1, 2, 3, 4, 5, 6, 7, 8);

    </script>

---

Rest parameter : 나머지 매개변수

Rest parameter는 매개변수 앞에 세 개의 점(...)을 붙여서 정의한 매개변수를 말한다.

Rest parameter는 함수에 전달된 인수의 목록을 배열로 전달받는다.

 

... 쩜쩜쩜이 Rest parameter의 문법이다!

 

[기본형]

function 함수명(...rest){

   매개변수; //[인수1, 인수2, 인수3, 인수4...]

}

 

함수명(인수1, 인수2, 인수3, 인수4...)

 

rest  parameter로 고정된 인수와 가변인수 함께 받아오기

함수에 전달된 인수들은 parameter와 restparameter에 순차적으로 할당된다. 예를 들어 함수를 실행할 때마다 어떤 값은 고정으로 받아야 하고 어떤 값들은 가변인수로 받아올 수도 있고 안 받아올 수도 있을 때 rest parameter를 사용하면 편리하게 쓸 수 있다.

 

rest parameter는 이름 그대로 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수들이 모두 배열에 담긴다.

그래서 rest parameter는 반드시 마지막 parameter여야한다.

또 rest parameter는 함수를 정의했을 때 선언한 매개변수의 개수를 나타내는 함숙색체의 length property에 영향을 주지 않는다. 

 

[기본형]

function 함수명(매개변수1, ...rest){

   매개변수; //[인수1, 인수2, 인수3, 인수4...]

}

 

함수명(인수1, 인수2, 인수3, 인수4...)

 

<script>

      //rest파라미터로 인수값 배열로 받아오기

      function myFnc(...rest) {

        console.log(rest);

      }

      myFnc(1, 2, 3, 4, 5, 6, 7);

      console.log('myFnc의 매개변수 개수 : ', myFnc.length);

      //고정된 인수와 나머지 인수를 rest파라미터로 받기

      function myFnc2(param, ...rest) {

        console.log('고정된인수 : ', param);

        console.log('나머지인수 : ', rest);

      }

      myFnc2(1);

      myFnc2(1, 2);

      myFnc2(1, 2, 3, 4, 5, 6, 7);

      console.log('myFnc2의 매개변수 개수 : ', myFnc2.length);

    </script>

 

💡예제_function05.html💡

사용자에게 국어와 수학 점수를 묻고 평균 값을 구하는 함수 

 let arrSubject = ['국어', '수학', '사회', '영어', '과학'];

      let avg = testAvg(arrSubject); //인수로 배열을 전달

      //arrData가 배열 인수를 받아옴

      function testAvg(arrData) {

        let sum = 0;

        for (let i = 0; i < arrData.length; i++) {

          sum += Number(prompt(arrData[i] + '점수는?'));

          //sum = sum + 국어점수

          //sum = sum + 수학점수

        }

        let result = sum / arrData.length; // result = 합산점수 / 과목갯수

        return result;

      }

      document.write('평균 점수는 ' + avg + '점 입니다.');

    </script>

---

함수 표현식 

앞에서 배운 일반함수는 함수명을 선언하고 그 이름을 사용해 호출한다. 

이 방법은 함수의 이름만 알면 어디서나 호출하여 실행할 수 있어 많이 사용하는 방법이다. 

이 밖에도 함수 이름을 지정하지 않고 사용하거나, 함수를 호출하지 않고 바로 실행하는 방법도 있다.

함수표현식의 종류는 익명함수, 즉시실행함수,  ES6버전 최신문법인 화살표함수가 있다.

---

익명함수 

이름이 없는 함수. 즉, 익명함수를 선언할 때에는 함수명을 짓지 않는다.

그 대신 이름을 대신해줄 변수에 참조하여 변수명으로 호출할 수 있다. 

 

[기본형]

let 변수명 = function(){코드...};

 

변수명();    ←함수호출

 

즉시 실행함수

일반적으로 함수는 선언하고 필요할 때마다 호출해서 실행하는 방법을 많이 사용한다.

하지만 한번만 실행하는 함수라면 함수를 정의하면서 동시에 실행시킬 수 있다.

즉시실행함수는 함수를 실행하는 순간 자바스크립트 해석기에서 함수를 바로 해석한다.

 

[기본형]

    (function(){}())

(function(매개변수){

   자바스크립트 코드;

}(인수));

 

<script>

      let sum = function (a, b) {

        //익명함수 선언

        return a + b;

      };

      document.write('함수 실행결과 : ' + sum(10, 20), '<br>'); //익명함수 실행

      //즉시실행함수

      (function () {

        //let userName = prompt('이름을 입력하세요');

        document.write('안녕하세요. 제 이름은 ' + '김댕땡' + '입니다.');

      })();

      //두개의 함수명이 같을때 지역변수와 지역함수를 선언하여 함수 충돌 방지하기

      //개발자 A

      (function () {

        let num = 100;

        function menu() {

          num += 100;

          alert(num);

        }

        menu();

      })();

      //개발자B

      (function () {

        let num = 100;

        function menu() {

          alert(num);

        }

        menu();

      })();

    </script>

---

화살표 함수

ES6버전부터는 => 화살표 표기법을 사용하여 함수 선언을 좀 더 간단하게 작성할 수 있다. 

=> 가 function 키워드를 대신한다고 생각하면 된다. 

보통 '화살표 함수'라고 부르고 익명함수에서만 쓸 수 있다. (이름이 있는 일반함수에서는 못 쓴다.)

 

[기본형]

1.매개변수가 없을 경우

let 변수명 = () => [자바스크립트 코드;]

 

2.매개변수가 1개인 경우 매개변수 자리에 ()를 생략할 수 있다. 

let 변수명 = 매개변수 => [자바스크립트 코드;]

 

3.매개변수가 2개 이상인 경우 ()생략이 불가능

let 변수명 = (매개변수1, 매개변수2) => [자바스크립트 코드;]

 

4. 실행할 자바스크립트가 1줄인 경우 {}생략 가능. 이 때 return도 생략된 걸로 간주한다. 

let 변수명 = () => 자바스크립트 코드;

 

   <script>

      //일반 익명함수

      let name1 = function () {

        document.write("안녕하세요 제 이름은 김땡땡입니다.", "<br />");

      };

      name1(); //함수 실행 시 호출문은 <변수명();>

      //화살표함수(매개변수 없을 때)

      let name2 = () => {

        document.write("안녕하세요. 제이름은 이땡땡입니다.", "<br />");

      };

      name2();

      //화살표함수(매개변수 1개일 때)

      let name3 = (name) => {

        document.write("안녕하세요. 제이름은 " + name + "입니다.", "<br />");

      };

      name3("최땡땡");

      //화살표함수(매개변수가 2개 이상일 때)

      let name4 = (name, area) => {

        document.write("안녕하세요. 제이름은 " + name + "입니다.", "<br />");

        document.write("사는 곳은 " + area + "입니다.", "<br />");

      };

      name4("박땡땡", "서울");

      // //rest parameter사용 시

      // let name4 = (...rest) => {

      //   document.write("안녕하세요. 제이름은 " + rest[0] + "입니다.", "<br />");

      //   document.write("사는 곳은 " + rest[1] + "입니다.", "<br />");

      // };

      // name4("박땡땡", "서울");

      //실행시킬 코드가 1줄인 경우

      let sum = (a, b) => a + b; //{return a+b}에서 {return}생략 가능.

      sum = sum(5, 8);

      document.write(sum);

    </script>

 

함수 스코프

 

함수의 스코프란 함수가 선언된 위치에 따라 '전역' 또는 '지역'으로 나눠지는 유효범위를 뜻한다.

함수레벨 스코프 - 블록레벨 스코프 

 

[기본형]

<script>

    function 함수명1(){코드;} //<-전역함수

    function 함수명2(){ //<-전역함수

      function 함수명1(){ //<-지역함수

        자바스크립트코드;

      }

      함수명1(); //<-지역함수 함수명1을 실행하는 호출문

    }

    함수명2(); //<-지역함수를 호출하기 위해 함수명2가 먼저 실행되어야 한다.

  </script>