연산자

✒️ 2025-05-23 15:34 내용 수정

연산자 종류

• Java의 연산자(Operators)와 동일하거나 비슷한 연산자가 많다.
• Javascript에서만 사용하는 연산자는 TCPSchool js operator 를 참고하여 추가하였다.
• 다른 연산자 및 표현식은 mdn web docs javascript guide expressions and operators 참고.

• 연산자 우선순위
  1. ()
  2. 단항 연산자 : ++, --, !
  3. 산술 연산자 : *, /, %, +
  4. 비교 연산자 : >, >=, <, <=, ==, ===, !=, !==
  5. 논리 연산자 : &&, ||
  6. 대입 연산자

산술 연산자

• 기본 사칙 연산을 수행할 때 사용한다.

let num1 = 10;
let num2 = 7;

console.log(num1 + "+" + num2 + "=" + (num1+num2));
console.log(num1 + "-" + num2 + "=" + (num1-num2));
console.log(num1 + "*" + num2 + "=" + (num1*num2));
console.log(num1 + "/" + num2 + "=" + (num1/num2));
console.log(num1 + "%" + num2 + "=" + (num1%num2));

대입 연산자

• 연산된 데이터를 변수에 저장할 때 사용한다.
• 복합 대입 연산자는 산술 연산자 + 대입 연산자의 형태로 되어있다.

var str = "<table border='1'>";
str+="<tr>";
str+="<td>1</td><td>2</td><td>3</td>";
str+="</tr>";
str+="</table>";

document.write(str);

• table을 JavaScript를 사용해서 넣을 수 있다.

증감 연산자

• 피연산자(연산을 받는 항)를 +1 혹은 -1 할 때 사용한다.

비교 연산자

• 변수나 상수 값을 비교하여 참과 거짓을 판별하는 연산자
• Java와는 다르게 JavaScript의 ==은 데이터의 일치 여부만, !=는 데이터 불일치 여부만 체크한다.
• 대신 데이터와 타입을 모두 비교하는 ===과 !==이 존재한다.

console.log('10 == "10" :' + (10 == "10")); // true
console.log('10 != "10" :' + (10 != "10")); // false
console.log('10 === "10" :' + (10 === "10")); // false
console.log('10 !== "10" :' + (10 !== "10")); // true

논리 연산자

• 논리식을 판단해서 true와 false를 결정한다.

비트 연산자와 시프트 연산자

• 비트의 이동을 다룬다.

문자 결합 연산자

• "+" 로 사용한다.
• 여러 개의 문자 및 문자열을 하나의 문자형 데이터로 결합할 때 사용한다.
• 더하기에 피연산자로 문자형 데이터가 한 개라도 포함되어 있다면, 다른 피연산자의 데이터는 자동으로 문자형 데이터로 형 변환되고, 문자 결합이 이루어져 하나의 문자형 데이터로 반환된다.

console.log(num1 + "%" + num2 + "=" + (num1%num2));

삼항 연산자

• 피연산자를 3개 가지는 연산자.
• 조건식 ? A : B 로 작성하고, 조건식의 결과에 따라 A(true)와 B(false)를 반환한다.

console.log(10 > 3 ? "3보다 크다" : "3보다 작다");

쉼표 연산자

• for문에서 사용하며, 루프마다 여러 변수를 동시에 갱신할 수 있다.

for(var i = 0, j = 3, i <= j, i++, j--) {}

delete 연산자

• 피연산자를 1개만 사용하고, 결합 방향은 오른쪽->왼쪽이다.
• 피연산자인 객체, 객체의 속성, 배열의 요소 등을 삭제한다.
• 피연산자가 성공적으로 삭제되면 true를, 삭제를 실패했다면 false를 반환한다.

var arr = [1, 3];
delete arr[1];

console.log(arr);

for(value of arr) {
	console.log(value);
}

in 연산자

• 피연산자가 객체에 들어있는지 확인한다.

var arr = [1, 5];
console.log(5 in arr);
console.log(10 in arr);

true
false

typeof 연산자

• 피연산자의 타입을 문자열로 반환한다.
• 자료형에 기재된 타입을 반환한다.

typeof "문자열" // "string"

var whatType = typeof 10;
console.log(whatType); // number

instanceof 연산자

• Java에서 상속(Inheritance)을 배울 때도 사용했던 연산자
• 피연산자 객체가 특정 객체의 인스턴스인지 확인하고, 특정 객체의 인스턴스라면 true를, 아니면 false를 반환한다.

var str = new String("문자열");

document.write(`str instanceof String : ${str instanceof String} <br>`);
document.write(`str instanceof Object : ${str instanceof Object} <br>`);
document.write(`str instanceof Array : ${str instanceof Array} <br>`);
document.write(`str instanceof Number : ${str instanceof Number} <br>`);

void 연산자

• 피연산자를 1개만 사용하고, 결합 방향은 오른쪽->왼쪽이다.
• 피연산자의 타입 값과 무관하게 항상 undefined를 반환한다.

var test = void("문자열을 넣었다.");

console.log(test);

Null 병합 연산자(Nullish coalescing operator)

• 왼쪽 피연산자가 null이거나 undefined인 경우 오른쪽 피연산자를 반환하고, 그렇지 않으면 왼쪽 피연산자를 반환하는 논리 연산자다.
  • 참고 자료 : mdn web docs javascript nullish coalescing

const test = null ?? 'test value'; // test = 'test value';
const test2 = 5 ?? 'new test value'; // test2 = 5;

Optional chaining(?.)

• 객체의 속성에 접근하거나 함수를 호출하여 chain의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽는다.
• 참조(접근한 객체의 속성이나 호출한 함수)가 undefined거나 null이라면 에러가 발생하는 대신 undefined로 처리(혹은 리턴)한다.
  • 참고 자료 : mdn web docs javascript optional chaining

const test = {
	id : 1,
	school : {
		name : 'test univ'
	}
}

const result1 = test.school?.location; // undefined
const result2 = test.testFunction?.(); // undefined