[TIL] 삼항연산자, null병합연산자, 옵셔널체이닝연산자, 화살표함수

미처 블로그에 옮기지 못한 예전 메모들을 보다가 유용하게 쓰일 거 같아서 따로 정리!

자료 출처: https://curryyou.tistory.com/235 [카레유:티스토리]

 

삼항연산자

• 사용형식: 조건 ? 조건이 truthy일 때의 값 : 조건이 falsy일 때의 값2
• true 또는 false 한쪽 결과에 대해서만 특정 동작을 실행하고 다른 쪽에는 아무 동작도 주고 싶지 않다면 리턴값으로 null을 넣으면 됨
• 중첩해서도 사용 가능하다
  

  // false ? (true ? "값1" : "값2") : "값3" 와 동일함
  const result_06 = false ? true ? "값1" : "값2" : "값3"; 
  console.log(result_06); // 값3

• 주의점 : 예상치못하게 falsy한 값 ( 0, "", undefined, NaN, Null 등 )이 들어오면 오류가 날 수 있다
    => 병합연산자나 옵셔널체이닝연산자를 활용하면 오류를 줄일 수 있다

null병합연산자

• 사용형식 : 첫째값 ?? 첫째값이 null, undefined일 경우 리턴할 값
• 장점: 변수를 참조할 때 null 체크를 편하게 할 수 있다(중첩 사용 가능)
• 삼항연산자와 다르게 값이 falsy해도 null이나 undefined만 아니라면 첫째값을 리턴한다

null ?? '디폴트'; // 디폴트
'안녕' ?? '디폴트'; // 안녕

const result_03 = undefined ?? null ?? '세번째';  // 세번째
const result_04 = null ?? "두번째" ?? '세번째'; // 두번째

 

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

• 사용형식: {객체}?. 키
• 객체가 null, undefined가 아닌 경우에만 객체.키 값을 참조한다 (null, undefined이면 undefined를 반환)
• 장점: 객체의 프로퍼티를 참조할 때 null 체크를 편하게 할 수 있다 (중첩 사용 가능)

const obj_01 = null;

console.log(obj_01.name); // !!!Error발생!!!
console.log(obj_01?.name); // undefined 출력

 

화살표함수의 중첩사용

// 기본 구조
(param1, param2, …, paramN) => { statements }
(param1, param2, …, paramN) => expression

// 매개변수가 하나면 경우 괄호 생략 가능
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없으면 괄호만 사용
() => { statements }

// 바깥함수가 x를 입력받고, y를 입력받아 x+y를 리턴하는 클로저함수를 리턴

// 일반적인 클로저 함수 표현
const adder = function(x) {
	return function(y) {
		return x + y;
	}
}
adder(10)(20);   // 30

// 화살표함수로 표현
const adder = x => y => x + y;
// const adder = (x) => ((y) => x + y); 와 같음

화살표 함수를 사용하면 위의 코드를 단 한줄로 표현할 수 있다. 화살표 함수를 사용하면 이렇게 연속된 여러개의 화살표로 클로저를 구현할 수 있다.

 

간편해서 요새 콜백함수 등에 자주 사용하고 있지만 사용에 몇 가지 제한이 있다는 걸 자주 까먹는다.

아직은 bind 등을 완벽히 이해하지 못하지만 차차 알고 사용할 필요가 있겠다.

https://joooing.tistory.com/entry/유용하지만-위험한-화살표함수