Happy coding

ES5 에는 원시 타입(primitive data type)인 Boolean, undefined, Number, String, null 그리고 객체 타입(object type)인 Object 를 가지고 있었다. ES6 부터 새로운 친구 Symbol 타입이 생겼다. Symbol 타입에 대해 알아보자. Symbol 생성Symbol 은 고유 값만 가지는 원시 타입(primitive data type)의 값이며, 객체 프로퍼티에 대한 식별자로 사용한다. Symbol 생성 시 Symbol() 을 사용하며, 다른 원시 타입의 객체 생성(new Boolean, new String, new Number)과 다르게 new 써서 생성을 하지 않는다. const createSymbol = Symbol();const numb..

JavaScript는 모두 알다시피 단순한 웹 사이트를 만들기 위한 보조적인 기능을 수행하기 만들어졌다. 그래서 다른 언어와 비교해 보았을 때 문제 되는 점들이 많았다. 그 중 제일 아쉬웠던 부분은 Module 기능을 지원하지 않는 것이었다. 왜 Module 기능을 지원하지 않은 것이 아쉬운 부분인지 한번 알아보자. Module 이란 ?구현 세부 사항을 캡슐화하고 공용으로 필요한 API를 노출시킨다. 즉, 다른 코드에서 쉽게 로드하고 사용할 수 있도록 재사용 가능한 코드 조각이다. Module은 기능별로 분리되어 작성되므로 유지보수 및 효율성을 더 높일 수 있다.Module의 특징은 ?1. 코드 추상화어느 특정한 Module에 기능을 위임하여 실제 구현의 복잡도를 이해할 필요가 없다.2. 코드 캡슐화공용..

기존에 비동기를 처리 하려면 콜백 함수를 통해 처리 하였는데 아무래도 비동기 처리이다 보니 가독성 측면과 에러 발생 시 예외 처리를 하기 많이 힘들었다. 아래 예시를 보자. try { setTimeout(() => { throw 'Error'; }, 1000);} catch (err) { console.log(err); // Error Catch 불가} try 문을 시작하여 setTimeout 메소드를 통해 1초 후 'Error' 라는 문자열을 보낸다. 하지만 catch에서 실제 에러를 catch 못하는 현상이 발생한다. 즉 setTimeout 함수의 콜백 함수 내에서 발생시킨 에러는 catch 블록에서 캐치되지 않고 종료되기 때문에 catch 문에서 에러를 잡을 수가 없다. 그래서 이러한 부분들을 해결..

이번 시간에는 Google JavaScript Style Guide에서 가장 흥미로는 규칙들에 대해서 정리한 글을 번역해보았다. 아직 익숙하지 않은 사용자를 위해 Google은 깨끗하고 이해할 수 있는 코드를 작성하기 위한 최고의 문체 관행을 레이아웃하는 JavaScript 작성을 위한 스타일 가이드를 제시합니다. 유효한 JavaScript를 작성하기위한 엄격하고 빠른 규칙은 아니며 원본 파일 전체에서 일관되고 매력적인 스타일 선택을 유지하는 데 필요한 규정 만 있습니다. 이것은 자바 스크립트에서 특히 흥미 롭습니다. 자바 스크립트는 다양한 스타일 선택을 허용하는 유연하고 관대 한 언어입니다. Google과 Airbnb 는 가장 인기있는 스타일 가이드 2 개를 보유하고 있습니다. 나는 JS 작성에 많은 ..

기초를 닦자 ! 오늘의 주제는 Spread, Rest parament 입니다.시작해 봅시다.1. Rest parametor 함수의 파라미터에서 정해지지 않은 수 (어떤 것이 들어갈지 모르는 수) 인수를 배열로 나타낼 수 있게 해주며 (...)을 사용하여 표현합니다.아래 예시를 보면 숫자 1, 2를 파라미터로 받았고 나머지 숫자들은 Rest parametor 를 사용하여 moreArgs 파라미터 안에 배열로 전달 받았다. function myFun(one, two, ...moreArgs) { console.log("one: ", one); console.log("two: ", two); console.log("moreArgs: ", moreArgs);} myFun(1, 2, 3, 4, 5, 6); // o..

안녕하세요 ! 오늘은 ES6에서 도입 된 Class에 대해 알아보겠습니다. 들어가기 전 이야기 드리고 싶은 부분이 있습니다. JavaScript는 프로토타입 기반 객체 지향 언어입니다. 모든 객체는 각 부모 역할을 담당하는 객체와 prototype으로 연결이 되어 있다. 그렇기 때문에 class가 필요 없이도 객체 지향 프로그래밍이 가능하다. 어떤 커뮤니티에서는 JavaScript가 무슨 객체 지향 언어냐 라고 이야기를 하는 분들을 본 것 같은데 나는 그분들이 생각하는 다른 언어보다 상상 이상으로 충분한 조건을 갖추고 있는 객체 지향 언어라고 생각한다. 이제 본격적으로 시작해보자.class 는 어떤 것을 제공 해주나 ?기존 prototype 기반의 상속 보다 명료하게 구현해 놓았으며 객체를 생성하고 상속..

이번에는 template literals 에 대해 알아보겠다. 기존 문자열 표기법은 이중 따옴표(") 또는 작은 따옴표(')를 이용하였다. 하지만 ES6 부터는 templete literals 라는 새로운 문자열 표기법이 도입되었다. templete literals 는 백틱(`) 이라는 문자를 사용하여 표기한다. // ES5var text = 'string text'; // ES6const text = `string text`; // ES5console.log('string text line 1\n' + 'string text line 2');// "string text line 1// string text line 2" // ES6console.log(`string text line 1string te..

arrow function에 대해서 머리속으로 정리해보고자 합니다. 이번 시간에도 마찬가지로 arrow function(ES6) 이 나오기 전 어떤 현상이 있었고 그 현상을 어떻게 해결 했는지에 대해 이야기 하겠습니다. arrow function이 나오기 전에 우리는 느꼈을 수도 있지만 메소드 안에 함수를 만드는게 매우 어려웠을 것이다. 바로 this 때문이다. 일단 아래의 예제를 보자. function Person() { this.age = 0; console.log(this); // Person { age: 0 } setTimeout(function growUp() { console.log(this); // window this.age++; // NaN }, 1000);} var p = new Per..