오늘은 지난 번 ES6 포스팅 중 var let const 의 차이점에 대해서 포스팅했던 것에 이어서 ES6에서 업데이트된 화살표함수(Fat Arrow Function)에 대해서 포스팅해보겠습니다. - 함수 선언을 화살표로 선언한느 방식인데요. function 키워드를 쓰지 않고 => 키워드로 대체하는 방식입니다. - 흔히 사용되는 콜백함수(callback)의 문법을 간결화하는데 탁월합니다. var sum = function(a, b) { return a + b; }; 위와 같은 기존 함수 표현식을 아래와 같이 변경할 수 있습니다. // 1. var sum = (a, b) => { return a + b; }; // 2. 축약버전 var sum = (a, b) => a + b 첫번째 function을 =..
안녕하세요. 오늘은 자바스크립트에서 객체를 표현하는 방법중 ES6에서 추가된 내용을 포스팅해보려고 합니다. 먼저 객체를 선언할 때, 변수와 함수를 다음과 같이 프로퍼티로 표현할 수 있었습니다. var obj = { property1 : 100, function1 : function() { console.log('call function1'); } }; obj.property1; //100 obj.function1(); //call function1 흔하디 흔한 객체 선언입니다. 프로퍼티명 : 값, 프로퍼티명 : 함수 그런데 이부분을 ES6에서는 다음과 같이 표현할 수 있게 되었습니다. 먼저, 함수부분입니다. var obj = { function1() { console.log('call function1'..
2015년에 Javascript에 엄청난 업데이트가 발생하게 됩니다. 흔히 이야기하는 ES6 업데이트 인데요. 기본 ES5에서 많은 부분이 업데이트된 대규모 업데이트입니다. 이번 포스팅에서는 그 중에서 가장 흔하게 접할 수 있는 변수 선언 방식에 대해서 설명하고자 합니다. ES5 특징 - 변수의 스코프(범위) - 기존의 자바스크립트 ES5는 괄호{ } 에 상관없이 스코프가 설정되었다. var sum = 0; for(var i = 1; i
이번 포스팅에서 자바스크립트의 this 키워드와 this가 할당되는 시나리오들에 대해서 살펴볼 것입니다. 이번 포스팅을 이해할 가장 좋은 방법은 예제로 드리는 코드들을 직접 브라우저의 콘솔탭에서 실행해보는 것입니다. 아래 단계를 확인하시고 크롬 브라우저에서 따라해보시기 바랍니다. 1. 크롭에서 새탭을 켠다! 2. F12를 눌러 개발자도구를 켠다! 3. 콘솔탭으로 간다. 4. 예제코드를 실행한다. Objects는 자바스크립트의 기본구성요소입니다. 자바스크립트에서 사용할 수 있는 하나의 특수객체인 this 객체가 있습니다. 자바스크립트 소스에서 매번 봐왔을 코드입니다. 자바스크립트의 this 키워드의 값은 코드가 어떻게 실행되 는지에 따라서 결정될 것입니다. this에 대해서 살펴보기전, 먼저 자바스크립트 ..
안녕하세요. 오늘은 Vue.js의 인스턴스에서 this 키워드에 관하여 포스팅해보고자 합니다. 일반적으로 자바스크립트에서의 this키워드는 다음과 같이 사용됩니다. var obj = { num : 10, plusNum : function(){ this.num++; } } obj.plusNum(); console.log(obj.num); //11 obj이라는 변수에 num과 num에 +1을 더하는 plusNum이라는 함수를 정의하였을 때, num++하는 부분에서 this 키워드가 사용되는 것을 볼 수 있을 것입니다. 자바스크립트에서는 일반적으로 객체의 인스턴스를 가져올 때 this키워드를 사용합니다. this를 내부에서 obj 변수처럼 활용하는 것이지요. 하지만 Vue 인스턴스를 생성했을 때는 약간 다르게..
모든 객체는 자신의 prototype으로부터 constructor 속성을 상속하게 됩니다. var obj = {}; obj.constructor === Object; // true var obj = new Object; obj.constructor === Object; // true var array = []; array.constructor === Array; // true var array = new Array; array.constructor === Array; // true var n = new Number(3); n.constructor === Number; // true 객체의 생성자 표시 다음은 프로토타입이 Tree인 그 형의 객체 thrTree를 만듭니다. 그 다음 객체 theTree의 c..
안녕하세요. 오늘은 vue.js의 특징중 Reactivity에 관해서 포스팅해보고자 합니다. 먼저, vue.js의 특징중에서 뷰 모델의 내용이 바뀌면 새로고침이 필요없이 즉각적으로 화면에 반영된다는 장점이 있습니다. 기존 웹개발에서의 소스를 보시죠. 기존 소스 우리가 일반적으로 html, css, javascript를 코딩할 때의 모습과 똑같은 모습입니다. 여기서 주목해야할 점이 str이라는 변수를 바꿔주고 innerHTML을 이용해서 두번 바인딩해주었다는 것입니다. 즉, 기존 웹개발에서는 데이터가 변경이 될때마다 개발자가 프로그래밍을 통해서 직접 바인딩해주어야 했습니다. 하지만 Vue.js에서는 Vue.js 소스 {{ message }} Vue 객체의 data의 message 속성이 변할 때마다 브라우..
즉시실행 함수(Immediately Invoked Function Expression)란 정의되자마자 즉각적으로 실행되는 자바스크립트 함수(Function) 중 하나입니다. (function () { //변수 선언 //변수 처리 //특정 로직 등 구현 })(); 즉시실행 함수는 두가지부분으로 이루어져있습니다. 첫째, 괄호로 둘러쌓인 익명함수부분 스코프기반의 자바스크립트에서 전역스코프로 자바스크립트의 불필요한 변수를 만들지 않고 마찬가지로 안쪽으로 불필요한 변수들이 선언되는 것을 방지할 수 있도록 합니다. 저는 이걸보고 라이브러리 모듈 같다고 생각했습니다. 둘째, 함수를 실행할때 사용되는 ()괄호 입니다. 자바스크립트 엔진이 문법을 읽고 선언된 함수를 즉각적으로 실행하게 됩니다. 즉시실행함수 예제 외부에서..
