ES6에서 추가된 Set을 이용해 데이터 타입과 상관없이 유일한 데이터들로만 구성된 데이터 구조를 구현할 수 있습니다. 아래 코드로 확인하시죠 ! // Set: 어떤 타입의 데이터든 유일한 값을 저장 const set1 = new Set(); set1.add(100); set1.add("A String"); set1.add({name: "jian"}); set1.add(true); set1.add(function() { console.log("hello"); }) console.log(set1); // 이미 있는 값을 또 저장할 경우 set1.add(100); console.log(set1); // 변함 없음 유일하게 존재할 수 있기 때문 // 다른 생성 방법 const set2 = new Set([1,..

ES6 에서는 Map이라는 새로운 데이터 구조가 추가되었습니다. 해당 데이터 구조는 키-값 쌍을 저장하며, 그 저장 순서까지도 기억한다고 하네요. 또한 Object Literal과는 다르게 키나 값에 어떠한 타입의(primitive or reference) 데이터가 들어가도 무관하다고 합니다. 아래 코드로 살펴보시죠. // Map: 키-값 쌍을 저장. 삽입순서 또한 기억하는 콜렉션 // 일반 객체 리터럴과는 다르게 primitive or reference type 전부 키 또는 값으로 이용가능하다. const map1 = new Map(); // Set keys const key1 = "string"; const key2 = {}; const key3 = function () { }; // set map..

ES6에서 추가된 Destructuring과 Rest Parameter를 이용해 좀 더 쉽게 변수에 값을 할당할 수 있습니다. 아래 코드로 바로보시죠! // Destructuring Assignment // 배열의 구조분해할당 let a, b; [a, b] = [100, 200]; console.log(a); // 100 console.log(b); // 200 // Rest parameter // 정해지지 않은 수를 배열 또는 객체로 나타낼 수 있도록 함 [a, b, ...rest] = [100, 200, 300, 400, 500]; console.log(rest); // 300, 400, 500 // 객체의 구조분해할당 ({a, b, ...rest} = {a: 100, b: 200, c: 300, d..

Symbol은 ES6에서 추가된 primitive data type 입니다. 각각의 Symbol들은 같을 수 없습니다. Symbol은 객체의 프로퍼티 식별자(프로퍼티의 key)로 이용하기 위해 만들어졌다고 합니다. for .. in 문을 통해 열거할 수 없고, JSON.stringify 메서드를 이용해 JSON으로 변경할 수 없어 해당 프로퍼티를 감추는 용도로 사용합니다. 해당 프로퍼티의 값에 접근하려면 값의 할당에 쓰였던 Symbol이 있어야하기 때문이죠. ( ex. obj[KEY1] ) 아래의 코드를 참조하여 특성에 대해 알아보아요. // Create a symbol const sym1 = Symbol(); const sym2 = Symbol("sym2"); console.log(sym1); cons..

안녕하세요, 데브 지안입니다! 오늘은 api key를 발급받을 필요도 없이 무료로 랜덤 한 유저 데이터를 제공해주는 Random user generator 사이트에 대해 알아볼게요. 사이트 https://randomuser.me/ Random User Generator | Home Copyright Notice All randomly generated photos were hand picked from the authorized section of UI Faces. Please visit UI Faces FAQ for more information regarding how you can use these faces. randomuser.me 먼저 호출 방법부터 알아볼게요. GET https://rando..

1. Iterator next라는 함수를 가진 객체를 리턴하여 인자로 전달받은 것을 반복할 수 있도록 한다. 사실 이 개념은 원래부터 존재하는 것이지만 ES6에서 이러한 형태를 하나의 프로토콜(규약)로 제공함에 의미가 있는 것 같다. 이러한 표현방법은 Generator에서도 사용된다. // Iterator Example function nameIterator(names) { let nextIndex = 0; return { next: function () { return nextIndex < names.length ? {value: names[nextIndex++], done: false} : {done: true} } } } // Create an array of names const namesArr ..

Character Class // Character Classes => 문자들을 구별하기 위해 사용됨 regExp = /\w/; // Word Character - 알파벳, 숫자, _ str = "_qwf"; const result1 = regExp.exec(str); console.log(result1); regExp = /\w+/; // + = 하나 또는 그 이상을 뜻함 str = "_qwf"; // +가 없는 결과와 비교해보자 const result2 = regExp.exec(str); console.log(result2); regExp = /\W/; // Non Word Character - word character가 아닌 모든 것 str = "한글"; // true const result3 =..

수량자를 이용할 때 ^와 $ 특수문자를 적절히 섞어써야할 때가 있음에 주의하면서 아래의 코드를 살펴보아요. (해당 부분은 그룹핑 코드에 표기해놓았습니다) Character Sets // Character Sets // brackets [] - 대괄호로 감싸져있는 문자들은 무엇이든 검색되도록 한다. ? 특수문자와는 다르게 알맞은 문자가 존재하지 않는 경우 검색되지 않는다. regExp = /gr[ae]y/i; // 대괄호 안에 위치한 문자는 a나 e여야한다. str = "gray"; // true str = "grey"; // true str = "gry"; // false const result1 = regExp.exec(str); console.log(result1); regExp = /[^GP]ray..

와일드 카드 역할을 하는 .과 *의 차이점과, 선택적인 문자검색을 할 수 있게 하는 ?의 정확한 이해에 주의하며 아래의 코드를 참조해주세요. let regExp; // literal charcters regExp = /hello/i; // Metacharacter Symbols 특수문자 regExp = /^hel/i; // ^ 뒤에 나오는 문자열로 시작하는 문자열만 검색 regExp = /orld$/i; // $ 앞에 나오는 문자열로 끝나는 문자열만 검색 regExp = /^hello$/i; // ^ 뒤에 나오는 문자열로 시작하고, $앞에 나오는 문자열로 끝나는 문자열만 검색 regExp = /h.o/i; // .에 해당하는 하나의 문자는 아무 값이나 들어가도 된다고 인식하고 검색 (ex. hlo) re..

정규표현식은 문자열에서 특정한 문자 조합들을 찾기 위한 패턴을 식으로 표현한 것입니다. ex) 1234 => 정수 4개로 이루어져 있음. 따라서 form의 valiation에 자주 쓰이거나, 많은 문자열 데이터 중에서 특정 패턴의 문자열만을 검색하고 싶을 때 주로 이용되죠. exec 메서드의 경우 g플래그가 적용되지 않음에 주의합시다. let regExp; // 정규표현식 리터럴 regExp = /hello/; // 정확히 hello 라는 문자열만 가져오고 싶은 경우 console.log(regExp); console.log(regExp.source); // exec(string) method - 인자로 전달된 문자열 중에서 해당 정규표현식에 맞는 부분을 배열로 리턴, 없을 경우 null const re..