대가는 결과를 만든다

이벤트 정의 함수 내에서 자주 쓰게되는 객체들 간단히 정리해본다. ELEMENT.addEventListener('click', function (e){ console.log(this); //event listener를 추가하는 dom element 객체 console.log(e.currentTarget);//위의 this와 동일 console.log(e.target);//클릭한 dom element 객체 console.log(this.parentNode);//클릭한 dom element의 부모 객체 }) 이어서 많이 사용하는 addEventListener의 이벤트 위임에 대해 정리한다. - addEventListener를 dom에 많이 부여할 수록 메모리를 차지하므로 페이지 성능에 영향을 줄 수 있다. ..

아래의 예시와 같이 사용할 수 있다. window.scrollTop=0; this.$refs['something'].$el.scrollTop=0; document.getElementId('something').scrollTop=0;

안녕 위 p tag의 class에 b라는 class을 추가, 제거, 토글 하기 const aDom = document.querySelector('.a'); aDom.classList.add('b'); // => 안녕 //!!아래와 같이하면 아예 대체되버린다.!! aDom.className='b'; // => 안녕 //제거 aDom.classList.remove('b'); //토글 : 있으면 제거, 없으면 추가한다. aDom.classList.toggle('b');

1. 스코프란? - scope란 사전적 의미로 '범위'라는 의미를 지닌다. - 자바스크립트에서 변수에 접근할 수 있는 범위 혹은 변수가 영향을 끼칠 수 있는 범위라고 생각하면 된다. - 크게 나누면 전역, 지역 스코프로 나눌 수 있지만 스코프 레벨을 좀더 자세하게 나누자면, 함수 레벨 스코프, 블록 레벨 스코프(ES6), 렉시컬 스코프로 나눌 수 있다. 1-1. 함수레벨 스코프 - 자바스크립트에서 var 키워드로 선언된 변수, 함수 선언식으로 만들어진 함수는 함수 레벨 스코프를 지닌다. - 변수는 함수 내부 전체에서(만) 유효한 식별자가 된다. 1-2. 블록 레벨 스코프 - ES6의 let, const 키워드는 블록레벨 스코프 변수를 만들어 준다. - 여기서 블록이란 if/else, while/for 내..

이터러블/이터레이터 이터러블/이터레이터 프로토콜 : 이터러블을 ES6의 for...of, 전개 연산자 등으로 동작하도록한 규약이다. 오픈소스나 브라우저에서 이 규약을 통해 ES6의 문법을 사용할 수 있도록 이터러블/이터레이터 프로토콜로 구현되어져 있는 부분들이 많이 있다. 예) immutable.js나 브라우저 dom API 등.. 1. 이터러블 : 이터레이터를 리턴하는 [Symbol.iterator]( )를 가진 값 //iteraable iterable = { [Symbol.iterator](){ return iterator; } } 2. 이터레이터 : {value, done} 객체를 리턴하는 next( )를 가진 값 iterator = { next(){ return i==0 ? {done:true} ..

자바스크립트는 2015년 이래로 매년 6월마다 새로운 ECMAScript 표준이 계속 나오고 있다. 'ES5', 'ES6', 'ECMAScript 2015', 'ES2018', 'ECMA 2017' 등으로 버전을 칭하는데 햇갈린다... 그래서 정리한다. 표기는 다음과 같이 두가지 방법이 있다. ECMAScript/ECMA/ES 연도 - 예)ECMA 2015, ES2015 ES 버전 번호 - 예)ES5, ES6, .... 따라서, 다음과 버전과 주요 차이점을 간단히 적어보자면 다음과 같다. ECMA 2015, ES2015 = ES6 : 클래스, promise 등 ECMA 2016, ES2016 = ES7 : 제곱 연산자, includes ECMA 2017, ES2017 = ES8 : async/await

ES6(ECMA2015) Promise를 좀 더 편하게 사용하기 위한 것으로 ES8(ECMA 2017)에서 발표된 문법이다. async await에 대해 정리해본다. 1. async는 function 앞에 위치 한다. 2. async를 function 앞에 붙이면 해당 함수는 항상 Promise륻 return한다. (항상 resolved promise로 값을 감싸 반환되도록 한다.) async function f() { return 1; } f().then(alert); // 1 // 혹은 명시적으로 promise를 return (위와 동일) async function f() { return Promise.resolve(1); } f().then(alert); // 1 3. await는 async함수 안..

javascript에서 this가 가르키는 것들에 대해 정리해본다. 기본적으로 this는 window이다. 하지만 이 this가 가리키는 것은 this가 위치하는 곳 마다 바뀌게 된다. * 화살표 함수 사용시 this가 또 달라지니 유의해야 한다. 1) 객체 메서드 안의 this는 객체자신을 가리킨다. var obj = { a: function () { console.log(this);} }; obj.a(); //obj를 출력 2) 하지만 아래처럼 호출하면, a2는 obj.a를 꺼내온 것이기에 더이상 obj 객체의 메서드가 아니므로 this는 window를 가리킨다. * 호출하는 시점에 함수가 객체의 메서드 인지 그냥 함수인지가 중요 var a2 = obj.a; a2(); //window 를 출력 => ..