A. ES6
1. 구조분해할당
(1) 배열의 경우
값을 할당해줄 수 있다.
(2) 객체인 경우
1번 예시
각 순서에 맞게 요소를 할당한다.
리스트가 초과되면 이후 데이터는 undefined로 표기된다.
2번 예시
name이라는 같은 이름의 객체에 새로운 이름으로 할당할 수 있다.
3번 예시
값이 undefined로 할당이 안되는 경우가 있을 때 미리 초기값을 지정해서
undefined가 아닌 지정된 데이터로 반환할 수 있다.
2. 단축속성명
key - value가 똑같으면 생략할 수 있다.
obj와 obj1은 사실 똑같은 데이터이다.
위 변수의 이름이 같기 때문에 생략할 수 있어서 단축시켰을 뿐이다.
겉으로 봐서는 배열이지만 객체이다.
3. 전개 구문
객체 병합인 ... 을 이용해서 새로운 변수에 이전 변수 데이터를 간편하게 넣어줄 수 있다.
args는 이후 추가로 값이 더 들어올 수 있다는 것을 암시하는 것
여기에 ... 을 붙여서 이 함수에 추가로 들어오는 데이터를 풀어서 넣게된다.
4. 템플릿 리터럴
백틱 (``)을 넣으면 같은 문자열이지만 이 안에는 자바스크립트 코드가 들어갈 수 있게된다.
$와 중괄호{}를 넣어주면 문자열 사이에 코드를 넣을 수 있게 된다.
추가로 멀티 라인을 지원한다.
return :
Hello
My name is
Kyung Wook Lee
이렇게 기존 문자열에서 지원하지 않는 줄바꿈을 인식해서 리턴값을 돌려준다.
B. 일급 객체 (First-class Object)
다른 객체들이 일반적으로 적용 가능한 연산을 모두 지원하는 객체이다.
1. 특징
▶ 변수에 함수를 할당할 수 있다.
함수가 나중에 사용할 수 있도록 마치 값으로 취급된다.
▶ 함수를 인자(매개변수)로 다른 함수에 전달할 수가 있다.
콜백함수 : 매개변수로써 쓰이는 함수
고차함수 : 함수를 인자로 받거나 retrun 하는 함수
▶ 함수를 반환할 수 있다.
▶ 배열의 요소로 함수를 할당할 수 있다.
이렇게 인덱스를 통해 원하는 함수를 불러올 수 있다.
C. Map, Set
JavaScript의 한계를 보완하기 위한 추가적인 알고리즘
데이터의 구성, 검색, 사용을 효율적으로 처리하기 위해 나온것.
1. Map
Key - Value
key에 어떤 데이터 타입(유형)도 다 들어올 수 있다.
Map은 키가 정렬된 순서로 저장되기 때문이다.
get과 set은 페어로 생각하면 편리하다.
set : 저장
get : 가져오기
이런식으로 for of 문을 통해 반복할 수 있다.
size를 통해 데이터의 개수를 셀 수 있고,
has를 통해 데이터의 일치 여부를 boolean형태로 확인할 수 있다.
2. Set
고유한 값을 저장하는 자료구조
값만 저장하고 키는 저장하지 않는다.
값이 중복되지 않는 유일한 요소로만 구성된다.
size와 has는 똑같이 사용되고,
추가할 땐 add를 사용한다.
똑같이 for of 문도 사용 가능하다.
for of 문을 사용할 땐 values는 value, keys는 key, entries는 entry로 해야 값이 나온다.
'개발일지' 카테고리의 다른 글
CSS 그리드(grid) 양쪽 여백 남기고 중앙정렬하는 법 (1) | 2023.10.19 |
---|---|
JavaScript 화면 단위 스크롤 1편 (1) | 2023.10.17 |
2023.10.12. TIL JavaScript 1주차 (0) | 2023.10.12 |
미니프로젝트 A-03 KPT 회고 (0) | 2023.10.12 |
2023.10.11. TIL 텍스트 애니메이션 및 반응형 폰트 비율 (0) | 2023.10.11 |