[JavaScript] Polyfill 사용하기(Feat. padStart())

다른 팀원의 PC에서는 잘 동작하는 코드가 제 PC에서는 에러가 발생했습니다.

 

디버깅을 해보니 padStart()에서 에러가 발생하고 있었습니다.

var binaryNum = '110';
var result = binaryNum.padStart(4, '0');

console.log(result);

 

저는 IE로, 팀원은 Chrome으로 디버깅을 하고있었기 때문에 금방 원인을 발견하지 못했습니다.

 

IE에서는 지원하지 않는 Method 였습니다.

 

Can I Use? 라는 홈페이지에서 브라우저 별로 지원하는 Method인지 확인할 수 있습니다.

 

위 링크를 클릭하면, padStart(), padEnd()는 IE에서 지원하지 않는다는 것을 확인할 수 있습니다.

 

이렇게 지원하지 않는 Method를 사용할 수 있도록 해주는게 Polyfill입니다.

 

padStart()의 Polyfill은  MDN 등에서 확인할 수 있습니다.

 

padStart()를 사용하기 전에 Polyfill을 추가하면 padStart()를 사용할 수 있습니다.

// https://github.com/uxitten/polyfill/blob/master/string.polyfill.js
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
if (!String.prototype.padStart) {
    String.prototype.padStart = function padStart(targetLength, padString) {
        targetLength = targetLength >> 0; //truncate if number, or convert non-number to 0;
        padString = String(typeof padString !== 'undefined' ? padString : ' ');
        if (this.length >= targetLength) {
            return String(this);
        } else {
            targetLength = targetLength - this.length;
            if (targetLength > padString.length) {
                padString += padString.repeat(targetLength / padString.length);
            }
            return padString.slice(0, targetLength) + String(this);
        }
    };
}

//Original Code
var binaryNum = '110';
var result = binaryNum.padStart(4, '0');

console.log(result);