Proxy와 Reflect Proxy 객체는 기본적인 동작의 새로운 행동을 정의할 때 사용한다. 여기서 말하는 기본적인 동작이란 속성 접근, 할당, 순회, 열거, 함수 호출 등을 말한다. proxy 객체를 생성할 때는 new 라는 생성자를 호출해야 한다. 아래 구문처럼 필수적으로 2개의 인자를 받는다. 구문 new Proxy(target, handler); 매개변수 target : proxy와 함께 감싸진 target 객체 (native array, function, 다른 proxy를 포함한 객체) handler : property이 function인 객체이다. 동작을 수행할 때, handler는 proxy의 행동을 정의한다. DOM node 조작 2개의 다른 element의 속성이나 클래스의 이름을 바..
ES6 검색 결과
구조 분해 할당 (Destructuring) ES6 문법에서 가장 많이 사용하게 되는 구조 분해 할당에 대해 알아보자. 구조 분해 할당은 다시 말해 해체할당이라고도 하는데 한국말이 꽤나 어려운 듯하다. 디스트럭쳐링이 더 편한 듯 하다. 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이라고 한다. 텍스트로 보면 어려우니 코드를 통해 확인해보자. 예시 let a, b, c; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 펼침연산자를 사용해보면, let a, b, c; [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 [a, b, ..
Set Set 객체는 자료형에 관계없이 원시값과 객체 참조 모두 유일한 값을 저장할 수 있다. 중복없이 유일한 값을 저장하거나 이미 존재하는지를 체크할 때 유용하게 사용할 수 있다. 예시 let mySet = new Set(); mySet.add("Hello"); mySet.add("World!!"); mySet.add("Hello"); console.log(mySet); // Hello World!! console.log(mySet.has("Hello")); // true mySet.delete("Hello"); console.log(mySet.has("Hello")); // false
for 문, for in 문, for of 문 알아보기 for 문 흔히 사용하는 for 문법은 초기식, 표현식, 증감식이 포함되어 있다. for(var i = 0 ; i < 10 ; i++) { console.log(i); } 쉼표 연산자(,) 를 통하여 여러 개의 초기식과 증감식을 동시에 사용할 수 있다. for in 문 일반적으로 사용하던 for 문과는 다른 반복문이라고 할 수 있다. for in 문은 해당 객체의 모든 열거할 수 있는 프로퍼티(enumerable properties) 를 순회할 수 있도록 해준다. 열거할 수 있는 프로퍼티란, enumerable 태그가 true 로 설정되어있는 것을 의미한다. var arr = [1, 2, NaN, undefined, null, ""]; Array.p..
ES6 Helper Method 자바스크립트로 개발하다보면, 가장 많이 사용하는 함수 (forEach, map, filter, find, reduce) 들이 있는데 다른 함수 안에서 특정 기능을 하고 있는 것을 Helper Method 라고 부른다. 해당 함수들이 헬퍼 메소드라는 별도의 명칭이 있다는 것을 최근에 알게되었다. 아무리 자주 사용해도 제대로 응용하지 못하고 있는 것 같아 기본기를 다지고자 정리하게 되었다. forEach 배열의 각각에 대한 요소를 실행하는 메소드이다. arr.forEach(callback(currentvalue[, index[, array]])[, thisArg]) callback 함수에서는 3가지의 매개변수를 받는데, currentvalue 는 처리할 현재 요소, index..
JavaScript ES6(ES2015)모던 JavaScript 개발을 위한 ES6 ES6 == ES20151. 개선된 JavaScript 문법으로 ES5 이후 많은 변화가 반영되었다. (신규 syntax 지원, 반복적인 코드 감소)IE 비중이 높은 국내에 비해 해외는 이미 ES6의 점유율이 높다.2. ES6 Browser compatibility 의 훌륭한 지원3. ES6 를 기반으로 하는 JavaScript 생태계의 확산 ES6 이후의 모든 버전에 대한 호환성 확인 참고) https://kangax.github.io/compat-table/es6/ jsBin 에서 개발 참고) https://jsbin.com/?js,console ES6 (let, closure) let 123456789var name..
최근댓글