개발일지
베이스캠프 4일 본문
함수란?
함수 는 우리가 만드는 기능 입니다.
지금까지는 메서드 같은 자바스크립트에서 제공되는 기능 들을 사용했지만, 이제부터는 우리가 직접 기능을 만들어 사용해보도록 하겠습니다.
function hello(){
alert("안녕하세요")
}
undefined
hello()
아래사진 처럼 alert을 쓰면 윈도우 창에 저런 창이 나옴
함수에는 이런기능 말고 여러가지 기능이 있다
함수를 만들려면?
예를들어, 두 숫자를 더하는 함수(기능)을 만들어 봅시다.
1. 아래의 그림에서 네모박스 가 함수(기능) 입니다
2. 상자로 들어가는 데이터 3, 5 는 입력데이터(매개변수= parameter) 라고 합니다.
3. 상자에서 반환되어 나오는 8 은 결과데이터(반환데이터= return 값) 라고 합니다.
위 사진을 보면 함수의 기본형식이고 function이란걸 써서 함수라고 알려주고 그 다음 함수이름을 지정해주고 입력데이터가 있다면 매개변수를 먼저 괄호를 이용해 입력하고 이때 입력데이터가 없다면 빈 괄호만 써도 가능하다.
중괄호 안에 이 함수가 어떤 기능을 할지 명령문을 작성해준다.
결과데이터를 반환해야 한다면 return을 이용하여 반환한다 이때 주의할점은 매개변수와 반환할데이터를 optional(선택적인) 이라고 위에 써져있는데 매개변수를 이용하려고 데이터를 받아왔는데 함수안에서 사용하지 않는다면 가져온 의미가 없으므로 잘 보고 사용
function hello(name){
alert(name + "님 안녕하세요")
}
undefined
let friend = "김코딩"
undefined
hello(friend)
함수의 표현식
const 함수이름 = function**(param1, param2, ...){
// ...code here
return 결과값
}
변수에 할당된 함수는 함수 선언식과 어딘가 비슷하게 생기지 않았나요?
비슷하게 보이지만, 어딘가 달라보이는 저 함수는 익명함수라고 부릅니다.
나중에 호이스팅을 공부하시게 된다면 알게되실텐데, 함수선언식의 기명함수는 호이스팅의 영향을 받는 반면에 함수 표현식의 익명함수는 호이스팅의 영향을 받지 않습니다.
const 함수이름 = ( param1, param2, ... )=>{
// ...code here
return 결과값
}
매개변수(parameter)와 return 값은 필수가 아닙니다.→ 매개변수와 리턴값은 있어도 되고 없어도 되는 값이기 때문에 반드시 적어주실 필요는 없습니다.상황에 따라 필요하실 때 적절히 적어주시면 됩니다.
함수 만즐어보기 예제
// 함수 선언식 - 더하기 함수 만들어보기**
function add(a, b){
return a+b
}
// 함수 표현식 - 빼기 함수 만들어보기**
const minus = function (a, b){
return a-b
}
// 화살표 함수 - 곱하기 함수 만들어보기
const multiply = (a, b)=>{
return a*b
}
만들어 둔 함수 실행시키기
만들어둔 함수를 실행시킬려면 해당 함수를 호출 해야한다.
함수를 호출할때는 함수의 이름을 부르고 ()를 뒤에 붙여준다.
//함수를 만들어 줍니다.
function sayHi(){
alert("안녕하세요 여러분!")
}
sayHi()
함수가 매개변수를 받고있지 않은 경우에는 호출시 인자를 넘겨주지 않아도 되지만,
아래와 같이 매개변수(파라미터)를 받고 있는 경우에는 호출시 적절한 인자(argu)를 넘겨주어야 합니다.
// 함수를 만들어 줍니다.
function calculator(a,b){
return a+b
}
// 함수를 호출해줍니다.
calculator(1,2)
실무예제 - {함수} 언제 사용하나요?→ 실무에서 함수는 너무나도 많이 사용되기 때문에 언제 사용한다 단정할 수 없습니다.
여러분들이 특정 기능이 필요하다 하실때마다 함수를 이용해서 만드시기때문에 기능이 필요하실때마다 사용하게 되실겁니다.
내장함수
내장함수라는 것은 자바스크립트가 함수 선언을 미리 해놔서 호출만으로 사용할 수 있는 함수를 뜻합니다.내장 함수의 종류에는 여러가지가 있습니다. 하지만, 우리는 많이 사용하는 세가지 정도만 알아보도록 하겠습니다.메세지를 지정할 수 있는 경고 대화 상자를 띄웁니다.
alert
메세지를 지정할 수 있는 경고 대화 상자를 띄웁니다.
//alert 만들어보기 _ 콘솔에서 해보세요!
alert("이렇게 만드시면 경고창이 생겨요!")
setTimeout
setTimeout(기능, 시간) // 기능은 함수이고, 시간은 밀리세컨드 단위입니다.
setInterval
setInterval(기능, 시간) // 기능은 함수이고, 시간은 밀리세컨드 단위입니다.
내장함수 예제
// setTimeout 예제
console.log("로딩을 시작합니다.")
setTimeout(function(){
console.log("로딩 완료.") // 로딩을 시작합니다.
}, 3000) // 로딩 완료.
// setInterval 예제
setInterval(function(){
const now = new Date()
const minutes = now.getMinutes()
const seconds = now.getSeconds()
console.log(minutes + "분" + seconds + "초") // 16분 11초
// 16분 12초
}, 1000) // 16분 13초
// 16분 14초
// ...
실무적용 - { setInterval() 언제 사용하나요? }
위와 같은 인증 타이머를 만들기 위해 아래와 같은 로직으로 구성하시면 됩니다.
let timer = 180
setInterval(function(){
timer = timer - 1;
const minutes = Math.floor(timer / 60)
const seconds = timer - minutes * 60
console.log(minutes + ":" + seconds)
}, 1000)
시간지연함수와 시간반복함수의 종료
시간지연함수와 시간반복함수는 중간에 강제로 종료할 수 있습니다.
// 시간지연함수 강제종료
const time = setTimeout(기능, 시간) // 시간지연함수를 임시로 변수/상수에 저장해놓습니다.
clearTimeout(time) // 저장했던 시간지연함수를 종료합니다.
// 시간반복함수 강제종료
const time = setInterval(기능, 시간) // 시간반복함수를 임시로 변수/상수에 저장해놓습니다.
clearInterval(time) // 저장했던 **시간반복함수를 종료**합니다.
각각의 종료 함수는 각자의 함수 안에서 사용할 수 있습니다.즉, clearInterval은 setInterval안에서 사용할 수 있다는 뜻 입니다.
템플릿 리터럴
템플릿 리터럴이란?
// 오늘 날짜 예쁘게 보여주기
console.log("오늘은 " + year + "년 " + month + "월 " + date + "일 입니다.")
// 오늘은 2021년 4월 3일 입니다.
// 지금 시간 예쁘게 보여주기
console.log("지금은 " + hours + "시 " + minutes + "분 " + seconds + "초 입니다." )
// 지금은 13시 30분 17초 입니다.
하나만 더!문장과 변수를 함께 쓸 때, 더하기(+)로 연결하는 것 보다 더 깔끔한 방법이 있나요?있습니다! 아래와 같이 해보세요!
console.log(`오늘은 ${year}년 ${month}월 ${date}일 입니다.`)
console.log(`오늘은 ${hours}시 ${minutes}분 ${seconds}초 입니다.`)
이렇게 사용하는 방식을 템플릿 리터럴(Template literal) 이라고 합니다.실무에서는 이 방식을 사용합니다
