함수(Function)

함수(Function)란?!

함수(Function)을 만드는 방법 

1. 함수 선언문 

- function 키워드를 통해서 함수를 선언하는 일반적인 방식을 함수 선언

- 함수 이름 생략 불가능

- 호이스팅으로 인해서 함수를 선언하기 이전에 함수를 호출해도 정상적으로 동작하는 특징
함수 선언 방식은 함수 스코프

function add(x,y){
    return x + y; 
}

2. 함수 표현식 

- 이 함수 선언을 변수에 할당하거나 다른 함수의 아규먼트(Arguments)로 활용하면서 마치 함수 선언을 값처럼 활용해서 함수를 만드는 방식을 함수 표현식  

- 함수 이름 생략 가능

- 반드시 변수가 선언된 이후에 함수를 호출해야 정상적으로 동작

- 변수에 할당하는 경우에는 할당된 변수의 특성에 따라 스코프가 결정

// without 함수 이름 
var add = function(x,y){
    return x + y; 
};

// with 함수이름
var add = function add(x,y){
    return x + y; 
}

3. Function 생성자 함수 

var add = new Function('x', 'y', 'return x + y');

4. 화살표 함수 (ES6) 

var add = (x,y) => x + y;

5. 즉시 실행 함수

// 매개 변수 없을 때 
(function(){
    return 10+20;
}()); 

// 매개변수 있을 때 
(function(x,y){
  result= x + y 
}(10,20));

 

=================================================================

 

MORE ABOUT 값으로의 함수( 함수표현식) 

const printJS = function(){
    console.log('JavaScript'); 
}; 

console.log(printJS);

1. 프러퍼티(Property)의 메서드로 사용 

// 프라퍼티의 메서드 

const myObject = {
    brand : "Apple", 
    sayHi :  function(name) {
        console.log(`HI ${name}`);    
    } 
}  
myObject.sayHi("YUNANA") // HI YUNANA

2. 배열(Array)의 요소로 사용 

const Arr = [
    'yuna', 
    2017, 
    true, 
    function(name){
        console.log(`HI! ${name}`);
    },  
];  
Arr[3]("YUNA");  // Hi! YUNA

3. 다른함수의 파라미터(parameter) 

const myBtn = document.querySelector('#myBtn'); 
myBtn.addEventListener('click', function(){
    console.log("button is clickec"); 
});

=================================================================