TIL(2/6) / JS 2 (일급 객체, Map&Set)

JS 2주차 강의 들으면서 잘 기억해 둘 것만 작성해보자

구조분해할당은 처음엔 어려웠지만 재차 반복하면서 익숙해졌다.

일급객체는 참 완벽히 이해하기가 어려운 것 같다.

 

구조분해할당

• 배열이나 객체의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

배열

  

    
    
    
    
  
let [value1, value2] = [1, "new"];
console.log(value1, value2); // 1, "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4

객체

  

    
    
    
    
  
let user = {name: "nbc", age: 30};
let {name, age} = user;

// let name = user.name;
// let age = user.age;

console.log(name, age) // nbc 30

// 새로운 이름으로 할당
let {name: newName, age: newAge} = user;
console.log(name, age) // ReferenceError: name is not defined
console.log(newName, newAge) //nbc 30

let {name, age, birthDay} = user;
console.log(birthDay) // undefined

let {name, age, birthDay = "today"} = user;
console.log(birthDay) // today

=> 객체에서 초기값을 설정하지 않으면 undefined, 초기값이 있다면 d=4라고 작성해도 초기값으로 출력된다.

일급 객체로서의 함수

• 일급객체 : 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
• 함수가 일급 객체라는 것은 함수를 객체와 동일하게 사용할 수 있다는 의미
• 함수가 일급 객체로 취급되는 5가지 경우
  • (1) 변수에 함수를 할당
  • (2) 함수를 인자로 다른 함수에 전달
  • (3) 함수를 반환
  • (4) 객체의 프로퍼티로 함수를 할당
  • (5) 배열의 요소로 함수를 할당

  

    
    
    
    
  
// (1) 변수에 함수를 할당
const increase = function (num) {
	return ++num;
}
const decrease = function (num) {
	return --num;
}
// 객체에 저장할 수 있다.
const auxs = { increase, decrease };

// (2) 함수를 인자로 다른 함수에 전달 - 콜백 함수, 고차 함수
function callFunction(func) {
  func();
}
const sayHello = function() {
  console.log('Hello!');
};
callFunction(sayHello); // "Hello!"

// (3) 함수를 반환 - 팩토리, 클로저
function createAdder(num) {
  return function(x) {
    return x + num;
  }
}
const addFive = createAdder(5);
console.log(addFive(10)); // 15 

// (4) 객체의 프로퍼티로 함수를 할당
const person = {
  name: 'John',
  // 화살표 함수는 undefined 출력됨
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};
person.sayHello(); // "Hello, my name is John"

// (5) 배열의 요소로 함수를 할당
const myArray = [
  function(a, b) {
    return a + b;
  },
  function(a, b) {
    return a - b;
  }
];

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

 

Map, Set

Map

Map은 키-값 쌍을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있다.

객체와 유사하지만 다음과 같은 차이가 있다.

구분	객체	Map 객체
키로 사용할 수 있는 값	문자열 또는 심벌 값	객체를 포함한 모든 값
이터러블	X	O
요소 개수 확인	Object.keys(obj).length	map.size

 

또한 Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없다.

Map을 사용하면 다음과 같은 작업을 수행할 수 있다.

• 키-값 쌍 추가 및 검색(set)
• 키-값 쌍 삭제 (delete)
• 모든 키-값 쌍 제거 (clear)
• Map 크기 및 존재 여부 확인 (size)

  

    
    
    
    
  
const myMap = new Map();
//Map에 값 추가하기
myMap.set("key", "value");
//검색
myMap.get("key"); //콘솔 돌리면 "value" 출력
//반복
for (const key of myMap.keys()) {
  console.log(key);
}

  

    
    
    
    
  
const myMap = new Map();

myMap.set("one", 1);
myMap.set("two", 2);
myMap.set("three", 3);
// console.log(myMap.keys()); // { 'one', 'two', 'three' }
// console.log(myMap.values()); // { 1, 2, 3 }
// console.log(myMap.entries()); // { [ 'one', 1 ], [ 'two', 2 ], [ 'three', 3 ] }

for (const key of myMap.keys()) {
  console.log(key);
}
for (const value of myMap.values()) {
  console.log(value);
}
for (const entry of myMap.entries()) {
  console.log(entry);
}

console.log(myMap.size);
console.log(myMap.has("two")); //key 기반 검색

 

Set

Set은 고유한 값을 저장하는 자료 구조, 즉 중복되지 않는 유일한 값들의 집합이다.

배열과 유사하지만 다음과 같은 차이가 있다.

구분	배열	Set 객체
동일한 값을 중복하여 포함할 수 있다.	O	X
요소 순서에 의미가 있다.	O	X
인덱스로 요소에 접근할 수 있다.	O	X

값만 저장하며, 키를 저장하지 않는다.

Set을 사용하면 다음과 같은 작업을 수행할 수 있다.

• 값 추가 및 검색
• 값 삭제
• 모든 값 제거
• Set 크기 및 존재 여부 확인

  

    
    
    
    
  
const mySet = new Set();
mySet.add("value1");
mySet.add("value2");
mySet.add("value3");
mySet.add("value5");
mySet.add("value8");

console.log(mySet.size);
console.log(mySet.has("value1"));
console.log(mySet.has("value2"));
console.log(mySet.has("value3"));

// Iterator
for (const value of mySet.values()) {
  console.log(value);
}