[JavaScript] 함수

코드스테이즈 41기 교육 내용을 정리하고 있습니다.

틀린 부분이 있으면 댓글로 알려주시면 감사하겠습니다. 

---

함수

어떤 목적을 갖고 있는 지시사항들이 묶여있는 블럭이다.

 

함수의 선언

funtion으로 선언을 하고 함수의 이름을 정해준뒤, 매개변수를 정해줍니다.

함수는 리턴을 하고 다시 처음으로 돌아옵니다.

function func1(a1,a2){
    let result ;
    result = a1+a2;
    return result;
}

 

함수의 호출

함수의 이름과 인자의 꼴을 맞춰 주면 됩니다.

다음에서 func는 a1과 a2 두개의 매개변수를 갖고 있기 때문에 호출할 때도 두개의 인자가 필요합니다.

document.write(func1(1,2)); //3
document.write(func1(1));   //Nan

 

함수 선언 방법

• 함수 선언식
• 함수 표현식
• 화살표 함수

함수선언식

함수선언식은 이전에 위에서 계속 보여준 꼴이다.

function func1(a1,a2){
    let result ;
    result = a1+a2;
    return result;
}

함수 표현식

func2를 변수로 선언하고 익명함수를 할당한다.

let func2 = function (a1,a2){
    let result ;
    result = a1+a2;
    return result;
}

화살표함수

위에 두가지 방식보다는 비교적 최신 방식이다.

함수표현식에 발전된 방식으로 똑같이 변수를 선언하고 function은 생략하고 매개변수를 먼저 적는다.

그 뒤에 화살표모양 =>를 적고 함수 body를 작성한다.

여기서 화살표가 function의 기능을 한다.

let func3 =  (a1,a2)=>{
    let result ;
    result = a1+a2;
    return result;
}

화살표함수에서 body의 내용이 return문만 존재할 경우 return과 중괄호를 생략할수 있다.

let func3 =  (a1,a2)=> a1+a2;

중괄호나 return을 넣으면 에러가 발생할 수 있다.

소괄호는 사용 가능하다.

 

표현식이 두줄 이상일 경우 중괄호와 return을 작성해주면 가독성이 더 좋으니 선택적으로 사용하는게 좋다.

 

거리 구하는 함수

속도와 시간으로 네거리를 구하는 함수를 만들어 보자

함수 선언식

function distance1(speed,time){
  let result;
  result =speed * time;
  return result;
}

함수표현식

let distance2 = function (speed,time){
  let result;
  result =speed * time;
  return result;
}

화살표 함수

let distance3 = (speed,time)=>{
  let result;
  result =speed * time;
  return result;
}

화살표 함수 단순화

let distance3 = (speed,time)=> speed * time;