23_11_21 JS공부정리

[코딩애플] Part3

 

-for in 반복문

 

for (let key in obj) {

    console.log(key) //키 모두 출력

    console.log(obj[key]) //값 모두 출력

}

 

-for in반복문의 특징

1.enumerable한 것만 반복해줌

 

*Object.getOwnPropertyDescriptor(오브젝트명, 키) : 오브젝트.키의 숨겨진 정보 출력

-사실 오브젝트 안에는 Kim이라는 정보 외에 writable, enumerable,configurable이 같이 저장됨.

 

'데이터 속성(data property)'에 대한 속성 기술자는 네 가지 속성을 갖습니다.

• value: 속성에 어떤 값이 저장되어 있는지를 나타냅니다.
• writable: 변경할 수 있는 속성인지를 나타냅니다.
• enumerable: 열거 가능한 속성인지를 나타냅니다.(셀수있는지 여부, true이면 for in 반복문에서 처리가능)
• configurable: 부수속성을 변경하거나 속성을 삭제할 수 있는지를 나타냅니다.

-for in반복문의 특징

2.부모의 prototype도 반복해줌

class 부모2 {

}

부모2.prototype.name = "park"

let 오브젝트2 = new 부모2();

for (let key in 오브젝트2) {

    console.log(오브젝트2[key]) //"park" 출력

}

 

객체.hasOwnProperty(key) : 부모의 prototype을 출력하고 싶지 않을때 사용

class 부모2 {

}

부모2.prototype.name = "park"

let 오브젝트2 = new 부모();

for (let key in 오브젝트2) {

    if(오브젝트2.hasOwnProperty(key)) { //불린값으로 반환. 오브젝트2가 가지고있는 값만 출력

        console.log(오브젝트2[key]) //출력없음

    }

}

 

-for in반복문의 특징
3.Object 자료형에만 씀. : 배열일땐 그냥 forEach나 for반복문 쓰면됨

 

 

-for 자료 of 자료형 :  자료형에 array,문자,arguments,NodeList,Map,Set 사용가능. 차례대로 자료에 넣음

let arr2 = [2,3,4,5];

for (let 자료 of arr2) {

    console.log(자료) //2 3 4 5가 차례로 출력됨

}

 

for of 반복문 특징
-iterable(배열을 일반화한 객체)한 자료형에만 가능
-array, string, Map, Set 등은 iterable한 자료형임

배열[Symbol.iterator]()

-그림과같이 [Symbol.iterator]()를 했을때 나오는게 있다면 Iterable한 자료형임

문자[Symbol.iterator]();

-문자도 똑같이 나오는게 있음

 

-오브젝트속 키값수정하는 코드

var products = [

  {

    name1 : 'chair',

    price1 : 7000,

  },

  {

    name2 : 'sofa',

    price : 5000,

  },

  {

    name1 : 'desk',

    price3 : 9000,

  },

];

for (let element of products) {

    for (let key in element) {

        if(!isNaN(parseInt(key.slice(-1)))) {

            let newValue = element[key]

            let newKey = key.slice(0,-1)

            element[newKey] = newValue

            delete element[key];

        }

    }

}

*delete 객체[키] : 객체속 키를 가지고있는 프로퍼티를 삭제.

 

-let 심볼 = Symbol('설명');

*심볼의 용도 : Object 자료형의 비밀스런 key값
*민감한 정보를 Object안에 주석처럼 쓸 수 있게 하는 방법.
*원래는 오브젝트의 키값에 문자만 넣을 수 있었으나, ES6부터는 Symbol를 넣을 수 있게됨

let weight1 = Symbol('내 시크릿 몸무게임')

let person = {name : "Jake", age : "27"};

person[weight] = 100;

심볼이 키값에 들어갈 수 있음.

-반복문을 쓸때 심볼은 출력되지 않음(심볼은 enumerable하지 않기 때문에 for in에서 출력X)

심볼은 반복문에 의해 출력되지 않음.

 

-아래와 같이 심볼을 만들 수 도 있음

let height1 = Symbol('내 키임')

person2 = {name : "jake", [height1] : "170"}

//대괄호를 이용해 심볼 삽입

심볼이 들어간 것을 확인할 수 있음

 

import 해온 파일/라이브러리 쓸때 거기있는 object에 자료를 추가하고싶다면
(but 기존에 있는 자료를 망치기 싫다) => Symbol사용

 

-Symbol의 특징
1.심볼에 담겨있는 설명이 같다고 해서 같은 Symbol이 아님

let a = Symbol('설명')

let b = Symbol('설명')

a == b //false

 

2.전역 변수같은 전역 Symbol

-let 변수 = Symbol.for('설명')

let a = Symbol.for('설명')

let b = Symbol.for('설명') // let b = a로 코드가 수정됨.

a === b //true

 

3.Symbol 특징 : 기본 내장 Symbol들

*array, Object에는 자바스크립트가 기본적으로 넣는 Symbol이 있음

*Symbol.iterator라는 심볼은 for of를 쓸 수 있게 도와주는 Symbol

*ES6환경에선 저런 식으로 뭔가 내장 기능을 만들어내는구나~라고 이해만 하면 됨

let arr = [2,3,4];

arr[Symbol.iterator]() //위의 심볼만드는 코드와 비슷

 

-Map 자료형

let person = new Map();

person.set('name','Kim'); //변수.set(키,값)

person.set('age',20);

Map 자료형

 

키를 문자로 받는 Object와는 달리 
Map자료형은 키 이름으로 모든자료형이 다 가능

let person = new Map();

person.set(100,'Kim'); //{100 => "Kim"}

person.set([1,2,3],'Kim'); //{[1,2,3] => "Kim"}

 

-Map 자료형에서 값을 꺼내는 법 : 맵.get(키)

arr4=[1,2,3]

let person = new Map();

person.set(100,'Kim'); //{100 => "Kim"}

person.set(arr4,'Park'); //{[1,2,3] => "Kim"}

person.get(100) //"Kim"

person.get(arr4) //"Park"

person.get([1,2,3]) //undefined. get은 === 연산으로 동일한 키값을 찾기 때문.

 

-Map에서 자료를 삭제하는 법 : 맵.delete(키)

person.delete(100)

맵.delete(키)

-Map자료형의 길이 : 맵.size

let person = new Map();

person.set(100,'Kim');

person.set([1,2,3],'Park');

person.size //2

 

*Map자료형은 프론트보단 데이터베이스에서 자료간의 연관성을 표현하기 위해 씀

 

Map의 for of 반복문

for (let key of person.keys()) { //맵 자료형의 key들을 모은 것 = person.keys(). iterable한 객체임.

    console.log(key)

}

 

for (let value of person.values()) { //맵 자료형의 value들을 모은것

    console.log(value)

}

 

Map안의 프로퍼티 한번에 만드는법 : 대괄호 안에 각각의 프로퍼티를 대괄호로 감쌈.

let person = new Map([

    [100,'Kim'],

    [[1,2,3],'Park'],

])

한번에 만들기

 

Set : 중복을 없애주는 자료형

let 출석부 = ['john','tom','andy','tom'];

let 출석부2 = new Set(출석부);

Set자료형은 자동으로 중복이 제거됨

 

-Set 자료형에 자료를 추가하는 방법 : Set자료.add(값)

-Set 자료형에 자료를 제거하는 방법 : Set자료.delete(값)

-Set 자료형에 자료가 있는지 확인하는 방법 : Set자료.has(값)

-Set 자료형의 길이 : Set자료.size

출석부2.add('sally') //추가

출석부2.delete('sally') //삭제

출석부2.has('sally') //불린값으로 반환

출석부2.size //Set자료형의 길이 반환

 

-Set을 이용해 Array의 중복값 제거하는 코드

let 출석부 = ['john','tom','andy','tom'];

let 출석부2 = new Set(출석부);

출석부 = [...출석부2] //중괄호를 벗기고 대괄호를 씌움(set -> array)

 

*forEach, for of도 사용가능

Set.forEach()