JAVASCRIPT - 중급 11편

• for in 반복문 : Object에 사용

• for of 반복문 : Array, String, Arguments, NodeList, Map, Set에 사용

* for in 반복문

Object에 있는 값을 전부 하나씩 꺼내서 사용할 때

1. enumerable(셀 수 있는지 여부)이 true인 것만 반복

Object.getOwnPropertyDescriptor(오브젝트명, key값): writable, enumerable, configurable 상태 출력

var object1 = { name : 'kim', age : 30 };
Object.getOwnPropertyDescriptor(object1, 'name'); // result; {value: 'kim', writable: true, enumerable: true, configurable: true}
for (var key in object1) {
  console.log(object[key])
}

2. 부모의 prototype 반복

hasOwnProperty(key): 내가 직접 가지고있는 값 판별, true / fasle 반환

class parent {
  age = 30;
}
parent.prototype.name = 'Park';
var obj1 = new parent();
for (var key in obj1) {
    if (obj1.hasOwnProperty(key)) {
        console.log(object[key])// result: 직접 가지고있는 30(age) 값만 출력
    }
}

3. Object에만 사용 가능

* for of 반복문

Array, String, Arguments, NodeList, Map, Set에 있는 값을 전부 하나씩 꺼내서 사용할 때

1. iterable(자료형[Symbol.iterator]();를 사용할수 있는 것)한 자료형에만 사용가능

var arr1 = [2,3,4,5]
for (var data of arr1) { // data 는 변수명
  console.log(data) // result: 2,3,4,5 전부 따로 출력
}
for (var data1 of 'ABC') {
  console.log(data1) // result: A,B,C, 전부 따로 출력
}

예시

key값에 숫자를 제외한 문자만 남기기

var products = [
  {
    name1 : 'chair',
    price1 : 7000,
  },
  {
    name2 : 'sofa',
    price : 5000,
  },
  {
    name1 : 'desk',
    price3 : 9000,
  },
]; 
let newValue;
let newKey;
for (var item of products) {
    console.log(item); // result: {name1...}, {name2...}, {name1...}
    for (var key in item) {
        newKey = key.split('').filter((x) => isNaN(x)).join(''); // result: key값에 숫자는 제거한 문자만 남는다 
        newValue = item[key]; // result: 'chair',7000, ...
        item[newKey] = newValue; // 새로운 Object key,value 추가
        delete item[key]; // 기존 key에 해당하는 Object 삭제
    }
}
console.log(products);

* Symbol 자료형

var 변수명 = Symbol('설명'): Object 자료형의 숨겨진 key값

var sb = Symbol('설명');
var weight = Symbol('비밀 몸무게');
var person = { name : 'kim', [height] : 300 }; // Symbol을 직접적으로 추가 가능 [변수명] : value
person.weight = 100;
person[weight] = 200;
console.log(person);
for (var key in person) {
    console.log(person[key]); // Symbol은 출력안됨 : enumberable 하지 않기 때문에
}                    

특징

1. Symbol에 설명이 같아도 같은 Symbol이 아니다, 만들 때 마다 새로운 Symbol이 생성

Symbol.for()로 전역 심볼을 생성하면 설명이 같으면 같아짐

var a = Symbol.for('설명1');
var b = Symbol.for('설명1');
var c = Symbol('설명1');
console.log(a === b) // result: true;
console.log(a === c) // result: false;

2. 기본 내장 Symbol

Array, Object 자료형을 만들 때 자동으로 생성되는 Symbol이 있다 = [Symbol.iterator]

* Map 자료형

자료간의 연관성을 표현하기 위해 사용

key값에 모든 자료형 사용 가능

1. Map.set(): Map 자료 추가

2. Map.get(): Map key에 해당하는 value 출력

3. Map.delete(): Map key에 해당하는 key, value 삭제

4. Map.size: Map 길이

var person = new Map(
    [
        ['male', 'men'], ['address','seoul']
    ]
);
person.set('name','kim');
person.set([1,2,3], 'arr1'); // Map 자료 추가
person.get('age'); // Map key에 해당하는 value 출력
person.delete('age'); // Map key에 해당하는 key, value 삭제
person.size; // Map 길이
console.log(person);

* Set 자료형

Array에 중복된 자료를 제거한 자료형

1. Set.add(): Set 자료 추가

2. Set.has(): Set value가 유무 확인

3. Set.delete(): Set value 삭제

4. Set.size: Set 길이

var personList = ['john', 'tom', 'andy', 'tom'];
var pl = new Set(personList);
pl.add('sally'); // Set 자료 추가
pl.add('tom'); // 중복된 값은 추가되지 않는다
pl.delete('tom'); // Set 자료 삭제
pl.has('tom'); // Set 자료 여부 확인, return true / false
pl.size; // Set 길이
console.log(pl); // result: {'john', 'andy', 'sally'};
personList = [...pl]; // Set자료형을 Array 자료형으로 변경
console.log(personList); // result: ['john', 'andy', 'sally']