JavaScript에서 기본값을 설정하는 3가지 방법

나의 고토는 줄곧 삼원 연산자로서 조건부로 변수에 값을 부여하는 데 쓰인다.그러나 "| |"를 선택기 연산자로 사용할 수 있다는 것을 발견한 이래로 나는 줄곧 그것을 더 많이 사용해 왔다.나는 나의 코드가 더욱 읽기 쉽다는 것을 발견했다👍
그래, 너는 그것을 이해하는 데 시간이 필요하다.하지만 일단 이 개념을 익히면 아주 편리해진다.나는 코드가 적을수록 코드가 좋다고 생각하지 않는다.그러나 이 예에서 나는 || 연산자를 더 좋아한다🤩

let isHappyHour = '🍺';

// Logical Operator
isHappyHour = isHappyHour || '🍵'; // '🍺'

// Ternary
isHappyHour = isHappyHour ? isHappyHour : '🍵'; // '🍺'

// If/Else
if (isHappyHour) { 
  isHappyHour = isHappyHour 
} else { 
  isHappyHour = '🍵' 
}

console.log(isHappyHour); // '🍺'

이해 | | 연산자

나는 너희들 대다수의 사람들이 ||가 다음과 같은 브리 검사에만 사용된다고 생각한다고 믿는다.

if(a || b) {
  // do something
}

하지만!선택한 표현식을 계산하고 값을 생성할 수도 있습니다.논리 연산자를 선택기 연산자로 보는 것이 도움이 되는 이유다.부울 값이 아닌 경우 || 연산자는 지정된 표현식이나 작업 수 중 하나인 부울 값이 아닌 값을 반환합니다.
머리 터졌어?!걱정 마, 케르 샘슨처럼 설명해 줄게.그는 무료 자바스크립트 전자책'You Don't Know JavaScript의 저자다.

The value produced by a && or || operator is not necessarily of type Boolean. The value produced will always be the value of one of the two operand expressions.

네, 예를 하나 봅시다.

const truthy = true;
const falsy = false;
const poop = '💩';

truthy || poop; // true
falsy || poop; // '💩';

첫 번째 표현식(왼쪽)이 진실이면 항상 선택한 표현식이 됩니다.그러나 첫 번째 표현식(왼쪽)이 falsy이면 두 번째 표현식(오른쪽)이 기본적으로 출력됩니다.이것이 바로 이 || 가 기본값을 설정하는 조작부호라고 불리는 이유다.

기본값을 함수 매개 변수로 사용

자주 보실 수 있습니다||.

function(name) {
  name = name || 'no name';
}

주의: 이것은 더 이상 추천하는 방식이 아닙니다.ES6의 기본 매개 변수를 사용하는 것이 좋습니다.일반적인 경우, 모든falsy값이 기본값을 사용하지 않기를 원하지 않을 수도 있습니다. 다음에falsy값을 설명하겠습니다.아마도, 우리는 값이 없거나 undefined 매개 변수로 전달될 때 기본값을 설정하기를 원할 것입니다.
ES6 기본 매개 변수를 사용하는 더 나은 솔루션

function(name = 'no name') {
}

거짓 가치관

|| 연산자 중 첫 번째 표현식(왼쪽)만 입니다.그럼 거짓값이 무엇인지 확인해 봅시다.

// JS Essentials: Falsy Values

false
undefined
null
NaN
0
"" or '' or `` (empty string)

(나는 또 다른 Falsy 가치관에 관한 박문을 썼는데, 너는 읽을 수 있다here)

& & 연산자에 비해

앞의 게시물에서 나는 && 조작부호에 관한 글을 썼다.(읽으세요here.&&경호조작원이라고도 부른다.다음은 차이점에 대한 간략한 요약이다.

||: 첫 번째 표현식을 시종 출력합니다.첫 번째 표현식이 falsy일 때만 두 번째 표현식을 출력할 수 있습니다.

&&: FALSY인 경우 첫 번째 표현식을 내보냅니다.두 번째 표현식은 첫 번째 표현식이truthy일 때만 출력됩니다.

고양이 왕 교환원이 뭐예요?

이것은 재미있는 예다.JavaScript에서는 기본값을 설정하기 위해 ||가 있습니다.C++ 등 다른 언어에서는 Elvis 연산자?:와 유사하게 동작합니다.

// JavaScript
someVariable || 'default value'

// Elvis Operator (not JavaScript)
someVariable ?: 'default value'

왜 고양이 왕 교환원을 불렀는지에 대해:

전 세계 책벌레의 형상.일반 도메인 이름 형식

언제 뭘 쓸까요?

Falsy의 가치에 대해 잘 알고 계시다면 이 세 가지 방법 중 어느 것이 더 적합한지 살펴보겠습니다.
🏆논리 연산자||이런 위대한 가치관을 포착하고 싶다면그것의 코드는 더욱 적고 읽기 쉽다.물론 모든 사람이 이 세 가지 행위를 이해한다고 가정해 보자.
주의: 코드가 적을수록 좋다고 말하는 것은 아니다. 사람들은 쉽게 너무 똑똑해지고, 코드를 줄여서 읽을 수 없게 할 수 있다.우리는 다른 사람을 위해 코드를 작성하는데, 이것은 일종의 교류 형식이다.똑똑한 것보다 이해를 전달할 수 있는 옵션을 선택하는 것이 좋다.

let a;

// ✅ Short and simple
a = a || b;

// ☹️ Meh, could be better
a = a ? a : b;

// 😱 Ouch
if (a) {
  a = a;
} else {
  a = b;
}

🏆삼원 연산자
가령 우리가 모든 거짓된 가치관을 포착하고 싶지 않다면.기본값이 undefined일 때만 적용되기를 원합니다.

// ❌ Logical doesn't work
a = (a === undefined) || b;
// (a === undefined) > will output a boolean 'true' not the actual value

// ✅ Ternary works
a = (a === undefined) ? a : b;

// ☹️ Of course if/else will also work...but Ouch
if (a === undefined) {
  a = a;
} else {
  a = b;
}

🏆만약
이것은 제어력이 가장 강한 옵션이다.만약 내가 별도의 동작을 해야 한다면, 나는 절대로 할 것이다.

// ✅ If/Else is much better
if (a) {
  a = a;
  // do something else
} else {
  a = b;
}

리소스

MDN Web Docs - Logical Operators

YDKJS: Types & Grammer

Wikipedia - Elvis Operator

Stack Overflow - Comparison of Ternary operator, Elvis operator, safe Navigation Operator and logical OR operators

Stack Overflow - Logical or vs. Ternary operator

Default Operator in JavaSctipt and Real Life Examples

SamanthaMing.com - Guard Operator

읽어주셔서 감사합니다.❤
인사!||Facebook | Medium | Blog