[JavaScript (3)] Javascript 연산자

[JavaScript (3)] Javascript 연산자

안녕하세요. 갓대희 입니다. 이번 포스팅은 [ 자바스크립트 연산자 ] 입니다. : ) 

 

0. 들어가기 앞서

 

Javascript의 연산자에는 Javs나 C의 연산자와는 개념이 조금 달라서 헷갈릴 수 있는 연산자들이 존재한다.
그렇기 때문에 쉬워보이지만 연산자에 대해 한번은 짚고 넘어가는 것이 좋을 것 같다.

 

1. + 연산자 (문자열 결합 연산자)

 - + 연산자는 더하기 연산, 문자열 연결 연산을 수행.
 - 모두 숫자일 경우에만 더하기 연산, 나머지는 문자열 연결 연산이 이루어 진다.

ex)

var addTest1 = 3+6;
var addTest2 = 1+'God';
var addTest3 = 'God'+'1';

console.log(addTest1); // 9
console.log(typeof(addTest1)); // number

console.log(addTest2); // 1God
console.log(typeof(addTest2)); // string

console.log(addTest3); // God1
console.log(typeof(addTest3)); // string

 

2. 비교 연산자(comparison operator)

 - 비교 연산자는 피연산자들을 비교하고 비교에 따른 논리 값(참(true), 거짓(false))을 반환 한다.
 - 모두 두 개의 피연산자를 가지는 이항 연산자
 - 피연산자들은 숫자, 문자열, 논리, 객체 등을 사용할 수 있다.

 

1) ==(동등)

 - 피연산자들이 같으면 참을 반환 한다.
2) ===(일치)

 - 피연산자들이 같고 피연산자들의 같은 형태인 경우 참을 반환 한다. (엄격한 비교 수행)
3) !=(부등)

 - 피연산자들이 다르면 참을 반환 한다.
4) !==(불일치)

 - 피연산자들이 다르거나 형태가 다른 경우 참을 반환 한다. (엄격한 비교 수행)

 

※ 다음 내용이 헷갈릴 수 있고, 코딩시 잘못된 결과를 가져올 수 있다.

1) ==(동등)연산자는 비교하려는 피연산자의 타입이 다를 경우 타입 변환을 거친 다음 비교.
2) ===(일치) 연산자는 피연산자의 타입이 다를 경우 타입을 변경하지 않고 비교.

ex1)

console.log(1 == '1'); // true
console.log(1 ==='1'); // false

ex2)

console.log(0 == ""); // true
console.log(0 === ""); // false

5) > (~보다 큰), >= (~보다 같거나 큰), < (~보다 작은), <= (~보다 작거나 같은) 은 기본적인 내용이니 생략 하도록 한다.

 

3. 대입 연산자(assignment operator)

 - 오른쪽 피연산자의 값을 왼쪽 피연산자에 할당 한다.
 - 할당 연산자와 다른 연산자(비트 연산자, 산술연산자 등)를 같이 사용하여 복합 대입 연산자도 사용할 수 있다.

ex)

var x = 4; // x=4
var y = 3; // y=3

 

※ 복합 대입연산자와 같이 사용할수 있는 연산자 들도 알아 보자.

▶ 1. 산술 연산자(arithmetic operator)

 - 사칙연산을 다루는 가장 기본적 연산자이다.
 - 모두 두 개의 피연산자를 가지는 이항 연산자이며, 결합방향은 왼쪽에서 오른쪽이다.

이름	복합 대입 연산자	산술 연산자
덧셈	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

▶ 2. 비트 연산자(bitwise operator)

 - 비트(bit) 단위로 논리 연산을 수행한다.
 - 비트 단위로 전체 비트를 왼쪽이나 오른쪽으로 이동시킬 때도 사용한다.

이름	설명	복합 대입 연산자	비트 연산자
AND	대응되는 비트가 모두 1이면 1을 반환함.	x &= y	x = x & y
OR	대응되는 비트 중에서 하나라도 1이면 1을 반환함.	x |= y	x = x | y
XOR	대응되는 비트가 서로 다르면 1을 반환함.	x ^= y	x = x ^ y
Zero fill left shift	지정한 수만큼 비트를 전부 왼쪽으로 이동시킴.	x <<= y	x = x << y
Signed right shift	부호를 유지하면서 지정한 수만큼 비트를 전부 오른쪽으로 이동시킴.	x >>= y	x = x >> y
Zero fill right shift	지정한 수만큼 비트를 전부 오른쪽으로 이동시키며, 새로운 비트는 전부 0이 됨.	x >>>= y	x = x >>> y
not	모든 비트를 반전시킨다.	없음	x = ~x

ex)

console.log(5 & 1) // 1 (0101 & 0101) = 0001
console.log(5 | 1) // 5 (0101 | 0101) = 0101
console.log(5 ^ 1) // 4 (0101 ^ 0001) = 0100
console.log(5 << 1) // 10 (0101 << 1) = 1010
console.log(5 >> 1) // 2 (0101 >> 1) = 0010
console.log(5 >>> 1) // 2 (0101 >>> 1) = 0010
console.log(~37) // -38 ~0010 0101 = 1101 1010

 

4. 증감 연산자(increment and decrement operator)

 - 피연산자를 1씩 증가 또는 감소 시키는 연산자.
 - 단항 연산자
 - 증감 연산자의 위치에 따라 연산의 순서 및 결과가 달라지니 주의 하자.

증감 연산자	설명
++x	먼저 피연산자의 값을 1 증가시킨 후에 해당 연산을 진행함.
x++	먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 증가시킴.
--x	먼저 피연산자의 값을 1 감소시킨 후에 해당 연산을 진행함.
x--	먼저 해당 연산을 수행하고 나서, 피연산자의 값을 1 감소시킴.

ex)

var x = 10;
var y = x-- + 2 + --x; 
console.log("x : " + x + ", y : " + y);

1) x--는 연산 이후 피연산자의 값을 1 감소 시킨다. 

   그렇기 때문에 먼저 x-- + 2의 연산을 하면 다음과 같다.
   x(10)에 2를 더한 후 x(10)에서 1을 갑소 시킨다. (중간결과. x-- + 2 의 수행 결과 중간합=12, x=9) 
2) --x는 연산 전에 먼저 피연산자의 값을 1 감소 시킨 후 연산을 진행 한다.

   그렇기 때문에 중갑합 + --x 의 수행 결과는

   x(9)에 1을 감소시킨 후(x:8) 중간합(12)에 그 x(8)값을 더한다.
3) 최종적으로 변수y에 해당 결과 값인 20의 대입 연산이 수행된다.

 

5. typeof 연산자

 - 기본문법 : typeof 피연산자, typeof(피연산자)
 - typeof 연산자는 피연산자의 타입을 문자열 형태로 리턴한다. 다만 null, 배열 => 'object', 함수는 => 'function' 을 리턴한다.

 

1) 숫자, NaN => 'number'
2) 문자열 => 'string'
3) 불린값 => 'boolean'
4) null => 'object'
5) undefined => 'undefined'
6) 객체(함수가 아닌) => 'object'
7) 배열 => 'object'
8) 함수 => 'function'
9) 존재하지 않는값 => 'undefined'

ex)

var numberTest = 10; // 1.숫자
var stringTest = "goddaehee"; // 2.문자열
var booleanTest = false; // 3.불린
var nullTest = null; // 4.null
var undefinedTest = undefined; // 5.undefined
var objectTest = []; // 6.객체
var arrayTest = {}; // 7.배열
var functionTest = new Function('x', 'y', 'return x + y'); //8.함수

console.log(typeof numberTest);
console.log(typeof stringTest);
console.log(typeof booleanTest);
console.log(typeof nullTest);
console.log(typeof undefinedTes);
console.log(typeof objectTest);
console.log(typeof arrayTest);
console.log(typeof functionTest);

 

6. instanceof 연산자

 - 기본문법 : 피연산자 instanceof 특정객체, 피연산자 instanceof(특정객체)
 - 피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를 boolean으로 리턴
 - 주의할 점은 객체 비교이기 때문에 primitive 타입은 false를 리턴 할 것이다.

ex)

var num = 1;
console.log(num instanceof Number); // false

var num = new Number(1);
console.log(num instanceof Number); // true

 

7. void 연산자

 - 어떤 타입의 값이 오던지 상관없이 언제나 undefined 값을 반환 한다.
 - void 연산자는 정의되지 않은 원시 타입의 값을 얻기 위해 void(0)과 같은 형태로 많이 쓰였고 많이 보았을 것이다.

ex)

<a href="javascript:void(0);">클릭시 별다른 동작 없음></a>
<a href="javascript:void(1);">클릭시 별다른 동작 없음2></a>

 

8. !! 연산자

 - 피연산자를 불린값으로 변환한다.
 - 주의점은 객체는 값이 비어있더라도 true로 변환한다.

ex)

console.log(!!0); //false
console.log(!!1); //true
console.log(!!'string'); // true
console.log(!!''); // false
console.log(!!true); // true
console.log(!!false); // false
console.log(!!null); // false
console.log(!!undefined); // false
console.log(!!{}); // true

 

9. 논리 연산자(logical operator)

 - 논리식을 판단 하여, 참(true)과 거짓(false)을 반환 한다.

 

 - &&(논리 AND 연산) 논리식이 모두 참이면 참을 반환함. 
 - ||(논리 OR 연산) 논리식 중에서 하나라도 참이면 참을 반환함.
 - !(논리 NOT 연산) 논리식의 결과가 참이면 거짓을, 거짓이면 참을 반환함.

x	y	x && y	x || y
true	true	true	true
true	false	false	true
false	true	false	true
false	false	false	false

ex)

var x = true, y = false;
console.log((x && y)); // false
console.log((x || y)); // true
console.log(!x);       // false