es6

최근 프로젝트를 수행하며, ES6 문법을 한번 정리하면 좋겠다는 생각이 들었습니다. 간단히 ES6 리마인드겸 실무에서 사용할 수 있을만한 내용들을 정리해보고자 합니다. 프로퍼티 추출 object에서 value를 가져오는 것은 어플리케이션에서 매우 일반적입니다. AS-IS const obj = { a: 1, b: 2, c: 3, d: 4, e: 5, }; const a = obj.a; const b = obj.b; const c = obj.c; const d = obj.d; const e = obj.e; const f = obj.a + obj.d; const g = obj.c + obj.e; TO-BE ES6의 구조분해를 사용하면 코드의 양이 줄게됩니다. const { a, b, c, d, e } = o..

1. 이터러블과 함수형 프로그래밍 최근 javascript 함수형 프로그래밍 을 공부하면서 알게 된 ES6 순회와 이터러블/이터레이터 프로토콜의 관계에 대해 공부하게 되었습니다. 제 생각으로는 함수형 프로그래밍에서 이터러블/이터레이터 프로토콜은 핵심적인 개념이라고 생각합니다. 생각보다 간단한 원리에서 시작한 개념이 함수형 프로그래밍에서 아주 요긴하게 쓰입니다. 본 게시글은 타 블로그 및 MDN에서 참조한 내용으로 작성되었습니다. Iteration protocols - JavaScript | MDN ECMAScript 2015 (ES6)에는 새로운 문법이나 built-in 뿐만이 아니라, protocols(표현법들)도 추가되었습니다. 이 protocol 은 일정 규칙만 충족한다면 어떠한 객체에 의해서도 구..

구조분해 (Destructuring assignment) 최근 자바스크립트 함수형 프로그래밍을 공부를 하다 구조분해 및 iterator 개념이 조금 부족하여 따로 정리하여 작성합니다. 이번 게시글에서는 구조분해 만 다루고 다음 게시글에서 iterator 를 다뤄보도록 하겠습니다. 1. 문법 구조분해의 기본 문법은 아래와 같습니다. const [a, b] = [1, 2]; console.log(a); // 1 console.log(b); // 2 const [c, d, ...rest] = [1, 2, 3, 4, 5, 6, 7]; console.log(c); // 1 console.log(d); // 2 console.log(rest); // [3, 4, 5, 6, 7] const { e, f } = { e..

예제 모델 // 기존의 sequelize Profile 모델 class Profile extends Sequelize.Model { static init(sequelize, DataTypes) { super.init({ id: { type: DataTypes.INTEGER, allowNull: false, primaryKey: true, autoIncrement: true, }, name: { type: DataTypes.STRING(200), allowNull: false }, email: { type: DataTypes.STRING(200), allowNull: false, }, profile_url: { type: DataTypes.TEXT, allowNull: true, } }); return a..

항상 일반 함수와 화살표 함수의 정확한 차이점을 지나쳐 왔습니다. 단순하게 화살표 함수(Arrow function)는 ES6에 새로 나온 문법인 것으로만 인식한 상태로 개발했지만 정확히 알고 적절하게 활용한다면 더욱 깔끔하고 디버깅이 편한 코드를 작성할 수 있을 것 같아서 따로 정리하게 되었습니다. Q . function 과 () => {} (화살표 함수)의 차이점이 무엇일까요? A : "바인딩되는 this가 다릅니다." 틀린 답변은 아니지만, 정확히 어떻게 this가 다를까요? 말 뜻대로 생각했을 때, 아래 코드처럼 생각할지도 모르겠습니다. // 서로 다른 값이 출력될 것? function normalFunc() { console.log(this); } const arrowFunc = () => { c..