[DEV] javaScript - Function 함수

headerimg javaScript에서 함수를 어떻게 선언하고 사용하는지 기초부터 최신기술까지

FUNCTION(함수) Definitions(정의)


1. 함수선언식(Declaration)

function areaSizeCal(width, hight) {
    return width*hight;
}

//호출
var squareArea = areaSizeCal(30, 40);

함수선언식은 선언 해놓고 언제든지 사용할 수 있게 저장해놓고 나중에 areaSizeCal(30, 40);으로 호출하는 방식.

  1. 매개변수는 생략 할 수 있음.
  2. 호출할 때 사용 해야하니 함수명은 생략 할 수 없음.
  3. 함수는 { } 중괄호로 감싸져야하고 return문으로 결과값을 반환 할 수 있음.
  4. } 중괄호가 끝난 후 ; 세미콜론은 일반적으로 적지 않는다. 세미콜론은 실행 가능한 statements문을 구분하는 역할을 하니~ 함수선언문은 실행문이 아니기 때문에 적지 않는다.


2. 함수 표현식(Expressions)

var x = function (a, b){
    return a * b;
};
console.log(x(5, 5)); // 25

함수표현식은 변수에 저장하는 방식임.

  1. 함수의 이름이 없는 익명함수!
  2. 변수, 객체나 배열과 같은 곳에 저장할 수 있다.
  3. 호출이나 접근은 변수 이름으로 할 수 있다.
  4. 호이스팅에 영향을 받지 않는다.
  5. 클로져나 콜백으로 사용할 수 있다. // 자세한 사항은 다음 포스트에서..


3. Self-Invoking Functions(자가 호출 함수) immediately-invoked function expression (IIFE : 즉시 호출 함수 표현)

var x = "Hello!!";
(function (text) {
    console.log(text); // I will invoke myself
})(x);
//Hello!!

괄호안에 있는 function은 바로 실행된다. 뒤에 ();는 외부 객체나 변수를 넣어서 전달 할 수 있음.

  1. IIFE는 다른 표현도 있다고하는데, 권장하지 않는다. 보기 껄끄러워서
  2. 모듈화 되어있는 스크립트에서는 앵간하면 쓰지 않는다.


4. 그래서 뭘쓰지?

// Perfected
const foo = function foo_more_descriptive_name() {
    // ...
};

// just ok
const foo = () => {
    // ...
};

요즘은 이렇게 쓰는게 좋다더라, 함수 표현식은 함수이름이 없다. 하지만 위에서처럼 함수 설명이 가능한 이름을 써준다. 그리고 foo 변수에 할당하여 사용한다. =>화살표 함수는 함수의 새로운 표현법이다.

  1. var는 ES2015부터는 const와 let 을 쓴다. 호이스팅과 변수관리 때문에 잘안쓴다.
  2. const는 한번 할당 후 읽기 전용이 된다. let은 재할당이 가능하다.
  3. const와 let은 block-scoped이다.
  4. 함수를 할당 할 때는 const 선언을 한다. //자세한 사항은 변수 파트에서..

© 2018. All rights reserved.