728x90
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
</head>
<body>
<script type="text/javascript">
//함수 매개변수의 기본값 지정하기
function multiple(a, b=2, c=3) {
return a * b + c;
}
let result = multiple(5,3,5)
document.write("result = " + result +"<br>");
document.write("multiple(5,3,5) = " + multiple(5,3,5) +"<br>");
document.write(`multiple() = ${multiple()}<br>`)
document.write(`multiple(10) = ${multiple(10)}<br>`);
document.write(`multiple(10,20) = ${multiple(10,20)}<br>`);
//함수 호출 시 매개변수 값은 무조건 왼쪽부터 채워짐.
//매개변수값을 기본값을 지정해서 사용할 경우에는 오른쪽 끝에서부터 순서대로 기본값을 설정한 매개변수를 배치.
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>1부터 n까지 숫자를 더하는 함수</title>
</head>
<body>
<script type="text/javascript">
function calcSum(n) {
let sum = 0;
for (let i = 1; i < n + 1; i++) {
sum += i;
}
document.write(`<h3>1부터 ${num}까지 더한 합은 ${sum}</h3><br>`);
}
let num = prompt("얼마까지 더할까요?");
if (num !== null) {
calcSum(parseInt(num));
}
function calcMuti(n){
let multi = 1;
for (let i = 1; i < n+1; i++){
multi *= i;
}
document.write(`<h3>1부터 ${num1}까지 더한 곱은 ${multi}</h3>`);
}
let num1 = prompt("얼마까지 곱할까요?");
if (num1 !== null) {
calcMuti(parseInt(num1));
}
</script>
</body>
</html>
※함수를 호출 먼저 호출한 후 함수 정의
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>함수</title>
</head>
<body>
<script type="text/javascript">
//함수 선언문 형식에 의한 함수 생성 방법으로 정의한 함수는 함수 호이스팅이 이뤄짐
//함수를 정의하기 전 호출을 해도 에러가 발생하지 않음
document.write(`multiple(10) = ${multiple(10)}<br>`);
function multiple(a, b=2, c=3) {
return a * b + c;
}
</script>
</body>
</html>수행된다.
함수 선언문 형식에 의한 함수 생성 방법으로 정의한 함수는 함수 호이스팅이 이뤄짐
함수를 정의하기 전 호출을 해도 에러가 발생하지 않음
하지만 함수를 정의하고 호출하는 식으로 하는 것이 유지보수가 편함
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>익명 함수</title>
</head>
<body>
<script type="text/javascript">
//익명 함수 : 함수에 이름이 없음 → 재활용이 안된다.
//함수 코드 자체를 식으로 취급해서 변수에 할당(대입)함.
//함수 이름이 없는 대신에 할당한 변수명으로 호출함.
let sum = function(a, b) {
return a + b;
}
document.write(`${sum}<br>`);
document.write(`함수 실행 결과 : ${sum(10,20)}<br>`);
//다른 함수의 매개변수로 사용하기 위해서 사용함.
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>익명 함수</title>
</head>
<body>
<script type="text/javascript">
//익명 함수 : 함수에 이름이 없음 → 재활용이 안된다.
//함수 코드 자체를 식으로 취급해서 변수에 할당(대입)함.
//함수 이름이 없는 대신에 할당한 변수명으로 호출함.
let sum = function(a, b) {
return a + b;
}
document.write(`${sum}<br>`);
document.write(`함수 실행 결과 : ${sum(10,20)}<br>`);
//다른 함수의 매개변수로 사용하기 위해서 사용함.
</script>
<hr>
<script type="text/javascript">
//익명 함수 형식 : 함수 이름을 지정하지 않고 변수에 함수를 담아서 저장(함수 객체)
//함수 수행 시 변수명을 사용하여 호출함
//함수를 다른 함수의 매개 변수로 넣어주고 함수 내에서 함수를 호출해서 사용하도록 하는 방법
//호출형식) 변수명(매개변수값)
//sum함수가 매개 변수로 넘어온다
function cal(func) {
let add = func(10, 20);
document.write(`add : ${add}<br>`);
return add;
}
document.write(`cal함수 : ${cal(sum)}`);
</script>
</body>
</html>
매개변수값이 없는 즉시 실행 함수
(...생략...)
<script type="text/javascript">
//즉시 실행 함수 : 함수가 정의되는 순간 즉시 실행되는 함수
//매개변수값이 없는 즉시 실행 함수
(function(){
let userName = prompt("이름을 입력하세요.");
document.write(`안녕하세요? <span> ${userName} </span>님<br>`);
})();
</script>
(...생략...)
매개변수값이 있는 즉시 실행함수
(...생략...)
<script type="text/javascript">
//즉시 실행 함수 : 함수가 정의되는 순간 즉시 실행되는 함수
//매개변수값이 있는 즉시 실행 함수
(function(a,b){
let sum1 = a + b;
document.write(`함수 실행 결과 : ${sum1}<br>`);
})(100,200);
document.write(`함수 실행 결과 : ${sum1}<br>`); //sum1이 지역변수이므로 결과가 나타나지 않음
</script>
(...생략...)
매개변수값이 있는 즉시 실행 함수
<script type="text/javascript">
//화살표 함수(fat arrow =>)
//익명 함수에서만 사용할 수 있는 표기법
//function이라는 키워드 대신 '=>(fat arrow)' 이용해서 함수를 생성하는 방식
//1. 매개변수가 없는 경우
const hi = function(){
return "hi";
}
document.write(`<h3>함수 실행 결과 : ${hi()}</h3>`); //실행
//function 키워드 없음(매개변수만 표시, 소괄호만 표시)
//function 키워드가 => 로 대신
//함수 수행 내용이 한 줄뿐이면 중괄호({})생략, return문 생략 가능
const hi1 = () => { return "hi"}; //fat arrow
// == const hi1 = () => "hi";
document.write(`<h3>함수 실행 결과 : ${hi1()}</h3>`); //실행
</script>
<hr>
<script type="text/javascript">
//2. 매개변수가 있는 경우
//매개변수가 1개인 경우 : 매개 변수의 괄호() 생략 가능
let hello = user => {document.write(`<h3>${user} 님, hello</h3>`);}
hello("홍길동");
//매개변수가 2개 이상인 경우
let div = (a,b) => {return a/b};
// == let div = (a,b) => a/b;
document.write(`<h3>함수 수행 결과 : ${div(10,2)}</h3>`);
</script>
728x90
'KDT > JavaScript' 카테고리의 다른 글
| 240205 자바스크립트 (0) | 2024.02.05 |
|---|---|
| 240201 자바스크립트 (0) | 2024.02.01 |
| 240129 자바스크립트 (0) | 2024.01.29 |
| 240125 자바스크립트 (0) | 2024.01.25 |
| 240124 자바스크립트 (0) | 2024.01.24 |