베이스캠프 4일차
함수
오늘은 함수를 먼저 배웠다.
함수는 함수안에 명령문을 집어 넣어 언제든지 쓸수 있게 만들어 주는 문법이다.
예를 들어 마법상자에 마법재료를 넣어 마법상자 안에서 마법재료끼리 조합을 하여 마법도구를 만드는 것을 말한다.
function 마법상자 (마법재료) {
조합식
}
위에가 함수의 기본 형식이다.
기본형식 말고 다른 작성 방법이 있다.
함수 선언식, 함수 표현식, 화살표 함수 이렇게 세가지가 있다.
함수 선언식은 함수의 기본형식을 말한다.
함수 표현식은 let 마법상자 = function(마법재료) {
조합식
}
이렇게 적는다.
화살표 함수는 let 마법상자 = (마법재료) => {
조합식
}
이렇게 적는다.
함수의 작성 방법은 함수 선언식, 함수 표현식, 화살표 함수순으로 생겼다.
실무에서는 화살표 함수를 많이 쓴다고 한다.
내장함수
함수에는 내장함수가 있다.
내장함수는 자주 사용되는 함수를 자바스크립트 안에 미리 저장하여 편리하게 이용할 수 있도록 만든 것이다.
시간관련 내장함수에는 시간 지연 함수, 시간 반복 함수 등등..이 있다.
시간 지연 함수는 setTimeout(함수, 시간) 이다.
시간 지연 함수는 정해놓은 시간뒤에 그 함수를 실행 시킬 수 있다.
시간 반복 함수는 setInterval(함수, 시간) 이다.
시간 반복 함수는 지정된 시간마다 함수가 작동시키는 메소드이다.
3:00이라는 3분 타이머를 만드는 코드가 있다.
3분 타이머를 3분 > 2분 59초 > 2분 58초 이렇게 1초씩 줄어들게 만들어야 한다.
그러므로 3분은 180초니 2분59초는 179초, 2분58초는 178초, 2분57초는 177초라는 패턴이 있다.
전체시간(초) / 60 을 나누면 몫은 분이 되고 나머지는 초가 된다.
let time = 180; // time 변수를 선언하면서 180을 대입한다.
setInterval(function() { //setInterval 메소드를 사용한다.
if(time>=0) { // 만약 time이 0보다 크거나 같을 경우 아래의 코드를 실행 시킨다
let min = Math.floor( time / 60 ) // 분(min)에 time/60으로 몫(분)을 구한다. 근데 몫에도 소수점이 있기 때문에 Math.floor 메소드를 이용하여 소수점을 제거한다.
let sec = time % 60 // 초(sec)는 time % 60으로 나머지를 구한다.
console.log( min + ":" + sec) // 콘솔로그로 나타낸다.
time = time - 1 // 콘솔로그에 출력하고 나서 time을 1 빼준다 그러면 180초일 경우 179초가 된다.
{
},1000) // setInterval메소드의 매개변수는 ms단위 이다. 1000은 1초이다.
// 출력값:
// 3:0
// 2:59
// 2:58
// 2:57
// 2:56
// 문제가 생겼다. 3:0 에서 0하나가 부족하다. 왜나하면 00은 있을 수 없는 숫자 이기 때문이다.
let time = 180;
setInterval(function() {
if(time>=0) {
let min =Math.floor( time / 60 )
let sec = String(time % 60).padStart(2, "0") // 그래서 초를 문자열로 만들고 padStart 메소드를 이용하여 2자리가 아닌 경우 0을 추가 해준다.
console.log( min + ":" + sec)
time = time - 1
{
},1000)
// 출력값:
// 3:00 // 그러면 3:00이 나오게 된다.
// 2:59
// 2:58
// 2:57