JavaScript26 ES6 화살표 함수(arrow function)를 배우기 전 자바스크립트 this 이해하기 ES6 arrow function 배우기 전 자바스크립트 this 이해하기ES6 arrow function을 배우기 전 이해를 돕기 위해 자바스크립트의 this 에 대해서 간단하게 정리한다.JAVA같은 언어에서 this는 클래스로부터 생성되는 인스턴스 객체를 의미한다.다른 의미를 가질 염려가 없어서 혼란이 생기지 않는다.자바스크립트에서는 this는 함수의 현재 실행 문맥(context)이다.자바 스크립트에서는 4가지의 함수 실행 타입이 존재한다.1. 함수 실행 alert('hello world');2. 메소드 실행 console.log('hello world');3. 생성자 실행 new Sample();4. 간접 실행 alert.call(undefined, 'hello world');각 타입은 서로 다른.. 2019. 3. 5. ES6 화살표 함수(arrow function) 변경점 요약 (사용법, this등) Arrow function1. 사용법 1234567891011121314151617181920//기존의 function samplevar double = function(x){ return x*2;}//arrow function sampleconst double = (x) => { return x*2;}//매개변수가 1개인 경우 소괄호 생략 가능const double = x => {return x*2}//함수가 한줄로 표현가능하면 중괄호 생략 가능하고 자동으로 return됨const double = x => x * 2//매개변수가 두 개 이상일 때const add = (x,y) => x + y//매개변수가 없을 때() => { ... }//객체변환할 때 중괄호 사용() => {retur.. 2019. 3. 5. var, let, const 차이점은? var는 function-scoped이고, let, const는 block-scoped입니다.function-scoped와 block-scoped가 무슨말이냐?var(function-scoped)jsfiddle 참고주소// var는 function-scope이기 때문에 for문이 끝난다음에 i를 호출하면 값이 출력이 잘 된다.// 이건 var가 hoisting이 되었기 때문이다.for(var j=0; j그럼 항상 function을 만들어서 호출해야 할까? 그건 아니다.javascript에서는 immediately-invoked function expression (or IIFE, pronounced "iffy")라는것이 있다.IIFE로 function-scope인거 처럼 만들 수가 있다.// IIFE를 .. 2019. 2. 22. 자바스크립트 성능 최적화 #1 : 코드 스타일 nhn은 이렇게 한다 자바스크립트 성능 이야기의 내용들을 발췌하였음바로 활용할 수 있는 부분을만 추려서 요약한다.코드 스타일 부분에서는 크게 아래 3가지를 통해 성능을 향상시킬 수 있다. 변수, 객체 생성 및 접근정규표현식반복문 변수, 객체 생성 및 접근1) 배열 생성 : var arr = []; 이 var arr = new Array() 보다 빠름2) 배열 데이터 초기화 및 접근 : arr[i] = i;이 vs arr.push(i); 보다 빠름3) 객체 생성 : var obj = {}; vs var obj = new Object(); 보다 빠름4) 객체 데이터 초기화 및 접근 : obj.a = 1; vs obj["a"] = 1; 보다 빠름5) 문자열 생성 : var str = "test"; vs va.. 2018. 12. 19. 자바스크립트 성능 최적화 #2 : 렌더링 + α 자바스크립트 성능 최적화 #1 포스트와 마찬가지로 NHN은 이렇게 한다 자바스크립트 성능 이야기의 내용들이다.브라우저 렌더링 과정 및 기타에서도 속도를 향상 시킬수 있다. 렌더링 및 기타 방법에는 크게 아래 4가지 방법이 있다. reflow, repaint 최소화노출 제어를 통한 reflow 최소화 (display 속성 이용)DOM, 객체 캐싱기타 reflow, repaint 최소화같거나 동일한 작업은 그룹을 묶어 실행한다. (구버전 브라우저에서는 전의 작업의 경우, 여러번의 reflow와 repaint가 발생하나 최신 버전 크롬의 경우 한번만 발생한다고 함)reflow와 repaint에 대한 설명은 아래 글 참고브라우저 렌더링 : reflow & repaint1234567891011// 전var wid.. 2018. 12. 19. jQuery - 자주 사용되는 함수 정리 함수 명함수 설명엘리먼트 조작each(Function)선택된 엘리먼트가 다수일 경우에 each 함수를 사용하여 차례대로 엘리먼트를 선택한다.에트리뷰트 조작attr(name, value)선택된 엘리먼트의 name 에트리뷰트의 값을 value로 설정 attr(name)선택된 엘리먼트의 name 에트리뷰트의 값을 얻어옴. attr(Attributes)선택된 엘리먼트를 프로퍼티(json)형태로 설정할 수 있음 val()엘리먼트의 value 에트리뷰트 값을 얻어옴. attr("value")와 동일함. val(content)엘리먼트의 value 에트리뷰트 값을 content로 설정함.에트리뷰트 제거removeAttr(name)해당 어트리뷰트의 값이 초기화 된다.스타일 변경addClass(names)선택된 엘리먼트에.. 2018. 11. 2. 이전 1 2 3 4 5 다음 반응형
