연산자(operator)
- 값을 만드는 행동. (표현식의 동사느낌)
- 프로그래밍 언어에서 특정 연산을 할때 사용하는 문자.
- 연산자는 하나 이상의 피연산자가 있음.
- 피연산자는 매개변수(argument)라고도 함.
산술 연산자
+: 덧셈, 문자열 병합, 단항 플러스.
- 단항 플러스는 변수와 상수에만 사용 가능함.
- 숫자형 리터럴 앞에
+ 는 숫자형 리터럴의 일부로 해석. (연산자가 아님)
- 덧셈과 단항 플러스가 동시에 있을 때, 단항 플러스가 먼저 작동.
const a = '안녕';
const b = '하세요';
console.log(a + b);
console.log(3 + 5 + '8');
console.log('3' + 5 + 8);
const s = '5';
const y = 3 + +s;
-: 뺄셈, 단항 부정.
- 단항 부정은 변수와 상수에만 사용 가능함.
- 숫자형 리터럴 앞에
- 는 숫자형 리터럴의 일부로 해석. (연산자가 아님)
- 뺄셈과 단항 부정이 동시에 있을 때, 단항 부정이 먼저 작동.
const x = 5;
const y = 3 - -x;
*: 곱셈./: 나눗셈.%: 나머지(remainder).++: 전위/후위 증가.--: 전위/후위 감소.
let a = 1;
console.log(a++);
console.log(a);
console.log(++a);
대입 연산자
let a = 1;
a += 4;
a -= 3;
a *= 2;
a /= 4;
논리 연산자
- boolean 값을 처리하기 위한 연산자.
- 조건문에서 유용.
NOT
! 이용.true는 false로 false는 true로 바꿈.
const a = !false;
AND
&& 이용.- 양 옆의 boolean값이
true일 때만 true를 반환.
const a = true && true;
OR
|| 이용.- 양 옆의 boolean값 중 하나만
ture라면 ture를 반환.
const a = true || false;
const a = false || false;
우선순위
let VALUE = !(true && false || true && false || !false);
단축 평가 논리 계산법(Short-circuit evaluation)
- 논리 연산자에 boolean이 아닌 피연산자를 사용해서 동작에서 일어나는 부수 효과(side effect)를 이용.
! (NOT)은 boolean이 아닌 값을 반환할 수 없으므로 항상 boolean을 반환.
&& (AND 연산)
x && y 에서 x 가 Falsy 한 값이면, y 의 값을 평가할 필요 없이 false.
const doIt = true;
let x = 0;
const result = doIt && x++;
console.log(result);
console.log(x);
console.log(true && 'hello');
console.log(false && 'hello');
console.log('hi' && 'hello');
console.log(null && 'hello');
console.log(undefined && 'hello');
console.log('' && 'hello');
console.log(0 && 'hello');
console.log(1 && 'hello');
console.log(1 && 111);
- boolean이 아닌 피연산자에 대한 AND(&&) 진위표.
| x | y | x && y |
|---|
| Falsy | Falsy | x (Falsy) |
| Falsy | Truthy | x (Falsy) |
| Truthy | Falsy | y (Falsy) |
| Truthy | Truthy | y (Truthy) |
|| (OR 연산)
x || y 에서 x 가 Truthy 한 값이면, y 의 값을 평가할 필요 없이 true.
const skipIt = true;
let x = 0;
const result = skipIt || x++;
console.log(result);
console.log(x);
console.log(false || 'hello');
console.log('' || 'hello');
console.log(null || 'hello');
console.log(undefined || 'hello');
console.log(0 || 'hello');
console.log(1 || 'hello');
console.log(1 || 111);
- boolean이 아닌 피연산자에 대한 OR(||) 진위표.
| x | y | x || y |
|---|
| Falsy | Falsy | y (Falsy) |
| Falsy | Truthy | y (Truthy) |
| Truthy | Falsy | x (Truthy) |
| Truthy | Truthy | x (Truthy) |
비교 연산자
=== (strict equality), !== : 두 값이 일치함과 불일치.== (loose equality), != : 두 값이 동등함과 동등하지 않음. (권장안함)< , > , >= , <=: 두 값의 대소관계. (관계 연산자라고도 함)
const a = 1;
const b = 1;
const equals = a === b;
console.log(equals);
const a = 1;
const b = '1';
const equals = a == b;
console.log(equals);
조건 연산자(3항 연산자)
- JS의 유일한 3항 연산자로 피연산자를 세개 받음. (다른 연산자는 모두 두개 이하)
? (물음표)와 : (콜론)을 이용.condition ? true : falseif ...else 문과 동등한 표현식.- 3항 연산자는 표현식이므로 다른 표현식과 결합하여 매우 유용하게 사용 가능.
const arr = [];
let text = '';
if (arr.length === 0) {
text = '배열이 비어있습니다.';
} else {
text = '배열이 비어있지 않습니다.';
}
console.log(text);
const arr = [];
let text = '';
arr.length === 0
? (text = '배열이 비어있습니다.')
: (text = '배열이 비어있지 않습니다.');
console.log(text);
- 중첩 가능.
- 하지만 3항 연산자의 중첩은 보기에 좋지 않고, 헷갈려 지양함.
let num = 7;
if (num >= 10) {
console.log('10 이상입니다.');
} else if (num >= 5) {
console.log('5이상입니다.');
} else {
console.log('0이상입니다.');
}
let num = 7;
num >= 10
? console.log('10 이상입니다.')
: num >= 5
? console.log('5이상입니다.')
: console.log('0이상입니다.');
확산 연산자(spread operator)
객체
... 으로 표시.- 기존 객체의 값을 복사하고, 새로운 값을 추가할 때.
- 객체는 복사될 때 참조형 타입으로 같은 객체를 가르킴.
const slime = {
name: '슬라임',
};
const cuteSlime = slime;
cuteSlime.attribute = 'cute';
const purpleCuteSlime = cuteSlime;
cuteSlime.color = 'purple';
console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);
const slime = {
name: '슬라임',
};
const cuteSlime = {
...slime,
attribute: 'cute',
};
const purpleCuteSlime = {
...cuteSlime,
color: 'purple',
};
const redCuteSlime = {
...purpleCuteSlime,
color: 'red',
};
console.log(slime);
console.log(cuteSlime);
console.log(purpleCuteSlime);
console.log(redCuteSlime);
배열
const animals = ['개', '고양이', '참새'];
const anotherAnimals = [...animals, '비둘기'];
console.log(animals);
console.log(anotherAnimals);
const numbers = [1, 2, 3, 4, 5];
const spreadNumbers = [...numbers, 10000, ...numbers];
console.log(spreadNumbers);
함수의 인자(파라미터에 들어가는 리터럴)
function subtract(x, y) {
return x - y;
}
const numbers = [1, 2];
const result = subtract(...numbers);
console.log(result);
나머지 매개변수(rest)
- 확산 연산자를 이용하여 나머지 매개변수(rest) 문법을 이용.
- 객체, 배열, 함수의 파라미터에서 사용.
- 맨 마지막 순서에서만 이용 가능. (맨 앞 또는 중간은 불가)
객체
const purpleCuteSlime = {
name: '슬라임',
attribute: 'cute',
color: 'purple',
};
const { color, ...rest } = purpleCuteSlime;
console.log(color);
console.log(rest);
const purpleCuteSlime = {
name: '슬라임',
attribute: 'cute',
color: 'purple',
};
const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime);
const { attribute, ...slime } = cuteSlime;
console.log(slime);
const purpleCuteSlime = {
name: '슬라임',
attribute: 'cute',
color: 'purple',
};
const { color, ...cuteSlime } = purpleCuteSlime;
console.log(color);
console.log(cuteSlime);
배열
const numbers = [0, 1, 2, 3, 4, 5, 6];
const [one, ...rest] = numbers;
console.log(one);
console.log(rest);
함수의 파라미터(매개변수)
- 함수의 파라미터로 사용하면, 해당 부분은 배열(array)로 묶임.
function sum(...rest) {
return rest.reduce((acc, current) => acc + current, 0);
}
console.log(sum(1, 2, 3, 4, 5));
