함수

함수에 대하여

자바스크립트에서 함수는 function 키워드로 정의하며 그 뒤에 매개 변수와 함수 본문을 순서대로 씁니다.

function sayHi(name, message) { 
     console.log("Hello " + name + ", " + message);
}

ECMAScript의 함수는 꼭 값을 반환하지 않아도 됩니다.
모든 함수는 언제든 return 문 뒤에 반환할 값을 써서 값을 반환할 수 있습니다.

function sayHi(name, message) { 
     console.log("Hello " + name + ", " + message);
     return ;
     console.log("JB");
}

함수는 return문을 만나는 즉시 종료됩니다.
그렇기 때문에 JB라는 문자열을 출력하는 console.log는 동작하지 않습니다.

return 은 아래와 같이 여러개도 쓸 수 있습니다.

function diff(num1, num2) {
     if (num1 < num2) {
          return num2 - num1;
     } else {
          return num1 - num2;
     }
}

var result = diff(7, 10);
console.log(result);

strict mode일 경우 여러 제한이 존재합니다.

  • 함수 이름에 eval이나 arguments 사용불가
  • 매개변수 이름에도 eval이나 arguments 사용 불가
  • 서로 다른 매개변수에 같은 이름 사용 불가

매개변수에 이해

ECMAScript의 함수 매개변수는 다른언어와는 다르게 동작합니다.
함수에서 매개변수를 두 개 받도록 만들었더라도 반드시 매개변수 두 개를 넘겨야 하는건 아닙니다.
한 개 세 개, 아예 넘기지 않더라도 인터프리터는 이를 에러로 간주하지 않습니다.
이는 매개변수가 내부적으로 배열로 표현되어 있기 때문인데, 그렇기 때문에 빈배열이 들어와도 상관 없고 필요한 매개변수보다 많이 들어와도 상관하지 않습니다.
함수는 arguments라는 객체를 하나 갖고있으며 이 객체를 통해 매개변수 값에 접근 할 수 있습니다.

function sayHi() {
     console.log("Hello " + arguments[0] + ", " + arguments[1]);
}

sayHi("Nicholas", "how are you today?");

arguments객체의 length 프로퍼티를 통해 함수의 매개변수가 몇개 전달 되었는지도 알 수 있습니다.

function howManyArgs() {
     console.log(arguments.length);
}

howManyArgs("string", 45); //2
howManyArgs(); //0
howManyArgs(12); //1

위 예제를 통해서 떠올릴 수 있겠지만
이를 이용하여 매개변수 숫자에 제한을 두지 않고 매개변수 개수에 맞게 반응 할 수 있습니다.

arguments.length를 이용하여 오버로딩을 구현 할 수 도 있습니다.

function hotManyArgs(){
     if(arguments.length == 1){
          //1개의 arguments에 대한 처리
     }
     else if(arguments.length == 2){
          //2개의 arguments에 대한 처리
     }
}

오버로딩이 없다.

자바스크립트는 오버로딩이 없습니다.
오버로딩은 함수 이름이 같더라도 매개변수의 타입이나 개수가 다를경우 서로 다르게 동작하게 하는 것을 말합니다.
하지만 자바스크립트에서는 오버로딩을 지원하지 않습니다.

그렇기 때문에 다른언어라고 생각하고 매개변수가 다른 같은 이름의 함수를 여러개 생성 했다 하더라도 오버로딩이 지원되지 않기 때문에 마지막 함수가 해당 이름을 소유합니다.

함수 내에 매개변수의 타입과 숫자를 체크해서 그에 맞게 반응하는 방법으로 오버로딩을 흉내 낼수는 있습니다.

마치며

간단하게 자바스크립트 함수의 특징을 알아보았습니다.
여기까지가 자바스크립트의 기초였습니다.
지금까지 보신 내용을 숙지하셔서 한단계 더 깊게 들어갈 준비가 되셨으리라 믿습니다.
다음은 스코프와 메모리에 대해서 알아보겠습니다.

이 포스트는 프론트엔드 개발자를 위한 자바스크립트(인사이트)에서 발췌한 내용이 포함되어 있습니다.
내용 전문이 아니기 때문에 자세하게 알고싶으신 분은 프론트엔드 개발자를 위한 자바스크립트(인사이트) 서적을 참고 하시길 바랍니다.


저작자표시