[JS] 여러가지 연산자 소개

1. 산술 연산자

1) 이항 산술 연산자

• 2개의 피연산자를 산술 연산
• (피연산자의 값을 변경하는)부수효과 X
• +, -, *, /, %

2) 단항 산술 연산자

• 1개의 피연산자를 산술 연산
• ++, --: 부수효과 O
• +
  - 숫자형이 아닌 피연산자에 사용할 경우, 숫자 타입으로 변환 (부수효과 X)

var x = '1';
console.log(+x); // 1 <- 숫자 타입으로 변환 됨
console.log(x); // "1"
    
//사용자로 부터 숫자를 입력 받는 경우
let a = +prompt('숫자를 입력하세요:', 1);

• -
  - 피연산자의 부호 변경
  

3) 문자열 연결 연산자 +

• 피연산자 중 하나 이상이 문자열인 경우, + 연산자는 문자열 연결 연산자로 동작

'1' + 2; // '12'
1 + 2; // 3

1 +  null; // 1 (null은 0d으로 타입 변환)
1 + undefined; // NaN (undefined는 숫자로 타입 변환 X)

2. 할당 연산자

• 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당
• 부수효과 O
• =, +=, -=, *=, /=, %=

3. 비교 연산자

1) 동등/일치 비교 연산자

• 동등 비교 ==, 부동등 비교 !=
  - 암묵적 타입 변환을 통해 타입을 일치 시킨 후, 값 비교
  - 예측하기 어려운 결과 도출됨
• 일치 비교 ===, 불일치 비교 !==
  - 암묵적 타입 변환 없이 값 비교
  - 정확한 비교를 요구할 때 사용

//NaN은 자기 자신과 일치하지 않는 유일한 값이다.
NaN === NaN; // false
isNaN(NaN); // true

//양의 0과 음의 0의 비교
0 === -0; // true
0 == -0; // true

//예측 가능한 정확한 비교 결과 반환 연산자 Object.is
Object.is(-0, +0); // false
Object.is(NaN, NaN); // true

2) 대소 관계 비교 연산자

• 피연산자의 크기를 비교하여 불리언 값을 반환
• >, <, >=, <=

4. 삼항 조건 연산자

• 조건식의 평가 결과에 따라 반환할 값을 결정
• 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일 때 반환할 값

5. 논리 연산자

• || 논리합 (OR)
• && 논리곱 (AND)
• ! 부정(NOT)
  - 항상 불리언 값 반환
  • 피연산자가 불리언 값이 아닐 경우, 암묵적 타입 변환

!true; // false

//암묵적 타입 변환
!0; // true
!'Hello'; // false

단축(단락) 평가

• 표현식 평가 결과가 확정되면 나머지 평가 과정 생략

1. 논리합(||) 연산자

• 피연산자가 true이면 변환전의 원래 값을 반환
• true가 없을 경우, 마지막 피연산자 반환

2. 논리곱(&&) 연산자

• 피연산자가 false이면 해당 피연산자의 원래 값을 반환
• false가 없을 경우, 마지막 피연산자 반환

//논리합 연산자
'Cat' || 'Dog'; // "Cat"
false || 'Dog'; // "Dog"
//논리곱 연산자
'Cat' && 'Dog'; // "Dog"
false && 'Dog'; // false

유용한 사용법

1. if문 대체

//조건이 true일 때 특정 값을 할당하는 경우
var done = true
var msg = '';
//if문 사용
if(done) msg = '완료';
//논리곱 연산자 사용
msg = done && '완료';

2. 객체 프로퍼티 참조

var elem = null;
var value = elem && elem.value;

3. 매개변수의 기본값 설정

function getLength(str){
	str = str || '';
    return str.length;
}
getLength(); // 0
getLength('hi'); // 2

6. 쉼표 연산자 ,

• 왼쪽 부터 피연산자 평가 후, 마지막 표현식의 결과 반환

x = 1, y = 2, z = 3; // 3

7. 그룹 연산자 ()

• 연산자의 우선순위 조절

8. typeof 연산자

• 피연산자의 데이터 타입을 문자열로 반환

typeof 1 // number
typeof null // object <- 실제 null 타입이지만...

9. 지수 연산자 **

• 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱한 값을 반환
• Math.pow 메서드보다 가독성이 좋음

2 ** 2; // 4
2 ** -2; // 0.25
(-2) ** 2; // 4

10. 그 외의 연산자

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

• 좌항의 피연산자가 null/undefined인 경우, undefined 반환
• 좌항의 피연산자가 null/undefined가 아닌 경우, 우항의 프로퍼티 참조

var elem = null;
var value = elem?.value;

//좌항의 피연산자가 Falsy값 이라도 우항의 프로퍼티 참조
var str = '';
var length = str?.length; // 0

2) null 병합 연산자 ??

• 좌항의 피연잔자가 null/undefined인 경우, 우항의 피연산자 반환
• 좌항의 피연잔자가 null/undefined가 아닌 경우, 좌항의 피연산자 반환

var foo = null ?? 'default string'; // "default string"

// 좌항의 피연산자가 Falsy값 이라도 가능
var foo = '' ?? 'default string'; // ""

3) 프로퍼티 삭제 delete

• 객체의 프로퍼티 삭제
• 존재하지 않는 프로퍼티를 삭제해도 에러 발생 없이 무시됨

4) new 연산자

• new 연산자와 함께 함수를 호출하면 생성자 함수로 동작
• 인스턴스를 생성

5) instance of 연산자

• 좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스인지 판별
• 생성자 함수의 property에 바인딩된 객체가 프로토타입 체인 상에 존재하는지 확인
• 객체 instanceof 생성자 함수

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

const me = new Person('Lee');
console.log(me instanceof Person); // true

const parent = {};
Object.setPrototypeOf(me, parent);

// 더이상 Person.prototype이 me 객체의 프로토타입 체인상에 존재하지 않음
console.log(me instanceof Person); // false
console.log(me instanceof Object); // true

6) in 연산자

• 객체 내에 특정 프로퍼티가 존재하는지 여부 확인
• key in object
• Reflect.has 메서드와 동일하게 작동

const person = {
	name: 'Lee',
        address: 'Seoul",
};

console.log('name' in person); // true

// 확인 대상 객체가 상속받은 모든 프로토타입의 프로퍼티를 확인함
console.log('toString' in person); // true