1. 산술 연산자
산술 연산자는 주로 수학 계산에 사용하는 연산자입니다.
| 연산자 | 설명 | 예시 |
|---|
+ | 덧셈 | a + b |
- | 뺄셈 | a - b |
* | 곱셈 | a * b |
/ | 나눗셈 | a / b |
% | 나머지 | a % b |
** | 거듭제곱 | a ** b |
let a = 10;
let b = 4;
console.log(`덧셈: ${a + b}`);
console.log(`뺄셈: ${a - b}`);
console.log(`곱셈: ${a * b}`);
console.log(`나눗셈: ${a / b}`);
console.log(`나머지: ${a % b}`);
console.log(`거듭제곱: ${a ** b}`);
1.1 문자열 연결 연산자
연산자는 숫자끼리 사용하면 덧셈을 수행하지만, 문자열과 함께 사용하면 문자열을 연결합니다. 피연산자가 하나라도 문자열이면 나머지 피연산자를 문자열로 변환한 후, 문자열 연결 연산을 수행합니다.
// 문자열 + 문자열
console.log('안녕' + '하세요'); // '안녕하세요'
// 문자열 + 숫자
console.log('나이: ' + 25); // '나이: 25'
// 여러 값 연결하기
const name = '라이캣';
const age = 5;
console.log('제 이름은 ' + name + '이고, 나이는 ' + age + '살입니다.');
피연산자의 타입에 따라서 산술 연산 또는 문자열 연결 연산이 결정되기 때문에 주의해야 합니다.
console.log(10 + 5 + '라이캣');
console.log('라이캣' + 10 + 5);
1.2 Math 객체를 이용한 산술 연산
자바스크립트의 Math 객체는 수학 연산을 위한 다양한 메소드를 제공합니다.
| 메소드 | 설명 |
|---|
Math.PI | 원주율 값 |
Math.round() | 반올림 |
Math.floor() | 내림 |
Math.ceil() | 올림 |
Math.pow() | 거듭제곱 |
Math.sqrt() | 제곱근 |
Math.abs() | 절댓값 |
Math.random() | 0과 1 사이의 난수 생성 |
Math.max() | 전달된 값 중 최대값 반환 |
Math.min() | 전달된 값 중 최소값 반환 |
// 원주율
console.log(`Math.PI : ${Math.PI}`); // 3.141592653589793 (원주율)
// 반올림
console.log(`Math.round(3.6): ${Math.round(3.6)}`);
console.log(`Math.round(3.2): ${Math.round(3.2)}`);
// 내림과 올림
console.log(`Math.floor(4.7): ${Math.floor(-4.5)}`);
console.log(`Math.ceil(4.7): ${Math.ceil(3.2)}`);
// 제곱과 제곱근
console.log(`Math.pow(2, 8): ${Math.pow(2, 8)}`);
console.log(`Math.sqrt(64): ${Math.sqrt(64)}`);
// 절댓값
console.log(`Math.abs(-5): ${Math.abs(-5)}`);
// 랜덤 숫자
console.log(`Math.random(): ${Math.random()}`); // 0과 1 사이의 난수, 0 <= Math.random() < 1
// 최대값과 최소값
console.log(`Math.max(10, 20, 30, 40): ${Math.max(10, 20, 30, 40)}`); // 최대값 40
console.log(`Math.min(10, 20, 30, 40): ${Math.min(10, 20, 30, 40)}`); // 최소값 10
2. 단항 산술 연산자
단항 연산자는 하나의 피연산자에 대해 연산을 수행합니다.
| 연산자 | 설명 | 예시 |
|---|
+ | 양수 유지, 숫자형으로 변환 | +4 |
- | 부호 변환 | -2 |
++ | 값을 1 증가 | ++num, num++ |
-- | 값을 1 감소 | --num, num-- |
let x = 5;
console.log(`+x: ${+x}`);
console.log(`-x: ${-x}`);
// 문자열에 + 연산자를 사용하면 숫자로 바꿔줍니다
console.log(`+'42': ${+'42'}`);
console.log(`+'hello': ${+'hello'}`);
단항 연산자와 숫자형 변환
단항 연산을 사용하여 문자열을 숫자로 변환할 수 있습니다. 하지만 이 방법은 권장하지 않습니다.
보다 안전하게 숫자형으로 변환하는 parseInt() 또는 parseFloat()를 사용하는 것을 권장합니다.
2.1 증감 연산자
증감 연산자는 변수의 값을 1씩 증가하거나 감소시키는 연산자를 의미합니다. 연산자를 변수의 어디에 붙이느냐에 따라서 처리 되는 순서가 달라집니다.
증감 연산자를 변수의 앞에 붙이는 것을 '전위' 라고 합니다. 전위 연산은 값을 먼저 증감 시키고 해당 값을 사용하여 연산을 처리합니다.
반대로 증감 연산자를 변수의 뒤에 붙이는 것을 '후위' 라고 하며, 값을 먼저 사용한 후에 값을 증감 시킵니다.
let num = 5;
console.log(num++); // 후위 증가
console.log(++num); // 전위 증가
console.log(num--); // 후위 감소
console.log(--num); // 전위 감소
3. 산술 할당 연산
할당 연산자는 변수에 값을 할당하는 연산자입니다. 산술 연산과 함께 사용하여 변수에 연산 결과를 할당할 수 있습니다.
| 연산자 | 설명 | 동일 표현 |
|---|
= | 값 할당 | a = b |
+= | 덧셈 후 할당 | a = a + b |
-= | 뺄셈 후 할당 | a = a - b |
*= | 곱셈 후 할당 | a = a * b |
/= | 나눗셈 후 할당 | a = a / b |
%= | 나머지 연산 후 할당 | a = a % b |
**= | 거듭제곱 후 할당 | a = a ** b |
let x = 10;
// 복합 할당 연산자
x += 5;
console.log(x); // 15
x -= 3;
console.log(x); // 12
x *= 2;
console.log(x); // 24
x /= 4;
console.log(x); // 6
x %= 4;
console.log(x); // 2
x **= 3;
console.log(x); // 8
4. 비교 연산
비교 연산자는 두 값을 비교하고 결과를 참(true) 또는 거짓(false) 의 논리 값으로 반환합니다.
4.1 동등 연산자(==)와 일치 연산자(===)
자바스크립트에서는 두 값을 비교할 때 동등연산자(==)와 일치연산자(===)를 사용합니다. 이 둘의 가장 큰 차이점은 타입 변환 여부입니다.
- 동등 연산자(==) : 비교 전에 타입이 다르다면 타입을 변환하여 비교를 수행합니다.
- 일치 연사자(===) : 타입 변환을 수행하지 않고 비교 하며, 값과 타입이 모두 같아야
true를 반환합니다.
console.log(`1 == '1': ${1 == '1'}`);
console.log(`1 === '1': ${1 === '1'}`);
console.log(`0 == false: ${0 == false}`);
console.log(`0 === false: ${0 === false}`);
console.log(`null == undefined: ${null == undefined}`);
console.log(`null === undefined: ${null === undefined}`);
console.log(`NaN == NaN: ${NaN == NaN}`); // false
NaN 비교
NaN은 자기 자신과도 같지 않습니다. 따라서 NaN == NaN은 false를 반환합니다.
4.2 부등 연산자(!=)와 불일치 연산자(!==)
부등 연산자(!=)와 불일치 연산자(!==)는 동등 연산자와 일치 연산자의 반대 개념입니다. 두 값이 같지 않으면 true를 반환합니다.
- 부등 연산자(!=) : 값이 다르면 true를 반환합니다. 비교 전에 타입 변환이 발생합니다.
- 불일치 연산자(!==) : 값이나 타입이 다르면 true를 반환합니다. 타입 변환이 발생하지 않습니다.
console.log(`1 != '1': ${1 != '1'}`);
console.log(`1 !== '1': ${1 !== '1'}`);
console.log(`0 != false: ${0 != false}`);
console.log(`0 !== false: ${0 !== false}`);
console.log(`null != undefined: ${null != undefined}`);
console.log(`null !== undefined: ${null !== undefined}`);
console.log(`NaN != NaN: ${NaN != NaN}`); // true
자동 타입 변환
자바스크립트는 동등 연산과 부등 연산은 자동으로 타입 변환을 수행합니다. 이는 개발자의 의도와 상관없이 코드에 따라 강제로 타입을 변경하는 것을 의미합니다.
- 숫자와 문자열: 문자열이 숫자로 변환
- 불리언: 불리언이 숫자로 변환된 후, 다른 형 변환 규칙 적용
- null과 undefined은 타입 변환 없이 같은 값으로 간주
- 객체타입: 객체는 원시타입으로 변환
4.3 크기 비교 연산자
크기 비교 연산자는 두 값의 크기를 비교하여 결과를 반환합니다.
console.log(`비교연산 : ${2 > 3}`);
console.log(`비교연산 : ${2 >= 3}`);
console.log(`비교연산 : ${2 < 3}`);
console.log(`비교연산 : ${2 <= 3}`);
문자열을 비교할 때는 유니코드 값을 기준으로 비교합니다.
유니코드
console.log(`'a' < 'b': ${'a' < 'b'}`);
console.log(`'2' < '10': ${'2' < '10'}`);
console.log(`'A' < 'a': ${'A' < 'a'}`);
console.log(`'apple' < 'banana': ${'apple' < 'banana'}`);
5. 논리 연산자
논리 연산자는 불리언 값에 대한 연산을 수행합니다. 논리 연산자는 논리값을 반환하며, 논리 연산자를 사용하여 논리적인 판단을 수행할 수 있습니다.
5.1 논리곱(&&) 연산자
논리곱 연산자는 그리고 라는 의미를 가지고 있습니다. 두 가지 조건이 모두 참일 때만 결과가 참이 됩니다.
console.log(`true && true: ${true && true}`);
console.log(`true && false: ${true && false}`);
console.log(`false && true: ${false && true}`);
console.log(`false && false: ${false && false}`);
예를 들어, 사용자가 로그인 상태이고, 관리자 권한을 가지고 있다면 특정 페이지에 접근할 수 있도록 설정할 수 있습니다.
let isLoggedIn = true;
let isAdmin = true;
if (isLoggedIn && isAdmin) {
console.log('관리자 페이지로 이동합니다.');
}
5.2. 논리합(||) 연산자
논리합 연산자는 또는 이라는 의미를 가지고 있습니다. 두 가지 조건 중 하나라도 참이면 결과가 참이 됩니다.
console.log(`true || true: ${true || true}`);
console.log(`true || false: ${true || false}`);
console.log(`false || true: ${false || true}`);
console.log(`false || false: ${false || false}`);
예를 들어, 사용자가 로그인 상태이거나 관리자 권한을 가지고 있다면 사용자 페이지에 접근할 수 있도록 설정할 수 있습니다.
let isLoggedIn = true;
let isAdmin = false;
if (isLoggedIn || isAdmin) {
console.log('사용자 페이지로 이동합니다.');
}
5.3 논리 부정(!) 연산자
논리 부정 연산자는 아니다 라는 의미를 가지고 있습니다. 참이면 거짓으로, 거짓이면 참으로 변환합니다.
console.log(`!true: ${!true}`);
console.log(`!false: ${!false}`);
console.log(`!0: ${!0}`);
console.log(`!'hello': ${!'hello'}`);
논리 부정 연산자 형 변환
논리 부정 연산자는 피연산자를 불리언 값으로 변환합니다. Falsy한 값은 true로, Truthy한 값은 false로 변환합니다.
논리 부정 연산자를 두 번 사용하여 불리언 값을 얻을 수 있습니다.
console.log(!!'hello');
console.log(!!0);
5.4 단축 평가
논리 연산자에는 단축 평가라는 특징이 있습니다. 첫 번째 피연산자만으로 결과를 알 수 있는 경우, 두 번째 피연산자를 평가하지 않고 결과를 반환합니다.
5.4.1 논리곱 단축평가
논리곱 연산자는 첫 번째 피연산자가 false인 경우 두 번째 피연산자를 평가하지 않습니다. 첫 번째 피연산자가 false이면 두 번째 피연산자가 어떤 값이 오더라도 결과는 false이기 때문입니다.
let result = false && true;
console.log(result);
단축 평가를 활용하여 특정 조건일 때만 코드를 실행하거나 객체의 속성을 안전하게 참조할 수 있습니다.
let isLoggedIn = true;
isLoggedIn && console.log('로그인 되었습니다.');
let user = {
name: '라이캣',
location: '제주'
}
console.log(`안녕하세요, ${user && user.name}님!`);
5.4.2 논리합 단축평가
논리합 연산자는 첫 번째 피연산자가 true인 경우 두 번째 피연산자를 평가하지 않습니다. 첫 번째 피연산자가 true이면 두 번째 피연산자가 어떤 값이 오더라도 결과는 true이기 때문입니다.
let result = true || false;
console.log(result);
논리합 연산자는 변수에 기본값을 설정할 때 유용하게 사용할 수 있습니다.
let name = '';
name = name || '사용자';
console.log(`안녕하세요, ${name}님!`);
5.4.3 논리 연산자의 결과
논리 연산자는 항상 불리언 값을 반환하지 않고, 마지막으로 평가된 피연산자의 값을 반환합니다.
console.log('licat' && 'wade');
console.log('licat' && '' && 'wade');
console.log('licat' || 'wade');
console.log(false || 0 || 'wade');