JavaScript 기초부터 배우기 - 2

1. 연산자

연산자는 프로그래밍 언어에서 특정 연산을 하도록 하는 문자

다음으로 연산자의 종류에 대해 알아보자

1-1. 산술 연산자

산술 연산자는 사칙연산과 같은 작업을 하는 연산자

• + : 덧셈 연산자
• - : 뺄셈 연산자
• * : 곱셈 연산자
• / : 나눗셈 연산자
• % : 나머지 연산자
• ++ : 증가 연산자
• -- : 감소 연산자

// 순서에 따라 달라지는 값을 알아보자
let count = 1;

console.log(count++); // 1 더하기 직전의 값을 보여준다
console.log(count); // 2
console.log(++count); // 3 더한 다음의 값을 보여준다.

1-2. 대입 연산자

대입 연산자는 특정 값에 연산을 한 값을 바로 설정 할 때 사용 할 수 있는 연산자

let count = 1;

count += 3; // count = count + 3
count -= 3; // count = count - 3
count *= 3; // count = count * 3
count /= 3; // count = count / 3

console.log(count); // 1 출력된다

1-3. 논리 연산자

논리 연산자는, 불리언(Boolean) 타입 (true 혹은 false)를 위한 연산자

• ! : NOT

  NOT 연산자는 true는 false로, false는 true로 반환한다.

const isPerson = !true;
console.log(isPerson); // false

const isPerson = !false;
console.log(isPerson); // true

• && : AND

  AND 연산자는 양쪽의 값이 둘 다 true 일때만 결과물이 true를 반환한다.

const t = true && true;
console.log(t); // true

let f = false && false; 
console.log(f); // false
f = false && true; 
console.log(f); // false
f = true && false; 
console.log(f); // false

• || : OR

  OR 연산자는 양쪽의 값 중 하나라도 true 라면 결과물이 true를 반환한다.

let t = true || false; 
console.log(t); // true
t = false || true;
console.log(t); // true
t = true || true;
console.log(t); // true

let f = false || false;
console.log(f); // false

1-4. 연산 순서

사칙연산에서 순서가 있듯이, 논리 연산자도 순서가 있다.
NOT -> AND -> OR

const value = !((true && false) || (true && false) || !false);

다음과 같은 코드가 있다고 가정해보자

1. 가장 앞에 있는 괄호는 마지막에 처리를 하니 끝에 있는 NOT 처리

!((true && false) || (true && false) || true);

2. 그다음엔 AND 연산자 처리

!(false || false || true);

3. OR 연산자를 좌측에서 우측으로 처리

const value = !true; // false

즉 false 값을 가지게 된다.

1-5. 비교 연산자

두 값을 비교 할 때 사용하는 비교 연산자
두 값이 일치하는지 확인, 불린형(Boolean) 반환
즉 일치한다면 true, 일치하지 않는다면 false 반환

const a = 1;
const b = '1';
const equals = a == b;

console.log(equals); // true

• == 와 ===의 차이 점은 무엇일까?
  -> ==는 데이터 타입 검사는 하지 않는다는 점이다.

따라서 두 값이 일치하는지 비교 할 때에는 == 대신 ===을 지향하자.

1-6. Nullish 병합 연산자

??를 사용하여 여러 피연산자 중 그 값이 확정되어 있는 변수를 찾을 수 있다.

예시를 한 번 들어보자
a ?? b 라는 간단한 문장이 있을 때 결과를 알아보자

• a의 값이 null, undefined도 아니면 a를 값으로 가진다.
• 그 외의 상황은 b를 값으로 가진다.

?? 와 || 의 차이

• || - 첫 번째 truthy 값을 반환
• ?? - 첫 번째 정의된 값을 반환한다.

let height = 0;

console.log(height || 100); // 100
console.log(height ?? 100); // 0

• || - 0을 falsy한 값으로 취급하기에 첫 번째 truthy 한 값인 100을 반환
• ?? - 0과 100은 null, undefined가 아니기에 첫 번째 정의된 값인 0 반환

1-7. 다음 연산자들의 결과값을 알아보자

console.log(20+30); // 50
console.log('20'+'30'); // 2030
console.log("hello"+""+2023); // hello2023
console.log(6%2); // 0
console.log(7.5%2); // 1.5
console.log(5===5); // true
console.log(5==="5"); // false
console.log(5!=5.0); // false
console.log(5>=5); // true
console.log(5<=5.0); // true