[ javascript ] 함수

코드를 짜다 보면 반복적인 일을 수행 해야 할일이 생기는데 이러한 반복적인 작업을 효율적으로 하기 위해 함수를 사용한다. 함수를 사용하는 방식은 여러가지가 있다.

함수 선언식

function 함수이름 () {}

위와 같이 function으로 시작해서 함수를 선언하는 것이 함수 선언식이다. ()로 값을 입력 받아 {}안의 코드를 실행하는 것이다.

//직사각형의 넓이를 구하는 함수를 만들어 보자
//아래의 함수를 해석해 보자면 area라는 함수를 만들었는데, 
이 함수는 width와 height값을 변수로 받을 것이고, width와 height를 곱해서 구해진 넓이를 area라는 변수에 할당을 하고, 구해진 area를 return한다는 의미이다.



function area (width, height) {
  
  let area = width * height;
  return area;
  console.log(area);
}

// 함수에서 중요한 것이 함수를 호출하는 과정이 있어야 함수가 실행이 되는다는 것이다. 함수 호출은
함수이름()를 입력해주면 함수가 호출이 되고 호출을 하면서 ()에 변수의 값을 같이 입력해 주면 된다.
//아래와 같이 함수를 호출하면 area라는 함수에 width가 10, height가 20 이 전달 되었고 이 둘을 곱해서 구한 넓이가
콘솔에 출력이 될 것이다.

area(10, 20); 

함수 표현식

함수를 만들고 바로 그 함수를 변수에 할당을 해서 사용하는 방식을 함수표현식 이라고 한다.

const 변수이름 = function () {}

위와 같이 사용을 하고, 변수이름이 곧 함수이름이기 때문에 함수 선언식 처럼 function다음에 함수 이름이 따로 오지 않는다.

//coding이라는 변수에 Hello world를 리턴하는 함수를 할당해 주었다.

const coding = function () {
  return 'Hello World!'
}
//여기서 coding이라는 변수를 콘솔에 찍어 보면
console.log(coding)  // ƒ coding() {}  이러한 결과가 출력이 될 것인데 coding이라는 함수가 있다는 것이다.

//아직 함수를 호출하지 않았기 때문에 리턴값이 아니라 ƒ coding() {} 이러한 값이 나오는 것이다.
const codingReturn = coding()
console.log(codingReturn)  //  이렇게 하면 'Hello world!' 가 출력이 될 것이다.

화살표 함수

화살표 함수는 함수 표현식을 좀 더 간편하게 사용하기 위해 만들어 졌다.
const 변수이름 = () => { } 로 function이라는 글씨가 빠지는 형태를 띄고 있다.

const coding = () => {
return 'Hello World!'
}
console.log(coding())  // 'Hello World!' 

//추가적으로 위의 함수 처럼 그냥 다른 과정 없이 값만 리턴하고 있다면 {}와 return 모두 생략할 수 있다.
const coding = () => 'Hello World!' // 이렇게 해줘도 coding이라는 함수는 Hello World!를 리턴한다는 의미이다.