Software Developer

느리지만 꾸준히 씁니다.

함수의 필요성

  • 재사용성 : 같은 코드를 중복해서 여러번 써해야하는 경우에 함수로 코드를 작성해서 필요할때마다 호출하여 사용할 수 있다.
  • 유지보수 : 같은 코드를 여러번 중복해서 쓰게되면 그만큼 유지 보수가 힘들어진다. 하나의 함수를 여러번 호출에서 사용할 경우 함수만 수정하게되면 모든 코드가 수정되는 것과 마찬가지 이기 때문에 유지보수가 수월해진다.
  • 신뢰성 : 여러번 같은 코드를 작성하더라도 사람이기때문에 실수가 있을 수 있다. 그런 실수를 하나의 함수로 관리하여 줄여줄 수 있음으로 함수의 신뢰성을 높일 수 있다.
  • 가독성 : 함수 이름(식별자)를 통해서 함수 내부 코드의 역할을 이해할 수 있도록 하여 함수 내부 코드를 모두 읽지 않고도 이해를 도울 수 있기 때문에 코드의 가독성을 높인다.


함수의 형태

  • 함수 선언문 형태 
    function 함수이름() {
  함수내용
};
    
함수이름();
  • 함수 표현식 형태 
    let 함수이름 = function() {
  함수내용
};
    
함수이름();
  • 화살표 함수 형태 
    let 함수이름 = () => {
  함수내용
};
    
함수이름();


함수의 정의

  • function뒤에 함수의 이름을 쓴다.
  • 함수 이름 바로 뒤 () 을 넣어서 함수의 시작을 알린다.

  • 시작을 알리고 {}안에 함수의 내용을 적어준다.

  • 예제 
    function firstFunc() {
  let name = "Sum"
  return "Hi!, " + name
};
  • 아래 예제들은 모두 위의 함수 선언문이 아닌 화살표 함수를 사용할 예정이다.


함수의 호출

  • 간단하게 함수이름으로 호출하여 함수를 사용해줄 수 있다. 
    firstFunc();  // Hi!, Sum 출력
  • 형태 : 함수이름();
  • 함수를 정의해도 호출하지 않으면 실행되지 않는다.

매개변수와 인수

  • 위 함수 정의 예제에서 이름이 “Sum”으로 지정되어 있다. 만약, “Rizy”라는 이름을 출력하고 싶다면 또다른 함수를 만들어야 한다. 
    let firstFunc = () => {
  let name = "Sum"
  return "Hi!, " + name
};  // 함수를 호출하면 "Hi!, Sum" 밖에 나오지 않는다.
    
let secondeFunc = () => {
  let name = "Rizy"
  return "Hi!, " + name
};
  • 위와같이 쓰게된다면 함수는 한정적으로 사용될 수 밖에 없다.
  • 조금 더 효과적인 함수의 활용을 위해 매개변수와 인수를 활용하자.

매개변수 : name

  • 함수 의 시작을 알리는 firstFunc() {}에서 소괄호 안에 매개변수를 적어줄 수있다.
  • 위 예제에서의 name을 매개변수로 써주면 아래와 같다. 
    let firstFunc = (name) => {
  return "Hi!, " + name
};

인수 : “Sum” 또는 “Rizy”

  • 함수를 호출하면서 소괄호 속에 인수를 넣어주면 함수안의 매개변수로 전달된다.
  • firstFunc()의 소괄호 원하는 이름(“Sum”또는 “Rizy”)을 넣어주면 아래와같이 하나의 함수로 다른 두 가지의 값을 얻을 수 있다. 
    let firstFunc = (name) => {
  return "Hi!, " + name
};

firstFunc("Sum")  // "Hi!, Sum"
firstFunc("Rizy")  // "Hi!, Rizy"


함수의 반환과 종료 → return

  • 함수는 항상 결과값을 가지고 있다.
  • return은 함수의 결과값을 나타나게해 주며, 그 함수가 끝나도록 해주는 주문이다.
  • 함수내부애서 return을 해주지 않으면 결과는 undefined 로 나온다.

반환

  • 함수를 정의한 후 그 함수의 결과는 return을 통해 나타난다. 
    let learnReturn = () => {
  return "함수의 결과값"
};

console.log(learnReturn());  // 함수의 결과값
    • 위에서는 return한 결과값을 보기위해 콘솔로그를 찍어보았으며, 콘솔창에는 "함수의 결과값" 이 찍혀 나온다.

종료

  • 함수속 return을 만나면 그 함수는 종료된다. 
    let endFunc = () => {
  let name = "함수"
  console.log("return공부중")
  return name + "는 끝났습니다."
  console.log("다음에 또 만나요.")
};

console.log(endFunc());
    • 위 console.log(endFunc()); 에 해당되어 출력되는 함수는 다음과 같다.

[이미지 출력]

return으로 인해 함수가 끝이 났기 때문에 “다음에 또 만나요.”는 출력될 수 없는 것이다.

참고