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..

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..

JS에서 에러를 처리하기 위해 try-catch 문을 이용할 수 있습니다. try 에는 동작시킬 명령들을 입력하고, catch 에는 try에 입력된 명령어 실행 중 에러가 발생했을 때 실행될 명령들을 입력합니다. try { // ReferenceError 발생하도록 작성 testFunc(); } catch (e) { console.log(e); // 에러 메세지 출력 console.log(e.message); // 에러 이름 출력 console.log(e.name); // 에러 타입 확인 console.log(e instanceof ReferenceError); // true } finally { console.log("에러가 발생과 무관하게 동작1"); } console.log("에러가 발생과 무관하게..