JavaScript#3 연산자

[연산자] 

1. 산술연산자(arithmetic operator)

- 산술 연산자는 우리가 잘 알고있는 사칙연산을 다루는 기본적인 연산자이다. 
- 두 개의 피 연산자를 가지는 이항 연산자이며, 언제나 결합 방향은 왼쪽에서 오른쪽이다.

var x = 10, y=4;

console.log(x+y); // 14
console.log(x-y); // 6
console.log(x*y); // 10
console.log(x/y); // 2.5
console.log(x%y); // 2

* 참고할것

2. 대입연산자(assignment operator)

- 변수에 값을 대입할때 사용하는 이항 연산자이다.
- 결합 방향은 산술연산자와 반대로 오른쪽에서 왼쪽이다.

var x=10, y=10, z=10;

x = x - 5; // x = 5
y -= 5; // y = y-5와동일
z =- 5; // z = -5 와 같은 표현.

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

- 피연산자를 1씩 증감시킬때 사용하는 연산자로 피연산자가 하나뿐인 단항 연산자이다.
- 증감연산자는 연산자의 위치가 앞에 있는지 뒤에 잇는지에따라 값이 변하므로 연산자의 위치를 잘 보아야 한다.

var x = 10, y = 10;

console.log(++x -3); // x의 값을 1 증가 시킨 후 3을 산술연산자로 계산
console.log(x+""); // 11 
console.log(y++ -3); // 먼저 y에서 3을 뺸 후에 y 값을 1증가시킴
console.log(x);  // 11

4. 비교 연산자(comparison operator)

- 피연산자의 상대적인 크기를 판단하며, true 와 false를 반환한다.
- 이항연산자이며 왼쪽에서 오른쪽으로 결합방향이 진행된다.
- 피연산자가 둘 다 숫자면 숫자만 비교한다.
- 둘 다 문자면 첫번째 문자부터 알파벳 순서대로 비교한다.
* 숫자와 문자를 비교하게 되면 문자열의 유니코드값을 비교한다.
* 숫자와 문자열을 비교할때 문자열이 NaN이 되면 항상 false를 반환한다.

var x = 3, y = 5;
var a = "abc", b = "bcd";

console.log(x > y);  // y의 값이 x의 값보다 크므로 false
console.log(a <= b);    // 알파벳 순서상 'a'가 'b'보다 먼저 나오므로 'a'가 'b'보다 작음.
console.log(x < a);             // x의 값은 숫자이고 a의 값은 문자열이므로 비교할 수 없음.

- 동등 연산자(==, equal)와 일치 연산자(===,strict equal)는 비교하는 뜻은 같지만 기준이 조금 다르다.
* 동등연산자는 값만 서로 같으면 true를 반환하며 타입이 다르면 그 타입을 일치 시켜준다, 하지만 일치 연산자는 타입의 변환을 시켜주지 않고
값, 타입 둘다 같아야만 true를 반환한다.

var x = 3, y = '3', z = 3;

console.log(x == y);   // x와 y의 타입이 서로 다르므로 타입을 서로 같게 한 후 비교를 하므로 true
console.log(x === y);       // x와 y의 타입이 서로 다르므로 false
console.log(x === z);             // x와 z은 값과 타입이 모두 같으므로 true

5. 논리연산자(logical operator)

- 논리 연산자는 논리를 판단하여 true, false를 반환한다.
- &&와 || 연산자는 이항연산자이며 결합방향은 왼쪽에서 오른쪽이다.
- !연산자는 단항 연산자이며 위와 반대로 오른쪽에서 왼쪽으로 결합한다.

* && : AND 연산자
* || : OR  연산자
*  ! : NOT 연산자

** 중요 ** 

 

var x = true, y = false;

console.log(x && y);  // false (논리 AND 연산)
console.log(x || y);  // true  (논리 OR  연산)
console.log(!x);              // false (논리 NOT 연산)

6. 비트 연산자(bitwise operator)

- 논리 연산자와 비슷하지만 비트(bit)단위로 연산을 수행한다. 
- 비트 단위로 왼쪽이나 오른쪽으로 이동시킬때도 사용한다.

다음을 그림을 보면 AND 연산자를 확인할 수 있는데, 대응하는 두 비트가 모두 1일때만 1을 반환하며, 다른 경우에너는 0을 반환한다. 즉 논리 연산자와 비슷한 성질을 가진다.

다음은 OR 연산자의 동작인데, 두 비트 중 하나라도 1이면 1을 반환하고, 모두 0일때만 0을 반환한다. 위와 마찬가지로 논리 연산자와 비슷한 원리이다.

XOR 연산자(^)는 두 비트가 서로 다르면 1, 같으면 0을 반환한다.

NOT연산자(-)는 해당 비트가 1이면 0을 반환하고, 0이면 1을 반환한다

시프트연산자 x (<<,>>)방향 y 일때 x를 이진법으로 바꾼수를 방향으로 y만큼 이동하고 공백은 0으로 채워준다.

시프트 연산자의 예제는

var x = 15, y = 8, z = 15;

console.log(x << 1);  // 곱하기 2와 같으므로 15 * 2 = 30
console.log(y >> 1);  // 나누기 2와 같으므로 8 / 2 = 4

7. 기타연산자()

- 문자열 결합 연산자 : 자바스크립트에서 볼 수 있는 특이한 연산자로 자바스크립트 특성상 변수의 특정 정의를 알아서 맞춰준다는 것에서 다른 언어와 다른 점이라고 볼 수 있다.

var x = 3 + 4;                   // 피연산자가 둘 다 숫자이면 덧셈 연산을 수행함.
var y = "좋은 " + "하루 되세요!"   // 피연산자가 둘 다 문자열이면 문자열 결합 연산을 수행함.
var z = 12 + "월"                 // 피연산자가 하나라도 문자열이면 문자열 결합 연산을 수행함.

- 삼항 연산자(ternary operator)

* 자바에서도 있는 연산자로 조건문을 한줄로 쉽게 풀어서 사용 가능하다
* 문법은
 표현식 ? 반환값1 : 반환값2 
 쉽게 풀어서 if문과 비슷한 개념으로 표현식이 true일때는 반환값1을 반환하고, false이면 반환값 2를 반환한다.
 
 결국 우리가 알고있는 밑의 코드를

var x=3,y=5,result=0;
 if(x>y){
  result = x;
 }else{
  result = y;
 }
 console.log("둘 중에 더 큰 수는 " + result + "입니다.")

 
 
 밑의 코드로 변경이 가능하다.

 var x = 3, y = 5;
 var result = (x > y) ? x : y   
 console.log("둘 중에 더 큰 수는 " + result + "입니다.");

 
 
- 쉼표 연산자

* 쉼표 연산자를 for문에서 사용하면, 루프마다 증감문을 여러 변수로 동시겡 갱신할 수 있다.

for (var i = 0, j = 9; i <= j; i++, j--) {
   console.log("i의 값은 " + i + "이고, j의 값은 " + j + "입니다.");
}

 
  - delete 연산자
 
  * 피연산자인 객체, 객체의 프로퍼티(property) 또는 배열의 요소(element) 등을 삭제해준다.
  * 피연산자가 성공적으로 삭제되었을 경우에는 true를 반환하고, 삭제에 실패하였을 경우에는 false를 반환한다.
  * 단항 연산자이며 오른쪽에서 왼쪽으로 결합된다.
 
 

var arr = [1,2,3];
 
  delete arr[2];
  console.log(arr); // [1,2,] //배열에 빈 자리가 생긴 것으로 undefined 값으로 직접 설정된 것은 아니다. 결국 empty라는 빈 값이 출력된다.
  console.log(arr.length) // 빈자릭가 생긴 것뿐이므로 길이를 출력하면 3으로 나온다.

 
  - typeof 연산자
 
  * 단항연산자이며 피연산자의 타입을 반환한다.
 
  - instanceof 연산자
 
  * 피연산자인 객체가 특정 객체의 인스턴스인지 아닌지를 확인해준다.
 

var str = new String("이것은 문자열입니다.");

str instanceof Object;  // true
str instanceof String;  // true
str instanceof Array;   // false
str instanceof Number;  // false
str instanceof Boolean; // false

// 결국 str은 문자열이기 때문에 Object와 String을 true로 반환한다.
 
  - void 연산자
 
  * void 연산자는 피연산자로 어떤 타입의 값이 오던 상관없이 undefined의 값을 반환한다.
  * 단항 연산자이며 결합 방향은 오른쪽에서왼쪽이다.
 

<a href="javascript:void(0)">이 링크는 동작하지 않습니다.</a>
<a href="javascript:void(document.body.style.backgroundColor='yellow')">
    이 링크도 동작하지 않지만, HTML 문서의 배경색을 바꿔줍니다.
</a>

* 결국 void 연산자는 링크를 무요화 할떄 많이 사용한다.

 

 

TCP SCHOOL.com 참고

http://tcpschool.com/javascript/js_operator_arithmetic