JavaScript #3 연산자

연산자 기호는 공통적으로 사용되는 사칙연산을 적용하고 있다.

그 밖에 추가로 사용되는 연산자 중 차이점을 정리한다.

 

비교 연산자

동등 연산자와 일치 연산자

true == 1;
// true , 두 피연산자를 비교하기 전에 true를 1로 변환
true === 1;
// false , 두 피연산자의 타입부터 비교된다.

 

비슷해 보이는 두 연산자의 동일한 값 비교에서 명확한 차이가 난다.

 

 

'==' 동등 연산자

비교하는 두 값의 타입이 다르면 비교하기 전에 타입을 동일하게 변환 후 비교를 한다.

console.log(5 == '5');      // true, 숫자 5와 문자열 '5'가 타입 강제 변환 후 비교
console.log(null == undefined); // true, 둘 다 비어있는 값을 나타냄
console.log(0 == false);    // true, 숫자 0과 불리언 false가 타입 강제 변환 후 비교
console.log('' == false);   // true, 빈 문자열과 불리언 false가 타입 강제 변환 후 비교

 

'===' 일치 연산자

타입과 값이 모두 동일해야만 참을 반환한다.

console.log(5 === '5');     // false, 타입이 다르므로 일치하지 않음
console.log(null === undefined); // false, 타입이 다르므로 일치하지 않음
console.log(0 === false);   // false, 타입이 다르므로 일치하지 않음
console.log('' === false);  // false, 타입이 다르므로 일치하지 않음
console.log(5 === 5);       // true, 타입과 값이 모두 동일

 

타입 강제 변환의 수행 때문에 예기치 않은 결과를 발생시킬 수 있다. 따라서 자바스크립트에서는 일관성과 예측 가능한 동작을 위해 일반적으로 '==='를 사용하는 것이 권장된다.

 

<, > 등호 

숫자뿐만 아니라 문자열과 객체도 비교가 가능하다. 

console.log(5 < 10);   // true
console.log(5 > 10);   // false
console.log(10 > 10);  // false
console.log(10 < 10);  // false
console.log(10 <= 10); // true
console.log(10 >= 10); // true

 

 

문자열 비교는 유니코드 값을 기준으로 문자열을 비교한다.

console.log('apple' < 'banana');   // true
console.log('grape' > 'banana');   // true
console.log('apple' > 'Apple');    // true ('a'의 유니코드 값이 'A'보다 큼)
console.log('2' < '10');           // false (문자열 비교에서 '2'는 '10'보다 큼)

 

객체의 경우 직접 등호를 사용해서 비교할 수 없지만 비교 시 객체를 원시 값으로 변환하려고 시도한다. 이 경우 두 객체의 참조를 비교한다. 일반적으로 객체의 비교는 특정 속성을 비교하는 방법으로 사용한다.

// 객체 직접 비교시
let obj1 = { value: 10 };
let obj2 = { value: 20 };

console.log(obj1 < obj2); // false
console.log(obj1 > obj2); // false
console.log(obj1 == obj2); // false

// 객체의 속성 비교
let obj1 = { value: 10 };
let obj2 = { value: 20 };

console.log(obj1.value < obj2.value); // true

 

숫자와 문자열간의 비교도 가능하며 이 경우 자동으로 타입을 변환하여 비교한다.

console.log('5' < 10);  // true (문자열 '5'는 숫자 5로 변환됨)
console.log('5' > 10);  // false
console.log('5' > '10'); // true ('5'와 '10'은 문자열로 비교됨, '5'는 '10'보다 큼)

 

in 연산자

객체의 속성이나 배열의 인덱스가 존재하는지 확인하는 데 사용된다.

 

객체의 특정 속성이 존재하는지 확인할 때

let person = {
  name: "Alice",
  age: 30
};

console.log("name" in person); // true
console.log("age" in person);  // true
console.log("gender" in person); // false

 

배열의 특정 인덱스가 존재하는지 확인할 때

let numbers = [10, 20, 30];

console.log(0 in numbers); // true
console.log(1 in numbers); // true
console.log(3 in numbers); // false (인덱스 3은 존재하지 않음)

 

in 연산자는 주어진 속성 또는 인덱스가 객체의 자체 속성인지, 프로토타입 체인에 속한 속성인지 여부를 검사한다.

let person = {
  name: "Alice"
};

console.log("toString" in person); // true, toString은 Object.prototype의 속성

 

toString은 person 객체에 직접 정의된 속성이 아니지만 Object.protorype에 정의된 속성이기 때문에 in 연산자는 true를 반환한다.

 

객체의 자체 속성만을 검사하려면 Object.hasOwnProperty 메서드를 사용한다.

let person = {
  name: "Alice"
};

console.log(person.hasOwnProperty("name")); // true
console.log(person.hasOwnProperty("toString")); // false

 

instanceof 연산자

특정 객체가 특정 생상저 함수 또는 클래스의 인스턴스인지 확인하는 데 사용된다. 이를 통해 객체의 프로토타입 체인을 검사하여 객체가 특정 생성자 함수의 프로토타입을 상속받았는지 여부를 확인할 수 있다.

object instanceof Constructor

 

여기서 object는 검사할 객체, Constructor는 생성자 함수이다.

 

원시 타입인 숫자, 문자열, 불리언 등에는 사용할 수 없다.

console.log(5 instanceof Number); // false
console.log("hello" instanceof String); // false

 

instanceof 연산자는 객체의 프로토타입 체인을 따라가면서 주어진 생성자 함수의 prototype 속성과 일치하는 프로토타입이 있는지 검사한다. 이 과정은 객체의 프로토타입 체인 끝에 도달할 때까지 계속된다.

 

function Foo() {}
function Bar() {}

let foo = new Foo();

console.log(foo instanceof Foo); // true
console.log(foo instanceof Bar); // false
console.log(foo instanceof Object); // true (Foo의 인스턴스는 Object의 인스턴스이기도 함)

 

따라서 객체의 프로토타입이 동적으로 변경된다면 instanceof의 결과도 달라질 수 있게 된다.

function Foo() {}
function Bar() {}

let obj = new Foo();
console.log(obj instanceof Foo); // true

Object.setPrototypeOf(obj, Bar.prototype);
console.log(obj instanceof Foo); // false
console.log(obj instanceof Bar); // true

 

typeof 연산자

typeof 연산자는 데이터 타입을 검사하는 데 사용되며 주로 원시 타입을 검사할 때 사용한다.

console.log(typeof 5);          // "number"
console.log(typeof "hello");    // "string"
console.log(typeof true);       // "boolean"
console.log(typeof {});         // "object"
console.log(typeof []);         // "object"
console.log(typeof function(){}); // "function"

 

논리 연산자

논리적인 조건을 평가하거나 결합하는 데 사용된다. 주로 조건문에서 사용되며 참 또는 거짓 값을 반환한다.

 

&& AND

두 피연산자가 모두 참일 때 참, 하나라도 거짓이면 거짓을 반환한다.

console.log(true && true);   // true
console.log(true && false);  // false
console.log(false && true);  // false
console.log(false && false); // false

let a = 5;
let b = 10;
console.log(a > 0 && b > 0); // true (a와 b가 모두 0보다 큼)

 

|| OR

두 피연산자 중 하나라도 참이면 참, 둘 다 거짓일 때만 거짓을 반환한다.

console.log(true || true);   // true
console.log(true || false);  // true
console.log(false || true);  // true
console.log(false || false); // false

let a = 5;
let b = -10;
console.log(a > 0 || b > 0); // true (a가 0보다 큼)

 

! NOT

피연산자의 부정을 반환한다. 참이면 거짓, 거짓이면 참을 반환한다.

console.log(!true);  // false
console.log(!false); // true

let a = 5;
console.log(!(a > 0)); // false (a > 0은 true이므로, !true는 false)

 

 

논리 연산자의 단축 평가 (Short-Circuit Evaluation)

논리 연산자는 단축 평가를 사용하여 불필요한 연산을 피한다. 이는 첫 번째 피연산자가 전체 표현식의 결과를 결정할 수 있는 경우 두 번째 피연산자를 평가하지 않는다는 것을 의미한다.

 

&&, 첫 번째 연산자가 거짓이면 두 번째 피연산자를 평가하지 않는다.

console.log(false && true);  // false (두 번째 피연산자를 평가하지 않음)
console.log(true && false);  // false
console.log(false && false); // false (두 번째 피연산자를 평가하지 않음)
console.log(true && true);   // true

let a = 5;
let b = 10;
console.log(a > 0 && b > 0 && b > a); // true (모든 조건이 참)

 

||, 첫 번째 피연산자가 참이면 두 번째 피연산자를 평가하지 않는다.

console.log(true || false);  // true (두 번째 피연산자를 평가하지 않음)
console.log(false || true);  // true
console.log(true || true);   // true (두 번째 피연산자를 평가하지 않음)
console.log(false || false); // false

let a = 5;
let b = -10;
console.log(a > 0 || b > 0 || b < a); // true (첫 번째 조건이 참이므로 나머지 조건을 평가하지 않음)

 

delete 연산자

객체의 속성을 삭제하는 데 사용된다. 주로 객체의 속성만을 삭제할 때 사용한다. 

 

delete object.property;
//또는
delete object['property'];

 

객체의 특정 속성을 삭제하고 삭제된 속성은 객체에서 완전히 제거되어 더 이상 해당 속성에 접근할 수 없다.

 

let person = {
  name: "Alice",
  age: 30
};

console.log(person.age); // 30

delete person.age; // age 속성 삭제

console.log(person.age); // undefined (삭제된 속성에 접근 시)
console.log(person); // { name: "Alice" }

 

배열의 요소 삭제

배열의 요소를 삭제할 수 있지만 배열의 길이는 변경되지 않고 해당 인덱스는 undefined로 남아 있게 되므로 완전히 제거하고 길이를 줄이기 위해서는 splice 메서드를 사용하는 것이 좋다.

 

let numbers = [1, 2, 3, 4];

delete numbers[2]; // 배열의 세 번째 요소 삭제

console.log(numbers); // [1, 2, undefined, 4]
console.log(numbers.length); // 4 (배열 길이는 그대로)

 

프로토타입 속성 삭제

객체의 프로토타입에 정의된 속성은 delete 연산자로 삭제할 수 없다.

 

function Person(name) {
  this.name = name;
}

Person.prototype.age = 30;

let alice = new Person("Alice");

console.log(alice.age); // 30 (프로토타입 속성)

delete alice.age; // 인스턴스의 age 속성 삭제 시도 (실제로 프로토타입의 속성은 삭제되지 않음)

console.log(alice.age); // 30 (프로토타입의 속성은 여전히 존재)

 

변수 삭제

전역 변수와 함수의 경우 delete 연산자를 사용해도 삭제되지 않는다. 지역 변수는 delete로 삭제할 수 없다.