TIL : 28번째- 230105 [1-1-목]

I. INTRO : 들어가며

오늘은 디스트럭쳐링 배열을 한다.

 

II. ES6

1. Array Destucturing

1)

let kors = [1,2,3];
let[kor1, kor2, kor3] = kors;
console.log(kor1);

let kors2 = [3,4,5];
[kor1, kor2, kor3] = kors2;
console.log(kor1);

이렇게 하면 된다

 

- 이경우 let때문에 아래 kor1 관련부분은 건들면안된다.

 

 

2) 

let std1 = {name : 'dragon' , phone : '010'};

({name,phone}= std1);
console.log(phone);

= 때문에 선언으로 보이지만, 디스르럭쳐링을 하려면 전체를 괄호로 감싸라고 한다.

 

오류 때문에 전체를()로 감싸주어야한다.

 

 

3) 

let a,b ;
[a,b]= kors2;
console.log(a);

kors2 값을 a,b 대입이 가능하다.

 

4) swap

a = 20;
b = 30;

console.log(a);
[a,b] = [b,a];
console.log(a);

[a,b] [b,a] 배열 바꾸기도 가능하다

 

-내려쓰기 와 세미콜론

내려쓰기는 전제가 문장이 완전해야한다.

뒷문장이 완전하지 않으니까 ;없는 윗문장까지 하나로 이해하게된다.

 

세미콜론으로 문장에 오해가 없게끔 할 수있다.

 

5) 

let kors3 = [10,20,30];
let [, , kor13] = kors3;
console.log(kor13);

kor3 변수만 디스트럭쳐링만원할시 가능하다!

 

6)

10개 항목 중 첫번째,두번째만 변수넣고, 나머지는 배열로 가능할까?

let nums = [1,2,3,4,5,6,7,8,9,10];
let [n1, n2, rest] = nums;
console.log(rest);

그냥 3이 나온다.

 

let [n1, n2, ...rest] = nums;
console.log(rest);

나머지매개변수 (...)이 있으면 배열로된다.

rest Parameter 나머지연산인데 가운데로 하면은 안된다.

왜냐하면 나머지여서 이다. (반드시 마지막!)

 

 

2. Set

JS 는 최초 개발 때 applicaction 만들목적이 아니여서 부족한게 많았음

모듈화 캡슐화 불가능, 컬렉션도없었는데, ES6에 도입되었다

 

(1) 다른언어에서의 기본 컬렉션의 종류

Set / List / Map

컬렉션 : 데이터를 수집함을 의미한다. (언어가 제공하는 데이터 담을수 있는 container)

선형, 트리형으로 나누어지거나 / 관리방식으로 링크형, 배열형으로 나누어진다.

 

오브젝트에서 key, value 담는 저장소보다는 map으로 쓰는것이 바람직하다.

가변길이 데이터를 이용가능하다

 

JAVA도 유사

 

(2) Set 객체 만들기

1) 소개

 

<array(배열)과의 차이점>

1. 데이터를 중복해서 넣을수없다

2. 데이터를 목적을 가지고 관리가 가능하다. 예컨데 필요데이터가 멤버인지 확인에 용이하다

e.g. [.has]

3. 인덱스 값으로 데이터 조회가 어렵다.

 

 

값이 곧 키가 되는 것이다. 키가 부여되지않음

배열쓰면 인덱스가 식별자로서 있다.

꺼내는 키가 없어서 꺼낼수없음

 

단독적으로는 불가능하나, 일괄적으로는 가능하다.

특정값 꺼내거나 하는것이 쉽지않다.

 

왜 만듬?

값,키 가 중복되지않을 수있음 (데이터 필터링)

 

Set은 중복된 값은 허용하지 않아서, 안넣어준다.

같은 값 두번 넣어도 size안늘어남

 

결국 로또 중복문제에서도 유용하게 해결이가능하다.

let set = new Set();

set.add(5);
set.add("5");
set.add(2);
set.add(5);

console.log(set.size);  //3

for(let n of set){
    console.log(n); //5 "5" 2
}

 

2)  for of 문

얘를 꺼내기 위해서는 for of 문으로 가능하다

이터레이터문으로도 가능한데, 다소 어렵다. ( 이유: 쓰레드, 동기화)

let set = new Set([5,5,"5",[1,2,3],4]);

console.log(`size : ${set.size}`);

for(let n of set){
    console.log(n);
}

 

이렇게 간편하게도 가능하다

 

3) 값 제거, 클리어

 

set.delete(5);

set.clear();

 

4) set 객체 값 나열하기 : 배열에서 중복값 제거하고, 그 결과 목록 출력하기

 

for ecah는 for of와 어떤차이?

공통적으로 둘다 하나씩 값을 꺼내기가 가능함

각각 하나씩 값을 뽑아내는 방법이다,

 

for each는 es5에서부터 가능했음

얘는 JS에는 원래 없다가, 추가하려고한 것이다.

이후 for of 가 나오게되었다.

 

실무에서는 for each가 多

 

for(let k in set){
    console.log(`for in = ${k}`);
}

for in 은 set(es6)을 인식못해서 출력을하지못한다

for(let n of set){
    console.log(n);
}


console.log("----------");


set.forEach((v, k)=>{
    console.log(`value = ${v} key = ${k}`);
});

 

 

5) WeakSet : Set객체와 달리 열거(X) , 개수확인(X)

중복제거 확인을 위해 쓰지만, 잘 사용하지는 않는다.

 

(3) Map

1) Map의 기능

 

<일반객체와 Map의 차이점 : 객체의 문제점>

1. 객체 key로 내장메소드 이름사용시 이름충돌문제

2. 객체 key는 문자열이어야하는 것

3. 객체에 얼마나 많은 프로퍼티가있는지 알아낼수 있는것이 녹록치 않음

4. 객체반복은 코스트 소모가 큼

5. 가장큰것은 객체는 이터러블 하지않음 결국 이터러블사용하는 문법은 사용불가.

 

오브젝트다, 이것을 보다 더 용이하게 이제 이용하자!

 

키(keys), 밸류(values) 따로 같이하는 entries라고한다.

 

@@ 심볼인데, 인터페이스를 지원하지않아서, 약속에 해당하는 명칭이다

추후 심볼때 설명하겠다. (인터페이스의 필요성을 이해하는게 좋다)

 

 

2) 값의 열거방법

 

이전에 오브젝트는 key값이 문자열이여야하는데, map은 다른것도 쓸수있다.

key가 식별이 가능하면 다양한것 쓰기가능하다.

 

map에다가 값 담는 작업을 하는데, map은 key,value 구분이 가능하다

 

let notice = new Map()
notice.set("id", 1);
notice.set(title, "map is...");
notice.set("writer", "newLec");

이러한녀석들은 속성이다.

묶으려고 하면 묶어져있는 class로 정의해서 쓰는것이 맞으나, 다시는 쓸일이없으면 한번만 구조를 정하는게 아니고 임시데이터 구조를 만들때 쓴다.

 

내가 제목만, id만 writer만꺼내쓸필요있는데 notice에서 title만꺼내겠다

 

3) get 으로 가능

console.log(notice.get("title"));

 

4) for - of 이용하기 (with keys() / values() / )

//이제 for of를써보자
console.log("--------------------------")

//key 만 제공해주는 것
for(let key of notice.keys())
    console.log(`key : ${key}`);
    
for(let v of notice.values())
    console.log(`key : ${v}`);

- 이러한 방식이면 for-in은 왜 안되는 것일까?

 

5) entries

for(let [k,v] of notice.entries()){
    
    console.log(`key : ${k} /value : ${v}`);

}

 

 

- 질문 : forecah와 entries() kv순서 왜다름?

그냥 메소드 방식이 다른거 아닐까?

 

6) 가지고놀기

for(let n of notice){
    console.log(`n : ${n} `);
}

 

7) map (Array.prototype.map()) : 배열관련

map은 데이터변환할 때 많이 쓸 수있다.

게시글처럼 여러 게시글들을 출력하거나 담는것외에도 효율적인 방법으로 map이있다. (컬렉션아님)

입력받아서 다른결과 만드는 mapping하는 함수가있다.

 

map은 배열의 요소를 변경하여 새로운배열로 리턴바꾸어 주는 것이다.

 

for ecah는 목록주면 써먹기라면, map은 써먹기위함이다.

 

let list = [

    {id : 1 , title : "jsp" , writerId : "newenw"},
    {id : 2 , title : "qqq" , writerId : "newsdsdenw"},
    {id : 3 , title : "jswwwewep" , writerId : "newsdsdenw"},
    {id : 4 , title : "jswrwrp" , writerId : "newesdsdnw"},
    {id : 5 , title : "jwewdsdsp" , writerId : "sdsds"}
];

let ar = list.map((n) => {return n.title});
console.log(ar);

let ar2 = list.map((n) => { return `<span>${n.title}</span>`});
console.log(ar2);

 

III. 캐릭터 움직이기

다음시간에

 

 

---

1. 보충

 

1) 이터레이터

우리말로 반복기라고 한다.

이후 loop동작 (for - of)를 수행할수있다.

 

 

2) 객체명 중복 관련해서 객체나, 맵은 뒤에 선언된것으로 한다

다만 맵은 덮어씌우는것이라서 사이즈가 늘어나지 않음

 

3) for / for - in / for - ecah / for -of 연혁

 

for (ES1)

for-in (ES1)

for-each (ES5)

for-of (ES6)

 

 

 

2. 회고 

1) 백틱 사용이 익숙해졌다.

 

2)화살표함수 사용에 대해서 잘 이용할수있게되었다.