[2주차] JavaScript의 연산자

1월 20일 자 학습 내용 정리입니다.

 

 

✅ 산술 연산자

산술 연산자는 두 개 이상의 값을 피연산자로 받아 하나의 값을 반환한다.

표준 산술 연산자는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)가 있으며 JS는 표준 산술 연산자 외에도 나머지(%), 거듭제곱(**) 등을 제공한다.

 

숫자에 적용

var a = 10, b = 2;

console.log(a+b);
console.log(a-b);
console.log(a*b);
console.log(a/b);
console.log(a%b);
console.log(a**b);

// output
// 12
// 8
// 20
// 5
// 0
// 100

 

기본적으로 숫자에 산술 연산자를 사용한 경우 해당 연산자로 계산한 값이 반환된다.

사칙연산(+, -, *, /)은 각각 더하기, 빼기, 곱하기, 나누기한 값을 반환한다.

나머지 연산자인 %는 두 피연산자를 나눴을 때의 나머지를, 거듭제곱 연산자인 **은 base^exponent, 즉 base를 exponent로 거듭제곱한 결과를 반환한다.

 

문자에 적용

var a = "10", b = "2";

console.log(a+b);
console.log(a-b);
console.log(a*b);
console.log(a/b);
console.log(a%b);
console.log(a**b);

// output
// 102
// 8
// 20
// 5
// 0
// 100

 

숫자가 아닌 문자열에도 산술 연산자를 적용할 수 있다.

대신 숫자에 산술 연산자를 적용했을 경우와는 약간 다른 값을 얻을 수 있다.

문자열의 연산에서 더하기 연산자 + 를 사용했을 경우 해당 문자열을 이어 붙인 새로운 문자열이 반환된다.

더하기 연산자 + 이외의 나머지 연산자들에 대해서는 숫자에 산술 연산자를 적용한 경우와 결괏값이 같다.

 

 

✅ 증감 연산자

증감 연산자는 ++과 --가 존재한다.

++은 해당 값을 1씩 증가시키며 해당 값에 +1을 하는 것과 같다.

--는 해당 값을 1씩 감소시키며 해당 값에 -1을 하는 것과 같다.

 

증감 연산자는 위치가 중요하다.

변수의 앞에 붙은 것과 변수의 뒤에 붙은 것의 결과가 서로 다르기 때문이다.

 

var num = 10;
console.log(++num);
console.log(--num);

// output
// 11
// 10

 

변수의 앞에 증감 연산자가 붙은 경우에는 증감 연산자가 바로 변수에 적용된다.

++ 연산자가 붙은 경우에는 +1을, -- 연산자가 붙은 경우에는 -1을 변수에 적용한 뒤 그 결괏값을 반환한다.

 

var num = 10;
console.log(num++);
console.log(num--);

// output
// 10
// 11

 

변수의 뒤에 증감 연산자가 붙은 경우에는 증감 연산자가 바로 변수에 적용되지 않는다.

++ 연산자가 붙은 경우에는 +1을, -- 연산자가 붙은 경우에는 -1을 적용하는 것은 같으나 이는 num의 값을 출력하고 난 이후에 적용된다.

 

위의 코드가 실행되는 맥락은 다음과 같다.

 

1. 변수 num이 10이라는 값으로 초기화됨
2. console.log에 의해 num의 값인 10이 출력됨
3. ++ 연산자에 의해 num의 값이 +1 되어 변수 num에는 11이라는 값이 저장됨
4. console.log에 의해 num의 값인 11이 출력됨
5. -- 연산자에 의해 num의 값이 -1 되어 변수 num에는 10이라는 값이 저장됨

 

 

✅ 비교 연산자

비교 연산자는 피연산자를 서로 비교하고 비교 결과에 따라 true 혹은 false의 boolean 값을 반환한다.

피연산자로는 Number, String, Boolean, Object를 사용할 수 있다.

두 피연산자가 서로 다른 타입일 경우 JavaScript는 이를 적절한 타입으로 변환하는 과정을 거치는데 대부분 Number 타입으로 변환해 비교한다.

이때 비교 연산자가 === 이거나 !== 일 경우에는 타입을 변환하는 과정을 거치지 않고 데이터의 타입까지 비교한다.

 

비교 연산자에는 ==, ===, !==, >, >=, <, <= 가 있다.

 

var a = 10, b = "10";

console.log(a==b);
console.log(a===b);
console.log(a!==b);

// output
// true
// false
// true

 

동등 연산자(==)는 피연산자가 서로 같으면 true를 반환한다.

위의 코드에서 a는 10이라는 Number형 값을 가지고 b는 "10"이라는 String형 값을 가진다.

이때 a와 b의 데이터 타입이 다르기 때문에 JavaScript는 b를 10이라는 Number형 값으로 변환하고 10 == 10을 비교하는 것이 되어 true라는 결괏값을 얻는다.

즉, 동등 연산자(==)는 값만을 비교하고 데이터 타입은 비교하지 않는다.

 

일치 연산자(===)는 두 피연산자의 값과 데이터 타입이 모두 같으면 true를 반환한다.

위의 코드에서 a와 b는 각각 Number형과 String형의 변수이다.

따라서 a와 b의 데이터 타입이 같지 않기 때문에 a === b의 결괏값으로 false가 반환된다.

 

불일치 연산자(!==)는 두 피연산자의 값 또는 타입이 서로 다를 경우 true를 반환한다.

위의 코드에서 a와 b의 타입이 다르기 때문에 a !== b의 결괏값으로 true가 반환된다.

 

나머지 비교 연산자들은 수학적 개념과 같이 값이 큰지 작은지 비교하여 알맞은 결괏값을 반환한다.

 

• > : 왼쪽 피연산자가 오른쪽 피연산자보다 크면 true 반환
• >= : 왼쪽 피연산자가 오른쪽 피연산자보다 크거나 같으면 true 반환
• < : 왼쪽 피연산자가 오른쪽 피연산자보다 작으면 true 반환
• <= : 왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 true 반환

 

 

✅ 논리 연산자

논리 연산자는 보통 Boolean 타입의 값과 함께 사용해 Boolean 값을 반환한다.

그러나 피연산자 중 Boolean 타입의 값이 아닌 것이 있다면 반환값이 Boolean 타입의 값이 아닐 수도 있다.

 

논리 연산자는 &&, ||, ! 가 있다.

 

var a1 =  true && true;     // t && t returns true
var a2 =  true && false;    // t && f returns false
var a3 = false && true;     // f && t returns false
var a4 = false && (3 == 4); // f && f returns false
var a5 = "Cat" && "Dog";    // t && t returns Dog
var a6 = false && "Cat";    // f && t returns false
var a7 = "Cat" && false;    // t && f returns false

 

AND 연산자(&&)는 앞과 뒤의 명제가 모두 참일 경우에만 true를 반환하고 하나라도 참이 아닌 경우에는 false를 반환한다.

위의 예제에서 a1 ~ a4의 예제가 그러하다.

두 가지 명제가 모두 참인 a1을 제외하고 a2, a3, a4의 경우 하나 이상의 거짓 명제로 인해 false의 결괏값을 얻는 것을 볼 수 있다.

 

a5 ~ a7의 경우 Boolean 타입이 아닌 값에 AND 연산자(&&)를 적용하고 있다.

이러한 때에는 첫 번째 피연산자의 값이 무엇인지에 따라 반환하는 값이 달라진다.

첫 번째 피연산자의 값을 false로 변환할 수 있으면 첫 번째 피연산자의 값을 반환하고 이외의 경우에는 두 번째 피연산자의 값을 반환한다.

Boolean 타입이 아닌 값을 false로 변환할 수 있는 경우는 해당 값의 평가 결과가 null, 0, NaN, 빈 문자열(""), undefined인 경우이다.

 

a5는 첫 번째 피연산자가 "Cat", 두 번째 피연산자가 "Dog"로 둘 다 true로 변환할 수 있다. 따라서 첫 번째 피연산자의 값이 false로 변환될 수 없어 두 번째 피연산자인 "Dog"가 반환된다.

a6은 두 번째 피연산자가 무슨 값을 가지고 있는지에 관계없이 첫 번째 피연산자의 값이 false이기 때문에 바로 false가 반환된다.

 

AND 연산자(&&)는 첫 번째 피연산자의 값이 false이거나 false로 변환될 경우 무조건 false로 평가된다.

또한 이때 두 번째 피연산자의 값은 평가도 하지 않는다.

 

 

var o1 =  true || true;     // t || t returns true
var o2 = false || true;     // f || t returns true
var o3 =  true || false;    // t || f returns true
var o4 = false || (3 == 4); // f || f returns false
var o5 = "Cat" || "Dog";    // t || t returns Cat
var o6 = false || "Cat";    // f || t returns Cat
var o7 = "Cat" || false;    // t || f returns Cat

 

OR 연산자(||)는 앞 뒤 명제 중 하나만 참이어도 true를 반환하고 앞 뒤 명제가 모두 거짓일 때만 false를 반환한다.

위의 코드 중 o1 ~ o4를 살펴보면 하나라도 true인 값이 있을 경우에는 true를 반환하는 것을 볼 수 있다.

 

o5 ~ o7의 경우 Boolean 타입이 아닌 값에 OR 연산자(||)를 적용하고 있다.

이때에도 && 연산자의 경우와 같이 첫 번째 피연산자의 값이 무엇인지에 따라 반환하는 값이 달라진다.

첫 번째 피연산자의 값을 true로 변환할 수 있으면 첫 번째 피연산자의 값을 반환하고 이외의 경우에는 두 번째 피연산자의 값을 반환한다.

 

o5는 첫 번째 피연산자의 값인 "Cat"을 true로 변환할 수 있으므로 두 번째 피연산자가 무슨 값을 가지고 있는지에 관계없이 첫 번째 피연산자의 값 "Cat"이 반환된다.

o6은 앞의 명제가 false이기 때문에 두 번째 피연산자를 살펴본다.

이때 두 번째 피연산자의 값인 "Cat"이 true로 변환되어 "Cat"이 결괏값으로 반환된다.

 

OR 연산자(||)는 첫 번째 피연산자가 true이거나 true로 변환될 경우 무조건 true로 평가된다.

또한 이때 두 번째 피연산자의 값은 평가도 하지 않는다.

 

 

var n1 = !true;  // !t returns false
var n2 = !false; // !f returns true
var n3 = !"Cat"; // !t returns false

 

NOT 연산자(!)는 하나의 피연산자를 Boolean 값으로 변환시킨 후 해당하는 값이 true이면 false를, false이면 true를 반환한다.

따라서 n1의 경우 false, n2의 경우 true가 반환된다.

n3은 "Cat"이라는 값이 true로 변환될 수 있기 때문에 false가 반환된다.

 

 

🔍 참조

연산자 https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Expressions_and_Operators