본문 바로가기

Javascript

(43)
ES6 javascript로 자료구조 List 구현하기 (배웠으면 사용해보자!!) DataStructures and Algorithms with javascript 책 "자바스크립트 자료구조와 알고리즘"을 보고 리스트 구현을 ES6로 해보는 연습이다.책에서는 ES5 문법이므로 보고 ES6로 바꾸는 과정이 있다.[전체 코드]12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788899091929394959697//ES6 List 클래스 만들기class List{ constructor(){ this.listSize = 0; this.pos = 0; ..
ES6 자바스크립트 모듈 사용하기 (import, export) ES6 모듈 만들고 사용하기 자바스크립트에는 지금까지 C(#include)나 JAVA(import)의 모듈시스템이 활성화되지 않았을까?자바스크립트는 호이스팅이 되는 관계로 변수나 함수가 전역에서 사용할 수 있었기 때문에 이름으로 충돌을 일으키는 경우가 많아서 이용하기 어려웠다. (CommonJS로 사용할 수는 있었음)ES6부터는 모듈 시스템을 사용할 수 있게 만들었다.하지만 브라우저에서 지원이 되지 않고있기때문에 webpack같은 모듈 번들러를 사용해야만 모듈시스템(import, export)을 사용할 수 있다.export, import 1234567891011export const pi = Math.PI; export function square(x) { return x * x;} export clas..
이터레이터(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};}/..