[JavaScript] 자바스크립트 함수 선언(사용)하기 (function)

010 _ 자바스크립트 함수 선언(사용)하기 (function)

[적용]

• 처리 작업을 하나로 모아 이름을 지정하고 싶을 때
• 처리 작업을 반복하여 재사용하고 싶을 때

---

[내용]

함수는 들어온 값을 처리하고 그 결과를 반환하는 구조이다.

function으로 함수를 정의하고 함수명을 정의할 수 있으며, { } 블록 안에 처리할 내용을 입력한다.

함수에 전달되는 값을 파라미터(인수)라고 한다.

---

[문법]

구문	의미
function 함수명(파라미터) {처리내용}	함수를 정의
return 값	함수 내부에서 처리한 값을 반환
함수명();	함수를 실행

---

[예시1]

입력 a에 대해 a + 2의 결과를 반환하는 함수를 만들어 보자.

 

JavaScript

function myFunction(a) {
    const result = a + 2;
    return result;
}

myFunction(1);  // 결과: 3을 return값으로 반환

---

[예시2]

파라미터의 개수는 제한이 없으며, 콤마(,)로 구분하여 전달한다.

 

JavaScript

function calcSum(a, b, c) {
    const result = a + b + c;
    return result;
}

calcSum(1, 2, 3);  // 결과: 6을 return값으로 반환

---

[예시3]

전달되는 파라미터가 없는 함수를 만들 수도 있다.

전달할 파라미터가 없으면 () 안에는 아무것도 입력하지 않는다.

 

JavaScript

function myFunctiion() {
    console.log('안녕하세요');
    return 100;
}

myFunctiion();  // 결과: console에 '안녕하세요'를 출력하고 return값으로 100을 반환

---

[예시4]

반환값이 없는 경우는 반환값 자체를 생략할 수도 있다.

전달할 파라미터가 없으면 () 안에는 아무것도 입력하지 않는다.

 

JavaScript

function myFunctiion() {
    console.log('안녕하세요');
}

myFunctiion();  // 결과: console에 '안녕하세요'를 출력하고 return값은 없으므로 반환하지 않는다.

---

[예시5]

return 구문으로 함수가 종료되기 때문에 return의 아랫부분은 코드를 입력해도 실행되지 않는다.

 

JavaScript

function myFunctiion() {
    return 100;
    console.log('안녕하세요');
}

myFunctiion();  // 결과: return값으로 100을 반환하고 return구문 이하의 값은 실행되지 않는다.

---

[예시6]

하나의 함수 내에서 return 구문은 조건에 따라 몇 번이라도 사용하여 조건에 따라 반환값을 다르게 처리하는 기능하다.

다음 예문은 a가 100 이상이면 return a가 실행되고 return b는 실행되지 않는다.

하지만 a 가 100 미만이라면 return b만 실행된다.

 

JavaScript

function myFunction(a, b) {
    // a가 100 이상이라면 a를 반환
    if (a >= 100) {
        return a;
    }
    
    // a가 100 미만이라면 b를 반환
    else {
        return b;
    }
}

---

[예시7]

정의한 함수를 실행하기 위해서는 함수명 뒤에 ()를 붙인다.파라미터가 있다면 ()안에 적는다.

 

JavaScript

function calcFunction(price, tax) {
    const result = price + ( price * tax );
    return result;
}

// 함수를 실행하고 반환값을 myResult에 대입한다.
const myResult = calcFunction(100, 0.1);  // price = 100, tax = 0.1을 파라미터값으로 입력했다.
console.log(myResult);  // 결과: 110

---

 

 

 

 

 

참조 :
실무에 바로 적용하는 자바스크립트 코드레시피 278
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김