본문 바로가기
javascript&jquery/javascript

<JS> 자바스크립트 연산자

by 써-뇽 2024. 6. 24.

자바스크립트의 연산자(Operators)는 하나 이상의 피연산자를 대상으로 각종 연산을 수행하여 값을 발행하는 주체를 의미한다.
연산자의 종류는 산술, 대입, 논리, 비교 연산자 등이 존재한다. 

1. 산술연산자 : 피연산자를 대상으로 수학적 계산을 통해 새로운 값을 반환하는 연산자
1) 단항연산자 : 단일 피연산자를 산술 연산하여 값을 반환 ex) 증가와 감소
let num = 1;
num++; 
console.log(num); //2
num--;
console.log(num); //1

1-2) 연산자의 위치에 따른 값의 차이
let position = 1; 
console.log(position); //1

position = num++; //저장이 먼저 실행된 후 증가 또는 감소 실행
console.log(position,num); // 1, 2(position=1, num=2)
position = num--; 
console.log(position,num); // 2, 1(position=2, num=1)

position = ++num;; // 증가 또는 감소 후 저장 실행
console.log(position,num); // 2, 2(position=2, num=2)
position = --num;;
console.log(position,num); // 1, 1(position=1, num=1)

2) 이항연산자 : 둘 이상의 피연산자를 산술 연산하여 값을 반환
console.log(10 + 10); //20 ::더하기
console.log(10 - 10); //0 ::빼기
console.log(10 * 10); //100 ::곱하기
console.log (10 ** 3); //1000 ::거듭제곱 (10의 3제곱)
console.log(10 / 10); //1 ::나누기
console.log(10 % 10); //0 ::나머지
console.log(10 % 3); //1 ::나머지

2. 할당연산자 : 오른쪽의 피연산자의 반환결과를 왼쪽에 있는 피연산자에 할당(계산 후 값을 저장)
let number=10;
console.log(number); //10

number += 10;
console.log(number); //10+10=20

number -=10;
console.log(number); //20-10=10 

number *=10;
console.log(number); //10*10=100

number /=10;
console.log(number); //100/10=10

number %=10;
console.log(number); //10을 10으로 나눴을 때 나머지=0

3. 비교연산자 : 좌항과 우항을 비교하여 Boolean값으로 반환 
- 대략적인 비교(==, !=), 엄격한 비교(===,!== : type 또한 일)
1) 동등비교 : number 5의 비교
console.log( 5 == 5); // true
console.log( 5 === 5); // true
console.log( 5 != 5); // false
console.log( 5 !== 5); // false

1-2) 동등비교 : number 5와 string '5'의 비교
console.log( 5 == '5'); // true 
console.log( 5 === '5'); // false
console.log( 5 != '5'); // false
console.log( 5 !== '5'); // true

2) 대소비교
console.log(100>1); // true
console.log(100>=1); // true
console.log(100<1); // false
console.log(100<=1); // false

4. 삼항연산자 : if조건문과 같이 조건에 따른 참, 거짓의 결과 반환
let a = 100;
let b = 10;
console.log(a>b ? "참값" : "거짓값"); // 참값 :: a가 b보다 크므로 참값 반환
console.log(b>a ? "참값" : "거짓값"); // 거짓값 :: b가 a보다 크지않으므로 거짓값 반환

5. 논리연산자 : 논리합(AND)과 논리곱(OR) 을 이용하여 Boolean값 반환
1) &&조건(AND) : 모두 true여야 true를 반환
console.log(true&&true); // true
console.log(true&&false); // false
console.log(false&&true); // false
console.log(false&&false); // false

2) ||조건(OR) : 하나라도 true면 true를 반환
console.log(true||true); // true
console.log(true||false); // true
console.log(false||true); // true
console.log(false||false); // false

6. 단축평가 : 논리연산자 중 &&조건 또는 ||조건 사용 시 발생
1) &&조건
&& 사용 시 좌측이 true면 우측값 변환
&& 사용 시 좌측이 false면 좌측값 반환
console.log(true && '참값이므로이게반환됨'); // 참값이므로이게반환됨
console.log(false && '거짓값이므로이게반환되지않음'); // false

2) ||조건
|| 사용 시 좌측이 true면 좌측값 반환
|| 사용시 좌측이 false면 우측값 반환
console.log(true || '참값이므로이게반환되지않음'); // true
console.log(false || '거짓값이므로이게반환됨'); // 거짓값이므로이게반환됨

7. null연산자 : null또는 undefined  값일 때 활용되는 ??연산자
1) ??조건
?? 좌측이 undefined 또는 null 인 경우 우측값 반환

let name; //값을 설정안함
console.log(name); // undefined
console.log(name ?? '이름없음'); // 이름없음

 

> 참고자료

 

[Javascript] 연산자 총정리 | 연산자의 종류와 활용 예시

연산자는 하나 이상의 피연산자를 대상으로 각종 연산을 수행하여 값을 반환하는 주체를 의미합니다. 연산자의 종류는 기본적으로 사칙 연산을 제외하고도 대입, 할당, 비교 연산자 등이 존재

velog.io