본문 바로가기

Knowledge Wiki/Javascript

 (51)
[ JavaScript ES 6 ] Tagged Literal 1. ES6 Tagged Literal 함수명 뒤에 문자열을 붙여 쓸 수 있음 function divider(charrs, var1){ console.log(charrs); console.log(var1); } var index = 10; divider`This is suffix number ${ index }` 첫번째 파라미터(charrs) -> backtick 문자들을 Array화 해줌 두번째 파라미터(var1) -> 첫번째 ${변수}를 뜻함. 세번째 파라미터(var2) -> 두번째 ${변수}를 뜻함. 변수마다 파라미터 추가하기 싫으면 function divider(charrs, ...vars){ console.log(charrs); console.log(vars[0]); }
[ JavaScript ES 6 ] 변수 Hoisting 현상 1. 변수의 Hoisting 현상 변수의 선언을 변수 범위 맨 위로 끌고오는 현상 즉, 변수의 선언과 할당이 함께 되어 있어도 JavaScript는 선언과 할당을 분리해서 해석한다. console.log(age); // undefined 출력, 선언 전에도 출력 가능. 왜냐면 선언은 되어있고 할당은 안되어 있는 시점이기 때문. var age = 30; console.log(age); // 30 출력
[ JavaScript ES 6 ] 변수 let, const 1. 변수명을 나타내는 키워드가 ES6 이전에는 var밖에 없었지만 이후 let, const가 추가됨 var => 재선언 O, 재할당 O, 범위는 자신이 선언된 함수 내부 let => 재선언 X, 재할당 O, 범위는 중괄호 const => 재선언 X, 재할당 X, 범위는 중괄호
[ JavaScript ES 6 ] 함수 1. 함수를 constructor로 사용할 수 있음 function machine(){ this.name = 'mac'; } var obj = new machine(); 2. 함수는 축약 가능 // 축약 전 var func = function(a){ return a + 10; } // 축약 후 var func = a => a + 10; 3. 함수 파라미터가 전체 개수보다 적게 전달인자로 넣어도 에러가 안남. 4. 함수의 default 파라미터 // 초기값을 넣을 수 있음 function add(a, b = 10){ console.log(a + b); } add(1); // "11" // 연산도 넣을 수 있음 function add2(a, b = a * 2){ console.log(a + b); } add..
[ JavaScript ES 6 ] 전역변수 1. 전역변수 함수나 변수를 전역공간에서 만들면 {window}에 보관함 {window}는 전역변수 그래서 전역으로 정의한 func()를 호출할 때 window.func()도 동일하게 동작함..!! function func(){ console.log(this); } // 둘 다 동일한 동작 func(); window.func();
[ JavaScript ES 6 ] Arrow Function 1. ES6 함수 신 문법 Arrow Function 특징 : 1) 형식 : () => {} 2) 기존 function과 달리 this를 따로 재정의하지 않아서 함수 밖에 있는 this를 그대로 따름
[ JavaScript ES 6 ] strict 모드 1. strict 모드 script문의 시작에 'use strict' 를 쓰면 strict mode로 동작함 -> IE10 이상에서 작동
[ JavaScript ES 6 ] this 1.this의 의미 1) 그냥 쓰거나 일반 함수 안에서 쓰면 {window}를 의미함 {window} 오브젝트는 자바스크립트 기본 함수들을 가지고 있는 변수임 2) strict 모드에서는 일반 함수 안의 this가 undefined됨 3) 오브젝트 내 함수 안에서 this는 오브젝트를 의미함 자바스크립트는 오브젝트 안에 함수 넣을 수 있음 오브젝트 안의 함수에서 this를 쓰면 이 this는 자신을 포함하고 있는 오브젝트를 의미함 4) 이벤트리스너 안에서는 e.currentTarget을 의미함 2. 오브젝트 내에서 콜백 함수를 사용하면 이 함수 내부에서 this는 {window}를 의미한다. 콜백 함수 자체는 전역으로 정의가 되었기 때문. 만일 콜백 함수를 Arrow Function 형태로 바꾸면 thi..

티스토리툴바