함수
중복으로 작성 된 코드를 묶어 이름을 붙여 간편하게 호출할 수 있게 만드는 구성 요소
목차
1.함수를 생성하는 방법
함수를 생성하는 방법으론 함수 선언식, 함수 표현식 그리고 함수 표현식을 간단히 표현한 화살표 함수가 있다.
1 - 1. 함수 선언식
// 함수 선언문
function name(parameter){
console.log("이건 함수입니다");
}🚨함수는 매개변수(parameter)를 이용해 필요한 값을 전달 받는다.
매개변수가 여러 개일 시 콤마(,)로 구분해준다.
1 - 2. 함수 표현식
변수에 함수를 하나의 값처럼 할당한다.
let sayhi = function(){
console.log("함수 표현식입니다")
};🚨함수 표현식에서 익명함수를 쓰는 이유?
함수가 변수의 값으로써 생성된 것이기 때문에 함수 이름으론 호출이 불가능 하기 때문에 생략해도 문제가 되지 않는다.
작동방법
//함수생성
function sayHi(){
console.log("함수의 표현식 작동 방법")
}
//함수 복사
let func = sayHi;
func();//함수의 표현식 작동 방법 //복사한 함수를 실행(정상적으로 작동)
sayHi();//함수의 표현식 작동 방법1 - 3. 화살표 함수
함수표현식을 보다 단순하고 간결한 문법으로 만든 함수
() 안에 인자를 받고, => 우측 {}에 표현식을 쓴다.
let func = () => {
console.log("hello")
}
🚨인수가 하나밖에 없다면 괄호를 생략할 수 있다
//두 함수가 동일하게 작동한다.
let sum = (a,b)=> a + b;
let sum = (a,b) => {
return a+b
}🔎 함수 선언식 vs 함수 표현식
| 차이점 | 함수 선언식 | 함수 표현식 |
| 문법 | 독자적인 구문 형태로 존재 | 변수의 값으로 생성 |
| 함수 생성 순서 | 함수 실행 전 초기화 단계에서 함수 생성 | 실행 흐름이 함수에 도달했을 때 생성 |
| 호이스팅 발생여부 | 발생함 | 발생하지 않음 |
🚨호이스팅이란?
변수나 함수가 최상단으로 끌어올려지는 현상
//함수 선언식
greeting("Hee")//Welcome Hee.
function greeting(name){
console.log(`Welcome, ${name}`)
}
//함수 표현식
greeting("Hee")//error
let greeting = function(){
console.log(`Welcome, ${name}`)
}2. 함수를 호출하는 방법
함수 이름 옆에 ()를 붙여 호출할 수 있다.
function sayHi(){
console.log("안녕하세요");
};
sayHi();//안녕하세요3. 콜백함수
자신이 아닌 다른 함수에, 인수로써 전달 된 함수
주로 구조가 비슷한 함수를 하나로 묶어서 처리할 경우에 쓰인다.
예시
- 중복된 함수를 사용했을 때
function repeat(count){
for(let idx = 1; idx <= count; idx++){
console.log(idx)
}
}
function repeatDouble(count){
for(let idx = 1; idx <= count; idx++){
console.log(idx * 2)
}
}
repeat(5) // 1 2 3 4 5
repeatDouble(5) // 2 4 6 8 10
- 콜백 함수를 사용했을 때
function repeatFunc(count, callback){
for(let idx = 1; idx <= count; idx++){
callback(idx);
}
}
repeatFunc(5, (idx) => {
console.log(idx);
}); // 1 2 3 4 5
repeatFunc(5, (idx) => {
console.log(idx * 2);
});// 2 4 6 8 10
📖콜백함수와 화살표함수
화살표 함수를 사용하면, 보다 더 간결한 코드로 작성할 수 있다.
function main(value){
value();
}
//일반적인 콜백함수
function sub(){
console.log("콜백함수입니다")
}
main(sub())
//화살표 함수를 이용한 콜백 함수
main(()=>{
console.log("콜백함수입니다.")
})🔎반환값
함수 실행을 종료하고, 주어진 값을 함수 호출 지점으로 반환한다.
예시
function compare(num) {
if (num === 0) return "num의 값이 0입니다.";
if (num < 0) return "num의 값이 0보다 작습니다.";
if (num >= 10) return "num의 값이 10보다 크거나 같습니다.";
return "num의 값이 0보다 크고 10보다 작습니다";
}
compare(15); //num의 값이 10보다 크거나 같습니다.🚨특정조건에 부합하지 않으면 바로 return하게 만들 수 있다 → Early Return Pattern
출처
효빈 - 한 방으로 끝내는 자바스크립트 강의
Mordern Javascript Tutorial - https://ko.javascript.info/
Mdn web Docs -https://developer.mozilla.org/ko/