함수의 사용형태
함수는 사용 형태에 따라 익명 함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 있는 함수로 구분됩니다.
함수의 사용형태
함수는 사용 형태에 따라 익명 함수, 선언적 함수, 매개변수가 있는 함수, 리턴값이 있는 함수로 구분됩니다.
기본적인 함수
function 함수이름(){
//실행 코드
}
함수이름(); //함수 호출
Sample1 
함수를 사용하는 기본 예제입니다.
결과
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function func1(){
document.write("function가 실행되었습니다.");
document.write("<br />");
}
func1();
</script>
</head>
<body>
</body>
</html>
익명 함수
익명 함수는 변수에 함수를 설정하는 방법입니다.
var 변수이름 = function(){
//실행 코드
}
변수이름(); //함수 호출
Sample2
함수를 사용하는 기본 예제입니다.
결과
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
var func2 = function(){
document.write("function가 실행되었습니다.");
}
func2();
</script>
</head>
<body>
</body>
</html>
매개변수가 있는 함수
function 함수이름(매개변수1, 매개변수2,.....){
//실행내용
}
함수이름(매개변수1, 매개변수2,.....); //실행함수
Sample3
함수를 사용하는 기본 예제입니다.
결과
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function func3(name){
document.write(name);
}
func3("function가 실행되었습니다.");
</script>
</head>
<body>
</body>
</html>
리턴값이 있는 함수
function 함수이름(){
//실행내용
return 리턴값;
}
var 변수 = 함수명(); //함수호출
Sample4
함수를 사용하는 기본 예제입니다.
결과
2. 함수가 실행되었습니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
//리턴문
function func4(){
var str = "1. 함수가 실행되었습니다.
";
return str;
}
var value = func4();
document.write(value);
//종료 역할하는 리턴문
function func41(){
document.write("2. 함수가 실행되었습니다.");
return;
document.write("3. 함수가 실행되었습니다.");
}
func41();
</script>
</head>
<body>
</body>
</html>
재귀 함수
재귀함수는 함수 정의문 내에 함수를 다시 호출하여 실행하는 함수입니다. 함수를 반복문처럼 사용할 때 사용합니다.
function 함수이름(){
//실행내용
함수이름();
}
함수이름(); //함수호출
Sample5
함수를 사용하는 기본 예제입니다.
결과
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
function func5(){
document.write("함수가 실행되었습니다.");
func5();
}
func5();
</script>
</head>
<body>
</body>
</html>
템플릿 리터럴(Template Literal)
템플릿 리터럴은 백틱(backtick) 문자 `를 사용하여 새로운 문자열을 삽입할 수 있는 기능을 제공합니다. 이를 문자열 인터폴레이션(String Interpolation)이라 합니다.
`${ … }`
Sample6
템플릿 리터럴을 사용하는 기본 예제입니다.
결과
2. 함수가 실행되었습니다.
3. 함수가 실행되었습니다.
4. 함수가 실행되었습니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>템플릿 리터럴(Template Literal)</title>
<script>
function func6(name){
document.write('1. '+ name +'가 실행되었습니다.<br>');
document.write(`2. ${name}가 실행되었습니다.<br>`);
}
func6("함수");
function func61(text1, text2){
document.write('3. '+ text1 + '가 ' + text2 + '되었습니다.<br>');
document.write(`4. ${text1}가 ${text2}되었습니다.<br>`);
}
func61("함수", "실행");
</script>
</head>
<body>
</body>
</html>
화살표 함수
화살표 함수(Arrow function)는 function 키워드 대신 화살표(=>)를 사용하여 좀 더 간단하게 함수를 사용할 수 있는 방법입니다.
(매개변수) => {
//실행문
};
Sample7
화살표 함수를 사용하는 기본 예제입니다.
결과
2. function가 실행되었습니다.
3. function가 실행되었습니다.
4. function가 실행되었습니다.
5. function가 실행되었습니다.
6. function가 실행되었습니다.
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>템플릿 리터럴(Template Literal)</title>
<script>
//기본함수
function func7(){
document.write("1. function가 실행되었습니다.
");
}
func7();
//익명 함수
const func71 = function(){
document.write("2. function가 실행되었습니다.
");
}
func71();
//리턴문 함수
const func72 = function(){
var str = "3. function가 실행되었습니다.
";
return str;
}
var value = func72();
document.write(value);
//화살표 함수
const func73 = (str) => {
return str;
}
const value1 = func73("4. function가 실행되었습니다.
");
document.write(value1);
//화살표 함수 간략화
const func74 = (str) => str;
const value2 = func74("5. function가 실행되었습니다.
");
document.write(value2);
//템플릿 리터럴와 화살표 함수
const func75 = (str2) => {
document.write(`${str2}`);
}
func75("6. function가 실행되었습니다.");
</script>
</head>
<body>
</body>
</html>
