7장, 연산자

🔖 7장, 연산자

📌 배운 내용 및 기억하고 싶은 내용

연산자

• 연산자(operator)는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만듬
• 연산의 대상은 피연산자(operand)
  • 피연산자는 값으로 평가될 수 있는 표현식이어야 함
• 피연산자 = “값”
• 연산자 = 피연산자를 연산하여 새로운 값을 만듦

산술 연산자

• 산술연산이 불가능한 경우 NaN 반환
• 증가/감소 연산자(++/–)는 피연산자의 값을 변경하는 부수 효과가 있음
  • 피연산자의 값을 변경하는 암묵적 할당이 이뤄짐
• +/- 단항 연산자를 사용하면 숫자 타입으로 변환하여 반환
• 암묵적 타입변환/타입 강제 변환을 수행

할당 연산자

• 할당문은 표현식인 문으로서 할당된 값을 평가
  • 연쇄 할당 가능

비교 연산자

• 좌항과 우항의 피연산자를 비교후 불리언 값으로 반환
• ==(동등 비교)은 암묵적 타입변환을 통해 타입을 일치 시킨 후 값이 같은지 비교
• ===(일치 비교)은 타입까지 비교
• 동등비교 연산자는 예측하기 어려운 결과를 나타내기 때문에 사용하지 않은 편이 좋으며, 일치 비교 연산자를 사용하는 것이 좋음
  • 일치 비교 연산자에서 주의해야 할 것은 NaN임
  • NaN은 자신과 일치하지 않은 유일한 값
    • 숫자가 NaN인지 조사할려면 빌트인 함수 isNaN을 사용
  • 양의 0과 음의 0을 비교하면 true로 반환
    • Object.is(피연산자1,피연산자2); 메서드 사용하여 비교

삼항 조건 연산자

• 삼항 조건 연산자(Ternary operator)는 조건식의 평가 결과에 따라 반환할 값을 결정

• JS의 유일한 삼항 연산자, 부수 효과는 없음

• 조건식? true일 때 반환값 : false일 떄 반환 값;

• 조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 암묵적 타입 변환됨

  삼항 조건 연산자와 if…else문의 차이

  • 삼항 조건 연산자 표현식은 값처럼 사용 가능
  • if…else문은 값처럼 사용 불가능

  var x = 10;
  var result1 = if(x % 2) {result = '홀수'} else {result = '짝수';}
  // SytaxError: Unexpected token if
  var result2 = x % 2? '홀수' : '짝수';
  console.log(result2); //짝수
  

  조건에 따라 어떠한 값을 결정 = 삼항 조건 연산자 표현식이 유리

  조건에 따라 수행해야 할 문이 여러 개 = if…else문이 가독성 유리

논리 연산자

• 논리 부정 연산자(!)는 언제나 불리언 값으로 반환되며, 피연산자가 반드시 불리언 값일 필요는 없음( 암묵적 타입으로 변환 )
• 논리합(||) 또는 논리곱(&&) 연산자 표현식 평가 결과는 불리언 값이 아닐 수 있으며, 언제나 2개의 피연산자 중 어느 한쪽으로 평가됨

// 단축평가
'Cat' && 'Dog'; // 'Dog'

드 모르간의 법칙을 사용하면 복잡한 표현식을 가독성 좋은 표현식으로 변환할 수 있음

!(x||y) === (!x&&!y)
!(x&&y) === (!x||!y)

쉼표 연산자

• 쉼표(,)연산자는 왼쪽 피연산자 부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가결과를 반환

그룹 연산자

• 소괄호로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가
• 소괄호 연산자로 우선순위 조절이 가능하며, 우선순위가 가장 높다.

typeof 연산자

• typeof연산자는 피연산자의 데이터 타입을 문자열로 변환
• string, number, boolean, undefined, symbol, object, function
  • null을 반환하는 경우는 없음
  • null을 반환하면 object로 반환
    • 자바스크립트의 버그이며 수정되지 못하고 있음
    • null타입 확인할때는 일치 연산자를 사용
  • 선언하지 않은 식별자를 typeof 연산자로 연산하면 ReferenceError를 발생하지 않고 undefined 반환

지수 연산자

• ES7에서 도입

2**2; // 4
2**1; // 1
// 좌항은 밑, 우항은 지수

• 지수 연산자 도입 이전에는 Math.pow메서드 사용

Math.pow(2,2); // 4
Math.pow(2,0); // 1

• 지수 연산자는 밑과 같은 경우에서 Math.pow메서드 보다 가독성이 더 좋음

2**2**2; //16
Math.pow(Math.pow(2,2),2); // 16

• 음수를 거듭제곱의 밑으로 사용해 계산하려면 괄호로 묶어야 함
• 지수 연산자는 이항 연산자 중에서 우선순위가 가장 높음

그 외의 연산자

• ?.(옵셔널 체이닝 연산자)
• ??(null 병합 연산자)
• delate(프로퍼티 삭제)
• new(생성자 함수를 호출할때 사용하여 인스턴스를 생성)
• instanceof(좌변의 객체가 우변의 생성자 함수와 연결된 인스턴스 인지 판별)
• in(프로퍼티 존재 확인)

연산자의 부수 효과

• 일부 연산자는 다른 코드에 영향을 주는 부수 효과가 있음
• 부수 효과가 있는 연산자
  • 할당 연산자(=)
  • 증가/감소 연산자(++/–)
  • delate 연산자

연산자 우선순위

• 모두 기억하기 어렵기 때문에, 연산자 우선순위가 가장 높은 그룹 연산자를 사용하여 우선순위를 명시적으로 조절하는 것을 권장

• 우선순위	연산자	설명	결합 방향
  1	()	묶음(괄호)	-
  2	.	멤버 접근	왼쪽에서 오른쪽으로
  	new	인수 있는 객체 생성	-
  3	()	함수 호출	왼쪽에서 오른쪽으로
  	new	인수 없는 객체 생성	오른쪽에서 왼쪽으로
  4	++	후위 증가 연산자	-
  	–	후위 감소 연산자	-
  5	!	논리 NOT 연산자	오른쪽에서 왼쪽으로
  	~	비트 NOT 연산자	오른쪽에서 왼쪽으로
  	+	양의 부호 (단항 연산자)	오른쪽에서 왼쪽으로
  	-	음의 부호 (단항 연산자)	오른쪽에서 왼쪽으로
  	++	전위 증가 연산자	오른쪽에서 왼쪽으로
  	–	전위 감소 연산자	오른쪽에서 왼쪽으로
  	typeof	타입 반환	오른쪽에서 왼쪽으로
  	void	undefined 반환	오른쪽에서 왼쪽으로
  	delete	프로퍼티의 제거	오른쪽에서 왼쪽으로
  6	**	거듭제곱 연산자	오른쪽에서 왼쪽으로
  	*	곱셈 연산자	왼쪽에서 오른쪽으로
  	/	나눗셈 연산자	왼쪽에서 오른쪽으로
  	%	나머지 연산자	왼쪽에서 오른쪽으로
  7	+	덧셈 연산자 (이항 연산자)	왼쪽에서 오른쪽으로
  	-	뺄셈 연산자 (이항 연산자)	왼쪽에서 오른쪽으로
  8	«	비트 왼쪽 시프트 연산자	왼쪽에서 오른쪽으로
  	»	부호 비트를 확장하면서 비트 오른쪽 시프트	왼쪽에서 오른쪽으로
  	»>	부호 비트를 확장하지 않고 비트 오른쪽 시프트	왼쪽에서 오른쪽으로
  9	<	관계 연산자(보다 작은)	왼쪽에서 오른쪽으로
  	<=	관계 연산자(보다 작거나 같은)	왼쪽에서 오른쪽으로
  	>	관계 연산자(보다 큰)	왼쪽에서 오른쪽으로
  	>=	관계 연산자(보다 크거나 같은)	왼쪽에서 오른쪽으로
  	instanceof	인스턴스 여부 판단	왼쪽에서 오른쪽으로
  10	==	동등 연산자	왼쪽에서 오른쪽으로
  	===	일치 연산자	왼쪽에서 오른쪽으로
  	!=	부등 연산자	왼쪽에서 오른쪽으로
  	!==	불일치 연산자	왼쪽에서 오른쪽으로
  11	&	비트 AND 연산자	왼쪽에서 오른쪽으로
  12	^	비트 XOR 연산자	왼쪽에서 오른쪽으로
  13	|	비트 OR 연산자	왼쪽에서 오른쪽으로
  14	&&	논리 AND 연산자	왼쪽에서 오른쪽으로
  15	||	논리 OR 연산자	왼쪽에서 오른쪽으로
  16	? :	삼항 연산자	오른쪽에서 왼쪽으로
  17	=	대입 연산자 (=, +=, -=, *=, /=, %=, «=, »=, »>=, &=, ^=, |=)	오른쪽에서 왼쪽으로
  18	…	전개	-
  19	,	쉼표 연산자	왼쪽에서 오른쪽으로

  표 출처 : tcpschool.com

연산자 결합 순서

• 연산자의 어느 쪽부터 평가를 수행할 것인지를 나타내는 순서를 의미

❗️ 읽은 소감

연산자 중에서 옵셔널 체이닝이라는 연산자가 제일 흥미로웠다. 옵셔널 체이닝은 ES2020에 등장한 새 연산자인데, ?.의 형태로 사용하여 체인으로 이루어진 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 체인 내 깊숙히 위치한 속성 값을 읽을 수 있는 연산자이다. 체이닝 연산자와 비슷하게 동작한다고 하지만, 참조가 Null 이나 Undefined 이라도 에러가 발생하지 않고 Undefined 값을 리턴한다. 이 옵셔널 체이닝을 쓰고 안쓰고 차이가 꽤 컸던걸로 기억이 난다. 코드가 간결해 지기 떄문이다.

❓ 궁금한 내용이나 잘 이해되지 않는 내용

• 없음