3.연산자

★ 증가와 감소 = > ++, --

number = 1

let result = number;

console.log(result);

result = number ++;

console.log(result, number);

result = number --;

console.log(result, number);

console.log(result, number)를 입력하고, 결과값을 출력하면 다음과 같이 나온다.

1

1 2

2 1

이는 number가 증가와 감소를 받기전에 result가 number의 값을 먼저 받아와서 저장을 했기 때문에 발생한 결과이다.

 

위 처럼, ++나 --가 뒤에 작성되면 다른 오퍼레이터가 먼저 실행이 된 다음에 ++ 또는 -- 오퍼레이터가 실행이 된다. 이 때문에 위치가 중요하다. 

number = 1

let result = number;

console.log(result);

result = ++ number;

console.log(result, number);

result = -- number;

console.log(result, number);

 

결과값은 다음과 같다.

1

2 2

1 1

 

허나, 현실적으로는 ++또는 --를 앞에두는 경우는 없다.

 

★숫자 타입이 아닌 타입에 +,-를 사용한다면?

let sample = '99';

console.log(+sample);

console.log(typeof +sample);

console.log(sample);

console.log(typeof sample);

결과값은 다음과 같다.

99

number

99

string

문자열로 입력한 변수를 +를 붙여 출력하면 number으로 결과값이 출력된다.

 

이를 적용해보면, true와 false의 값에대해 알 수 있다.

sample = true;

console.log(+sample);

console.log(typeof +sample);

sample = false;

console.log(+sample);

console.log(typeof +sample);

1

number

0

number

이처럼 true는 1 false는 0의 값을 가지는 것을 알 수있다.

 

★ 할당 연산자? 

계산을 한 다음에 값을 다시 저장을 한다.

Operator에 =을 추가해주면, 계산을 한 다음 그 값을 변수에 다시 저장을 한다. 

number = 100;

console.log(number);

number += 10;

console.log(number);

100

110

10이라는 숫자가 number에 더해지고 다시 변수 number에 저장이 되는것을 볼 수 있다.

 

★ 비교 연산자?

1) 값의 비교 - 사실상 쓰지 않음 (==, !=)

console.log(5 == 5);

console.log(5 == '5');

true

true

값만 똑같으면 되니, true라고 출력됨을 알 수 있다. 

 

2) 값과 타입의 비교 - 일반적으로 사용하는 비교연산자 (===, !==)

console.log(5 === 5);

console.log(5 === '5');

true

false

값 뿐만아니라 타입까지 비교하기 때문에 number와 string의 차이를 판별했음을 알 수 있다.

 

★ 대소관계 비교 연산자?

console.log(100 > 1);

console.log(100 < 1);

console.log(100 <= 1);

console.log(100 >= 1);

크거나 같다 또는 작거나 같다 부등호 위치 잘 기억해놓아야겠다.

 

★ 삼항 조건 연산자? - 물음표를 기준으로 조건을 넣게되고 조건이 참이면 왼쪽 거짓이면 오른쪽에 배치한다.

console.log(10 > 0 ? '10이 0보다 크다' : '10이 0보다 작다');

10이 0보다 크다

 

★ 논리 연산자?

&& 조건은 모두 true여야 true를 반환한다.

console.log(true && true);

console.log(true && false);

true

false

 

|| 조건은 하나만 true여도 true를 반환한다

console.log(true || true);

console.log(true || false);

true

true

 

★ 단축평가? (short circuit evaluation) - 암기해야함.

console.log(true || 'Lsiron');

console.log(false || 'Lsiron');

console.log(false && 'Lsiron');

console.log(true && 'Lsiron');

&&를 사용했을때 좌측이 true면 우측 값 반환한다.

&&를 사용했을때 좌측이 false면 좌측 값 반환한다.

||를 사용했을때 좌측이 true면 좌측 값 반환한다.

||를 사용했을때 좌측이 false면 우측 값 반환한다. 

true

Lsiron

false

Lsiron

console.log(true && true && 'Lsiron');

console.log(true && false && 'Lsiron');

첫번째의 경우 true의 우측값은 true && 'Lsiron' 이며, 이때 좌측이 true 이기 때문에 'Lsiron' 을반환한다

두번째의 경우 true의 우측값은 false && 'Lsiron' 이며, 이때 좌측이 false 이기 때문에 false를 반환한다.

Lsiron

false

 

★ 지수 연산자?

console.log(2 ** 2);

console.log(10 ** 3);

제곱을 의미한다.

4

1000

 

★ null 연산자?

let name;

name = name ?? 'Lsiron';

console.log(name);

혹은

let name;

name ??= 'Lsiron';

console.log(name);

undefined

Lsiron

let name의 변수에 값을 넣어주지 않았기 때문에 undefine를 출력하며,

??의 좌측값이 undefined 혹은 null 일땐 우측값을 반환하기 때문에 'Lsiron'을 반환한다.

let name;

console.log(name);

name = name ?? 'Lsiron';

console.log(name);

name = name ?? 'Siron';

console.log(name);

undefined

Lsiron

Lsiron

이땐 name 값에 먼저 Lsiron이 할당 된 상태이므로, 더이상 undefined 를 반환하지 않기 때문에 그대로 Lsiron을 반환한다.