Map 이란 Map()을 통해 Map을 생성할 수 있습니다. Map은 자바스크립트에 내장된 표준 객체(Standard Built-in Object) 이며, key-value 쌍의 컬렉션입니다. Map의 특징 key를 사용해서 value를 get, set할 수 있습니다. key 값은 중복이 될 수 없으며, 하나의 key에는 하나의 value만 올 수 있습니다. Object와의 차이점 Object는 String과 Symbol 타입만 key로 사용가능 하지만, key는 String, Symbol, Object, Function을 사용할 수 있습니다. Map은 Object와 달리 iterable 입니다. Map의 메서드 WeakMap 이란 key가 약하게 참조되는 key-value 쌍의 컬렉션입니다. Map과의..

SET 이란 new Set() 을 통해 Set을 생성할 수 있습니다. Set은 자바스크립트에 내장된 표준 객체(Standard Built-in Object) 이며, 중복된 값을 허용하지 않는 데이터 집합입니다. 그렇기 때문에, Set에 중복된 값을 넘기게 되면 Set은 알아서 중복된 값을 제외한 배열을 생성합니다. let myset = new Set([1, 2, 3, 4, 1, 2, 1, 5, 6, 7, 7, 8]); console.log(myset); // Set(8) {1, 2, 3, 4, 5, 6, 7, 8} SET의 장점 Set은 중복을 허락하지 않기 때문에, 이미 중복된 값이 존재하는지 체크하지 않아도 됩니다. const myset = new Set([1, 2]); console.log(myse..

디스트럭쳐링(Destructuring) 이란? 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것입니다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 반환할 때 유용합니다. 배열 디스트럭쳐링 (Array Destructuring) // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; // ES6 // 배열의 인덱스를 기준으로 값이 저장됩니다. const arr = [1, 2, 3]; const [one, two, three] = arr; 객체 디스트럭쳐링 (Object Destructuring) // ES5 var obj = { firs..

1.str.startsWidth() startsWidth 메서드는 해당 문자열의 시작 단어와 매개변수로 받는 문자열이 일치하는지 판단하기 위해서 사용합니다. let str = "Hello World"; let match = "Hello"; console.log(str.startsWidth(match)); // true 2.str.endsWidth() endsWidth 메서드는 해당 문자열의 마지막 단어와 매개변수로 받는 문자열이 일치하는지 판단하기 위해서 사용합니다. let str = "Hello World"; let match = "World"; console.log(str.endsWidth(match)); // true 3.str.includes() includes 메서드는 해당 문자열의 내부에 매개..

※ 이 글은 예전 블로그에서 퍼왔으며 2019.12.10.에 작성된 글입니다. Babel은 자바스크립트 컴파일러 이다. Babel을 주로 사용하는 이유는 새로운 방식의 자바스크립트로 개발을 하고 이전 방식의 자바스크립트로 배포하기 위해서 사용한다. ​ 먼저 Babel을 설피하기 위해선 node.js를 설치해야 한다. Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js를 설치했다면 Babel Tutorial 초기화 www.notion.so 만약 React에서 사용했을 때, 이런 dog같은 오류가 뜬다면 (ex. SyntaxError / Unexpected token) SyntaxE..

※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그에서 읽어주세요.※ 이 글은 프론트엔드 개발자를 위한 자바스크립트 프로그래밍의 글을 참고한 것입니다.문서 객체 모델 (DOM, Document Object Model)텍스트 파일로 만들어져 있는 웹 문서를 브라우저에 렌더링 하려면 웹 문서를 브라우저가 이해할 수 있는 구조로 메모리에 올려야 한다. 브라우저의 렌더링 엔진은 웹 문서를 로드한 후, 파싱 하여 웹 문서를 브라우저가 이해할 수 있는 구조로 구성하여 메모리에 적재하는 데 이를 DOM이라 한다.https://poiemaweb.com/js-dom· DOM API는 DOM에 접근하고 변경할 수 있는 프로퍼티와 메서드가 집합된 자바스크립트 객체입니다.· 정적인 웹페이지에 접근하여 ..

※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그에서 읽어주세요. ※ 이 글은 프론트엔드 개발자를 위한 자바스크립트 프로그래밍의 글을 참고한 것입니다. 브라우저 객체 모델 (BOM, Browser Object Model) - BOM은 웹 브라우저와 관련된 객체의 집합을 의미합니다. - BOM은 웹 페이지 콘텐츠와 무관하게 브라우저 기능을 노출하는 객체입니다. - 간단하게 문서 객체 모델 (DOM, Document Object Model)이라 통합해서 부르기도 합니다. BOM에 대한 명확한 명세(내용)가 없는 기간이 길었다 보니, 브라우저 제조사들은 자신들이 원하는 대로 BOM을 확장했고 이에 따른 좋은 점도 있었지만 문제점들도 많이 생기게 되었습니다. window 객체 - win..

※ 이 글은 예전 블로그에서 퍼온 글입니다. 가독성이 나쁘다면 예전 블로그에서 읽어주세요. ※ 이 글은 프론트엔드 개발자를 위한 자바스크립트 프로그래밍의 글을 참고한 것입니다. 자바스크립트에서 생성자 패러다임은 유용하기도 하지만 단점도 있습니다. 바로, 인스턴스마다 메서드가 생성된다는 것입니다. ECMAScript에서 함수는 객체이므로 함수를 정의할 때마다 새로운 객체 인스턴스가 생성되는 것이나 마찬가지입니다. 논리적으로 생성자는 다음과 같습니다. // 다음 두 함수는 논리적으로 동등함. // 1. function Person(name, age, job) { this.name = name; this.age = age; this.job = job; this.sayName = function () { ale..