Yeon

싱글톤(Singleton) - 전체 시스템에서 하나의 인스턴스만 존재하도록 보장, 강제하는 객체 생성 패턴 장점 - 하나의 인스턴스만 존재하도록 보장하기 때문에 메모리 낭비 방지 - 전역에서 쉽게 접근해 사용 가능하기 때문에 편리함 단점 - 전역에서 쉽게 접근해 사용 가능하기 때문에 여러 곳에서 가져다 쓰면 의존성이 강해짐. - OCP원칙(Open-Closed-Principle: 개방 폐쇄 원칙)을 위배할 수 있음 const Singleton = (function () { let instance = null; function init() { return { publicMethod () { } } } return { getInstance () { if (!instance) { instance = init(..

이 글은 JavaScript의 Falsy(false 같은 값), Truthy(true 같은 값) 에 대해 정리한 글입니다. Falsy JavaScript 에서 Falsy 는 참,거짓으로 평가되는 문에서 false로 평가되는 값입니다. falsy에 해당하는 값으로는 다음과 같이 6개의 값이 있습니다. - undefined - null - false - 0(+0, -0) - NaN - "" Truthy, Falsy가 true, false로 평가 받는 대표적은 예시로는 if 문이 있습니다. 따라서 if 문의 조건절에 falsy 값이 위치하면 if 문의 블록은 실행되지 않습니다. if (undefined) {} if (null) {} if (false) {} if (0) {} if (NaN) {} if ("")..

ECMA2018(ES9) Regex flag s ECMA2018(ES9)에서 정규식에 s flag 가 추가되었다. s flag 의 기능은 정규식에서 .이 개행문자(\n)도 매칭시키도록 한다. // without s falg console.log(/./.test('\n')); // false; // with s flag console.log(/./s.test('\n')); // true;

이 글은 JavaScript 에서 this에 관해 정리한 글입니다. JavaScript 에서 this는 특이하게도 this가 가리키는 것이, 함수를 정의할 때 정해지는 것이 아니라 어떻게 호출하느냐에 따라서 달라집니다. 그 이유는 함수를 호출 시 실행 콘텍스트(Execution Context)라 는 것이 만들어지는데 이 것은 함수의 콜 스택(Call Stack), 호출 방법, 매개변수 등에 대한 정보를 담고 있습니다. this는 이 실행 콘텍스트의 정보중 하나이기 때문에 함수를 어떻게 호출하는지에 따라서 this가 가리키는 것이 달라집니다. 1. new로 호출 -> this는 생성된 객체를 가리킵니다. function foo (name) { this.name = name; } const bar = new..

Js13kGames 2019 대회에 참가한 후기입니다. Js13kGames? http://js13kgames.com/ Js13kGames - HTML5 and JavaScript Game Development Competition in just 13 kilobytes Js13kGames is a JavaScript coding competition for HTML5 game developers. The fun part of the compo is the file size limit set to 13 kilobytes. js13kgames.com Js13kGames는 2012년부터 매년 1회씩 개최된 HTML5 Game 개발자를 위한 대회입니다. 대회의 조건은 파일 크기를 13kb 이내로 제출해야 한다는 ..

브라우저 환경에서 자바스크립트를 동적으로 로딩해야 할 때 다음과 같은 방법을 쓸 수 있다. var script = document.createElement('script'); script.type = 'text/javascript'; script.url = '...'; // script url. document.body.appendChild(script); 스크립트 로딩 완료에 대한 콜백과, 구 IE 에서도 동작을 원하면 다음과 같이 사용하면 된다. function loadScript (url, callback) { var script = document.createElement('script'); script.type = 'text/jav..

이 글은, JavaScript의 자료형(data types)과 typeof 연산자에 대해 정리한 글입니다. 자료형 먼저 JavaScript의 자료형을 정리해보면 다음과 같습니다. JavaScript Data types boolean number string undefined null symbol (ES6부터 추가) bigint (현재 TC39 stage 3) object 이 중 object를 제외한 나머지를 원시 타입(primitive types)라고 합니다. 또한 여러 Object의 하위 타입(subtype) 이 존재합니다. Sub-Types Function Array Date Error ... typeof 연산자 typeof를 활용하여 어떤 값이 어떤 자료형인지 알 수 있습니다. 하지만 기대와는 달리..

코딩 컨벤션 업무를 하며 알게 된 것들 - 2 이전 글에 이어서 Javascript 코딩 컨벤션 관련 업무를 하며 ESLint 규칙을 통해 알게 된 점을 정리해 보았습니다. 1. no-prototype-builtins 2. no-return-await 3. comma-dangle 1. no-prototype-builtins ESLint: no-prototype-builtins 이 규칙은 Object.prototype의 builtin으로 제공되는 메서드를 객체에서 직접 호출하지 않도록 하는 규칙입니다. Object.prototype의 builtin 메서드는 hasOwnProperty, isPrototypeOf 등이 있습니다. 이 메서드를 호출하는 방법은 다음과 같은 방법이 있습니다. (1) 객체에서 직접 ..

코딩 컨벤션 업무를 하며 알게 된 것들 - 1 최근 Javascript 코딩 컨벤션 관련 업무를 하고 있습니다. 업무를 하기 전에는, 만들어져 있던 Linter를 사용하기만 했었습니다. 어떤규칙들이 있는지, 왜 이런 규칙이 있는지 자세하게 알아본 적이 없었습니다. 이번 업무를 통해 Airbnb나 StandardJS 등 유명한 가이드의 규칙을 자세히 살펴보았습니다. 또 ESLint에는 어떤 규칙들이 있는지, 왜 이런 규칙이 있는지 찾아보는 좋은 계기가 되었습니다. ESLint 규칙을 찾아보면서 몰랐던 내용이나, 흥미로운 내용을 따로 정리해 보았습니다. 1. no-octal ESLint: no-octal 이 규칙은 8진수를 나타낼 때 0을 앞에 쓴 표현("0"-prefixed octal literals)을 ..