[Javascript] Function(1)

Posted by Sa-gom Blog on November 5, 2017

Function은 명령어의 집합이다. 함수를 선언하는 방법은 두가지가 있어~~

함수의 선언(function declaration)=> 선언적

function add(a,b){
  return a+b;
}
var result=add(3,5);//함수의 호출

함수 표현식(function expression)=> 익명

var add=function(a,b){//이름이 없는 익명함수, 이름으로 뭘 적어도 되지만 대부분 생략
  return a+b;
  var result=add(3,5);//함수의 호출
}


var add=function(x,y){ //익명적 함수
  var result=x+y;
  return result;
}
console.log(add(3,5));//8
==============================
function f(){

return function add(x,y){return x+y;};
  }
console.log(f()(3,5))

자바스크립트에 함수는 항상 반환 값이 있다. return을 정해주지 않으면 undefined값이 반환된다.

function add(x,y){

  result=x+y;

  console.log("length: "+length);
  console.log("arguments.length: "+arguments.length);
    for(i=0;i<arguments.length;i++){
      console.log(arguments[i]);
    }
  return result;
}
add(3,4,5,6)

함수의 호이스팅(Hosting)

logMessage();   // 함수 호출
sumNumbers();  // 함수 호출

function logMessage() {            // 1. 함수 선언
  return 'worked';
}

var sumNumbers = function () { // 2. 함수 표현식
  return 10 + 20;
};
  • 만일 위와 같은 문장이 있다면, 호이스팅에 의해 아래와 같이 해석된다. (호이스팅은 선언부를 위로 옮기는 것을 말한다.)
function logMessage() {
   return 'worked';
}
var sumNumbers; //undefined

logMessage();  // OK.
sumNumbers(); // 에러. Uncaught TypeError: sumNumbers is not a function

sumNumbers = function () {   //  var sumNumbers = function () { 에서 선언부가 분리됨.
  return 10 + 20;
};  //Number

함수 선언위치는 함수 호출과 관계가 없다. 함수표현식은 함수가 호출되기 이전에 위치해야한다.

함수호출시 입력된 인자(argument)를 저장하는 객체(배열 아니다!!!!)

arguments를 이용하여 파라미터의 갯수를 알며 접근할 수 있다.

function findMax(a, b) {
     var i;
     var max = -Infinity   // 음의 무한대
     console.log(arguments);  

     for (i = 0; i < arguments.length; i++) {   //
           if (arguments[i] > max) {
               max = arguments[i];       // 배열처럼 접근 하지만 배열은 아니다!!!
           }
     }
     return max;
}
var max =  findMax(5,3,6,1,7);  // max = 7

console.log("findMax.length="+findMax.length);  // findMax.length는 함수 findMax에 선언된 매개변수의 개수

매개변수의 초기화와 유효성검사

fucntion add(a, b) {
    b = b || 10;  // a의 값이 false값(0, undefined)인 경우 10으로 초기화한다.

    return a + b;
}
  • 유효성 검사 null은 object를 위한 것이고, undefined는 변수, 속성 메서드를 위한 것
if(myObj!==null&&typeof myObj!==="undefined")//에러
if (typeof myObj !== "undefined" && myObj !== null)   // OK

일단 정의된 것인지부터 확인해야 한다. 정의되지 않았다면 myObj!==null에서 에러 발생한다.

-매개변수가 숫자인지 확인하기

if(typeof x !== 'number') return '숫자를 전달하세요.';    // x의 값이 2이면 참,  '2'이면 거짓

Hoisting - 모든 선언문을 소스코드의 맨위로 이동시키는 것, 가능하면 알아서 이동시켜라

x = 5; // 변수 x에 5를 저장. 변수의 선언은 아직 안함.
elem = document.getElementById("demo");  // Find an element
elem.innerHTML = x;                       // Display x in the element
var x; // 변수 x의 선언 - 아무런 문제가 없음. 선언문이 맨위로 자동이동될 것임.

그러나… 초기화된 선언문은 자동이동(Hoisting)되지 않는다. 선언은 이동하되, 초기화문장은 그 자리에 머물기 때문이다.(두 문장으로 쪼개짐)

var x = 5; // Initialize x

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // y는 undefined

var y = 7; // Initialize y

위의 코드는 아래와 같이 호이스팅됨.

var x = 5; // Initialize x
var y;

elem = document.getElementById("demo"); // Find an element
elem.innerHTML = x + " " + y;           // y는 undefined

y = 7; // Initialize y

화살표 함수-ECMAScript6 그냥 람다식!!