221018_TIL
오늘 한 일
- Symbol 심볼
- 논리연산자 단축평가
###단축평가 논리연산자인 && 그리고 와 || 또는 은 단축평가가 된다는 특징이 있다.
const obj1 = { name: '강아지' };
const obj2 = { name: '고양이', owner: 'lkh' };
// if문 안에서의 각 조건들 중 논리연산자는 불리언값으로 평가된다.
if (obj1 && obj2) {
console.log('둘다 true!');
}
// 둘다 true!
조건문 안에서는 모든 조건들이 평가가 되는데 조건문 밖에서 사용한다면
평가가 단축된다 = 단축평가
const obj1 = { name: '강아지' };
const obj2 = { name: '고양이', owner: 'lkh' };
let result = obj1 && obj2;
console.log(result);
// { name: '고양이', owner: 'lkh' };
| result는 if문처럼 불리언 타입으로 평가해야 하는 경우가 아니고 단순히 변수에 값을 할당하는 것이기 때문에 obj1은 true고 && 다음의 남는 부분은 하나니까 자연스럽게 result에 할당이 된다. 그래서 출력값이 위와 같이 나온다. | 또는 연산자도 마찬가지이다. |
const obj1 = { name: '강아지' };
const obj2 = { name: '고양이', owner: 'lkh' };
let result = obj1 || obj2;
console.log(result);
// { name: '강아지' }
| &&는 앞의 && 앞의 값이 true이면 뒤에 있는 남는 값이 변수에 할당이 되고 | 는 | 앞이 true이면 뒤에건 확인할 필요도 없기 때문에 | 앞이 true이면 해당 값이 변수에 할당이 된다. 당연히 | 앞이 false면 | 뒤에 있는 값이 할당이 된다. |
이게 바로 논리연산자가 단축평가 되는 특징이다.
조건문 안에서는 모든 표현식들이 평가화 되어 평가된 값으로 확인을 하지만 조건문 밖에서 사용하는 경우 위에 적은 규칙처럼 적용이 된다.
활용 예
&& 연산자 : 조건이 truthy일 때 무언가를 해야할 경우 쓰고
| 연산자 : 조건이 falshy일 때 무언가를 해야할 경우 사용한다. |
const obj1 = { name: '강아지' };
const obj2 = { name: '고양이', owner: 'lkh' };
// 주인이 있는 경우에만 바꿔줄려고 만듬
function changeOwner(animal) {
//주인이 없으면 undefined고 !(부정)을 하니 true가 됨
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);
console.log(obj2);
Symbol
데이터타입 중 원시타입에서 저번에 공부하지 못한 Symbol에 대해 오늘 공부했다. 심볼은 유일한 값, 유일한 key를 나타낼 때 유용하다. 심볼은 유일한 키를 생성할 수 있음
const map = new Map();
const key1 = 'key';
const key2 = 'key';
map.set(key1, 'Hello');
console.log(map.get(key2));
// Hello
console.log(key1 === key2);
// true
다른 변수를 만들어 두긴 했지만, 문자열이 똑같은 값이니까
key1으로 값을 넣어도 key2로 동일한 Hello를 가지고 올 수 있다.
왜냐 원시타입이기 때문에 값이 똑같아서 동일한 key라고 간주할 수 있는 것이다.
const map = new Map();
const key1 = Symbol('key');
const key2 = Symbol('key');
map.set(key1, 'Hello');
console.log(map.get(key2)); // undefined
console.log(key1 === key2); // false
Symbol은 new 연산자를 사용하지 않고 바로 Symbol에 내가 원하는 key 이름을 지정해주면 된다.
Symbol은 동일한 key이름을 만들어도 서로 다른 값이 생성된다.
동일한 이름으로 하나의 key를 사용하고 싶다면, Symbol.for 를 이용해야한다.
이걸 이용하면 전역적으로 Symbol을 관리하고 있는 전역 심볼 레지스트리( )라는 곳에서 이 이름의 심볼을 만들고 그것을 계속 재사용할 수 있다. (Global Symbol Registry)
const k1 = Symbol.for('key');
const k2 = Symbol.for('key');
console.log(k1 === k2); // true
// 해당 심볼에 해당하는 문자열을 알고싶다면 사용하는 함수
console.log(Symbol.keyFor(k1));
// 해당 심볼을 전달하면 이 심볼이 가지고 있는 문자열에 대한 정보를 가질 수 있다.
결론은 동일한 문자열을 갖고 서로 다른 Symbol 을 만들고 싶다면 그냥 Symbol을 이용하면 되고
동일한 문자열이 동일한 Symbol을 만들고 싶다면 Symbol.for를 이용하면 된다.
해당 심볼에 해당하는 문자열을 알고싶다면 사용하는 함수 : keyFor
const k1 = Symbol.for('key');
//
console.log(Symbol.keyFor(k1)); // key
// 해당 심볼을 전달하면 이 심볼이 가지고 있는 문자열에 대한 정보를 가질 수 있다.
주의할 점은 keyFor은 전역 레지스트리에 보관된 심볼에 한해서만 이름을 가져올 수 있다. 전역 레지스트리에 보관되지 않고 그냥 만든 Symbol을 가져오려고하면 undefined가 출력된다.
const key1 = Symbol('key');
console.log(Symbol.keyFor(key1)); // undefined
이런 심볼은 Map에서 유용하게 사용할 수 있다.
Map에서 key를 이용할 때 문자열을 사용하면 우리가 아무곳에서나 생성한 key가 동일한 문자열이라면 값을 접근할 수 있는데
우리가 딱 한 번 만든 symbol에 한해서만 , 즉 내 클래스 내부 또는 모듈 내부에서 생성된 심볼을 이용해서만 Map에 있는 값을 읽어와야 된다면 보완을 우리가 조금 더 높이고 싶을 때 심볼을 사용할 수 있고
조금 더 유일한 key를 만들어야 할 때 문자열 보다는 심볼을 이용하는게 조금 더 유니크함을 보장할 수 있다.
Map 뿐만 아니라 오브젝트에서도 충분히 심볼을 이용해볼수있다.
const obj = { [k1]: 'Hello', [Symbol('key')]: 1 };
console.log(obj);
// {[Symbol(key)]: 'Hello', [Symbol(key)]: 1}
console.log(obj[k1]); // Hello
console.log([Symbol('key')]); // undefined
*객체의 키는 단순 문자열이 아닌 경우에는 항상 대괄호를 사용해야한다.
onsole.log([Symbol(‘key’)]) // undefined
undefined인 이유는 서로 전혀 다른 key를 가진 Symbol이기 때문이다 . 위에 적은 Symbol.for를 이용하는 이유이기도 하다.
느낀 점
오늘 코딩테스트 문제풀이도 공부계획을 잡아놨는데 하지 못했다. Symbol을 배우는데 있어서 코드를 적어보고 하는데 이해가 되질 않는 부분이 많고 생소한 부분이 있어서 구글링도 해보고 찾아보는데 은근 시간을 많이 잡아먹었다.
오늘도 역시 모각코 온라인 스터디에 참여했다. 게더타운에 다같이 모여서 각자 코딩을 하고, 목표설정 그리고 종료 10분 전 각자 오늘 공부에 대한 주관적 점수, 목표달성여부, 공부집중시간 등을 리뷰하고 종료했다. 잠깐의 리뷰와 목표설정이지만 그날그날마다 환기시켜주고 내가 무엇을 하고 있는지 한번 더 생각해보는 시간이 짧게나마 있어서 유용하고, 다른 사람의 화면을 공유하면서 자극을 받는다는 점이 좋은 것 같다. 특별한 일이 없는 이상 계속 참여할 예정.
댓글남기기