산술 연산자

숫자 데이터간의 연산을 위한 연산자

1 + 2 		//더하기
1 - 2 		//빼기
1 / 2 		//나누기
1 * 2 		//곱하기
1 % 2 		//나눈 나머지

a = a + 3
a += 3 		//a = a + 3과 같음

증감 연산자

숫자 데이터의 증감을 나타내는 연산자

let a = 3
let b = 3

console.log(a++) 	//3
console.log(a) 		//4
console.log(++b) 	//4
  • a++ : a를 반환한 후 1을 더한 값을 a에 저장
  • ++b : b에 1을 더한 값을 바로 반환

부정 연산자

Boolean 데이터의 값을 역전시키는 연산자

!true           //false
!false          //true
!0              //true
!!0             //false
!undefined      //true
!null           //true
  • false, 0, null, undefined, NaN, 0n, 빈 문자 등은 falsy 데이터이므로 거짓 취급한다.

비교 연산자

두 개의 데이터를 비교하는 연산자

1 == '1'          //동등 true
1 != '1'          //부등 false
1 === '1'         //일치 false
1 !== '1'         //불일치 true
1 > 2             //큼 false
1 >= 2            //크거나 같음 false
1 < 2             //작음 true
1 <= 2            //작거나 같음 true

논리 연산자

참과 거짓에 따라 실행 여부를 결정하는 연산자

console.log(1 && 0)           	//0
console.log(true && false)    	//false
console.log(1 && 0 && 2)      	//0
console.log(1 && 2 && 3)      	//3

console.log(0 || 1)           	//1
console.log(true || false)    	//true
console.log(false || {} || 0) 	//{}
  • && : and 연산자. 왼쪽부터 차례대로 조사해 처음 만난 거짓 데이터를 반환. 거짓 데이터가 없다면 가장 마지막 데이터를 반환
  • || : or 연산자. 왼쪽부터 차례대로 조사해 처음 만난 참 데이터를 반환. 참 데이터가 없다면 가장 마지막 테이터를 반환

Nullish

null, undefined를 제외한 정의된 데이터들 중 가장 먼저 발견된 데이터를 반환하는 연산자

const a = 0

const a = 0

console.log(a || 1) 			//1
console.log(a ?? 1) 			//0
console.log(null ?? undefined) 	//undefined
console.log(null ?? 1 ?? 2) 	//1
console.log(false ?? 1 ?? 2) 	//false
  • ?? : 왼쪽부터 차례대로 조사해 처음 만난 정의된 데이터를 반환. 정의된 데이터가 없다면 가장 마지막 데이터를 반환

삼항 연산자

if 조건문 대신 ?와 :를 사용해 조건에 따라 실행하는 연산자

const a = 3

if (a < 2) {
  console.log('실행 1')
} else {
  console.log('실행 2')
}

console.log(a < 2 ? '실행 1' : '실행 2')
  • 조건문을 사용할 수 없는 React의 Template 영역에서 조건문을 사용해야할 때 삼항 연산자를 사용할 수 있다.

전개 연산자

배열 데이터와 객체 데이터를 전개해 안에 있는 요소들을 꺼내는 연산자

배열

const a = [1, 2, 3]
const b = [4, 5, 6]
const c = [...a, ...b]
const d = a.concat(b)

console.log(...a)     //1 2 3
console.log(...b)     //4 5 6
console.log(c)        //[1, 2, 3, 4, 5, 6]
console.log(d)        //[1, 2, 3, 4, 5, 6]

  • ... : 배열을 전개해 요소만 나열하는 연산자
  • a.concat(b) : a 배열과 b 배열을 병합하는 메소드

객체

const a = {x:1, y:2}
const b = {y:3, z:4}
const c = {...a, ...b}
const d = Object.assign({}, a, b)

console.log(c)        //{x: 1, y: 3, z: 4}
console.log(d)        //{x: 1, y: 3, z: 4}
  • 같은 key에 대한 다른 value가 있는 경우, 뒤에 있는 객체의 value값이 덮어 씌워진다.
  • Object.assign({}, a, b) : a 객체와 b객체를 병합하는 정적 메소드
profile
주니어 프론트엔드 개발자의 생존기

0개의 댓글