화살표 함수

아래 내용은 웹 개발자를 위한 자바스크립트의 모든 것 3장을 읽고 정리한 내용입니다.

함수 전반에 대해 설명하는데 이미 알고 있는 내용은 읽고 넘겼고, 화살표 함수에 대한 부분은 기존의 몰랐던 부분과 애매하게 아는 것을 별도 정리를 함

개요

ES2015에서 추가된 함수를 표현하는 문법

// ES5
var data = array.map(function(item) { 
    return item.value); 
});

// ES6
var data = array.map(item => item.value); 

기본적으로 게으른 개발자들을 위해 심플하게 함수를 심플하게 표현할 수 있게 되었다.
구문의 구조는 아래와 같다.

Parameter => Return 값
parameter 혹은 return 값을 여러 개 쓰고 싶을 경우 괄호 ()로 묶어서 표현한다.
(Parameters) => (Returns)
함수 내에 여러 개의 실행 문이 있을 경우는 중괄호로 묶어서 표현한다.
Parameter => {
   구문 1; 
   구문 2;
}

화살표 함수에서 여러 개의 Return을 활용하는 방법

함수의 Return이 여러 개인 경우, 두 번째 값이 Return 된다. 화살표 함수를 구문으로 사용하려면 중괄호 {}를 써도 되지만, 여러 개의 함수를 호출만 하고 최종적으로 한 개의 값을 Return 하고 싶다면 아래와 같은 식으로 표현이 가능.
secondFunc(d.item) 값이 map 함수의 결과 값으로 return 된다.

test => data.map(d => (firstFunc(d), secondFunc(d.item)));

// 위와 같은 표현
test => data.map(d => { 
    firstFunc(d);
    return secondFunc(d.item)
});

첫 번째가 간단해 보이긴 하지만 개인적으로는 추천하지 않는다. 함수의 Return 값이 여러 개인 경우에 대한 처리가 개인적인 생각으로는 일반적으로 학습되는 부분이 아니라, 혼란을 줄 수 있을 것 같다.
다만, 잘 쓰면 긴 코드를 깔끔하게 한 줄로 표현할 수 있어서 좋을 것 같기도 하다.

This

자바스크립트 공부를 하면서 가장 많이 만나는 키워드이고, 개인적으로는 제일 많이 헷갈렸다. 현재 콘텍스트에서 this가 어떤 것인지를 종종 출력을 해봤을 정도로, 잘못 알고 있는 경우도 꽤 많았다.
함수를 객체로 만들고, 그 객체 내에서 콜백을 사용하면서 콜백 내에서 this가 객체를 참조하기 바랄 때!

콜백

함수를 인자로 넘겨주고 나중에 실행(call back)을 하는 개념.
주로 비동기 호출에 많이 사용 됨 (윈도의 setTimeout)
콜백 함수의 장점은 “함수”를 인자로 넘기기 때문에 넘기는 함수를 다양하게 사용할 수 있다는 것이고, 단점은 코드 가독성이 떨어진다!
예를 들어, 아래와 같은 경우. 여기서는 calc 함수의 func가 call back 함수인 셈.

function calc(a, b, func) {
    return func(a, b);
}

function add (a, b) { return a + b; }
function minus (a, b) { return a - b; }

calc(1, 2, add);
calc(1, 2, minus);

This와 콜백

다시 this로 돌아와 콜백과 this의 관계를 보자!
화살표 함수와 일반 함수의 차이를 보려면 함수를 객체로 만들어야 돼서 obj 함수를 선언하고 객체 생성을 하였다. 그 뒤 함수 호출을 해보면 function으로 생성한 minus와 add가 다른 this를 가리킴을 볼 수 있다.
화살표 함수인 add는 기존 객체인 obj를 this로 가지며, 일반 함수인 minus는 윈도를 객체로 갖는다.

function obj() {}
obj.prototype.test = function () {
  console.log("obj", this);

  const add = (a, b) => {
    console.log("add", this);
    return a + b;
  };

  function minus(a, b) {
    console.log("minus", this);
    return a - b;
  }

  this.calc = function (func) {
    func(1, 2);
  };

  this.calc(add);
  this.calc(minus);
};

var d = new obj();
d.test();

화살표 함수는 this를 가지고 있지 않다.
내가 이해한 방식으로 작성한다면, 화살표 함수는 어디에도 속하지 않고 존재하기 때문에 자신이 호출되는 위치의 this를 활용한다.
화살표 함수를 객체 안에 넣고 this를 쓰면 함수 객체가, 그냥 호출하면 winodw 객체가 되는 것이다.
화살표 함수는 this를 가지지 않기 때문에 생성자 (Constructor)도 없다. 그렇기 때문에 객체로 생성할 수도 없다.

Summary

기본적으로 화살표 함수는 코드를 간결하게 만들어주고, this 처리를 쉽게 해준다. 다만, this를 통해 뭔가를 하고자 하는 함수의 경우 화살표 함수보다는 전통적인 함수를 쓰는 것이 좋다 (window 객체에 있는 함수를 호출해야 하는 경우라던가)

Learned

with 문

과제를 진행하며, 객체에 굉장히 많은 것들이 담길 때가 있다.
객체 속성이 많은 변수의 변수 명을 수정하는 건 굉장히 스트레스인 일이다. 아마도 vscode의 ctrl + d로 같은 이름 일괄 선택이 없다면 더더욱 변수 명 변경은 꿈꾸기 힘들 것 같은데.. with 문이 그런 고민을 해결해 준다.
실제로 project라는 변수는 아무래도 기본 객체이기 때문에 더 많은 것을 담고 있을 가능성이 높다. 간단하게 작성해 본 것인데, 만약 with 문 없이 작성했다면 객체 내에 객체가 있을 경우는 뭘 사용하는지 알기 위해 더 많은 . . . 이 필요할 것이다.
앞으로 잘 사용하게 될 것 같은 느낌!

const project = {
  id: 1,
  name: "haha",
  created: Date.now(),
  contents: {
    id: 2,
    name: "contents",
  },
};

console.log(project.id, project.name, project.created);
with (project) {
  console.log(id, name, created);
}

console.log(project.contents.id, project.contents.name);
with (project.contents) {
  console.log(id, name);
}

콤마에 대해..

vscode가 json 객체의 가장 마지막 속성에 항상 콤마(,)를 자동으로 붙여 주기에 (아마도 디폴트 설정인 듯) 당연한 건 줄 알았는데 ES2017에 추가된 기능인가 보다..!
나는 주석을 최소한으로 혹은 작성하지 말자 주의라 사실 콤마 뒤에 뭔가를 작성할 일이 없어서 상관이 없었는데, 가장 마지막 속성에 콤마를 붙일 수 있게 됨에 따라 추후 변수 추가 시 오류 발생 률이 많이 떨어졌을 것 같다.
이는 함수 파라미터에도 동일하게 적용된다. 다만, 함수 파라미터에는 마지막에 콤마가 있을 경우 vscode가 콤마를 자동으로 지워 준다. (남겨두는 설정이 있을지도 ?)