# ES6
[ES6] 데이터컬렉션(4) - Map으로 객체 대신하기
이번 포스팅에서는 Map에 대해 알아보겠습니다.Map은 객체를 대신해 데이터변경이 잦은 키-값 컬렉션에 유용하게 사용할 수 있습니다.Map 객체는 키-값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션입니다. 아무 값(객체와 원시 값)이라도 키와 값으로 사용할 수
JS) Class
Class ES5 방식 ES6 Class 선언 방식 기존 방식과의 차이점 let과 const처럼 TDZ이 존재하며 블록스코프에 갇힌다. class 내부는 strict mode가 강제된다. 모든 메소드는 열거할 수 없다. constructor를 제외한 모든
[ES6] 데이터컬렉션(3) - Array 배열메서드 reduce()
이번엔 reduce()에 대해서 정리해보겠습니다.reduce()함수는 배열의 길이나 데이터형태 등을 모두 변경할 수 있습니다.배열을 객체리터럴등 다른 형태의 데이터로 반환할 때도 유용합니다.이 번에도 더미데이터를 한 번 사용해보겠습니다.mockaroo 링크바로 코드를
[ES6] 데이터컬렉션(2) - Array 배열메서드
map() : 형태를 바꿀 수 있지만 길이는 유지됩니다.sort() : (정렬) 순서만 바꿉니다. (형태나 길이는 변경되지않습니다.)filter() : (필터) 원하는 기준에따라 길이를 변경합니다.(형태를 변경하지 않습니다.)find() : (필터) 한 개의 데이터를
JS) iterable, iterator, generator
내부 요소들을 공개적으로 탐색(반복)할 수 있는 데이터 구조Symbol.iterator 메소드를 가지고 있음.Array, Set, Map, StringSymbol.iterator 메소드가 존재하는 개체는 iterablegenerator를 호출한 결과1\. Array.f
JS) Map, WeakMap
1\. iterable 하지 않다iterable: 내부 요소들을 하나 하나 순차적으로 반복하여 모든 요소를 검토하는 것for...in 문은 iterable 하게 보이도록 만들어둔 것이지 실제로 iterable 하지는 않습니다. 정확하게 표현할려면 key값이 obj의 p
JS) Set, WeakSet
중복이 허용되지 않으며 순서를 보장하는 값들로만 이루어진 리스트추가, 삭제, 초기화 요소의 총 개수, 포함 여부 확인배열과 다르게 인덱스 개념이 없고 값으로 삭제하고 포함 여부를 확인한다.초기값 지정인자로 iterable한 개체를 지정할 수 있음. ( 반복 가능한 개체
JS) Symbol
기본형(Primitive Value)주소 값에 값이 그대로 들어옴.Number String B텍스트oolean null undefined Symbol참조형(Reference Value)기본 주소 값 외에 별개의 데이터가 존재ObjectB Array function Ma
JS) 구조 분해 할당(Destructuring assignment)
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 표현식원하는 곳만 할당이 가능하다발췌fouth와 같이 배열에 없는 요소 값을 발췌 시 undefined 할당rest parameter와 활용default parameter와 활용다차원 배열과 활용
JS) new.target
Person을 함수로 호출하면 에러가 발생하고 new Person으로 호출하도록 강제하는 방법이다.그냥 Person으로 호출할 경우 this는 Window이므로 Person의 instance가 아니고,new Person으로 호출할 경우 this는 Person의 inst
[ES6] 펼침연산자(전개연산자, Spread Syntax, Spread Operator)
const staff는 객체요소를 가진 배열입니다.콘솔에 먼저 출력해보겠습니다두 로그를 비교해보면펼침연산자를 사용한 ...staff 는 배열내의 요소들을 하나씩 나열해줍니다. (이 자체로 배열이 아닙니다.)원래대로라면 for문을 사용해 순회했어야 하지만 간단한 표현으로
JS) function method
함수는 선언한 후 호출해야 실행이 됩니다. 호출하는 방법으로는 함수 뒤에 ()를 붙이는 것과call, apply 하는 방법이 있습니다.call은 함수와 똑같이 인자를 넣고, apply는 인자를 하나로 묶어 배열(\[])로 만들어 넣습니다.call과 apply가 공통적으
[ES6] 데이터컬렉션(1) - Array (배열) (변경자 ,수정메서드 ,조작 등)
Array는 높은 유연성을 가진 컬렉션입니다. 다른 컬렉션을 Array로 변경해 작업한 뒤, 원래의 데이터구조로 복구하기도 합니다.일련의 작업들(추가,제거,정렬,필터링,교체 등)을 하기에 다양한 메서드를 갖고 있어 조작하기도 쉽습니다.ES6의 새로운 문법중 상당수가 배
JS) arrow function
기존의 함수 선언을 보다 직관적으로 표현 가능함.함수가 함수를 리턴하는 경우arrow function은 함수 스코프를 생성함. 단, 실행 컨텍스트 생성 시 this 바인딩 x 비교forEach의 callback func의 this는 window를 가르키기 때문에 여기서
[TIL] Template literals
template literal은 ES6에서 추가된 문법으로 Back Tick(\`\`) 으로 String을 감쌀 수 있게 되었다.Back Tick으로 감싸진 스트링에는 다른 변수를 삽입할 수 있다.변수를 사용하려면 ${ }사이에 넣어주면 된다.template liter
ES6 정리
What is ES6?ES6는 ECMAScript6의 약자로서 자바스크립트의 버전의 이름입니다. ES6는 JavaScript에 풍부한 새로운 기능을 도입하는 동시에 이전 JavaScript와 완전히 역호환됩니다. 크롬과 같은 가장 인기 있는 웹 브라우저들 조차도 모든
[ES6] 템플릿리터럴 Template literals
템플릿 리터럴은 자바스크립트 표현식을 사용해서 문자열을 연결하고 새로운 문자열을 생성하는 간단한 문법입니다 1\. 템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱(\` \*) (grave accent) 을 이용합니다. 2\. 변수나 코드를 표현할 때는 $