연산자와 비교

docs.scrimba.com

장바구니를 추적한다고 가정해봅시다. 가격을 더하고, 할인을 적용하고, 합계가 무료 배송 기준을 초과하는지 확인하고, 장바구니가 비어 있을 때 경고를 표시할지 결정합니다. 각 단계마다 연산자가 작동합니다. 즉, 하나 또는 두 개의 값을 받아서 새로운 값을 생성하는 기호입니다. 이 장에서는 숫자에 산술을 수행하는 것부터 값을 비교하고 참-거짓 테스트를 결합하는 것까지 끊임없이 사용하는 연산자들을 다룹니다.

산술과 할당

**산술 연산자**는 이미 알고 있는 수학을 수행합니다: +는 더하고, -는 빼고, *는 곱하고, /는 나눕니다. 만나본 적 없을 수도 있는 하나가 더 있습니다: %는 나머지 연산자로, 나눗셈 후 남은 것을 줍니다.

const total = 8 + 5; // 13
const change = 20 - 13; // 7
const leftover = 17 % 5; // 2, 5는 17에 3번 들어가고 2가 남음
console.log(total); // 13

값을 자신에 기반해서 업데이트하려면 단축형이 있습니다. score = score + 10 대신 score += 10을 쓸 수 있습니다. 같은 의미입니다: 현재 값을 가져와 10을 더하고 결과를 다시 저장합니다.

let score = 100;
score += 10; // score는 이제 110
score -= 30; // score는 이제 80
console.log(score); // 80

그리고 숫자를 정확히 1씩 올리거나 내리려면 ++과 --이 한 번에 합니다. count++는 1을 더하고, count--는 1을 뺍니다.

let lives = 3;
lives--; // lives는 이제 2
console.log(lives); // 2

**산술 연산자**는 +, -, *, /, %입니다. 처음 4개는 친숙하고, %는 한번 더 살펴볼 가치가 있습니다. 나눗셈의 나머지를 반환하므로 "이것이 균등하게 나누어지나?"라는 체크와 값을 범위 내에서 다시 감싸는 데 사용되는 표준 도구입니다.

const isEven = 10 % 2; // 0, 그래서 10은 짝수
const isOdd = 7 % 2; // 1, 그래서 7은 홀수
console.log(isEven); // 0

자신의 값으로부터 값을 업데이트하는 것은 흔해서 단축형이 있습니다. 각 산술 연산자는 =와 쌍을 이루어 복합 할당을 형성합니다: +=, -=, *=, /=, %=. 그래서 price *= 1.2는 "price를 1.2로 곱하고 다시 저장하세요"로 읽히며, price = price * 1.2라고 쓸 필요가 없습니다.

let price = 40;
price *= 1.2; // 20퍼센트 추가, price는 이제 48
price -= 8; // price는 이제 40
console.log(price); // 40

정확히 1씩 변경하려면 ++과 --이 제자리에서 증가/감소합니다. 카운터를 stepping할 때 깔끔하게 읽히며, 끊임없이 볼 것입니다.

let attempts = 0;
attempts++; // attempts는 이제 1
console.log(attempts); // 1

**산술 연산자**는 네 가지 기본에서 놀라운 점이 거의 없으므로 실제 주의가 필요한 두 가지는 %와 + 오버로드입니다. 나머지 연산자 %는 정수 스타일 나눗셈 후 남은 것을 반환하며, 좌측 피연산자의 부호를 유지합니다: -7 % 3은 2가 아니라 -1입니다. 이는 수학적 모듈로를 기대하는 사람들을 혼동시킵니다. 이는 나누어떨어지는지 테스트하고 인덱스를 범위 내로 다시 감싸는 데 사용됩니다.

const remainder = 17 % 5; // 2
const negative = -7 % 3; // -1, 부호는 좌측 피연산자를 따름
console.log(negative); // -1

+ 연산자는 오버로드되어 있습니다: 두 숫자가 있으면 더하지만, 어느 쪽이든 문자열이면 연결하고 다른 쪽을 문자열로 강제합니다. 이 단일 규칙이 온갖 종류의 놀라움 뒤에 있으므로 더하기 전에 무엇을 가지고 있는지 이름을 지으세요.

const sum = 5 + 3; // 8
const glued = "5" + 3; // "53", 3이 문자열이 됨
console.log(glued); // 53

복합 할당(+=, -=, *=, /=, %=)은 자신의 바인딩에서 업데이트하는 관용적 방법이며, 동일한 + 오버로드를 상속합니다: msg += count는 count를 문자열화합니다. 증가/감소 연산자 ++과 --은 반환하는 값에서 다른 접두사와 접미사 형태가 있습니다: x++은 이전 값으로 계산한 다음 증가하고, ++x는 증가한 후 새로운 값으로 계산합니다. 차이가 문제가 되는 식에서는 그 차이가 중요하지 않은 자체 문에 두세요. 이런 식으로 재할당하는 모든 것에 let을 사용하세요. const 바인딩은 업데이트할 수 없으므로 입니다.

let counter = 5;
const before = counter++; // before는 5, counter는 이제 6
const after = ++counter; // after는 7, counter는 이제 7
console.log(`${before} ${after}`); // 5 7

Juno산술과 할당 수학 연산자는 기대하는 것들이고, 나누기 후 나머지를 위한 %를 더합니다. 자신으로부터 값을 업데이트할 때 단축형을 사용하세요: score = score + 10 대신 score += 10입니다. 그리고 ++ 또는 --은 숫자를 1씩 올리거나 내립니다. 이것들을 신뢰하는 데 시간이 걸렸지만, 동일한 수학을 더 짧게 쓴 것입니다.

Juno산술과 할당 5개의 산술 연산자가 있고, % 나머지는 나누어떨어지는지 확인하는 데서 그 가치를 얻습니다. price *= 1.2 같은 복합 할당은 한 번에 자신의 값에서 값을 업데이트하고, ++ 또는 --은 1씩 stepping합니다. 이런 식으로 업데이트할 계획이 있는 모든 것에 let을 사용하세요. const는 재할당될 수 없으므로.

Juno산술과 할당 두 가지를 날카롭게 유지하세요: %는 좌측 피연산자의 부호를 유지하므로 -7 % 3은 -1이고, +는 어느 쪽이든 문자열이 되는 순간 연결합니다. 접두사 대 접미사 ++는 다른 값을 반환하므로 물릴 수 없는 자체 문에 두세요. 나머지 산술 연산자는 정확히 예상하는 대로 동작합니다.

비교

**비교**는 두 값에 대한 질문을 하고 true 또는 false로 답합니다. 참-거짓 답변은 부울이며, 이는 프로그램이 나중에 결정을 내릴 때 사용하는 것입니다.

가장 많이 사용할 비교는 ===로, "이 둘이 정확히 같은가?"라고 묻습니다.

const answer = 42;
console.log(answer === 42); // true
console.log(answer === 7); // false

반대는 !==로, "이 둘이 다른가?"라고 묻습니다. 그리고 순서를 위해 <, >, <=, >=이 있으며, 수학에서처럼 작동합니다: 미만, 초과, 이하, 이상.

const age = 18;
console.log(age >= 18); // true
console.log(age !== 21); // true

항상 ===로 비교하세요, ==은 절대 안 됩니다. 더블 이퀄스 버전에는 사람들을 놀라게 하는 특이한 점이 있고, 트리플 이퀄스 버전은 매번 예상한 대로 합니다.

**비교**는 두 값을 가져와서 부울인 true 또는 false를 반환합니다. 이 부울은 조건문에서 작성할 결정의 원료이므로, 비교를 올바르게 하는 것이 중요합니다.

동등성에 ===을, 부등성에 !==을 사용합니다. 순서를 위해 <, >, <=, >=이 있습니다.

const stock = 3;
console.log(stock === 0); // false
console.log(stock > 0); // true
console.log(stock <= 5); // true

== 대신 ===을 사용하는 이유는 그들이 같은 연산자가 아니기 때문입니다. ===(엄격한 동등성)은 값과 타입을 모두 비교하며, 둘 다 일치할 때만 true를 반환합니다. ==(느슨한 동등성)은 먼저 두 쪽을 공통 타입으로 변환한 다음 비교하며, 거의 아무도 예측하지 못하는 결과를 생성합니다.

console.log(0 == ""); // true, 그리고 거의 원하지 않음
console.log("1" == 1); // true, 문자열이 숫자가 됨
console.log("1" === 1); // false, 다른 타입

매번 ===과 !==을 기본값으로 하세요. 변환 없이 비교하므로 변환 규칙을 이성적으로 생각할 필요가 없습니다. 새 코드를 작성하지 말고 오래된 코드를 읽을 때 ==을 저장하세요.

**비교**는 부울을 반환하며, 연산자들은 두 가지 계열로 나뉩니다: 동등성(===, !==)과 관계(<, >, <=, >=). 관계 연산자들은 숫자에서 간단합니다. 동등성 연산자들은 실제 결정이 사는 곳이며, JavaScript가 둘을 제공하기 때문입니다.

===(엄격한 동등성)은 두 피연산자가 타입과 값을 공유할 때만 true를 반환하며, 변환이 없습니다. ==(느슨한 동등성)은 피연산자를 먼저 공통 타입으로 강제하는 추상-동등성 알고리즘을 실행하며, 실용적 규칙은 오래된 코드를 읽을 수 있도록 알 가치가 있습니다: 숫자와 문자열을 비교하면 문자열을 숫자로 변환합니다("1" == 1은 true); 부울을 어떤 것과 비교하면 부울을 먼저 숫자로 변환합니다(true == 1, false == 0); null == undefined은 true이지만 둘 다 다른 것과 같지 않습니다; 그리고 NaN은 자신을 포함해 아무것과도 같지 않습니다.

console.log(0 == ""); // true, ""는 0이 됨
console.log("1" == 1); // true, "1"은 1이 됨
console.log(null == undefined); // true, 특수한 경우
console.log(NaN === NaN); // false, NaN은 아무것과도 같지 않음

===과 !==을 사용하세요; ==을 읽기 전용 지식으로 취급하세요. 핵심은 모든 강제 경로를 암기하는 것이 아니라 그것들을 피하는 것입니다: 엄격한 동등성에는 강제가 없으므로, 그 결과는 피연산자에서 바로 읽힙니다. ==이 언급할 자리는 null == undefined 체크이며, 일부 코드베이스는 의도적으로 nullish 값 둘 다를 한 번에 잡기 위해 사용하지만, 이 장 뒤에서 나오는 nullish 연산자들이 더 명확하게 그 일을 합니다.

Juno비교 비교는 두 값에 대한 예-또는-아니오 질문을 하고 true 또는 false로 답합니다. ===을 동등성을 확인하려면, !==을 "다른가"에, 그리고 <, >, <=, >=을 순서를 위해 사용하세요. ===을 유지하고 ==을 건너뛰세요, 더블 버전에는 놀라움이 있고 트리플 버전은 동작하므로.

Juno비교 모든 비교는 부울을 넘겨주며, 이것이 다음에 작성할 결정의 연료입니다. ===은 값과 타입을 함께 확인합니다; ==은 먼저 쪽을 변환하고 0 == ""이 true인 것과 같은 이상함을 생성합니다. ===과 !==으로 기본값을 하세요. 그래서 변환을 절대 이성적으로 생각할 필요가 없고, ==을 오래된 코드 읽기를 위해 남겨두세요.

Juno비교 엄격한 동등성은 변환 없이 타입과 값을 비교하므로, 그 답은 피연산자에서 바로 읽힙니다. 느슨한 ==은 당신의 등 뒤에서 변환 알고리즘을 실행하므로 "1" == 1이 true이고 NaN은 전혀 아무것과도 같지 않습니다. ===과 !==을 작성하고 강제 규칙을 오래된 코드에 대한 읽기 전용 지식으로 유지하세요.

논리 연산자와 참 같은 값과 거짓 같은 값

종종 하나 이상의 비교를 결합해야 합니다. **논리 연산자**는 그렇게 하도록 합니다: &&(그리고), ||(또는), !(아닙니다).

&&는 양쪽이 true일 때만 true입니다. ||는 어느 한쪽이 true일 때 true입니다. !는 부울을 그 반대로 뒤집습니다.

const age = 20;
const hasTicket = true;
console.log(age >= 18 && hasTicket); // true, 둘 다 true
console.log(age < 13 || hasTicket); // true, 한쪽이면 충분
console.log(!hasTicket); // false, 뒤집음

참 같은 값과 거짓 같은 값이라는 관련된 개념이 있습니다. 참-거짓 설정에서 JavaScript는 일부 비-부울 값을 마치 false인 것처럼 취급합니다. 거짓 같은 값들은 false, 0, ""(빈 문자열), null, undefined, NaN입니다. 다른 모든 것은 참 같은 값으로 간주됩니다.

const name = "";
console.log(!name); // true, 빈 문자열은 거짓 같은 값

**논리 연산자**는 부울 값을 결합합니다: &&(그리고)는 양쪽 피연산자가 true일 때만 true, ||(또는)은 최소 하나가 true일 때, !(아닙니다)는 단일 부울을 역전시킵니다.

const loggedIn = true;
const isAdmin = false;
console.log(loggedIn && isAdmin); // false, 둘 다 true여야 함
console.log(loggedIn || isAdmin); // true, 하나면 충분
console.log(!isAdmin); // true

연산자들은 실제 부울에 멈추지 않습니다. JavaScript가 모든 값을 참 같은 또는 거짓 같은 값으로 정렬하기 때문입니다. 거짓 같은 값의 집합은 짧고 암기할 가치가 있습니다: false, 0, "", null, undefined, NaN. 다른 모든 것은 "0", "false", 그리고 비어 있지 않은 문자열을 포함해 참 같은 값입니다. 이것이 !username과 같은 체크를 작성하게 해서 "사용자명이 입력되지 않았다"를 의미합니다.

const username = "";
console.log(!username); // true, ""는 거짓 같은 값
console.log(Boolean("hello")); // true, 비어 있지 않은 문자열은 참 같은 값

**논리 연산자**는 &&, ||, !이며, 핵심 통찰은 &&과 ||이 부울을 반환하지 않는다는 것입니다. 그들은 단락 평가를 합니다: 각각 좌측 피연산자를 평가하고, 그럴 필요가 있으면 우측만 평가한 후, 강제된 true 또는 false가 아닌 실제 피연산자 중 하나를 반환합니다.

a || b는 a가 참 같은 값이면 a를 반환하고, 그렇지 않으면 b를 반환합니다. a && b는 a가 거짓 같은 값이면 a를 반환하고, 그렇지 않으면 b를 반환합니다. 이 행동은 거짓 같은 값의 집합을 뒷받침합니다: false, 0, "", null, undefined, NaN이 6개의 거짓 같은 값들이고, 다른 모든 것은 참 같은 값입니다.

const name = "";
const display = name || "Guest"; // "Guest", ""는 거짓 같은 값이므로
const label = "민준" && "active"; // "active", 좌측이 참 같으므로 우측을 반환
console.log(display); // Guest

|| 기본값 트릭에는 예리한 모서리가 있으며, 이것이 ??(nullish 합치기)가 존재하는 이유입니다. ||은 좌측이 어떤 거짓 같은 값이든 폴백하므로, 0 || 10은 10이고 "" || "n/a"는 "n/a"이며, 0과 ""이 유지하고 싶은 유효한 입력이었더라도 그렇습니다. ??는 좌측이 null 또는 undefined일 때만 폴백하며, 0과 ""을 실제 값으로 취급합니다.

const count = 0;
console.log(count || 5); // 5, 하지만 0은 실제 값이었음
console.log(count ?? 5); // 0, ??는 null 또는 undefined만 대체

조건에 기반해서 두 값 중에 선택해야 할 때, 완전한 비교 더하기 삼항 연산자(condition ? whenTrue : whenFalse)는 한 줄 형태입니다. 예를 들어 age >= 18 ? "adult" : "minor"입니다. 이것은 미리보기입니다; 조건문 장이 이것과 if 문을 완전히 다룹니다.

Juno논리 연산자와 참 같은 값과 거짓 같은 값&&는 "둘 다", ||는 "어느 한쪽", !는 부울을 뒤집습니다. 그 위에 JavaScript는 일부 값을 거짓-같다고 취급합니다: false, 0, "", null, undefined, NaN은 거짓 같은 값들이고, 다른 모든 것은 참 같은 값입니다. 이것이 !name이 "이름이 주어지지 않았다"를 의미하게 합니다.

Juno논리 연산자와 참 같은 값과 거짓 같은 값&&는 양쪽 true 필요, ||은 하나 필요, !는 역전시킵니다. 모든 값도 참 같은 값 또는 거짓 같은 값이며, 거짓 같은 값의 집합은 암기할 정도로 작습니다: false, 0, "", null, undefined, NaN. "0"과 "false"는 문자열이므로 둘 다 참 같은 값임을 주시하세요.

Juno논리 연산자와 참 같은 값과 거짓 같은 값&&과 ||은 단락 평가를 하고 피연산자를 반환하지 부울을 반환하지 않으며, 이것이 name || "Guest"가 기본값처럼 작동하는 이유입니다. 그 기본값에는 모서리가 있습니다: ||은 모든 거짓 같은 값을 대체하므로 0과 ""이 입력인 경우 ??를 사용하세요. 6개의 거짓 같은 값이 전체 이야기이므로, 그 집합을 배우고 나머지는 떨어져 나옵니다.

여기서부터 연산자는 어디로 가는가

연산자들은 언어의 동사입니다: 저장하는 값을 받아서 결과와 결정으로 변환합니다. 산술은 새로운 숫자를 생성하고, 비교는 부울을 생성하며, 논리 연산자는 프로그램이 작동하는 예-또는-아니오 답변으로 이 부울들을 결합합니다.

이 부울들은 자체로는 많이 하지 않습니다. 다음 단계는 그들을 사용해서 코드를 조종하는 것입니다. 체크가 통과할 때 한 분기를 실행하고 실패할 때 다른 분기를 실행합니다. 이것이 조건문 장이 다루는 것입니다. 여기 값들 중 어느 것이든 모호함을 느낀다면, 데이터 타입 장이 숫자, 문자열, 부울의 완전한 처리입니다.