본문 바로가기

Javascript/Javascript(ES6)

(16)
이터레이터(Iterator)와 for of 문(인덱스말고 값을 순회한다.) 이터레이터(Iterator) 이터레이터는 '반복자'라는 의미로, 이터러블(Iterable, 순회 가능한 자료구조)의 요소를 탐색하기 위한 포인터로서 next()함수를 가지고 있는 객체다.단순하게 '컬렉션을 반복할 수 있게 하는 객체' 정도로 이해해본다.지난 포스트에서도 알아봤듯이 Array, String, Map, Set, DOM이 이터러블이고, 이런 것을 반복할 수 있게 하는 것이 이터레이터다.ex) Array.prototype[Symbol.iterator] ,String.prototype[Symbol.iterator], ...12345678const iterable = ['a', 'b', 'c'];const iterator = iterable[Symbol.iterator](); // 이터레이터는 va..
ES6 Class (클래스, Syntactic sugar, prototype을 이용하지만 문법적으로 예쁘게 만들어주는 class) 클래스(Class) - Syntactic sugar 문법적 설탕! 자바스크립트의 클래스(Class)다.기존 자바스크립트 ES5 문법으로도 객체 지향 프로그래밍을 할 수 있었다. (prototype을 이용해서)하지만 자바스크립트 문법을 배우는 사람들에게 가장 어려움을 안겨주던 것이 바로 prototype이다.그래서 ES6에서는 java와 같은 객체 지향 프로그래밍 언어에서 사용하는 것과 유사하게 class를 사용할 수 있게 문법을 제공한다.새로운 문법이 나온 것은 아니고 기존의 prototype으로 트랜스컴파일(?)해주는 것이다.1234567891011121314151617181920// ES5var Person = (function () { // Constructor function Person(name..
Destructuring(디스트럭쳐링) - 배열과 객체의 값을 변수로 받는 방법 Destructuring? : 기존에 구조를 가지고 있던 객체(Array or Object)를 파괴(Destructure)하여 별도의 변수에 값을 할당하는 것이다.=> 배열이나 객체 안의 어떤 값을 추출할 때 쉽게 받아오는 방법배열 Destructuring 123456789101112//ES5var arr = [1, 2, 3];var one = arr[0];//1var two = arr[1];//2var three = arr[2];//3//ES6const arr = [1,2,3];const [one, two, three] = arr;// one = 1, two = 2, three = 3let x,y,z;[x,y,z] = arr;// x=1, y=2, z=3 기존에는 배열의 인덱스를 찾아서 가져올 수 있었..
Rest 파라미터와 Spread 연산자 정리하기 (feat. 함수의 가독성을 높이는 방법) Rest 파라미터 (Rest Parameter) Rest 파라미터는 Spread 연산자(...)를 사용하여 함수의 파라미터를 작성한 형태를 말한다. 즉, Rest 파라미터를 사용하면 함수의 파라미터로 오는 값들을 "배열"로 전달받을 수 있다.(Java에서 public static void func(String... strs){...} 이런식의 가변인자와 유사)사용 방법은 파라미터 앞에 (...)을 붙인다.12345function foo(...rest) { console.log(Array.isArray(rest)); // true console.log(rest); // [ 1, 2, 3, 4, 5 ]}foo(1, 2, 3, 4, 5); * function foo(param1, param2, ...rest)..
자바스크립트에서 제공하는 배열(Array)의 유용한 함수 (reduce, map, filter, indexOf, foreach) 자바스크립트(javascript)에서 제공하는 배열의 함수 ES6에서만 사용하는 것은 아니지만 자바스크립트 프로그래밍할 때 유용한 메서드이면서 다른 사람의 코드를 보면서 이해를 못했던 필자 같은 사람을 위해 정리한다.(1) 배열 안의 특정값 찾기 ( indexOf ) 배열에서 특정 값이 존재하는지 탐색할 때 for문으로 일일이 검사하면서 코드를 짜는게 보통이다.123456var isExist = false;for(var i = 0 ; i= 10;}var filtered = [12, 5, 8, 130, 44].filter(isBigEnough);// filtered 는 [12, 130, 44] 배열에 대해서 filter를 적용해 10이상인 값만 필터링하는 예제12345678910var arr = [ {"n..
ES6 화살표 함수(arrow function) 변경점 요약 (사용법, this등) Arrow function 1. 사용법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//매개변수가 없을 때() => { ... }//객체변환할 때 중괄호 사용() => {return {a:1};}/..
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');각 타입은 서로 다..
ES6 문법 배우기 - const, let, Template Literals 왜 ES6를 배워야 하는가? - 개인적인 생각입니다.ES6는 새로운 문법이 생긴 만큼 변경점이 큰 자바스크립트의 버전이다.angular, typescript, react, nodejs등 자바스크립트를 사용하는 곳에서 ES6를 이용한 개발이 주를 이루고 코드도 많이 나오고 있다.게다가 자바스크립트의 비약적인 발전으로 어느곳에서든 자바스크립트를 이용해 프로그래밍을 할 가능성이 높다.따라서 자바스크립트를 사용하든 하지 않든 자바스크립트(ES6)를 공부하는 것은 많은 도움이 될 것이다.* 다만 현재 모든 브라우저 버전에서 ES6를 지원해주지 않고 있다.const, let기존 자바스크립트에서 변수 선언을 var로 했었다.ES6부터는 var뿐만 아니라 const와 let이 생겼다.var vs const, letco..