[강좌]자바스크립트 함수 설명 및 정리

자바스크립트 함수

 

 자바스크립트는 다양한 형태의 함수가 있어 헷갈리는 부분이 있습니다.  함수 선언문, 함수표현식, 화살표 함수, 리턴문이 한 줄일 때 함수 표현방법, 매개변수가 있는지 없는지 있다면 몇 개 인지에 따라 함수 표현방법을 다르게 사용할 수 있습니다. 이런 다양한 함수형태를 정리해보려고 합니다.

---

1. 기본 함수

기본 함수는 아래와 같습니다. 

function sayHello(name){
    console.log(`Hello ${name}`);
    return true;
}

function showError(){
    alert("에러가 발생했습니다. 다시 시도해주세요.");
}
let result = showError();
console.log(result);

결과 
undefined

 

참고 2) 디폴트 매개변수 사용 가능
디폴트 매개변수 : 함수 호출 시 매개변수를 넣어 주지 않으면 지정해준 디폴트 값으로 매개변수에 초기화된다.

function hello(name = 'friend'){    
    let msg = `Hello, ${name}`;    
    console.log(msg);
}
hello(kim);
hello();

---

2. 함수 선언문

초기에 모든 함수 선언문을 찾아서 생성해 놓는다. 따라서 호이스팅(함수를 어디서든지 호출)이 가능하다.  예를 들면 함수 호출 구문이 함수 선언 위에 있더라도 함수 호출이 가능하다.

console.log(sub(100,3));  // 함수 호출 =>에러 나지 않음
function sub(num1, num2){ // 함수 선언
    return num1-num2;
}

 

3. 함수 표현식

초기에 함수를 찾아 생성하지 않고 코드에 도달하면 생성한다.
따라서 함수가 선어 된 후에만 함수 호출이 가능하다.

//hi(); //=> error
let hi = function(){
    console.log("hi");
}
hi(); // ok

결과
hi

 

4. 함수 여러 가지 형태

4-1 기본 화살표 함수

함수를 간결하게 작성 가능하며 방법은 
function 빼고 ) 뒤에 =>를 넣는다.

let mul = function(num1,num2){
    return num1*num2;
}

let mul = (num1,num2)=>{
    return num1*num2;
}

let mul = (num1,num2)=>(    
    num1*num2
); // ; 는 생략 가능

4-3 return문이 한 줄 일 때 2

위 4-2에서 ( )를 뺄 수 있다. 

 ※ 아래 (num1*num2)에서 (  )를 빼면 됨

let mul = (num1,num2)=>num1*num2;

 

4-4 매개변수가 하나일 때

위 4-3에서 매개변수가 한 개일 때 매개변수의 ( )도 뺄 수 있다.

※ 기존 (name)에서 (  )를 뺄 수 있음

let hiyo = name=>`Hi, ${name}`;

4-5 매개변수가 없는 함수

매개변수가 없는 함수라면 괄호를 생략할 수 없다.

let hiyo = ()=>"Hiyo"; 

 

자바스크립트 함수의 종류와 간단한 예제를 통해 사용방법을 알아봤습니다.

긴 글 읽어 주셔서 감사합니다.

 

 

유튜브 코딩앙마 님의 영상을 보고 공부한 내용을 바탕으로 작성하였습니다.
혹시 틀린 내용이 있다면 댓글 부탁드립니다.