자바스크립트 연산자

연산자는 하나 이상의 값을 연산을 수행해 새로운 하나의 값을 만드는 키워드를 말한다.

 

⭐ 산술 연산자

수학적 계산을 수행해 새로운 숫자 값을 만드는 연산자들을 말한다. 숫자 연산이 불가능할 경우 NaN을 리턴한다.

🧷 이항 산술 연산자

두 개 이상의 피연산자를 계산해 숫자 값을 만드는 것을 말한다. 기존의 수는 변하지 않고 새로운 값이 탄생할 뿐이다. 아래와 같은 종류가 있다.

3 + 2; // 더하기 5
3 - 2; // 빼기 1
3 * 2; // 곱하기 6
3 / 2; // 나누기 1.5
3 % 2; // 나머지 1
3 ** 2; // 3의 2제곱

🧷 단항 산술 연산자

증가(++), 감소(--)는 피연산자 앞에 위치하면 연산 후 참조가 되고 뒤에 위치하면 참조 후 연산이 된다. 그 후에 변수 값에도 변동된 값이 암묵적인 할당이 이루어진다.

var a = 1;

console.log(a++); // 1
console.log(a); // 2
console.log(a--); // 2
console.log(a); // 1

console.log(++a); // 2
console.log(a); // 2
console.log(--a); // 1
console.log(a); // 1

+는 단항으로 쓰일 때 피연산자가 숫자가 아닐 경우 숫자형으로 형변환이 되고, -는 단항으로 쓰일 경우 피연산자가 숫자가 아닐 경우 숫자형으로 형변환 한 후 숫자에 -1을 곱한 값을 반환한다. 

var str = '1';
var bool = true;
console.log(+str); // 1
console.log(+bool); // 1
console.log(-str); // -1
console.log(-bool); // -1

🧷 문자열 연결 연산자

+는 피연산자가 둘 다 숫자일 경우 덧셈을 하지만 둘 중 하나 이상이 문자열일 경우에는 문자열 연결 연산자가 된다. 예를 들어 문자열 + 숫자일 경우 자바스크립트 엔진에서 숫자를 문자열로 형변환한 후 문자열로 연결한 값을 반환한다. 

console.log('abc' + 123);     // 'abc123'
console.log('abc' + false);   // 'abcfalse'
console.log('abc' + [1,2,3]); // 'abc1,2,3'

 

⭐ 할당 연산자

할당 연산자는 = 와 함께 사용해 계산한 값을 좌변의 변수의 값을 우변의 값과 연산한 후 좌변의 변수에 할당까지 해주는 연산자이다. 산술 연산자는 물론 문자열 연결 연산자로도 사용할 수 있다.

var a = 3;
a += 2;     // 5
a -= 2;     // 3
a *= 2;     // 6
a /= 2;     // 3
a %= 2;     // 1
a += 'abc'; // '1abc'

 

⭐ 비교 연산자

비교 연산자는 좌변과 우변의 값을 비교해 참/거짓으로 반환하는 연산자이다.

🧷 동등 비교 연산자

좌변과 우변이 같은 값인지를 비교한다.

==, === 은 일치 여부, !=, !==은 불일치 여부를 평가한다.

==, !=은 암묵적인 형변환 후 값을 비교하고, ===, !==은 형변환 없이 값이 완전이 같은 값인지를 반환한다.

10 == '10'; // 암묵적 형변환 후 true
10 === '10'; // 형변환이 없으므로 타입이 달라 false

NaN의 경우 자기 자신과도 일치하지 않으므로 Number.isNaN 메소드를 통해 확인해야 한다.

🧷 대소 비교 연산자

• a > b : a 가 b 보다 크다
• a >= b : a가 b 보다 크거나 같다
• a < b : a가 b 보다 작다
• a <= b : a가 b 보다 작거나 같다

 

⭐ 삼항 연산자

if ~ else 문을 통해 조건식을 판별한 후 return 값을 통해 얻어야 하는 값을 간단하게 표현할 수 있다.

조건식 ? 조건식이 true일 경우 반환할 값: false일 경우 반환할 값

var score = 100;
score === 100 ? '만점입니다' : '더 노력하세요'; // '만점입니다'

 

⭐ 논리 연산자

🧷 이항 논리 연산자

논리곱(&&) 연산자는 AND 연산이며 좌항과 우항의 논리 값이 둘 다 true일 경우 true, 하나라도 false일 경우 false를 반환한다. 불리언 타입 뿐만 아니라 다른 데이터 타입에도 쓰일 수 있으며 좌항의 값이 true일 경우 우항의 값을, false일 경우 false를 반환한다.

// 논리곱(&&)
true && true;      // true
true && false;     // false
false && false;    // false
true && 'abc';     // 'abc'
false && 'abc';    // false

논리합(||) 연산자는 OR 연산이며 좌항과 우항의 논리 값 중 하나라도 true가 있을 경우 true를 반환하고 둘 다 false라면 false를 반환한다. 불리언 타입 외에 쓰일 경우 좌항의 값이 true일 경우에는 true, false일 경우 우항의 값을 반환한다.

// 논리합(||) 연산자
true || true;     // true
true || false;    // true
false || false;   // false
true || 'abc';    // true
false || 'abc';   // 'abc'

🧷 단항 논리 연산자

단항 논리 연산자로는 !가 있으며 피연산자의 논리 값을 부정하며 피연산자가 불리언 값이 아니라면 불리언 타입으로 암묵적 타입 변환을 한 후 계산 결과를 반환한다.

!'abc';   // false
!0;       // true

 

⭐ 기타 연산자

🧷 그룹 연산자

우선순위가 가장 높아 우선순위 조절용으로 쓰는 연산자이다. 소괄호로 피연산자를 감싸 사용한다.

3 * 5 - 2;                 // 13
3 * (5 - 2);               // 9

🧷 typeof 연산자

피연산자의 데이터 타입을 7가지 종류('string', 'number', 'boolean', 'undefined', 'symbol', 'object', 'function')의 문자열로 반환한다.

typeof 'str';        // 'string'
typeof 1;            // 'number'
typeof Symbol(1);    // 'symbol'
typeof true;         // 'boolean'
typeof undefined;    // 'undefined'
typeof {};           // 'object'
typeof function() {} // 'function'
typeof NaN;          // 'number'
typeof null;         // 'object'

🧷 옵셔널 체이닝 연산자(?.)

좌항의 피연산자가 값이 없을 경우 undefined를 반환하고 값이 있을 경우 우항의 프로퍼티 값을 반환한다.

var obj = {
	a : 1,
    b : 'str',
};
console.log(obj?.a);	// 1
console.log(obj?.c);	// undefined

🧷 null 병합 연산자(??)

좌항의 피연산자가 값이 없을 경우 우항의 피연산자를, 값이 있을 경우 좌항의 피연산자를 반환한다.

console.log(null ?? 'abc'); // 'abc'
console.log(undefined ?? 'def'); // 'def'
console.log(true ?? 'abc'); // true
console.log('abc' ?? 'def'); // 'abc'

🧷 delete 연산자

객체의 프로퍼티를 삭제할 때 사용한다. 존재하지 않는 프로퍼티를 삭제해도 에러는 발생하지 않는다.

var obj = {
	a : 1,
    b : 'str'
};
delete obj.a;
console.log(obj); {b : 'str'}