[자바스크립트] 함수의 종류 알아보기

사용자 정의 함수(function)
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미하며,

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

---

첫번째 함수 - 1

이름만 있는 함수

1. 함수 만들기_func1이라고 함수 이름을 주고 안에 실행 할 문장 작성.

2. 호출되기 전에 선언하기.

<script>
      function func1() {
        console.log("func1 호출되었습니다.");
      }

      function func2() {
        console.log("func2 호출되었습니다.");
      }
      func1();
      func2();  //호출되기 전에 선언되어여 함
</script>

 

첫번째 함수 - 2

표현식 함수 만들기

func2라는 함수 이름 만들기

const func2 = function () {
        console.log("func2 호출되었습니다.");
};
      
func2();   //호출되기 전에 함수를 만들어야 함

 

---

두번째 함수 - 1

매개변수가 있는 함수

함수명(값1, 값2 ... )이 매개변수1, 매개변수2에 각각 복사가되고 저장이 됨.

다시 말해, 값1=매개변수, 값2=매개변수2 복사+저장

- 함수 선언식
function 함수명(매개변수1, 매개변수2 ..){
    함수가 호출되었을 때 실행할 문장;
    ...
}

- 함수 표현식
const 함수명 = function(매개변수1, 매개변수2 ..){
    함수가 호출되었을 때 실행할 문장;
    ...
}

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

 

위에 내용을 예를 들어보자

선언식으로 만들어보기

1. func1이름의 함수를 만들고 변수(num)을 입력

2. 호출됨 함수에 10을 넣고 전달해서, 전달 받은 10은 변수 (10)에 저장, { } <= 안으로 들어와 ${10}을 출력.

function func1(num) {
        console.log(`전달받은 매개변수는 ${num}입니다.`);
}
func1(10);

만약 func1(5)를 넣으면 차례대로 출력되는걸 확인.

 

이번엔 파라미터 두개짜리를 보내보기

차례데로 해석을 해보면

1. (start, end) 두개를 전달하고

2. 변수 let sum = 0 을 저장하고

3. 반복문으로 들어와 변수를 넣고, i = start부터 i <= end까지(i가 end보다 작거나 같으면) i 증감 연산자(+1)

4. sum에 i를 더한 값을 다시 sum에 넣기(sum의 값 누적시키기)

(1=start 부터, 100=end 까지)

function func2(start, end) {
        let sum = 0;
        for (let i = start; i <= end; i++) {
          sum += i;
        }
        console.log(`${start}부터 ${end}까지의 총합은 ${sum}입니다.`);
      }
      func2(1, 100);

 

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

값을(5, 3)으로 했으니 5 + 3 = 8이 출력이 되어 나오지만,

function func3(num1 = 1, num2 = 1) {
        console.log(`${num1} + ${num2} = ${num1 + num2}`);
        console.log(`${num1} - ${num2} = ${num1 - num2}`);
        console.log(`${num1} * ${num2} = ${num1 * num2}`);
        console.log(`${num1} / ${num2} = ${num1 / num2}`);
}

func3(5, 3);

값을 주지 않았을 경우에는 num1, num2가 기본값 1로 저장이 되서 계산되어 나온다.

 

- 나머지 매개변수

매개변수가 여러개인 경우, 첫번째와 두번째는 각자 값을 받지만 나머지 매개변수는 배열로 받는다는 의미.

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

function 함수명(매개변수1, 매개변수2, ...매개변수3){
    함수가 호출되었을 때 실행할 문장;
    ...
}
함수명(10, 20, 30, 40, 50, 60, 70);

예를 들어보면, 

세번째 부터는 값이 배열로 한꺼번에 들어간걸 볼 수 있다.

function func4(num1, num2, ...num3) {
        console.log(`num의 값 : ${num1}`);
        console.log(`num의 값 : ${num2}`);
        console.log(`num의 값 : ${num3}`);
}
func4(100, 90, 80, 70, 60, 50);

 

또 다른 예로 데이터를 한꺼번에 싹 보내면 배열로 받으니까, 배열을 가지고 for문 을 돌리면

(데이터가 따로 따로 있을 때 통째로 넘기기)

function func5(...jumsu) {
        for (let i of jumsu) {
          console.log(i);
        }
      }
func5(100, 90, 80, 70, 60);

---

함수 만드는 방법 중 3번째(많이 쓰이면서 헷갈리는 부분)

 - 리턴값이 존재하는 함수

 

1. (값1, 값2..)가 (매개변수1, 매개변수2)로 들어가서 함수를 호출하는 문장 실행을 하고

2. return 값으로 와서 값이 다시 함수명으로 들어가 상수로 저장이 된다.

3. 호출을 하게 된다면 consol.log( )안에 상수가 들어가게 되는 것 

function 함수명(매개변수1, 매개변수2 ..){
    함수가 호출되었을 때 실행할 문장;
    ...
    return 값;
}

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

 

위에 리턴 함수를 예제를 보면서 이해해보기

1. getHello( )함수를 만들고

2. consol.log(getHello ( ) ) 출력

3. 다시 return으로 가서 "Hello : )"가 getHello( )로 들어가서 msg에 저장

4. consol.log(msg)에 넣어서 "Hello : )" 출력

function getHello() {
        return "Hello :)";
}

console.log(getHello());
const msg = getHello();
console.log(msg);

 

이번엔 함수가 실행 될 때 consol이 찍혀 나오는게 아니라, return이 되서 값이 계산되어 나오는걸 예시로 들어보기.

 

1. getSum이라는 함수를 호출하면서 getSum(10, 3) => (num1, num2)로 들어가서

2. num1 + num2 = 10 + 3으로 계산해서

3. return을 하라고 했으니까 더해진 값을 불러준 getSum()쪽으로 돌아와서

4. sum에 저장

5. sum을 활용하기

function getSum(num1, num2) {
        return num1 + num2;
}

const sum = getSum(10, 3);
console.log(sum);

---

생각해볼 점 :  이 두개의 차이점

function func2(start, end) {

let sum = 0;

for (let i = start; i <= end; i++) {

sum += i;

}

console.log(`${start}부터 ${end}까지의 총합은 ${sum}입니다.`);

}

function getSum(num1, num2) {

return num1 + num2;

}

결과만 가져오고 출력하고 싶은 텍스트는 처음꺼 같은 경우에 함수를 계속 만들어야 하므로

두번째 return함수를 많이 쓴다인데 (계산만 딱 해서 돌아오게, 그걸 받은데서 UI를 만들면 되니)

 

console.log(`${start}부터 ${end}까지의 총합은 ${sum}입니다.`)

이 부분을 총합이 아니라 다른걸로 표현하고 싶다면 다시 뜯어 고쳐야 한다.

그러므로 함수는 최대한 결과만 뽑아내서 쓰고 싶을 때 UI를 만들어 주는게 맞는 방법!!

---

문제

 

두 수를 입력받아 덧셈, 뺄셈, 곱셈, 나눗셈을 계산하는 프로그램을 작성
(단, 함수는 연산 각각 작성, 모두 return 타입으로 작성)

예시
첫번째 숫자를 입력하세요 10
두번째 숫자를 입력하세요 5

10 + 5 = 15
10 - 5 = 5
10 * 5 = 50
10 / 5 = 2

.

.

.

1. 리턴 함수를 만들고

2. 점수를 입력받을 명령 프롬프트에 상수 저장

3. 계산되어 나오는 result변수 만들고

4. 콘솔에 계산되어 나오게 찍히기

(let result는 한번만 선언 해주기)

function plus(num1, num2) {

return num1 + num2;

}

function minus(num1, num2) {

return num1 - num2;

}

function mul(num1, num2) {

return num1 * num2;

}

function div(num1, num2) {

return num1 / num2;

}

const num1 = Number(prompt("첫번째 숫자를 입력하세요."));

const num2 = Number(prompt("첫번째 숫자를 입력하세요."));

let result = plus(num1, num2);

console.log(`${num1} + ${num2} = ${result}`);

 

result = minus(num1, num2);

console.log(`${num1} - ${num2} = ${result2}`);

 

result = mul(num1, num2);

console.log(`${num1} * ${num2} = ${result3}`);

 

result = div(num1, num2);

console.log(`${num1} / ${num2} = ${result4}`);

---

마지막으로 화살표 함수(node, react를 배울때 많이 나오는 함수)

function 키워드를 사용하여 함수를 만드는 것보다 간단하게 표현합니다.(화살표 함수는 항상 익명임)

화살표 함수로 표현 - 문법
const func1 = () => console.log('안녕하세요, JavaScript!');

1. 매개변수가 없는 함수

const func1 = function( ) {

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

 

1-1. 매개변수가 없는 함수를 화살표 함수로 표현

(중괄호가 없이 표현이 가능하다는건 아님)

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

 

2. 매개변수가 있는 화살표 함수

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

 

3. 리턴값이 있는 화살표 함수

const func3 = (x, y) => {
    let sum = 0
    for(let i=x; i<=y; i++){
        sum += i
    }
    return sum
}

1. 3부터 10까지의 합계 sum으로 리턴 합계된 결과가 return으로 들어감.