함수 역할 3가지
- 특정시점에 사용할 javascript를 모아 놓기 위해 사용한다.
- 값으로서의 함수(함수 객체)
(1) 변수의 값으로 함수를 입력하면 함수는 반드시 어떤 값으로 변경된다.(변수에 할당)
ex) var a = alert(); //함수의 값을 지정해 주지 않았으므로 a=udefined가 된다
(2) 어떤 정보를 갖고 오거나 보내기 위해 함수를 call 한다.
함수의 값을 갖고올때 사용할 수 없는 형태의 data를 갖고 오는 경우,
해당 값을 저장하기 위해 변수(variables)를 작성해 줄 수 있다.
ex1) 변수를 설정하지 않고 함수를 call한 경우prompt("주문할 제품이름을 입력하세요.");
// 갖고오는 '제품의 이름'을 사용할 수 없음
ex2) 변수를 설정하여 함수를 call한 경우
var coffee=prompt("주문할 제품이름을 입력하세요.");
// '제품이름'을 coffee라는 변수에 key값으로 담아 두었기 때문에 사용할 수 있음.
함수가 있을때 HTML문서가 읽히는 순서
함수 정의 방법
1. 이름 있는 함수(선언적 정의 방법)
a();
var a=function(){}; //error!함수를 만들기 전에 call하면 error가 남
2. 익명 함수(리터럴)
b();
function b(){}; //okay~함수를 만들기 전에 call해도 괜찮음
함수가 종료되는 시점
- 실행하다가 더이상 실행할 line이 없을때
- 실행하다가 return 이라는 예약어를 만났을 때
예시
<body>
<h1>function type 테스트 중</h1>
<script>
/*
함수가 종료 되는 시점
1. 실행하다가 더이상 실행할 line이 없을때
2. 실행하다가 return 이라는 예약어를 만났을 때
*/
var a=function(){
console.log("a함수 호출됨");
};
var b=function(){
var isFinish=confirm("함수를 종료할까요?");
if(isFinish){
return;
}
};
</script>
<button type="button" onclick="a();">a 함수 테스트</button>
<button type="button" onclick="b();">b 함수 테스트</button>
</body>
함수의 다향한 return type
1. return 예약어의 유무
<script>
// return 예약어가 없는 경우
var a=function(){
console.log('a함수 호출');
}; //undefined type의 data가 return됨.
// return 예약어가 있는 경우
var b=function(){
console.log('b함수 호출');
return; //undefined type의 data가 return됨.
};
</script>
2. return 예약어가 있고 number type의 data가 있는 경우
<script>
var c=function(){
console.log('c함수 호출');
return 999; // number
};
</script>
3. return 예약어가 있고 string type의 data가 있는 경우
<script>
var d=function(){
console.log('d함수 호출');
return "abcd"; // string
};
</script>
4. return 예약어가 있고 Boolean, plain Object, array type의 data가 있는 경우
<script>
var e=function(){
console.log("e함수 호출됨");
return true; //Boolean
};
var f=function(){
console.log("f함수 호출됨");
return {num:1}; // plain Object
};
var g=function(){
console.log("g함수 호출됨");
return [10,20,30]; // array
};
</script>
함수의 인자
//인자로 전달받은 두 수의 합을 출력하는 함수s
var showSum=function(num1, num2){
//두 수의 합을 구해서
var result=num1+num2;
//콘솔창에 출력하기
console.log(num1+"+"+num2+"="+result);
//return 해주는 값이 없음으로 undefined 출력됨.
};
함수를 1회성으로 call하는 경우
함수를 한번만 call함
var a=function(){
console.log("무언가를 초기화 했습니다.");
};
a();
함수를 만들고 바로 1번 call 하고 종료하는 것
- (function(){})();
//예시1)
(function(){
console.log("초기화");
})();
//예시2)
(function(msg){
console.log(msg);
})("hello"); //console에 "hello"가 출력됨.
연습문제
var f=function(){
console.log("하나");
console.log("두울");
console.log("세엣");
};
문제1. 만들어진 함수를 page loading 시점에 호출하기
답
<script>
f();
console.log("페이지 로딩이 완료되었습니다.");
</script>
문제2. 만들어진 함수를 button 클릭하는 시점에 호출하기
답
<body>
<button type="button" onclick="f();">함수실행</button>
<script>
var f=function(){
console.log("하나");
console.log("두울");
console.log("세엣");
};
</script>
</body>
문제1. return type을 맞춰보세요.
<script>
// object type을 리턴해주는 함수
var getMember=function(){
var mem={num:1, name:"김구라", addr:"노량진"};
return mem;
};
var f=getMember;
var mem1=getMember();
var a=mem1.num;
var b=mem1.name;
var c=mem1.addr;
</script>답
<script>
// object type을 리턴해주는 함수
var getMember=function(){
var mem={num:1, name:"김구라", addr:"노량진"};
return mem;
};
var f=getMember; //function type
var mem1=getMember(); //plain object type
var a=mem1.num; //num type
var b=mem1.name; //string type
var c=mem1.addr; //string type
</script>
문제1. 특정 data type 으로 로그를 출력하는 함수 만들어보기
답
<body>
<h1>function type 테스트 중</h1>
<script>
//특정 data type 으로 로그를 출력하는 함수 만들어보기
var printLog=function(a){
console.log("--log start---");
console.log(a);
console.log("--log end--");
};
//위에서 만든 함수 호출하면서 string type 전달하기
printLog("hello");
/*
var printLog=function(함수의 변수 선언){
console.log("--log start---");
console.log(선언된 변수 넣기);
console.log("--log end--");
};
*/
</script>
<button onclick="printLog()">log출력</button>
</body>
문제1. 변수 obj1,2,3,4 중 같은 것 끼리 짝을 지어보세요.
답
<body>
<h1>javascript 테스트 중</h1>
<input type="text" id="one"/>
<input type="text" id="two"/>
<script>
var getKey=function(sel){
var obj=document.querySelector(sel);
return obj;
};
var obj1=document.querySelector('#one');
var obj2=getKey("#one");
var obj3=document.querySelector('#two');
var obj4=getKey("#two");
</script>
</body>
문제1. 함수를 저장할 변수의 이름 : getSum
인자를 전달받는 갯수 : 2개
인자로 숫자 2개를 전달 받으면 두 수의 합을 구해서
리턴해주는 함수를 만들고 테스트 해 보세요.
답
var getSum=function(a, b){
var result=a+b;
return result; // 결과 값을 return해줌
};
var result1=getSum(10, 10); //20
var result2=getSum(10, 20); //30
var result3=getSum(10, 40); //50
'Javascript' 카테고리의 다른 글
| 카운트 올리기, 줄이기, 리셋 (0) | 2019.11.05 |
|---|---|
| javascript로 HTML 문서에 접근하고 contents변경해보기 (0) | 2019.11.05 |
| Array (배열) (0) | 2019.11.04 |
| Plain object (객체) (0) | 2019.11.04 |
| Number (수치형) (0) | 2019.11.04 |
