# 사용자 정의 함수(function)
하나의 특별한 목적의 작업을 수행하도록 설계된 독립적인 블록을 의미합니다. 함수는 필요할 때마다 호출하여 해당 작업을 반복해서 수행할 수 있습니다.
● 함수 표현하는 방법
1. 함수 선언식
함수명();
function 함수명(){
실행문;
}
예시 )
<head>
<title>사용자 정의함수 - 1</title>
<script src="./js/function.js"></script>
</head>
<body>
<h2>사용자 정의함수 - 1</h2>
<script>
'use strict'
func1();
</script>
</body>function func1(){
console.log('func1 함수가 호출되었습니다.');
}
2. 함수 표현식
const 변수명 = function(){
실행문;
};
변수();
예시 1)
const Hello1 = function(){
console.log('Hello 실행되었습니다.')
};<script>
'use strict'
Hello1();
</script>
예시 2)
<script>
'use strict'
func1();
func1();
func1();
Hello1();
Hello1();
Hello1();
</script>
* 함수 표현식과 함수 선언의 차이점 -> 호이스팅(hoisting)
함수 표현식은 호이스팅이 되지 않고 함수 선언으로 함수는 호이스팅(hoisting)이 됩니다. 즉, 함수가 정의되기 전에 함수를 호출할 수 있습니다.
* 호이스팅(hoisting)이란?
자바스크립트 엔진이 script 태그를 만나면 자바스크립트 파일을 먼저 읽으면서 선언된 변수와 함수를 메모리에 저장합니다. 이 과정이 끝나면 코드가 위에서부터 차례대로 실행되는데 "함수 선언식"으로 만들어진 함수의 경우 메모리에 저장되어 있기 때문에 문제없이 실행되지만 "함수 표현식"으로 만든 함수는 아직 값이 할당되기 전이기 때문에 에러가 발생합니다.
● 매개변수가 있는 함수
1. 함수 선언식 방법
함수명(값1, 값2 ..);
function 함수명(매개변수1, 매개변수2 .. ){
실행문;
}
예시 )
function func2(x){
console.log(`전달된 값 : ${x}`);
}<script>
'use strict'
func2(10);
func2('문자열');
func2(true);
</script>
2. 함수 표현식 방법
const 변수명 = function(매개변수1, 매개변수2 .. ){
실행문;
};
변수명(값1, 값2..)
예시 )
const Hello2 = function(x){
for(let i=1; i<=x; i++){
console.log(`${i} : Hello`);
}
};<script>
'use strict'
Hello2(5);
</script>
● 디폴트 매개변수의 사용
함수명(); // 값1, 값2로 기본값으로 설정
function 함수명(매개변수1=값1, 매개변수2=값2..){
실행문;
}
예시 )
function func3(x=1, y=1){
console.log(`${x} + ${y} = ${x + y}`);
console.log(`${x} - ${y} = ${x - y}`);
console.log(`${x} * ${y} = ${x * y}`);
console.log(`${x} / ${y} = ${x / y}`);
}<script>
'use strict'
func3();
</script>
* 괄호 안에 값을 넣지 않은 경우 기존 함수의 값으로 적용된다.
<script>
'use strict'
func3(5,3);
</script>
* 괄호 안에 값을 넣은 경우, 넣은 대로 실행된다.
● 나머지 매개변수의 사용
생략 접두사(... )를 사용하여 특정 위치의 인수부터 마지막 인수까지를 한 번에 지정할 수 있습니다.
함수명(값1, 값2, 값3, 값4, 값5);
function 함수명(매개변수1, ... 매개변수2){
실행문;
}
예시 )
const Hello3 = function(x, ...y){
console.log(`x의 값 : ${x}`);
for(let i=0; i<y.length; i++){
console.log(`y의 값 : ${y[i]}`);
}
}<script>
'use strict'
Hello3(100, 10, 20, 30, 40, 50, 60);
</script>
* 첫번째 값은 x 그 외 값은 y로 적용된다!
● 리턴 값이 돌아오는 함수
function 함수명(매개변수1, 매개변수2 ...){
실행문;
return 값;
}
let 변수 = 함수명(값1, 값2, ..);
예시 1)
// 호이스팅 되는 함수
function func1(){
return "JavaScript";
}<script>
'use strict'
let result = func1();
console.log(`리턴된 값은 : ${result}`);
</script>
예시 2)
// 호이스팅 되지 않은 함수
const total = function(start, end){
let sum = 0;
for(let i=start; i<=end; i++){
sum +=i;
}
return sum;
}<script>
'use strict'
result = total(1, 10);
console.log(`리턴된 값은 : ${result}`);
</script>
예시 3)
const plus = function(num1, num2){
return num1 + num2
}
const sub = function(num1, num2){
return num1 - num2
}
const mul = function(num1, num2){
return num1 * num2
}
const div = function(num1, num2){
return num1 / num2
}<script>
'use strict'
let num1 = Number(prompt('첫번째 숫자를 입력하세요.'));
let num2 = Number(prompt('두번째 숫자를 입력하세요.'));
let result1 = plus(num1, num2);
console.log(`${num1} + ${num2} = ${result1}`);
let result2 = sub(num1, num2);
console.log(`${num1} - ${num2} = ${result2}`);
let result3 = mul(num1, num2);
console.log(`${num1} * ${num2} = ${result3}`);
let result4 = div(num1, num2);
console.log(`${num1} / ${num2} = ${result4}`);
</script>▼▼▼
예시 4)
const Hello = function(){
console.log('안녕하세요.');
}
const Js = function(){
console.log('JavaScript!');
}
const Sel = function(sel, Hello, Js){
switch(sel){
case 1:
Hello();
break;
case 2:
Js();
break;
}
}<script>
'use strict'
Sel(1, Hello, Js);
Sel(2, Hello, Js);
</script>
예시 5)
<script>
// ▼ 익명으로 함수를 만들자마자 실행하는 방법(가끔사용됨)
(function(){
console.log('안녕하세요.JavaScript!');
})();
</script>
● 화살표 함수
ECMA6에 추가된 문법입니다. function 키워드를 사용하여 함수를 만든 것보다 간단하게 함수를 표현할 수 있습니다. 화살표 함수는 항상 익명입니다.
const Hello = function(){ <-- 익명
}
ex)
// 일반 함수
const func1 = function(){ console.log('JavaScript!');}
// 화살표 함수
const func1 = () => console.log('JavaScript!');
func1();
예시 )
<script>
'use strict'
const func1 = () => console.log('JavaScript!');
func1();
</script>
1. 매개변수가 있는 경우
const func2 = x => x * x;
const result = func2(2); // 4
const func3 = (x, y) => x + y;
const result2 = func3(10, 3); // 13
const func4 = (x, y) => {
let sum = 0;
for(let i=x; i<=y; i++){
sum += i;
}
return sum;
}
* { }(중괄호)를 사용한 경우 무조건 return을 작성해야 된다. 쓰지 않으면 값을 전달하지 못함.
const func5 = (x, y) => { x + y; }
const result4 = func5(10, 3); -> undefined
예시 1)
<script>
'use strict'
const func2 = x => x * x;
const result = func2(2);
console.log(`result 값 : ${result}`);
</script>
예시 2)
<script>
'use strict'
const func3 = (x, y) => x + y;
const result2 = func3(10, 3);
console.log(`result2 값 : ${result2}`);
</script>
예시 3)
<script>
'use strict'
const func4 = (x, y) => {
let sum = 0;
for(let i=x; i<=y; i++){
sum += i;
}
return sum;
}
const result3 = func4(1, 10);
console.log(`result3 값 : ${result3}`);
</script>
예시 4)
<script>
'use strict'
const func5 = (x, y) => { x + y; }
const result4 = func5(10, 3);
console.log(`result4 값 : ${result4}`);
</script>
'🎨 Programming > JavaScript' 카테고리의 다른 글
| [JavaScript] 11. 내장 객체(Math, String, Data) (0) | 2020.09.15 |
|---|---|
| [JavaScript] 10. 객체(Object) (0) | 2020.09.11 |
| [JavaScript] 8. 배열(Array) (0) | 2020.09.10 |
| [JavaScript] 7. 반복문( continue/ break/ 중첩 반복문) (0) | 2020.09.09 |
| [JavaScript] 6. 반복문( while/for ) (0) | 2020.09.09 |
