[JS] 단축평가 | 난해하지만 편하다

단축평가

자바스크립트에서 단축평가란 논리합(`||`) 또는 논리곱(`&&`)을 사용하여 조건식을 판별하는 과정에서 연산을 조기에 종료하는 것이다. 모든 조건을 판별하지 않고 최종 결과가 나오는 경우에 판별을 중단한다. 

 

💡좌변, 우변

논리연산자의 단축 평가를 알아 보기 전에 좌변, 우변의 개념부터 알아야 한다. 아주 간단하다. 논리연산자의 왼쪽에 있는 것을 좌변, 오른족에 있는 것을 우변이라고 칭한다. 

true || console.log('좌변이 false일 때 찍힘')

위 예시에서 `true`는 좌변, `console.log()` 는 우변이다. 그럼 본격적으로 각 연산자의 단축평가 방식을 살펴보자.

---

💡 논리합(OR) 단축평가

`||` (OR) 연산자는 좌변이 참(truthy)일 경우 전체 표현식의 결과가 참이 되므로 바로 판별을 종료하고 그 값을 반환한다. (이후의 표현식은 판별하지 않는다.) 왜 그렇게 되는지 텍스트로만 전달하면 오잉? 할수도 있기 때문에 아래 예시를 통해 다시 한번 살펴봅시다.

if(true || false)

예시를 보니 이해하기 좀 더 수월하다. 단축평가를 알기 전에는 조건문에서 OR, AND 상관 없이  "모든 피연산자 중 하나라도" 라고 생각하며 모든 피연산자를 끝까지 평가한다고 생각했었는데 실제로는 왼쪽부터 순서대로 평가하면서 `true`를 만나면 그 시점에서 평가를 종료하는 방식으로 동작한다.

 

조건문이 아닌 곳에서 논리합

a = true || 'ㅋㅋ' // true
a = false || 'ㅋㅋ' // 'ㅋㅋ'
a = false || 0 // 0

• `true || 'ㅋㅋ'`: 좌변의 값이 참(truthy)이기 때문에 판별을 종료하고 좌변값(`true`) 반환
• `false || 'ㅋㅋ'`: 좌변의 값이 거짓(falsy)이기 때문에 그 다음 표현식(우변)을 판별, 우변의 값이 참(truthy)이기 때문에 우변값(`'ㅋㅋ'`) 반환
• 모든 조건이 false일 경우 가장 마지막 값 반환

 

피연산자의 수는 제한 없음

a = false || 0 || null || 'ㅎㅇ' || '' // ㅎㅇ

• 같은 방식으로 동작
• 4번째 피 연산자의 값이 참(truthy)이기 때문에 `'ㅎㅇ'` 반환

 

함수실행 가능

// `그냥 코드 실행해버리기` 출력
false || 0 || null || console.log('그냥 코드 실행해버리기')|| '' 

// `b: 하이` 출력
b = false || 0 || null || function () { console.log('b: 하이') } || ''
b() // b는 이제 함수로 살아야됨

• 일반적인 원시 데이터 뿐만 아니라 코드 자체를 실행할 수도 있고, 함수같은걸 저장할 수도 있음
• `console.log()` 같은 코드도 바로 실행 가능함
• 함수 같은 걸  `b`에 저장할 수도 있음

 

 논리합(OR) 정리

• 피연산자를 좌측부터 판별
• 피연산자의 개수에는 제한이 없다 (하지만 2개 이상 사용할 일이 있을지는 모른다)
• 첫 번째 만나는 `truthy`값 반환(실행)
• 모든 값이 `falsy`값 일 경우 가장 마지막 피연산자의 결과가 반환

---

💡 논리곱(AND) 단축평가

`&&` (AND) 연산자는 반대로 하나라도 거짓일 경우 판별을 종료한다. 따라서 거짓을 만나게 되면 그 즉시 반환(실행)하고 종료된다. 모든 값이 `truthy`값일 경우 마지막 피연산자의 결과가 반환 된다.

 

a = true && 'a'
console.log(a); // a

a = false && 'a'
console.log(a); // false

이 외의 OR과 비슷한 예시는 생략 (걍 반대임)

 

 

&& 연산자 실제 사용 예시

어떤 변수의 값이 `truthy`한 경우에 뒤에 실행할 코드를 작성하는 경우가 많다. 우리와 친한 `if`문을 사용해도 되지만 단축평가 기법을 사용하면 더 간결하게 코드 실행이 가능하다. 

 

대충 `userId`가 존재할 경우 실행되는 코드가 있다고 가정해보자.

userId = '유저1'
if(userId){
    save(userId)
}

 `if`문은 정석이자 근본적인 방법이지만 코드를 더 줄일 수 있는 방법이 있다.

 

 

userId = "유저1"
userId && save(userId);

`userId`가 `truthy`값일 경우 코드가 실행된다. 웹개발에서 이런 로직이 굉장히 많이 사용되는데 눈에만 익는다면 코드가 훨씬 간결해져서 마음이 편안 할 것이다.. 진작 공부해서 알아둘걸..