JavaScript 에센셜 | 위니북스

연산

1. 산술 할당 연산

산술 연산과 동시에 변수에 값을 할당하는 연산자입니다. 기존 변수의 값을 수정할 때 유용하게 사용됩니다.

x += 10; // x = x + 10; console.log(x); x -= 2; console.log(x); x *= 3; console.log(x); x /= 2; console.log(x); x %= 5; console.log(x); x **= 2; console.log(x);

2. 비교 연산

2.1. 동등과 부등

동등 연산은 ==로 표현하며, 두 피연산자의 값이 같은지 비교합니다. 부등 연산은 !=로 표현하며, 두 피연산자의 값이 다른지 비교합니다. 피연산자의 타입이 다른 경우에는 타입 변환을 수행한 후 비교합니다.

원시타입은 값을 비교하고, 객체 타입은 참조를 비교합니다.

let x = 20; let y = 10; console.log(x == 20); // true console.log(x == '20'); // true console.log(x != y); // true console.log(y != '10'); // false let obj1 = { a: 1, b: 2 }; let obj2 = obj1; let obj3 = { a: 1, b: 2 }; console.log(obj1 == obj2); // true console.log(obj1 == obj3); // false console.log([] == []); // false (배열은 참조를 비교)

2.1.1. 자동 형 변환(type coercion)

연산과 비교를 위하여 자바스크립트 엔진이 데이터 형을 자동으로 변환하는 것을 말합니다. 개발자의 의도와 상관없이 코드에 따라 강제로 형을 변환합니다.

원시값끼리 비교할 때는, 숫자로 변환한 후 비교합니다.

console.log(20 == '20'); console.log(1 == true); console.log(0 == false);

null과 undefined는 아래 경우를 제외하고 모두 false를 반환합니다.

console.log(null == null); // true console.log(undefined == null); // true console.log(undefined == undefined); // true

객체와 원시타입을 비교할 때는 객체를 원시타입에 맞춰 변환합니다.

console.log([1, 2] == '1,2'); // true console.log([] == 0); // true console.log({} == 0); // false

2.2. 일치와 불일치

일치 연산은 ===로 표현하며, 두 피연산자의 값과 타입이 일치하는지 비교합니다. 불일치 연산은 !==로 표현하며, 두 피연산자의 값과 타입이 일치하지 않는지 비교합니다. 타입 변환을 수행하지 않는 엄격한 비교를 수행합니다. 자동으로 타입이 변환하는 것을 방지하기 위하여 동등 연산자보다는 일치 연산자를 사용하는 것을 권장합니다.

let x = 20; let y = 10; console.log(x === 20); // true console.log(x === '20'); // false console.log(x !== y); // true console.log(y !== '10'); // true

3. 논리연산과 단축평가

3.1. 논리곱 단축평가

논리곱 연산자는 첫 번째 피연산자가 Falsy일 때 두 번째 피연산자를 평가하지 않습니다. 첫 번째 피연산자 값만으로 식 전체의 결과를 결정할 수 있기 때문에 최적화를 위해 두 번째 피연산자를 평가하지 않습니다. 이를 단축평가라고 합니다. 첫 번째 피연산자가 Truthy일 때만 두 번째 피연산자를 평가합니다.

단축 평가를 이용하여 특정 조건일 때만 코드를 실행하거나, 객체의 속성을 참조할 때 유용하게 사용할 수 있습니다.

console.log('licat' && 'wade'); // wade console.log('licat' && false && 'wade'); // false let isLoggedIn = true; isLoggedIn && console.log('Hello user!'); let user = { name: 'licat', location: 'jeju' }; console.log(user && user.name);

3.2. 논리합 단축평가

논리합 연산자 또한 단축 평가가 일어납니다. 논리합은 첫 번째 피연산자가 Truthy이면 식 전체가 Truthy이기 때문에 두 번째 피연산자를 평가하지 않습니다. 첫 번째 피연산자가 Falsy일 때만 두 번째 피연산자를 평가합니다.

논리합 연산자도 특정 조건일 때만 코드를 실행하거나, 변수에 기본값을 설정할 때 유용하게 사용할 수 있습니다.

console.log('licat' || 'wade'); // licat console.log(false || 0 || 'wade'); // wade let name = ''; name = name || '사용자'; console.log(`${name}님 환영합니다!`);

4. nullish 병합

nullish 병합 연산자는 ??로 표현하며, 두 피연산자 중 값이 할당된 피연산자를 반환합니다. 피연산자 중 null 또는 undefined가 아닌 값을 찾을 때 사용합니다.

console.log(null ?? 'hello'); console.log(undefined ?? null); console.log('' ?? undefined);

논리 연산자와 달리 Falsy한 값은 nullish 병합 연산자를 사용할 때도 유효한 값으로 인식합니다.

let name = ''; name = name ?? '사용자'; console.log(`${name}님! 안녕하세요.`);

Nullish coalescing operator - JavaScript | MDN

5. 옵셔널 체이닝

옵셔널 체이닝 연산자는 ?.로 표현하며, 체인 중간에 있는 프로퍼티가 null 또는 undefined인 경우에 오류가 발생하는 것을 방지합니다. 객체가 중첩되어 있는 경우에 유용하게 사용할 수 있습니다.

const user = { name: 'licat', company: 'weniv' } console.log(user.address); // undefined console.log(user.address.city); // Uncaught TypeError: Cannot read property 'city' of undefined

객체의 중첩된 프로퍼티를 참조할 때, 중간에 있는 프로퍼티가 존재하지 않아서 오류가 발생할 수 있습니다. 이런 오류를 방지하기 위해 단축 평가를 이용할 수 있습니다. 다음 코드에서는 user.address가 undefined로 falsy하기 때문에 평가를 종료하여 오류가 발생하지 않습니다.

const user = { name: 'licat', company: 'weniv' } console.log(user && user.address && user.address.city); // undefined

옵셔널 체이닝을 사용하면 코드를 보다 간결하게 작성할 수 있습니다. 프로퍼티 뿐만 아니라 메서드의 유효성을 확인한 후 실행할 수 있습니다. nullish 연산과 함께 사용하여 객체가 null이나 undefined일 때 오류를 발생하지 않고 기본값을 설정할 수 있습니다.

const user = { name: 'licat', company: 'weniv' } console.log(user?.address?.city ?? 'Jeju'); user?.address?.greeting?.();

6. 쉼표 연산자

쉼표 연산자는 ,로 표현하며, 여러 표현식을 연결할 때 사용합니다. 쉼표 연산자는 왼쪽 피연산자부터 오른쪽 피연산자까지 순차적으로 실행하며, 마지막 피연산자의 결과를 반환합니다.

let x = 10; let y = 20; let z = 30; let result = (x += 10, y += 20, z += 30); console.log(x, y, z); console.log(result);

7. 그룹 연산자

그룹 연산자는 ()로 표현하며, 연산자 우선순위를 변경할 때 사용합니다. 그룹 연산자를 사용하면 연산자 우선순위를 변경할 수 있습니다.

let x = 10; let y = 20; let z = 30; console.log(x + y * z); console.log((x + y) * z);

8. 연산자 우선순위

지금까지 배워본 연산자는 우선순위가 있습니다. 연산자 우선순위는 연산자가 표현식을 계산할 때 어떤 연산자를 먼저 계산할지 결정합니다. 연산자 우선순위를 알고 있으면 어떤 연산이 먼저 수행될지 예측할 수 있으며, 괄호를 사용하여 우선순위를 변경할 수 있습니다.

우선순위	연산자
1	그룹 연산자 `()`
2	접근 연산자 `.`, `[]` / 함수 호출 `func()` / new / 옵셔널 체이닝 `?.`
3	증감 연산자 `++`, `--`
4	부정 연산자 `!` / 단항 연산자 `+`, `-` / 타입 연산자 `typeof` / `delete`
5	산술 연산자 `**`
6	산술 연산자 `*`, `/`, `%`
7	산술 연산자 `+`, `-`
8	대소관계 연산자 `<`, `>`, `<=`, `>=` / `instanceof` / `in`
9	동등 연산자 `==`, `!=` / 일치 연산자 `===`, `!==`
10	논리 연산자 `&&`
11	논리 연산자 `\|\|` / nullish 병합`??`
12	삼항 조건 연산자 `? :`
13	할당 연산자 `=`, `+=`, `-=`, `=`, `/=`, `%=`, `*=`
14	쉼표 연산자 `,`