[React] Javascript 기본 - 연산자

연산자는 변수에 어떤 연산을 하기 위해 사용되는 것을 의미한다. javascript의 다양한 연산자에 대해 알아보자.

대입 연산자

대입 연산자(=)는 변수에 값을 할당하는 역할을 한다.

let a = 1;
let b = 2;
let c = '1';
let d = '2';

산술 연산자

산술 연산자(+, -, /, *)는 변수끼리의 사칙연산, 즉, 계산을 하는데 사용된다.

console.log(a + b);  // 3
console.log(a - b);  // -1
console.log(a * b);  // 2
console.log(a / b);  // 0.5

연결 연산자

연결 연산자(+)는 문자열 두 개를 이어붙이는데 사용된다.

console.log(c + d);

복합 연산자

복합연산자(+=, -=, /=, *=)는 계산을 한 후 변수의 값에 바로 할당할 수 있도록 한다. 산술연산자와 대입연산자가 합쳐졌다고 생각하면 된다.
즉, a = a + 10 을 줄여 a += 10으로 작성할 수 있도록한다.

a += 10
console.log(a);

증감 연산자

증감 연산자(++, --)는 +나 - 두개를 변수 앞 또는 뒤에 붙여 해당 변수의 값이 1만큼 변할 수 있도록 한다. ++를 앞에 붙이면 연산이 먼저 실행되어 변수의 값이 하나 커지고 해당 라인이 실행되지만, 뒤에 붙이면 해당 라인이 먼저 실행되고 나중에 변수의 값이 하나 커진다. -의 경우도 동일하다.

a = 10;
a++;
console.log(a);   // 11
console.log(a--); // 11
console.log(a);   // 10

논리 연산자

논리연산자(!, &&, ||)는 논리식을 판단하여 true 또는 false를 반환한다.
!은 NOT을 의미하며, 뒤에 붙은 값의 반대 값을 반환한다. 즉, 뒤의 값이 true이면 false를, false이면 true를 반환한다.
&&는 AND를 의미하며 앞과 뒤의 식이 모두 true일 때만, true를 반환한다.
||는 OR를 의미하며, 앞과 뒤의 식이 모두 false일 때만, false를 반환한다.

console.log(!true); // false
console.log(true && true); // true
console.log(true || false); // true
console.log(!!undefined); // false

비교 연산자

비교연산자(==, ===)는 앞과 뒤의 식이 같은지 다른지 여부를 비교하는 연산자이다.
==는 값만 비교하고, ===는 값과 타입을 같이 비교하기 때문에 무언가를 비교하고자 할 때는, 특별한 상황이 아니라면===을 쓰는 것이 좋다.

let compareA = 1 == "1";
console.log(compareA); // true

let compareB = 1 === "1";
console.log(compareB); // false

let compareC = 1 <= 2;
console.log(compareC); // true

typeof 연산자

typeof는 변수의 타입을 리턴하는 연산자이다.

console.log(typeof a); // number

null 병합 연산자

null 병합 연산자(??)는, 왼쪽 피연산자의 값이 null이나 undefined일 경우, 오른쪽 피연산자를 반환한다. 그렇지 않을 경우 왼쪽 피연산자 값을 반환한다.

let k;
k = k ?? 10; 
console.log(k)