var의 문제점 변수 중복 선언이 가능하다. 함수레벨 스코프이다. 외부에서 선언한 변수는 모두 전역변수다. 변수 선언문 이전에 변수를 참조하면 언제나 undefined를 반환한다. var name = "jisu" var name = "zigu" console.log(name) //zigu //const, let은 중복선언 불가 //함수레벨 스코프 function() { var name = "jisu" if(true){ var name = "zigu" } console.log(name) //zigu } //블록레벨 스코프 : let, const function() { let name = "jisu" if(true){ let name = "zigu" } console.log(name) //jisu } con..
ajax를 통해 데이터를 가져오는 방법은 여러가지로 불편하다. 먼저, callback hell이 발생한다. //ajax를 이용해 데이터를 가져오는 함수 const get= (url, successCallback, failCallback) => { // ajax 동작 } get("step1", () => { get("step2", () => { get("step3", () => { //... }) }) }) 두번째로 에러처리에 한계가 있다. 다음과 같은 코드는 에러를 캐치하지 못한다. try{ setTimeout(() => {throw new Error("Error"); }, 1000); } catch(e) { console.error("에러", e) } 이러한 문제는 Promise를 사용하면 해결할 수 ..
nestd object 란? 아래처럼 중첩된 object를 말한다. // nested Object const a = { b : 100, c : { d : 1, e ; 2 } } //nested Array const b = [{a:1, b:2}, {c:3}] const c = [[a,b],[c,d]] shallow copy & deep copy object(array)를 copy할 때는 shallow copy와 deep copy가 있다. shallow copy 방법을 사용하면 해당 object의 property 자체를 복사하는게 아니라, reference를 복사하게된다. 따라서 새로 copy한 object에서 무언가 바꾸면 원래 object에서도 바뀐다. 이렇게 하지 않고 실제로 복사한 것을 deep co..
static method ES6부터 class가 도입되면서, 클래스 내에서 static method를 사용할 수 있게 되었다. (function에서는 사용할 수 없다) static 키워드를 사용하여 메소드를 정의하면 new "클래스이름" 으로 인스턴스 객체를 생성하지 않아도 해당 메소드를 사용할 수 있다는 장점이 있다. class A{ static a(){ console.log("a"); } } A.a(); // "a" 이와 같은 static 메소드는 A자체의 프로퍼티가 된다. class대신 function을 사용하면 아래와 같다. function A() {} A.a = function(){ console.log("a"); } A.a(); this.a와 static a this.a와 static a를 자..
자바스크립트에서는 함수를 new로 생성하여 객체를 생성할 수 있다. function A(){ this.a = 1; this.hi = function() { console.log("hi") } } const a = new A(); console.log(a) 함수가 이렇게 객체를 생성하는 방식으로 사용될 때 이 함수를 생성자 함수라고 부른다. 자바스크립트에서는 생성자 함수에 대한 구별이 없다. 그냥 함수를 new로 생성하면 생성자 함수가 되는 것이다. ( 이를 구분하기 위해 생성자 함수로 사용될 함수는 첫글자를 대문자로 쓰는 컨벤션이 있다. ) 그럼 모든 함수가 다 생성자 함수가 될 수 있을까? 아니다. 함수에 대해 더 알아보자. 함수 함수도 객체다. 따라서 객체가 가지는 내부슬롯( [[Environment..
일반적으로 함수를 만들때는 하나의 기능을, 단 하나의 함수만 작성하는 것이 좋은 프로그래밍 방법이다. 하지만 어떤 경우에는 이것이 가독성을 해치기도 한다. 기능별로 하나의 함수만 만든다는 것은 그 함수의 output이 다른 함수의 input이 된다는 것을 의미한다. 따라서 코드를 볼 때 거꾸로 타고 계속 올라가야 한다. 많은 사람들이 이런 경우를 경험해 보았을 것이다. 이럴 때 좋은 방법이 Method Chaining Pattern이다. Method Cahining Pattern Method Cahining Pattern은 자기 자신의 객체를 return하여, 계속 그 객체의 함수를 사용할 수 있게 한다. function solution(n) { return parseInt(String(n).split(..
생각할 점이 많은 글을 발견했다. 최근에 js라이브러리를 이것저것 사용하면서 쓸데없는 js를 너무 많이 사용한다는 생각을 했다. 분명히 좋지 않을텐데... 하고 생각했고 그러다가 npm, node, webpack, babel, 모듈화.... 이것저것 봤다. webpack을 쓰는 이유 중에는 스크립트 용량을 줄이기 위해서도 있다는데.. 왜 그래야하지? 등등 나 같은 생각을 한 사람에게 이 글이 도움이 될 것이다. https://medium.com/little-big-programming/spa-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9A%A9%EB%9F%89-%EC%96%B4%EB%94%94%EA%B9%8C%EC%A7%80-%EC%A4%84%EC%9D%BC-%EC%88%9..
Webpack webpack은 frontend프레임워크에서 가장 많이 사용되는 Module Bundler이다. webpack은 모듈(js모듈, 이미지 폰트 등 전부)의 의존성을 분석하여 하나로 묶어, 병합 및 압축해준다. 여러라이브러리를 하나로 만들어준다고 생각하면 된다. Babel Babel은 코드 변환기이다. javascript는 계속 발전한다. 추가될 기능에 대한 "제안"(proposal)이 정기적으로 등록되고, 가치가 있다고 판단되면 https://tc39.github.io/ecma262/에 추가된다. 그리고 궁극적으로 ECMA명세서(specification)에 추가되는 것이다. 하지만, 엔진(브라우저)이 항상 표준 전체를 지원하지는 않는다.(대표적으로 IE...) 바벨은 transpiler로 이..
