[마스터 개념] 5 | map, 유용한 연산자들

[마스터 개념] 5 | map, 유용한 연산자들

1 variable 변수

2 operator 연산자

3 function 함수

4 object 객체

5 class 클래스

7 built-in 빌트인 객체

8 array 배열

9 iterator 이터러블

10> map

11> more-operators 유용한 연산자들

12 module 모듈

13 promise 프로미스

14 scope 스코프

15 prototype 프로토타입

16 closure 클로져

17 this 

10 map

Set

 

 중복 X, 집합체이다.

 

// 생성
const set = new Set([1, 2, 3]);
console.log(set);			// Set(3) { 1, 2, 3 }

// 사이즈 확인
console.log(set.size);			// 3

// 존재하는지 확인
console.log(set.has(2));		// true
console.log(set.has(6));		// false

// 순회
set.forEach((item) => console.log(item));	// 1 // 2 // 3
for (const value of set.values()) {
  console.log(value);				// 1 // 2 // 3
}

// 추가
set.add(6);
console.log(set);			// Set(4) { 1, 2, 3, 6 }
// 기존에 있으므로 무시됨
set.add(6); 
console.log(set);			// Set(4) { 1, 2, 3, 6 }

// 삭제
set.delete(6);
console.log(set);			// Set(3) { 1, 2, 3 }

// 전부 삭제
set.clear();
console.log(set);			// Set(0) {}

 

// 오브젝트 세트
const obj1 = { name: "사과", price: 8 };
const obj2 = { name: "바나나", price: 6 };
const objs = new Set([obj1, obj2]);
console.log(objs);	// Set(2) { { name: '사과', price: 8 }, { name: '바나나', price: 6 } }

 

 Object set 은 얕은 복사가 이뤄진다.

 

Map

 

 순서상관 X, key 중복 X, value 중복 O, object와 유사하다.

 

// 생성
const map = new Map([
  ["key1", "사과"],
  ["key2", "바나나"],
]);
console.log(map);		// Map(2) { 'key1' => '사과', 'key2' => '바나나' }

// 사이즈 확인
console.log(map.size);		// 2

// 존재하는지 확인 - key 로 확인
console.log(map.has("key1"));	// true
console.log(map.has("key6"));	// false

// 순회
map.forEach((value, key) => console.log(key, value));	// key1 사과 // key2 바나나
console.log(map.keys());	// [Map Iterator] { 'key1', 'key2' }
console.log(map.values());	// [Map Iterator] { '사과', '바나나' }
console.log(map.entries());	// [Map Entries] { [ 'key1', '사과' ], [ 'key2', '바나나' ] }

// 찾기 - key 로 확인
console.log(map.get("key1"));	// 사과
console.log(map.get("key4"));	// undefined

// 추가 - key 로 확인
map.set("key3", "키위");
console.log(map);		// Map(3) { 'key1' => '사과', 'key2' => '바나나', 'key3' => '키위' }

// 삭제 - key 로 확인
map.delete("key3");
console.log(map);		// Map(2) { 'key1' => '사과', 'key2' => '바나나' }

// 전부 삭제
map.clear();
console.log(map);		// Map(0) {}

 

 Object 와 Map 은 매우 유사하지만, 사용 가능한 함수가 다르다.

 

Symbol

 

 문자열이 똑같아도 서로 다른 유일한 키를 생성할 수 있다.

 

const map2 = new Map();
const key3 = Symbol("key");
const key4 = Symbol("key");
map2.set(key3, "hello");
console.log(map2.get(key4));		// false
console.log(key3 === key4);		// undefined

 

const k1 = Symbol.for("key");
const k2 = Symbol.for("key");
console.log(k1 === k2);			// true

// 전역 심볼 레지스트리에서 Symbol이 가진 문자열에 대한 정보 가져옴
console.log(Symbol.keyFor(k1));		// key

 

 

 Symbol.for( ) : 문자열에 대해 동일한 심볼로 사용하고 싶을 때 사용

 

 Symbol.for( ) 로 추가하면 전역 심볼 레지스트리 (Global Symbol Registry) 에 추가되는데, 전역 심볼 레지스트리에 보관된 것만 keyFor( ) 를 통해 값을 가져올 수 있다.

 

const obj = { [k1]: "Hello", [Symbol("key")]: 1 };
console.log(obj);			// { [Symbol(key)]: 'Hello', [Symbol(key)]: 1 }
console.log(obj[k1]);			// Hello
console.log(obj[Symbol("key")]);	// undefined

 

 obj 의 Symbol 과 console.log 로 출력하는 obj 의 Symbol 은 심볼이기 때문에 다른 것이다. 따라서 undefined 가 출력된다.

 

11 more-operators 유용한 연산자들

Logical Operator 논리 연산자

 

 조건문 밖에서는 단축평가 (short-circuit evaluation) 가 이뤄진다.

 

const obj1 = { name: "강아지" };
const obj2 = { name: "고양이", owner: "mallang" };

let result = obj1 && obj2;
console.log(result);		// { name: '고양이', owner: 'mallang' }

result = obj1 || obj2;
console.log(result);		// { name: '강아지' }

 

&& : 첫 조건이 true이면 -> 뒤의 값이 할당

|| : 첫 조건이 true 이면 -> 해당 값이 할당, 첫 조건이 false 이면 -> 뒤의 값이 할당

 

function changeOwner(animal) {
  if (!animal.owner) {
    throw new Error("주인이 없음");
  }
  animal.owner = "바뀐주인!";
}
function makeNewOwner(animal) {
  if (animal.owner) {
    throw new Error("주인이 있음");
  }
  animal.owner = "새로운주인!";
}

 

obj1.owner && changeOwner(obj1);
obj2.owner && changeOwner(obj2);
console.log(obj1);			// { name: '강아지' }
console.log(obj2);			// { name: '고양이', owner: '바뀐주인!' }

obj1.owner || makeNewOwner(obj1);
obj2.owner || makeNewOwner(obj2);
console.log(obj1);			// { name: '강아지', owner: '새로운주인!' }
console.log(obj2);			// { name: '고양이', owner: '바뀐주인!' }

 

 obj1.owner 는 값이 없으므로 false 값이다. && 연산자이므로 changeOwner(obj1) 는 실행되지 않는다.

 obj2.owner 는 값이 있으므로 true 값이다. && 연산자이므로 changeOwner(obj2) 가 실행되어 obj2.owner 의 값이 바뀐다.

 

 obj1.owner 는 값이 없으므로 false 값이다. || 연산자이므로 makeNewOwner(obj1) 이 실행되어 obj2.owner 에 값이 생긴다.

 obj2.owner 는 값이 있으므로 true 값이다. || 연산자이므로 makeNewOwner(obj2) 는 실행되지 않는다.

 

조건이 truty일 때 && 무언가 해야 할 경우

조건이 falshy일 때 || 무언가 해야 할 경우

 

// null 또는 undefined 인 경우를 확인 할 때
let item = { price: 1 };
const price = item && item.price;
console.log(price);		// 1

 

 item 의 값이 없다면, item.price 에 접근하게 되면 error 가 발생한다. 따라서 item 값이 있을 때만, item.price 에 접근할 수 있도록 구현할 수 있다.

 

function print(message) {
  const text = message || "Hello";
  console.log(text);
}
print();			// Hello
print(undefined);		// Hello
print(null);			// Hello
print(0);			// Hello

function print(message = 'Hi') {
  console.log(message);
}
print();			// Hi
print(undefined);		// Hi
print(null);			// null
print(0);			// 0

 

 단축평가를 사용하여 기본값을 설정할 수 있다. 

 

|| : 값이 falshy 한 경우 설정 -> 0, -0, null, undefined, ' '

default parameter : 값을 전달하지 않거나, undefined 만 설정

 

Optional Chaining Operator 옵셔널 체이닝 연산자

 

 null 또는 undefined 인 경우를 확인할 때 ?. 를 사용한다.

 

?. : 값이 있으면 접근하고, 값이 없으면 접근 X

 

let obj = { name: "강아지", owner: { name: "mallang" } };
function printName(obj) {
  const ownerName = obj?.owner?.name;
  console.log(ownerName);		// mallang
}
printName(obj);

 

 obj 가 있으면, 그 안에 owner 가 있으면, 그 안에 name 이 있으면 그 name 을 할당한다.

 

 obj && obj.owner && obj.owner.name 보다 obj?.owner?.name 이 훨씬 간단하다.

 

Nullish Coalescing Operator 

 

 0, -0, ' ' 일 때는 true 로 처리하고 null, undefined 일 때만 false 로 처리하고 싶을 때 ?? 를 사용한다.

 

let num = 0;
console.log(num || "-1");		// -1
console.log(num ?? "-1");		// 0

 

|| : 0, -0, ' ' 일 때 false 로 처리

?? : null, undefined 일 때 false 로 처리