1. && 연산자
1-1. 적용 전
const seaFood = {
name: "킹크랩"
}
function getName(fish) {
if(fish) {
return fish.name;
}
return undefined
}
const name = getName(seaFood);
console.log(name); // '킹크랩'
함수 getName 에 seaFood 객체를 전달하여 실행하는 함수이다.
이 때 getName 에서 fish 값을 체크하여 Truthy 하다면 fish.name 을 리턴하고
그렇지 않으면 undefined 을 리턴 한다.
결과값은 문제가 없지만 단순한 기능임에도 코드가 너무 길다고 느껴진다...
그렇다면 위의 코드를 && 연산자 를 사용하여 단축해보자
1-2. 적용 후
const seaFood = {
name: "킹크랩"
}
function getName(fish) {
return fish && fish.name
}
const name = getName(seaFood);
console.log(name); // '킹크랩'1-2 의 코드는 어떻게 동작 할까?
fish 도 Truthy 하고 fish.name 또한 Truthy 하다면 오른쪽의 값을 return 한다.
굳이 명제로 정리해보다면 아래와 같다.
- 왼쪽 값이 Truthy 하면 오른쪽 값이 리턴된다.
- 왼쪽 값이 Falsy 왼쪽 값이 리턴된다.
몇가지 예제를 추가하여 결과값을 추측해보자
undefined, false, null 은 대표적인 Falsy Value 이다.
console.log(true && "hello"); // 'hello'
console.log(null && undefined); // null
console.log(undefined && "hello"); // undefined
console.log("hello" && null); // null
console.log("hello" && "bye"); // bye
console.log(null && "hello"); // null
console.log(undefined && "hello"); // undefined음.. 대략적인 논리는 알겠지만 오른쪽, 왼쪽 하는게 자꾸 헷갈린다.
여기에 || 연산자 의 논리까지 추가된다면 내 머릿속은 더 혼란스러워 질 것이다..
2. || 연산자
2-1. 적용전
const seaFood = {
name: "박달대게"
};
function getName(fish) {
if(!fish) {
return '이름없음'
}
return fish;
}
const name = getName(seaFood)
console.log(name) // {name : 박달대게}1-1의 코드와 형태는 비슷하나 getName 함수의 값 체크가 다르다.
fish 의 값이 Truthy 하다면 fish 을 리턴하지만
반대로 Truthy 하지 않다면 '이름없음' 이라는 string 값을 리턴한다.
아까와 같이 코드가 길어보이니 코드를 줄이기 위해서
이번엔 || 연산자 를 사용해보자
2-2. 적용 후
const seaFood = {
name: "박달대게"
};
function getName(fish) {
return fish || '이름없음'
}
const name = getName(seaFood)
console.log(name) // {name : 박달대게}
const name2 = getName()
console.log(name2) // '이름없음'
fish 가 Truthy 하면 왼쪽 값인 fish 를 return 하고
fish 가 Falsy 하면 오른쪽 값인 '이름없음' 을 return 한다.
이 또한 명제로 정리해보다면 아래와 같다.
- 왼쪽 값이 Truthy 하면 왼쪽 값을 리턴한다.
- 왼쪽 값이 Falsy 하면 오른쪽 값을 리턴한다.
아까처럼 몇가지 예제를 추가하여 결과값을 추측해보자
undefined, false, null, NaN, '' 을 제외한 대부분 모든 값은 Truthy Value 이다.
console.log(false || 'hello') // 'hello'
console.log('' || 'hello') // 'hello'
console.log('트루' || 'hello') // '트루'
console.log(1 || 'hello') // 1
console.log('hello1' || false) // 'hello1'
console.log('hello2' || NaN) // 'hello2'
console.log(null && false) // false
console.log(undefined || null) // null나도 영상을 보면서 정리하였지만 많이 쓰다보면 익숙해 지겠네 라는 생각이 들었다.
단순하게 생각하면 왼쪽 값이 true 냐 false 에따라 결과값이 오른쪽 왼쪽 으로 정해지고
&& 와 || 의 결과값은 반대로 된다라고 정리하면 되지만
뭔가 성질을 이해하기 보다는 그대로 보고 '외운다' 라는 느낌이 강하게 들었다..
3. 정리
어떻게 하면 보다 쉽게 정리할수 있을까?
이러한 특성을 전혀 모르는 사람들에게 &&연산자 와 ||연산자 를 쉽게 이해 시키고 싶다면
어떻게 설명하면 좋을지 생각해보았고 나름 나만의 방법 으로 이를 정리해보았다.
&& 연산자는 Falsy 값을 우선, Truthy 값을 나중에 찾는다.
#### && 연산자는 Falsy 를 좋아한다.
const name = 먼저값 && 나중값- Truthy 한 값과 Falsy 한 값이 같이 있다면 무조건 Falsy 값을 찾아 리턴한다.
- 둘 다 Falsy 한 값이라면 Falsy 를 우선 으로 찾기 때문에 먼저있는 Falsy 값을 리턴한다.
- 둘 다 Truthy 한 값이라면 Truthy 를 나중 으로 찾기 때문에 나중에 있는 Truthy 값을 리턴한다.
|| 연산자는 Truthy 값을 우선, Falsy 값을 나중에 찾는다.
|| 연산자는 Truthy 를 좋아한다.
const name = 먼저값 || 나중값- Truthy 한 값과 Falsy 한 값이 같이 있다면 무조건 Truthy 값을 찾아 리턴한다.
- 둘 다 Truthy 한 값이라면 Truthy 를 우선 으로 찾기 때문에 먼저 있는 Truthy 값을 리턴한다.
- 둘 다 Falsy 한 값이라면 Falsy 를 나중 으로 찾기 때문에 나중에 있는 Falsy 값을 리턴한다.
뭔가 써놓고 보니 아차싶다. 더 헷갈릴 수도 있겠다는 생각이든다..
뭐 각자의 편한방법이 있겠지만 나만의 방법으로 정리해보는것 자체가 좋은 시도라고 생각한다.