23.02.15(함수(무명,callback, 타임아웃,인터벌), 객체)

 

😀

 

 

*
함수(Function) : 기능을 정의해 놓은 것
- 함수는 하나의 로직을 재사용할 수 있도록 하는 것으로 코드의 재사용성을 높여줌
- 형식)
function 함수이름(매개변수1, 매개변수2) {
함수 호출 시 실행될 문장;
}

- 함수 사용 시 장점
1. 코드의 중복 제거 및 코드 재사용 가능
2. 유지보수 용이성

- 자바스크립트의 함수의 종류
1. 사용자 정의 함수 : 사용자가 직접 만들어 놓은 함수
2. 내장 함수 : 자바스크립트에서 자체적으로 제공해 주는 함수
*/

 

/* 
함수를 정의하는 방법(두번째) - 무명(익명)함수
- 무명함수는 이름이 없는 함수를 말함. 이벤트 처리 등에 자주 사용이 됨
    함수를 무명으로 만드는 경우네는 주로 함수를 재사용하지 않는 경우에 사용이 됨 
*/

const 함수 = function () {

document.write(`안녕하세요`);

}

 

함수();

const 함수 = function () {	// const 변수를 한글로 써도 됨.. let 또는 const쓰면됨
	document.write(`함수 내부코드 입니다.`);
}

//익명함수 호출
함수();

 

😀매개변수 / 인자 / 연산자순서

	function isLeapYear(year) {	//매개변수
		let result = (year % 4 === 0) && (year % 100 !=0) || (year % 400 === 0); // 순서 && -> ||
	
		let res;
		if(result) {
			res = "윤년";
		}else {
			res = "평년";
		}
		
		return res;
	}
	
	let year = parseInt(prompt("4자리 연도를 입력하세요..."));
	
	//함수를 호출
	document.write(`${year} 년은 ${isLeapYear(year)} 입니다.`);		// 인자

 

/*
콜백함수 (다른언어에서 찾아볼 수 없는 특이한 형태임)
- 자바스크립트에서는 함수도 하나의 자료형임 
- 따라서 매개변수로 함수를 전달할 수 있음
- 이렇게 매개변수로 넘어가는 함수를 콜백함수라고 함
*/

 

function callThreeTimes(callback) {
	for(let i=0; i<3; i++) {
    	callback(i);
    }
}

callThreeTimes( function (su) {
	document.write(`${su} 번째 함수 호출`);
});

 

/*
자바스크립트 내장함수
- 자바스크립트에서 자체적으로 제공해 주고 있는 함수를 말함
- 예를 든다면 지금까지 사용해 왔던 alert()와 prompt() 함수가 대표적인 내장함수임

타이머 함수(내장함수)
- setTimeout(function, milesecond)
  : 일정 시간이 지난 후에 함수를 한 번만 실행하는 함수
  
- setInterval(function, milisecond)
  : 일정 시간마다 함수를 반복해서 실행하는 함수
  
- clearTimeout(타이머 id)
  : 일정 시간 후 함수를 한 번 실행하는 것을 중지하는 함수 // setTimeout은 한번만 실행해서 clearTimeout은 딱히 쓸모가 없음
  
- clearInterval(타이머 id)
  : 일정 시간마다 함수를 반복하는 것을 중지하는 함수 // 메모리에 데이터 계속 쌓이니까 멈춰줘야함
*/

function alarm() {
	alert("3초 지났음ㅋㅋ");
}

setTimeout(alarm, 3000);

let intervalID = setInerval(function() {
	document.write(`<p> new Date() </p>`);
}, 2000);

setTimeout(function() {
	clearInterval(intervalID);
},10000);

 

 

 

/* 자바스크립트에서 객체 생성 방법
  형식) 
  const(let) 객체명 = {
  속성명 : "값",
  속성명 : "값"
  }
*/

const product = {
					name : "제이크",
			        "나이" : 21,
			        job : "프로그래머"
			        }
                    
	product.product_sal = prompt("급료는?");
	
	document.write(`상품 이름 : ${product.name} <Br>`);
	document.write(`상품 나이 : ${product['나이']} <br>`);
	document.write(`상품 나이 : ${product.나이} <Br>`);	
	document.write(`상품 직업 : ${product['job']} <br>`);	
	document.write(`상품 급료 : ${product['product_sal']} <br>`);
	
	document.write(`<hr>`);
	
	for(let k in product) {
		document.write(`${k} : ${product[k]} <br>`);
	}
	
	
	const person = {
					name : "홍길동",
					eat : function(food) {
						document.write(`${this.name}님이 ${food}를 먹습니다` );
					}
					}
	person.eat("고기");