티스토리 뷰

Javascript

[javascript]연산자

이채야채 2022. 5. 27. 15:24

표현식과 연산자


값은 다양한 방법으로 만들수가있다.

이때 다양한 방법이 표현식

 

표현식에는 여러가지가있다.

아래와 같다

 

// 리터럴 표현식
10

// 식별자 표현식 -> 변수
sum

// 연산자 표현식
10 + 20

// 함수/메소드 호출 표현식
square()

 

표현식은 결국 값처럼 사용할 수 있다.

 

let myage = '31';

// 연산자 표현식 (워너비 트웬티..)
myage - 11;  // 식별자 표현식과 숫자 리터럴과 연산자의 조합

 


연산자


하나이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 연산 등을 수행해 => 하나의 값을 만듬

// 산술 연산자
5 * 4 // 20

// 문자열 연결 연산자
'My name is ' + 'Lee' // "My name is Lee"

// 할당 연산자
let color = 'red'; // "red"

// 비교 연산자
3 > 5 // false

// 논리 연산자
(5 > 3) && (2 < 4)  // true

// 타입 연산자
typeof 'Hi' // "string"

 

 

산술연산자

 

수.학.적 계산을 수행해 새로운 값을 만든다.

산술 연산을 할 수 없는 경우 NAN을 반환한다.

 

산술 연산자에는 두가지가있다.

  • 이항산술연산자
  • 단항산술연산자

이항산술연산자 같은경우에는 다들 많이 아는 기본 연산

 

이항 산술 연산자의미

+ 덧셈
- 뺄셈
* 곱셈
/ 나눗셈
% 나머지

 

단항 산술 연산자 같은경우는 알고리즘에서 많이 사용되며 for문등에서 사용되고 값을 증가시키는것

 

단항 산술 연산자의미

++ 증가
-- 감소
+ 어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.
- 양수를 음수로 음수를 양수로 반전한 값을 반환한다.

 

 

**여기서 잠시!

 

++가 앞에 있는 경우가 있고 ++가 뒤에있는 경우가 있다 어떤 차이인지 확실히 알고가자

 

let x = 5, result;

// 선대입 후증가 (Postfix increment operator)
result = x++;
console.log(result, x); // 5 6

// 선증가 후대입 (Prefix increment operator)
result = ++x;
console.log(result, x); // 7 7

// 선대입 후감소 (Postfix decrement operator)
result = x--;
console.log(result, x); // 7 6

// 선감소 후대입 (Prefix decrement operator)
result = --x;
console.log(result, x); // 5 5

 

위에 예시에서 알수 있듯이 대입이 언제인가?

이것이 중요하다 

 

그렇다면 아래의 값은?

 

let a = 3;
let b = a++;
let c = ++a;
console.log(a,b,c) // 이 때 값은?

 

답은 순서대로 

a=5, b=3, c=5 이다.

 

++가 뒤에 붙었다는 의미란?

 

후증가. 그렇기에 b=여전히 3이다. a는 어찌되엇든 계속 증가가 되니 5, c는 증가된 4에 선증가 후 할당이기에 값이 5다.

 

 

*for문은 보통 a++로 사용하여 이후에 돌아오는값에 1을 증가시켜준다.

 

문자열 연결 연산자

// 문자열 연결 연산자
'1' + '2'      // '12'
'1' + 2       // '12' => 얘는 문자 + 숫자 => 그치만 문자열이됨

// 산술 연산자
1 + 2          // 3
1 + true       // 2 (true → 1)
1 + false      // 1 (false → 0)
true + false    // 1 (true → 1 / false → 0)
1 + null       // 1 (null → 0)
1 + undefined // NaN (undefined → NaN)

예제를 보면 타입이 변함을 알 수 있다.

개발자에 의도와 상관없이 자바스크립트 엔진에 의해서 타입이 변해버리는 일이 발생한다.

그러니 이점을 주의해야한다.

 

null의 값이 0으로 계산된다는점과 undefined가 들어갈시 NAN이 나온다는점은 잘 기억해두자.

 


할당연산자


할당 연산자사례동일 표현

= x = y x = y
+= x += y x = x + y
-= x -= y x = x - y
*= x *= y x = x * y
/= x /= y x = x / y
%= x %= y x = x % y

비교연산자


 

== 동등 비교 x == y x와 y의 값이 같음
=== 일치 비교 x === y x와 y의 값과 타입이 같음
!= 부등 비교 x != y x와 y의 값이 다름
!== 불일치 비교 x !== y x와 y의 값과 타입이 다름

 

보통 == 과 ===의 차이를 많이 묻는데

=== 은 엄격한 비교를 의미한다. 타입까지 같은가 아닌가.

 

1 == '1' 이 성립되는 반면에 1 === '1'은 false로 나온다.

일치 비교 연산자에서 주의할 것은 NaN이다.

 

오! 이런신기한일이..NaN은 자신과 일치하지 않는 유일한 값이라고한다.

NaN === NaN 대신 isNaN(NaN)  을 사용해야된다고한다. 이렇게 하면 true가 나온다

5 != '5'가 false인 이유는 값이 다르지않다고 여기기에(타입검사를 하지않는다)

반면에 아래는 타입까지 검사해줘서 타입이 다르니 다르다 true가 된다.

 


대소관계 연산자


 

> x > y x가 y보다 크다 ✕
< x < y x가 y보다 작다 ✕
>= x >= y x가 y보다 같거나 크다 ✕
<= x <= y x가 y보다 같거나 크다 ✕

 


논리연산자


 

|| 논리합(OR)
&& 논리곱(AND)
! 부정(NOT)

논리 부정(!) 연산자는 언제나 불리언 값을 반환한다. 

 

// 암묵적 타입 변환
!0 // true

하지만 논리합(||) 연산자와 논리곱(&&) 연산자의 연산 결과는 불리언 값이 아닐 수도 있다. 

 

// 단축 평가
'Cat' && 'Dog' // “Dog”

 

 


typeof 연산자


typeof ''              // "string"
typeof 1               // "number"
typeof NaN             // "number"
typeof true            // "boolean"
typeof undefined       // "undefined"
typeof Symbol()        // "symbol"
typeof null            // "object"
typeof []              // "object"
typeof {}              // "object"
typeof new Date()      // "object"
typeof /test/gi        // "object"
typeof function () {}  // "function"

 

 

주의해야할점은

NaN이 number라는 점과 Null은 object로 나온다는점!

 

또 null은 타입비교를 사용하면안되고 일치연산자를 사용해야한다.

 

let foo = null;
console.log(typeof foo === null); // false
console.log(foo === null);        // true

'Javascript' 카테고리의 다른 글

Web Worker란??  (0) 2022.11.28
[javascript] 비동기프로그램  (0) 2022.06.01
promise 의 리턴값과 then  (1) 2022.05.20
[Javascript] 프로그래밍, 자바스크립트  (0) 2022.04.19
섹션2 HA2 까다로웠던 부분  (0) 2021.12.13
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
TAG more
«   2025/12   »
1 2 3 4 5 6
7 8 9 10 11 12 13
14 15 16 17 18 19 20
21 22 23 24 25 26 27
28 29 30 31
글 보관함