Contents
접기
자바스크립트의 함수
- 자바 스크립트의 함수는 function literal (값) 으로 처리 된다.
- 함수가 표현함수, 선언함수가 존재
- 모든 선언은 표현식(실행문)보다 앞에 있어야 한다.
함수의 정의 (선언적 함수)
function 함수이름 (파라미터 선언부){
실행문;
[return data]
}
호출 (call)
function add (a,b){
let result = a+b;
return result;
}
// JS hoisting : 정의부를 실행문보다 위로 올리는 것
// 실행문
let c = add(10,20);
console.log(c);콘솔 결과 = 30
func();
- 변수처럼 사용 가능하다
function substract(a,b){
return a -b;
}
// x가 받는 값은 함수 이다
function myfunction(x){
console.log('x의 타입은? ' + typeof x)
let result = x(1,2);
console.log('myfunction 의 결과: ' + result);
}
myfunction(substract);
setTimeout과 setInterval을 이용한 호출 스케줄링
1초가 지날때마다 무한히 실행
setInterval(function() {
console.log('a');
}, 1000);
구현 내용
html 본문
<body>
<h2 id="clock"></h2>
<div>
<input type="button" id="start" value="Start">
<input type="button" id="stop" value="Stop">
</div>
</body>
</html>
1. clock 처리
let clock = document.getElementById('clock'); // target
let start = document.getElementById('start'); // 이벤트가 실행될 버튼 (Event Source)
let stop = document.getElementById('stop'); // 이벤트가 실행될 버튼
2. 시간을 얻어와서 문서에 출력
function makeHour(){
let now = new Date();
let hour = now.getHours();
let min = now.getMinutes();
let sec = now.getSeconds();
let data = `${hour} : ${min} : ${sec}`;
clock.innerHTML = data;
}
makeHour();
3. 버튼을 누르면 시간이 흐르고 멈추게 하는 이벤트 연결
let timer = '';
start.addEventListener('click', function() {
timer = setInterval(function() {
makeHour();
}, 1000)
});
stop.addEventListener('click', function() {
clearInterval(timer);
});
함수의 정의
나머지 연산자를 이용
1) 함수 내부에서 arguments 라는 배열 객체를 이용하여 정확한 인자의 개수를 전달받도록 제어
2) 매개변수 위치에서 ... 연산자를 이용해서 배열의 형태로 모두 전달 받을 수도 있다.
function add(a, b){
console.log(a);
console.log(b);
console.log(c); // 배열
console.log('인자의 개수: ' + arguments.length);
// 데이터를 몇 개 전달 받았는지
// arguments = 배열 object
if(arguments.length != 2) return 0;
return a + b;
}
let result = add(10, 11);
console.log(result);
result = add(10);
console.log(result);
' 2) 매개변수 위치에서 ... 연산자를 이용해서 배열의 형태로 모두 전달 받을 수도 있다. ' 의 예제
function add(a, b, ... c){
console.log(a);
console.log(b);
console.log(c); // 배열
// console.log('인자의 개수: ' + arguments.length);
// 데이터를 몇 개 전달 받았는지
// arguments = 배열 object
if(arguments.length != 2) return 0;
return a + b;
}
add(1,2,3,4,5);
함수 반환 - 1
function temp(){
return function () {
console.log(2*3)
}
}
let x = temp();
x(); //반환되는 함수값을 받아서 다시 function을 호출 하는 것이다.
temp()(); // 가능하다
| 코드 | 내용 |
| x(); | 반환되는 함수값을 받아서 다시 function을 호출 하는 것이다. |
함수 반환 -2
function temp2(a,b){
let result = a * b;
console.log(result);
return function () {
return result;
}
}
console.log(temp2(5,7)());
'풀스택 개발 학습 과정 > 프론트엔드' 카테고리의 다른 글
| [자바스크립트] 함수 -3 (배열처리, 문자열처리) (0) | 2024.03.02 |
|---|---|
| [자바스크립트] 함수 - 2 (화살표 함수) (0) | 2024.03.02 |
| [자바스크립트] 연산자, 반복문과 제어문, defer (0) | 2024.03.02 |
| [HTML + CSS] CSS 4 - float / flex 를 이용한 콘텐츠 배치 (0) | 2024.02.25 |
