함수

기본

정의 : 하나의 단위로 실행되는 문의 집합

• 함수 호출은 표현식
• return을 명시적으로 호출하지 않으면 반환값은 undefined
• 함수도 객체이고 변수, 프로퍼티, 배열 요소에 할당할 수 있음

this 키워드

• this는 함수를 어떻게 선언했느냐가 아니라 어떻게 호출했느냐에 따라 달라짐

const o = {
    name : 'Wallace',
    speak : function(){
        return `My name is ${this.name}!`
    }
};
 
console.log(o.speak()); //My name is Wallace!
 
const speak = o.speak;
console.log(speak === o.speak); //true
 
console.log(speak()); //My name is undefined!

const o = {
    name: 'Julie',
    greetBackwards: function () {
        function getReverseName() {
            let nameBackwards = '';
            for (let i = this.name.length - 1; i >= 0; i--) {
                nameBackwards += this.name[i];
            }
            return nameBackwards;
        }
 
        return `${getReverseName()} si eman yM`;
    }
};
 
console.log(o.greetBackwards());
  
//--------------------------------------------------
  
const o = {
    name: 'Julie',
    greetBackwards: function () {
        const self = this;
 
        function getReverseName() {
            let nameBackwards = '';
            for (let i = self.name.length - 1; i >= 0; i--) {
                nameBackwards += self.name[i];
            }
            return nameBackwards;
        }
 
        return `${getReverseName()} si eman yM`;
    }
};
 
console.log(o.greetBackwards());

Fure Function(순수 함수)

정의 : 입력이 같으면 결과도 반드시 같다 / 부수효과가 없다.

• 왜?
  • 가독성
  • 테스트
  • 재사용성

ES6 New Feature

• spread operator(확산 or 펼침 연산자) : "..."
  • 이터러블 객체를 개별 값으로 나눠서 사용하게 하는 연산자

function myFunction(a, b){
    return a + b;
}
  
//ES5
var data = [1, 4];
var result = myFunction.apply(null, data);
  
//ES6
let data = [1, 4];
let result = myFunction(...data);

let array1 = [2, 3, 4];
let array2 = [1, ...array1, 5, 6, 7];
array2; //[ 1, 2, 3, 4, 5, 6, 7 ]  

- rest parameter : 가변적인 함수 인자를 포착하는 용도로 사용. 반드시 마지막 매개변수여야 한다.
```javascript
//ES5
function myFunction(a, b){
    //함수안에만 존재하는 arguments는 배열이 아니라서 배열로 바꿔서 사용
    var args = Array.prototype.slice.call(arguments, myFunction.length);
    console.log(args);
} 
  
//ES6
function myFunction(a, b, ...args){
    //args가 배열로 넘어옴
    console.log(args);
}

• parameter default value(매개변수 기본값)

function f(a, b = "default", c = 3){
    return `${a} - ${b} - ${c}`;
}

f(5,6,7);// 5 - 6 - 7
f(5,6);// 5 - 6 - 3
f(5);// 5 - default - 3
f();// undefined - default - 3

객체 리터럴에 메서드 추가

//ES5
var o = {
    name: 'foo',
    bark: function () {
        return 'Woof!';
    }
};
 
//ES6
const o = {
    name: 'foo',
    bark() {
        return 'Woof!';
    }
};

destructuring assignment(해체할당)

• 객체나 배열을 변수로 '해체'할 수 있음
• 배열 :

//ES5
var myArray = [1, 2, 3];
var a = myArray[0];
var b = myArray[1];
var c = myArray[2];
  
//ES6
let myArray = [1, 2, 3];
let [a, b, c, d] = myArray;
d; //undefined
  
let [a, ,b] = [1, 2, 3];
a; //1
b; //3

• 객체 :

const obj = { b: 2, c: 3, d: 4 };
  
const {a, b, c} = obj;
a; //undefined
b; //2
c; //3
d; //ReferenceError : "d"는 정의되지 않았습니다.

• 매개변수 해체

function getSentence({subject, verb, object}){
    return console.log(`${subject} ${verb} ${object}`);
}
 
const o = {
  subject : 'I',
  verb : 'am',
  object : 'a boy',
};
 
getSentence(o);//I am a boy

function getSentence([subject, verb, object]){
    return console.log(`${subject} ${verb} ${object}`);
}
 
const arr = {'I', 'am', 'a boy'};
 
getSentence(arr);//I am a boy

arrow function : =>

• 간결한 구문을 지닌 익명함수
• 익명 함수를 만들어 다른곳에 전달하려 할때 가장 유용
• 문법
  • function을 생략해도 됨
  • 함수에 매개변수가 단 하나뿐이면 괄호도 생략 가능
  • 함수 바디가 표현식 하나라면 중괄호와 return문도 생략 가능

const f1 = function(){ return "hello!";}
const f1 = () => "hello!";  
  
const f2 = function(name) {return `Hello, ${name}!`;}
const f2 = name => `Hello, ${name}!`;
  
const f3 = function(a, b) {return a + b;}
const f3 = (a,b) => a + b;

• 기존 함수와 중요한 차이점
  • this가 다른 변수와 마찬가지로 정적으로 묶임
  • 객체 생성자로 사용할 수 없다
  • arguments변수 사용 x

const o = {
    name: 'Julie',
    greetBackwards: function () {
        const getReverseName = () => {
            let nameBackwards = '';
            for (let i = this.name.length - 1; i >= 0; i--) {
                nameBackwards += this.name[i];
            }
            return nameBackwards;
        };
 
        return `${getReverseName()} si eman yM`;
    }
};
 
console.log(o.greetBackwards());