[자바스크립트] 사용자 정의 함수(function) 설명과 종류, 사용방법

1) 사용자 정의 함수 설명

- 하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미

- 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행하기 때문에 코드를 재활용할 수 있다.

 

1. 함수 선언식
function  함수명(매개변수1, 매개변수2, ...){
   ...
   return 리턴값;
}

2. 함수표현식
const 함수명 = function(매개변수1, 매개변수2, ...){
   ...
   return 리턴값;
}

 

- 자바스크립트는 함수를 변수에 저장할 수 있다.

- 자바스크립트는 script 태그를 만나면 자바스크립트 파일을 먼저 읽고

   선언된!! 함수를 먼저 메모리에 저장하고 초기화는 나중에 한다. -> 호이스팅

 

* 호이스팅이란?

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

- 자바스크립트 함수는 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효범위의 최상단에 선언한다.

- 호이스팅 대상은 var변수, 함수 선언식만 호이스팅이 일어난다.

- 자바스크립트 변수를 명확하게 쓰려면 호이스팅이 일어나지 않는게 좋다.

 

2) 사용자 정의 함수 - 이름만 존재하는 함수

 

function 함수명( ){

   함수가 호출되었을 때 실행할 문장;

   ...

} ---▶ .js파일로 저장함

function func1(){
    console.log('func1 함수 호출!');
}

함수 호출 방법 ==> 함수명( );

---▶ .html파일에서 실행함 / <script src="./js/script.js"></script> 외부파일 연결

 

3) 사용자 정의 함수 - 매개변수가 있는 함수

 

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

  함수가 호출되었을 때 실행할 문장;

   ...

}

function func2(num){
    console.log(`전달받은 매개변수의 값 : ${num}`);
}

함수 호출 방법 ==> 함수명(값1, 값2, ...);

 

4) 사용자 정의 함수 - 디폴트 매개변수

- 매개변수를 정하지 않으면 대신 기본값을 변수에 저장

 

function 함수명(매개변수1=값1, 매개변수2=값2, ...){

  함수가 호출되었을 때 실행할 문장;

   ...

}

function func4(name='무명'){
    console.log(`강아지의 이름은 ${name}입니다.`);
}

함수 호출 방법1 ==> 함수명( ); 

함수 호출 방법2 ==> 함수명(값1, 값2, ...);

 

▼실행 결과 ==> 매개변수를 넣지 않으면 default로 정해준 값으로 저장된다.▼

 

5) 사용자 정의 함수 - 나머지 매개변수

- 생략 접두사(...)를 사용하여 특정 위치의 인수부터 마지막 인수까지 한번에 지정

 

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

함수가 호출되었을 때 실행할 문장;

   ...

}

function func5(num1, ...num2){
    console.log(`num1의 값 : ${num1}`);
    console.log(`num2의 값 : ${num2}`);
}

함수 호출 방법 ==> 함수명(값1, 값2, 값3, ...);

 

▼실행 결과▼

 

function func6(...score){
    for(let i of score){
        console.log(i);
    }
}

 

▼실행 결과 ==> 값2부터 마지막 인수까지는 매개변수2에 배열로 저장된다.▼

 

6) 사용자 정의 함수 - 리턴값이 있는 함수

 

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

   함수가 호출되었을 때 실행할 문장;

   ...

   return 값;

}

 

변수(상수) = 함수명(값1, 값2, ...);

 

=> 리턴값이 있는 함수는 값을 변수에 담을 수 있다.

 

7) 사용자 정의 함수 - 화살표 함수

- function 키워드를 사용하여 함수를 만드는 것보다 간단히 표현할 수 있다.

- 화살표 함수는 항상 익명함수이다.

 

const 함수명 = (매개변수1, 매개변수2, ...) => 실행문;

 

함수명(값1, 값2, ...);

 

1. 이름만 있는 함수

function func1( ){

   console.log('안녕하세요!');

}

▼화살표 함수로 변환해보기▼

const func1 = ( ) => console.log('안녕하세요!');

 

    <script>
        'use strict';
        const hello = () => console.log('안녕하세요');
    </script>

▼삼항연산자 사용해보기▼

    <script>
        'use strict';
        const age = Number(prompt('나이를 입력하세요'));
        const isAdult = (age > 18) ? () => alert('성인입니다.') : () => alert('미성년입니다.');
        isAdult();
    </script>

 

2. 매개변수가 있는 함수

▼매개변수가 1개일 때▼

const func2 = x => console.log('매개변수로 전달받은 값 : ${x}`);

▼매개변수가 여러개일 때▼

const func3 = (x,y) => console.log(`두 수의 합 : ${x+y}`);

 

    <script>
        'use strict';        
        const send = (x,y) => console.log(`매개변수로 전달받은 값 : x = ${x}, y = ${y}`);
    </script>

 

3. 리턴값이 있는 함수

const func4 = (x,y) => {

   let sum = 0;

   for(let i=x; i<=y; i++){

       sum += i;

     }

   return sum;

}

 

    <script>
        'use strict';
        const sum = (start,end) => {
            let sum = 0;
            for(let i=start; i<=end; i++){
                sum+=i;
            }
            return sum;
        }
    </script>