이 문서는 https://rainsoft.io/make-your-javascript-code-shide-knockout-old-es5-hack/ 를 번역한 내용입니다.

4. 기본 매개변수

PHP, Ruby 그리고 Python과 같은 다양한 동적 프로그래밍 언어에는 기본 매개변수 기능이 있다.

하지만 자바스크립트에서는 없었다. 만약 인자가 전달되지 않았다면 기본값은 undefined였다. 지금까지는 그 정도의 기능만 있었다.

기본 매개변수를 흉내 내기 위해서는 다음과 같은 추가적인 연산이 필요했다.

function myFun(req, opt) {  
  opt = opt !== undefined ? opt : 'optional';
  return req + ' ' + opt;
}
myFun('required'); // => 'required optional'  

opt 값이 없는 채로 함수가 실행된다면, 기본값으로 undefined가 될 것이다. 3항 연산자를 통해 opt !== undefined ? opt : ‘optional’ 기본값을 적용할 수 있다.

잘 동작하긴 하지만, 더 나은 방법이 필요하다.

• ES2015에서는 기본 매개변수를 정의하는 방법이 있어서 이 문제를 해결할 수 있게 되었다.

function myFun(req, opt = 'optional') {  
  return req + ' ' + opt;
}
myFun('required'); // => 'required optional'  

이 함수의 정의를 보면, function myFun(req, opt = ‘optional’)에서 opt의 기본값으로 ‘optional’이라는 값을 볼 수 있다. 깔끔하고 간결하다.

기본 매개변수는 함수가 정의되는 시점이 아닌, 실행되는 시점에서 계산된다는 점을 알아둬야 한다. 만약 하나의 객체가 기본 매개변수로 사용된다면, 함수가 실행될 때마다 새로운 객체 인스턴스가 만들어진다.

5. 속성 값을 복사하는 법

ES5에서는 lodash나 jQuery와 같은 라이브러리를 적용해서 확장 유틸 함수를 사용했었다. 아니면 별도 메소드를 자체로 개발했다.

function extend() {  
  if (arguments.length === 0) {
      return null;
  }
  var target = arguments[0];
  for (var index = 1; index < arguments.length; index++) {
    for (var key in arguments[index]) {
      if (arguments[index].hasOwnProperty(key)) {
        target[key] = arguments[index][key];
      }
    }
  }
  return arguments[0];
}
var defaults = {  
  height: 800,
  width: 200
}
var settings = extend({}, defaults, {  
  height: 500
});
settings; // => { height: 500, width: 200 }  

extend(target, source1, source2, …) 함수는 source1과 source2, 그리고 나머지로부터 속성 값을 대상 객체로 복사하는 역할을 한다. settings 객체는 defaults과 { height: 500 } 객체로부터 속성 값을 받는다.

• ES2015에 있는 Object.assign() 함수는 이러한 요구사항을 위해 개발되었다. 안정적인 네이티브 방법의 해결책이다.

Object.assign()가 적용된 코드를 확인해보자.

var defaults = {  
  height: 800,
  width: 200
}
var settings = Object.assign({}, defaults, {  
  height: 500
});
settings; // => { height: 500, width: 200 }  

실행되는 코드는 크게 바꾸지 않았고, 객체 속성값을 복사하기 위해 Object.assign() 네이티브 함수를 사용했다. 덕분에 모듈 의존성이 하나 줄어들게 되었다.

6. 이제 겨우 걸음마 단계일 뿐

이것들은 이전 자바스크립트로 개발된 여러 꼼수 중 겨우 일부분일 뿐이다.

ECMA Script 2015에 있는 새로운 개념은 자바스크립트 코드를 더욱 가독성 있게 만들어주고, 확장성도 제공해준다. 만약 코드에 꼼수가 있다면 의심할 여지 없이 ES2015 문법으로 바꿔주고, 향상된 문법과 기능에 익숙해질 필요가 있다.

한 가지 명심해야 할 부분은 꼼수들은 보통 들어내기 어렵게 개발되어있기 때문에, 그 과정에서 새로운 버그가 발생할 수 있다. 아무튼, 함수와 유닛 단위의 테스트가 이 과정에 도움 될 것이다.

개인적으로는 이제부터라도 array.indexOf(element) !== -1 가 당신의 코드에서 사라지길 바란다.