오봉이와 함께하는 개발 블로그
JavaScript - 함수 사용법 기초 2 본문
728x90
자바스크립트 함수
- 자동 호출되는 함수
- 선언적 함수(일반 함수 : function)
- 익명 함수
- 콜백 함수
- 화살표 함수
- 디폴트 매개변수
함수의 반환 값
- 함수 실행이 끝난 후 호출한 곳으로 돌려주는 결과 값
- 함수 내에서 return문 사용
function sum() {
return n1 + n2;
}
var s = sum();
document.write("합계 : " + sum());함수의 반환 값이 있는 예제 functionReturn.html
function sum() {
var n1 = Number(prompt("숫자 1 입력"));
var n2 = Number(prompt("숫자 2 입력"));
return n1 + n2;
}
document.write("합계 : " + sum());함수 반환 값 있는 연습 문제 functionReturnEx1.html
<script type="text/javascript">
function start() {
var scoreInput = confirm("성적을 입력하시겠습니까?")
if(scoreInput) {
alert("평균 : " + input());
}
else {
alert("종료합니다.")
document.body.innerHTML = "";
}
}
function input() {
var korean = Number(prompt("국어 점수를 입력해 주세요."));
var math = Number(prompt("영어 점수를 입력해 주세요."));
var eng = Number(prompt("영어 점수를 입력해 주세요."));
return ((korean+math+eng) / 3).toFixed(2);
// .toFixed(소수점 이하 자릿수);
}
</script>
</head>
<body>
<button onclick="start()">성적 입력</button>
</body>매개변수가 있는 함수
- 함수 호출 시 전달된 값을 받기 위해 사용되는 변수
- 함수 내에서 지역 변수로 사용
- 매개변수가 있는 함수 호출은 반드시 값을 전달해야 한다.
- 함수 호출하며 전달하는 값을 인수(또는 인자)라고 한다.
function sum(x, y) { // 함수 내에서만 사용하는 지역변수로 사용한다.
return x+y;
}
document.write("합계 : " + sum(10 + 20));매개변수 함수 예제 functionParam.html
<script type="text/javascript">
function calinterest(deposit, rate) { // 예금액과 이자율을 전달 받아 예금 이자를 출력하는 함수.
var interest = deposit * rate / 100;
document.write("예금이자 : " + interest + "원");
}
function input() { // 예금액과 이자율 입력 받아서 calinterest에 전달하는 함수
var deposit = parseInt(prompt("예금액 입력"));
var rate = parseInt(prompt("이율 입력"));
calinterest(deposit, rate);
}
input();
</script>매개변수 함수 연습 functionParamEx1.html
<script type="text/javascript">
function input() {
var row = prompt("행 입력");
var col = prompt("열 입력");
makeTable(row, col);
}
function makeTable(row, col) {
document.write("<table border=\"1\">");
for(var i = 0; i < row; i++) { // 행 수 만큼 반복
document.write("<tr>")
for(var j = 0; j <col; j++) { // 각 행마다 열 수 만큼 반복
document.write("<td>★</td>");
}
document.write("</tr>")
}
document.write("</table>");
}
</script>
</head>
<body>
<button onclick="input()">테이블 만들기</button>
</body>매개변수, 반환값 있는 함수 functionParamReturnEx1.html
<script type="text/javascript">
function input() {
var arr = new Array(5);
for(var i = 0; i < arr.length; i++) {
arr[i] = prompt("배열 arr[" + i + "]번 인덱스 입력");
}
document.write("최대 값 : " + max(arr));
}
function max(arr) {
var max = 0;
for(var i = 0; i < arr.length; i++) {
if(max < arr[i]) {
max = arr[i]
}
}
return max;
}
</script>
</head>
<body onload="input()">
</body>function 함수 호이스팅 functionHoisting.html
<script type="text/javascript">
show(); // 선 호출
function show() { // 후 정의
alert("호이스팅 show() 함수");
}
</script>익명 함수(Anonymous Function)
- 함수 이름이 없는 함수
- 함수명 대신, 함수명에 함수 코드를 저장해서 구현하는 함수
- 변수명에 값을 대입하는 형식으로 맨 끝에 세미콜론 작성.
- 함수 호출 시 변수명을 함수명처럼 사용
- var 변수명 = function() { 함수 블록 수행 문장 @@@ };
- 변수명 다르게 함수 코드 저장 가능
- 호이스팅 불가능
- Callback 함수로 주로 사용
익명 함수 예제 anonymousFunction.html
<script type="text/javascript">
// 익명 함수는 호이스팅 불가
// sum(100, 200); // sum is not a function
// 익명 함수 : 변수명에 함수 코드 저장
var sum = function(a, b) {
document.write(a + b + "<br>");
}; // 세미 콜론 작성.
// 함수 호출 시 변수명을 함수명처럼 사용
sum(5, 10); // 15
// 다른 변수 add 이름으로 기존 sum 재사용
var add = sum(10, 20); // 30
// sum 함수도 그대로 사용 가능
sum(3, 10); // 13
</script>콜백 함수(Callback Function)
- 매개변수로 함수를 전달 받아, 함수 내부에서 실행하는 함수
- 인자로 전달되는 함수를 콜백 함수라고 부름
- 콜백 함수로는 주로 익명 함수 사용
- 자바스크립트의 비동기 처리 방식의 문제점을 해결하기 위해 사용하는 함수
- 자바스크립트는 싱글 스레드로 한 번에 하나의 작업만 처리 가능
- 특정 코드(작업)가 끝나기 전에 다음 코드(작업)을 처리할 수 없다.
- 콜백 함수를 사용해서 특정 시점에 호출하여 비동기 처리 작업 수행
- 콜백 함수 패턴을 사용하면 작업1을 진행 시키고 작업이 완료되었을 때 알림을 받을 콜백 함수를 설정해서 작업1이 완료되면 콜백 함수가 호출되고, 해당 콜백 함수 안에서 작업2를 시작하는 식으로 비동기 작업들 순차적으로 처리 가능
- 콜백 함수가 계속 호출되면 감당하기 어려울 정도로 깊어지는 문제가 발생(콜백지옥)
- 이를 해결하기 위해 Promise 를 사용한다.(미래 어떤 시점 결과를 제공하는 방식)
- 비동기 처리 방식
- 특정 코드(작업)이 끝나기 전에 다음 코드(작업)을 처리하는 방식
콜백 함수 예제 callback1.html
<script type="text/javascript">
// 익명 함수를 콜백 함수로 사용
var callback = function() {
alert("익명 함수");
};
// 함수를 매개변수로 받을 함수
function show(a) { // 매개변수로 다른 이름 사용해도 상관 없다.
// 매개변수로 전달될 함수 호출
a();
}
// show 호출하며 함수를 인자로 전달
show(callback);
</script>콜백 함수 예제 callback2.html
<script type="text/javascript">
// 일반 함수를 콜백 함수로 사용
function endFunction() {
document.write("종료");
}
function showName(name, callback) { // endFunction()을 callback이라는 매개변수 이름으로 받음
document.write("name : " + name + "<br>");
callback(); // 받음 이름(매개변수 명)으로 호출
}
showName("홍길동", endFunction);
</script>콜백 함수 예제 callback3.html
<script type="text/javascript">
// 지역변수를 콜백함수 매개변수로 전달
let globalVar = 100;
// 익명 함수
var show = function(localVar) {
document.write(`전역변수 : ${globalVar} / 지역변수 : ${localVar}`);
}
// 전달된 show 함수를 callback으로 받음
function call(callback) {
let localVar = 1;
callback(localVar); // show 호출하면서 localVar 전달.
}
call(show);
</script>화살표 함수 (Arrow Function)
- => 사용
- 자바 언어의 람다식과 동일하다.
- function 키워드 대신 화살표(=>)를 사용하여 더 간략한 방법으로 함수를 선언하는 방식
- 기본 문법
- (매개변수) => { 함수 실행 부분 };
- ( ) => { 함수 실행 부분 }; // 매개변수가 없는 경우
- x => { 함수 실행 부분 }; // 매개변수가 한 개인 경우 괄호 생략 가능
- (x, y) => { 함수 실행 부분 }; // 매개변수가 여러 개인 경우 괄호 생략 불가능
- x => x * x; // 수행 문장이 한 줄인경우 중괄호 생략 가능
객체.addEventListener(‘click’, function(){
수행 문장;
});
// 화살표 함수 사용
객체.addEventListener(‘click’, ( ) => {
수행 문장;
});
화살표 함수 예제 arrowFunction1.html
<script type="text/javascript">
// 화살표 함수
// 익명 함수. 매개변수 2개 (a, b). 반환값은 a+b (return 키워드 생략)
// 화살표 함수를 사용
let sum = (a, b) => a+ b;
//익명 함수 sum에 화살표 함수 사용하지 않은 경우
/*let sum = function(a, b){
return a + b;
} */
alert(sum(10, 20));
</script>화살표 함수 예제 arrowFunction2.html
<script type="text/javascript">
var fruits = ["사과", "포도", "복숭아"];
// 화살표 함수를 사용해서 반환
fruits.forEach( (item, index, fruits) => {
document.write(item + " " + index + " " + fruits + "<br>");
} );
</script>디폴트 매개변수
- 함수의 매개변수에 기본값을 설정하는 것.
- 일반 매개변수와 같이 사용할 경우 디폴트 매개변수는 맨 뒤에 위치한다.
디폴트 매개변수 예제 defaultParam.html
<script type="text/javascript">
function rect(width=10, height=20) {
document.write("width : " + width);
document.write(" height : " + height + " <br>");
return width*height;
}
document.write(rect() + "<br>");
document.write(rect(30) + "<br>");
document.write(rect(100, 200) + "<br>");
// width : 10 height : 20
// 200
// width : 30 height : 20
// 600
// width : 100 height : 200
// 20000
/////////////////////////////////////////////////////////////////////////////////
document.write("<hr>")
function showInfo(name, year=4, score) {
document.write("name : " + name + "<br>");
document.write("year : " + year + "<br>");
document.write("score : " + score + "<br>");
}
showInfo();
// name : undefined
// year : 4
// score : undefined
showInfo("홍길동");
// name : 홍길동
// year : 4
// score : undefined
showInfo("홍길동", 80);
// name : 홍길동
// year : 80
// score : undefined
/////////////////////////////////////////////////////////////////////////////////
document.write("<hr>")
function showInfo2(name, score, year=4) { // 디폴트 매개변수는 맨 뒤에 위치해야 한다.
document.write("name : " + name + "<br>");
document.write("year : " + year + "<br>");
document.write("score : " + score + "<br>");
}
showInfo2();
// name : undefined
// year : 4
// score : undefined
showInfo2("홍길동");
// name : 홍길동
// year : 4
// score : undefined
showInfo2("홍길동", 80);
// name : 홍길동
// year : 4
// score : 80
</script>728x90
'FE > JavaScript' 카테고리의 다른 글
| JavaScript - 브라우저 객체 모델 window객체 (0) | 2021.12.10 |
|---|---|
| JavaScript - 내장 객체(Date, Array, Math, String 객체) (0) | 2021.12.09 |
| JavaScript - 함수 사용법 기초 (0) | 2021.12.08 |
| JavaScript - 배열 기초 (0) | 2021.12.08 |
| JavaScript - 숫자(정수, 실수) 형변환 (0) | 2021.12.08 |
'FE/JavaScript' Related Articles
more
Comments