유용하지만 잘 안쓰는 연산자들

1. ?? Operator

Nullish coalescing operator

• || 연산자와 비슷하게 기본값을 설정할 수 있다.
• 하지만 || 연산자와 다르게 ?? 연산자는 falsy 한 값인 0 과 ' ' 도 리턴한다.
• 즉, undefined 와 null 인 값만 리턴하지 않는다.

|| 연산자 Ex)

let person = {
  name: 'Jack',
  age: 10
	earnings: 0
	career: ''
}
console.log(person.job || 'unemployed'); // 'unemployed'
console.log(person.earnings || 'unemployed'); // 'unemployed'
console.log(person.career || 'no experience'); // 'no experience'

let person = {
  name: 'Jack',
  age: 34,
  job: 'teacher'
	earnings: 300
}
console.log(person.job || 'unemployed'); // 'teacher'
console.log(person.earnings || 'unemployed'); // 300

let a;
let b = null;
let c = undefined;
let d = 4;
let e = 'five';

let f = a || b || c || d || e;

console.log(f); // 4
// e까지 도달하기 전에 d가 true이기 때문에 4 출력

?? 연산자 Ex)

let person = {
  name: 'Jack',
  age: 10
	earnings: 0
	career: ''
}
console.log(person.job ?? 'unemployed'); // 'unemployed'
console.log(person.earnings ?? 'unemployed'); // 0
console.log(person.career ?? 'no experience'); // ''

let person = {
  name: 'Jack',
  age: 34,
  job: 'teacher'
	earnings: 300
}
console.log(person.job ?? 'unemployed'); // 'teacher'
console.log(person.earnings ?? 'unemployed'); // 300

let a;
let b = null;
let c = undefined;
let d = 0;
let e = '';

let f = a ?? b ?? c ?? d ?? e;

console.log(f);  // 0

---

2. ??= Operator

Logical nullish assignment

• 현재 값이 undefined 또는 null 일 때만 새로운 값을 저장한다.

let x = null
let y = 5

console.log(x ??= y) // => 5
console.log(x = (x ?? y)) // => 5

function withNullish(employment) {
  employment.earnings ??= 100
  employment.job ??= 'teacher' 
  return employment
}

// ??= 사용안한 함수
function withDefaultParams(earnings=1, job='teacher') {
  return {earnings, job}
  }

withNullish({earnings: null, job: null}) // => { earnings: 100, job: 'teacher' }
withDefaultParams(null, null) // => { earnings: null, job: null }

---

3. ? Operator

Conditional (ternary) operator

• If 조건문 대신 사용할 수 있다
• 조건 코드 ? true면 이 코드 실행 : false면 이 코드 실행\

From:

let money = 100
let goHome = If (money > 0) {
	return 'Taxi'
} else {
	return 'Walk'
}
console.log(goHome) // => 'Taxi'

To:

let money = 100
let goHome = money > 0 ? 'Taxi' : 'Walk' 
console.log(goHome) // => 'Taxi'

function getFee(isMember) {
  return (isMember ? '$2.00' : '$10.00');
}

console.log(getFee(true));
// "$2.00"

console.log(getFee(false));
// "$10.00"

console.log(getFee(null));
// "$10.00"

---

4. ?. Operator

Optional chaining

• 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽는다.
• . 연산자와 비슷하지만 undefined 또는 null 이면 에러 대신, undefined 값을 리턴한다.

let person  = {
  name: 'John',
  house: {
    location: 'Gangnam',
    value: 1000
  }
};

const houseLoc = person.house?.location;
console.log(houseLoc) // 'Gangnam'

const job = person.job?.budget;
console.log(job) // undefined

const adventurer = {
  name: 'Alice',
  cat: {
    name: 'Dinah'
  }
};

const dogName = adventurer.dog?.name;
console.log(dogName);
// expected output: undefined

console.log(adventurer.someNonExistentMethod?.());
// expected output: undefined