[JavaScript] 자바스크립트 함수 선언(사용)하기 (function)
2021. 5. 3. 01:05ㆍProgram/JavaScript
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
아케다 야스노부, 카노 타케시 지음 / 이춘혁 옮김
'Program > JavaScript' 카테고리의 다른 글
[JavaScript] 자바스크립트 함수의 파라미터(인수) 초기값 설정하기 (0) | 2021.05.03 |
---|---|
[JavaScript] 자바스크립트 화살표 함수(Arrow Function) 사용하기 (0) | 2021.05.03 |
[JavaScript] 자바스크립트 복합형(축약형) 대입 연산자 사용하기 (0) | 2021.05.03 |
[JavaScript] 자바스크립트 두 개의 값 비교하기 (비교 연산자) (0) | 2021.05.03 |
[JavaScript] 자바스크립트 주석(코멘트) 삽입(추가)하기 (0) | 2021.05.02 |