[javascript] 연산자(operator)

1)개요

연산자에는 크게 산술, 문자열, 증감, 비교, 대입, 상함, 논리 연산자 등이 있음

 

2)산술 연산자 (+,-,*,/%)

-,*,/의 경우 문자열로 표현된 숫자도 계산해준다. +는  안 되는데 아래 이유가 있음.

"3" * "2" == 6

 

3)문자열 연산자('+' 심화)

(1)+ 연산자는 숫자 외에 문자열과 다른 데이터도 연결해준다.

(2)문자열이 아닌 데이터의 경우 연결되는 과정에서 문자열 형태가 된다.

var string1 = 'hi' + 9; // 'hi9'
var string2 = 3 + 4 + 'wow'; // '7wow'

재밌는 사실은 string2의 경우 '7wow'가 된다. 3과 4 먼저 연산하기 때문에 7이 되었다가 문자열이 만나 문자열 형태가 되었다. 컴퓨터는 순서대로 연산한다.

//배열은 더하면 문자열 형태가 된다. 
let e = [1,2,3]+[4,5,6]
console.log(e) //"1,2,34,5,6"

//문자열 형태는 더할 수 있음
let c= '안녕'+'하세요'
console.log(c) //"안녕하세요"

(3)파이썬의 경우 문자열 및 리스트에 +외에도 * 연산자를 통해 반복이 가능했는데 JS는 그렇게 작동 안함.

//배열 곱하면 NaN.
let f = [1,2,3]*[4,5,6]
console.log(f) // NaN

//문자열 반복 없음
let g ='안녕'*3
console.log(g) // NaN

4)증감연산자

 

++, -- 등이 있으며 1를 더하거나 1를 뺀다. 다만 붙이는 위치에 따라 결과가 달라진다.

즉 i ++, ++ i 모두 i = i+1인 것은 동일하다. i++인 경우 i 로서 동작 후 +1을 한다. ++i의 경우 +1 먼저 한 후 동작한다. 

 

5)대입연산자 (= 및 +=,-=,/=,*=,%=  등)

let a; // 변수 a를 선언
a = 10; // a에 10를 대입 또는 할당한다.

함께 쓰면 let a = 10; // 변수 a를 선언하고 10을 할당함.

 

6)비교연산자(==,!=,>,<  등)

참고로 ==가 같다는 뜻이고 =는 대입 연산자이다. 그리고 해당 연산자의 경우 데이터 형태까지 고려하지 않음.

 

7)삼항연산자

삼항 연산자는 (조건 ? 참 : 거짓)으로 구성되어 있습니다. 이에 변수에 값을 조건부로 설정할 수 있음.

var ternary = i > 10 ? 15 : 6

여기서 i 가 10보다 크면 ternary 변수는 15가 되고, false면 6이 됩니다. 

 

8)논리연산자 [&&(and), ||(or), !(not)]

아래 코드에서 (소괄호)는 안 해도 무관한 것으로 보인다.  그리고 true와 false를 연산하는 게 아니라 그보다 더 넓은 범주로서 참인 값과 거짓인 값을 연산한다. 이 때 거짓인 값( '', 0, false, NaN, undefined, null, document.all) 외에는 참인 값이다.

var a = 10;
var b = 20;
(a < b) && (a * 2 == b); // true
(a > b) || (a * 2 <= 20); // true
!(a < b); // false

//괄호 제거해도 동일함.
console.log(a < b && a * 2 == b); // true

 

9)비교연산자(===)

JS의 경우 변수에 자료형을 나타내는 부분이 없음. 또한 '==' 비교 연산자의 경우 자료형 상관없이 값만 비교함.

이에 아래와 같은 문제가 발생함.  

0 == '' //true
0 == false //true
0 == [] //true

따라서 JS의 경우 === 연산이 있음. 값 뿐만 아니라 자료형까지 같아야 true가 된다.

0 === '' // false
0 === false // false
0 === [] // false

비슷하게 != 대신 !==를 쓸 수 있으며 사실상 ===와 !== 가 권장된다.

 

10)참고 URL

 

https://www.zerocho.com/category/JavaScript/post/572f55d773b6f3c5fdbf4426