1. 함수
함수의 사용은 함수의 정의와 함수의 호출로 나뉜다.
1-1. 함수의 정의
function 함수이름(){
.. 실행할 구문 ..
}
1-2. 함수의 호출
함수를 호출하기 위해서는 함수이름(); 형태를 사용한다.
함수이름();
1-3. 파라미터(parameters)가 있는 함수
// 함수의 정의
function 함수이름(파라미터){
.. 실행할 구문 ..
}
// 함수의 호출
함수이름(파라미터);
1-4. 다중 파라미터가 있는 함수
// 함수의 정의
function 함수이름(파라미터1, 파라미터2, ..., 파라미터n){
.. 실행할 구문 ..
}
// 함수의 호출
함수이름(파라미터1, 파라미터2, ..., 파라미터n);
1-5. return형 함수
자신이 호출된 위치로 되돌려 주기 위해서 "return"이라는 키워드를 작성한다.
// 함수 생성
function f(x){
return x+1;
}
// 함수 호출
let y = f(4); // y = 5;
1-6. 함수의 실행 중단(return의 중요한 의미)
자바스크립트 함수는 처리 도중 return문을 만나게 되면 그 즉시 실행을 중단한다.
리턴 값이 없이 처리를 중단하고자 하는 경우에는 return 키워드만 사용한다.
값이 없는 리턴 결과를 변수에 대입한 경우, 정의되지 않는 값인 "undefined"가 대입된다.
[예제 코드]
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<script type="text/javascript">
function f(x, y) {
let z = x + y;
// 값이 10보다 작을 경우 실행 중단
if(z<10){
return;
}
return z;
}
// 함수 호출
let a = f(2,1);
let b = f(5,7);
let c = f(10,5);
document.writeln("<h1>" + a + "</h1>");
document.writeln("<h1>" + b + "</h1>");
document.writeln("<h1>" + c + "</h1>");
</script>
</body>
</html>▶ document.writeln은 자바의 System.out.println과 사용 방법은 같고, 출력되는 곳이 어디인지만 다르다.
▶ 따옴표(쌍따옴표, 홑따옴표 상관 없음)를 사용해서 넣어준 html 태그는 그대로 작동된다.
[출력 결과]
1-7. 그 외
- 함수 내 리턴이 여러 개라면 첫 번째 리턴만 유효하다.
function getLan() {
return 'javascript';
return 'test';
return 'user';
}
alert(getLan()); // javascript
- 파라미터 값이 정해진대로 주어지지 않는 경우
function f(x,y){
return x + y;
}
document.write(f(1,2) + '<br>'); // 3
// 오류 없이 알아서 앞에 두 개만 읽어 옴
document.write(f(1, 2, 5) + '<br>'); // 3
// NaN 출력
document.write(f(1) + '<br>');
document.write(f() + '<br>');▶ 파라미터를 두 개만 받는 함수를 호출할 때 파라미터를 여러 개 적어 놓으면, 앞에 두 개만 알아서 읽어 적용시킨다.
▶ 반대로 파라미터를 1개 또는 아무것도 적지 않는다면 NaN이 출력된다.
▶ NaN은 Not-a-Number를 뜻하는데, 나온 값이 숫자가 아니라는 뜻이다.
- 다른 함수 호출
function sum(x, y){
let z = x + y;
return z;
}
function printResult(x, y) {
let result = sum (x, y);
documnet.write("<h1>" + result + "</h1>");
}
printResult(5, 6); // 11
- 익명 함수
익명 함수는 일회성 호출용이다.
생성과 동시에 즉시 호출한다.
(function(){
let i = 0;
while(i<10){
document.write(i);
i += 1;
}
})();
2. 화살표 함수(arrow function)
위의 함수보다 단순하고 간결한 문법으로 함수를 만드는 방법
2-1. 매개변수가 없는 경우
let foo = () => console.log('arrow func');
foo(); // arrow func
2-2. 매개변수가 하나인 경우
소괄호 생략이 가능하다.
let foo2 = x => document.write(x);
foo2('arrow func2'); // arrow func2
2-3. 매개변수가 여러 개인 경우
소괄호 생략 불가능
let foo3 = (a, b) => a+b; // return이 생략되어 있음
document.write(foo3(1, 3)); // 4
2-4. {} 사용
// {}를 사용했는데 return이 없을 경우
let foo4 = (a, b) => {a+b};
document.write(foo4(1, 3)); // undefined > 값이 return되지 않음
// return 값일 경우 return 명시
let foo5 = (a, b) => {return a+b};
document.write(foo5(1, 3)); // 4
2-5. 본문이 여러 줄인 경우
let foo6 = (a, b) => {
const c = 3;
return a + b + c;
};
document.write(foo6(1, 3)); // 7
2-6. 삼항 연산자 이용
let age = prompt('나이를 알려주세요.');
let welcome = (age < 18) ? () => alert('안녕') : () => alert('안녕하세요');
welcome();
2-7. 예제
function ask(question, yes, no){
if(confirm(question )){
yes();
} else{
no();
}
}
// 익명 일반 function
// function()을 매개변수로 사용할 수 있다.
/* ask("동의하십니까?",
function(){alert("동의하셨습니다.")},
function(){alert("취소 버튼을 누르셨습니다.")}); */
// 익명 화살표 function
ask("동의하십니까?",
() => alert("동의하셨습니다."),
() => alert("취소 버튼을 누르셨습니다."));
[출력 결과]
728x90
'이론 > 자바 풀스택 국비수업' 카테고리의 다른 글
| 220511 Javascript 문제 (0) | 2022.06.21 |
|---|---|
| 220510 Javascript 5 (0) | 2022.06.21 |
| 220510 Javascript 3 (0) | 2022.06.21 |
| 220509 Javascript 2 (0) | 2022.06.21 |
| 220509 Javascript 1 (0) | 2022.06.18 |