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

hahaha·2021년 8월 1일
0

JavaScript

목록 보기
3/24
post-thumbnail

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 && '완료';
  1. 객체 프로퍼티 참조
var elem = null;
var value = elem && elem.value;
  1. 매개변수의 기본값 설정
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
profile
junior backend-developer 👶💻

0개의 댓글