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

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

정규표현식은 문자열에서 특정한 문자 조합들을 찾기 위한 패턴을 식으로 표현한 것입니다. 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("에러가 발생과 무관하게..

xhr.open() 요청 타입 및 요청 대상의 URL 또는 파일이름을 상세하여 초기화시키는 메서드이다. 세번째 파라미터는 비동기 여부이다. https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/open XMLHttpRequest.open() - Web APIs | MDN The XMLHttpRequest method open() initializes a newly-created request, or re-initializes an existing one. developer.mozilla.org xhr.onload 요청한 데이터를 받았을 때 실행될 함수를 담는 프로퍼티이다. *참고: HTTP 상태코드 https://developer.mozilla..

Synchronous code 어떤 하나의 작업이 끝난 후에 다음 작업을 수행함. 작업이 끝날 때까지 block 되는 점에서 blocking code라고도 함. Asynchronous code 작업의 수행완료 여부와 상관 없이 다음 작업을 수행함. non blocking.

ES6 에서는 해당 클래스 내부에 static키워드를 이용해 static 메서드를 선언할 수 있었는데 ES5에서 똑같이 구현하려니 방법이 바로 떠오르지 않아 검색해보았다. 생성자 함수에 점 표기법을 이용하여 메서드를 바로 선언하면 된다. 아래는 모두 Store의 static 메서드들이다. // Store function Store() {} Store.getBooks = function () { let books; if (localStorage.getItem("books") === null) { books = []; } else { books = JSON.parse(localStorage.getItem("books")); } return books; }; Store.displayBooks = functio..

JS에서 Constructor는 함수이다. 따라서 다음과 같은 코드실행이 가능하다. // Person Constructor function Person(firstName, lastName) { this.firstName = firstName; this.lastName = lastName; } // Customer constructor function Customer(firstName, lastName, phone, membership) { Person.call(this, firstName, lastName); this.phone = phone; this.membership = membership; } // Create customer const customer1 = new Customer("Tom", "..