가오리의 코딩일기

7장 연산자 본문

HTML+CSS+JavaScript/DeepDive

7장 연산자

류경혜 2022. 7. 26. 12:00

→ 연산자 : 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산을 수행해 하나의 값을 만든다

→ 피연산자 : 연산의 대상, "값"

 

 

🧩 산술 연산자(arthmenc operator)

→ 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다

→ 산술 연산이 불가능한 경우 NaN(Not a Number)

 

 

 

 

🧩 이항 산술 연산자

부수효과가 없다

+ 할당연산자, 증가/감소 연산자 등 일부 연산자는 다른 코드에 영향을 주는 효과

→ 어떤 산술 연산을 해도 피연산자의 값이 바뀌는 경우는 없다

 

 

 

 

🧩 단항 산술 연산자

→ 증가/감소 연산자, 부수 효과가 있다

→ 전위 증가/감소 연산자 : 먼저 피연산자의 값 증가, 감소

→ 후위 증가/감소 연산자 : 나중에 피연산자의 값 증가, 감소

 

 

 

 

🧩 문자열 연결 연산자

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

'1'+2; // '12': 문자열 연결 연산자
1+true; // 2: 산술 연산자
1+false; // 1
1+null; // 1: null은 0
1+undefined; // NaN: undefined는 숫자 타입으로 변환X

 

🔗 암묵적 타입 변환, 강제 타입 변환

→ 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환 되는 것

→ 추가적인 설명은 9장에서

 

 

 

 

🧩 할당 연산자(assignment operator)

→ 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다

→ 좌항의 변수에 값을 할당하기 때문에 부수 효과가 있다

 

🔗 할당문은 '값'으로 평가되는 표현식인 문으로서 할당된 값으로 평가된다

 

 

 

🧩 ==: 동등 비교 연산자(loose equality)

→ 좌항과 우항의 피연산자를 비교할 때 먼저 암묵적 타입 변환을 통해 타입을 일치시킨 후 같은 값인지 비교한다

→ 부수효과가 없고 x와 y의 값이 같은가 다른가를 비교한다

 

 

 

🧩 ===: 일치 비교 연산자(strict equality)

→ 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에만 true를 반환한다

→ 부수효과가 없고 x와 y의 값과 타입이 같은지 비교한다

→ NaN은 자신과 일치하지 않는 유일한 값, 숫자가 NaN인지 비교해야 할 때는 빌트인 함수 isNaN()을 사용해야 한다

 

 

 

 

🔗 == vs. ===

더보기

→ 동등 비교 연산자는 느슨한 비교를 하지만 일치 비교 연산자는 엄격한 비교를 한다

→ 추가적인 Boolean형

 false: 숫자 0, null, undefined, 문자열 공백

true : false가 아닌 전부, "false"도 문자열이고 공백이 아니기에 true

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!

 

🔗 Falsy 값

더보기

→ 자바스크립트에서 0이란 값이 falsy 값이다

→ 숫자 0을 강제로 false로 변환시킨다

→ falsy 값: false, 0, "", null, undefined, NaN

// 1. false, 0, "" → false 형태로 강제 형 변환
false == 0 // true
0 ==''     // true
'' = false // true

// 2. null, undefined → 그들과 같고, 자기 자신도 같다
null == null           // true
undefined == undefined // true
undefined == null      // true 

// 3. NaN → 그 누구와도 값이 같지 않다(자기 자신도)
NaN == null      // false
NaN == undefined // false
NaN == NaN       // flase

 

 

 

 

🧩 대소 관계 비교 연산자

→ 피연산자의 크기를 비교하여 불리언 값을 반환한다

 

🔗 문자열 비교

더보기

→ 자바스크립트는 사전(편집)순으로 문자열을 비교한다

→ 사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단한다

→ 'A'보다 'a'가 더 크기 때문에 정확히는 사전순이 아니라 유니코드순이라고 할 수 있다

 

 

 

🧩 삼항 조건 연산자(ternary operator)

→ 부수효과가 없고 조건식의 평가 결과에 따라 반환할 값을 결정

→ 조건식의 평가 결과가 불리언 값이 아니라면 불리언 값으로 암묵적 타입 변환을 한다

→ 값으로 평가할 수 있는 표현식인 문

// 조건식 ? (조건식이 true일 때 반환하는 값) : (조건식이 false일 때 반환하는 값); 
let resultScore = score>=60 ? 'pass' : 'fail';
let resultNumber = x %2 ? '홀수' : '짝수';

 

 

 

🧩 논리 연산자(logical operator)

→ 우항과 좌항의 피연산자를 논리 연산하고 부수효과가 없다

→  ||_논리합(OR), &&_논리곱(AND), !_부정(NOT)

→ &&의 우선순위가 || 보다 높다

 

🔗 드 모르간의 법칙

→ 복잡한 표현식을 좀 더 가독성 좋은 표현식으로 변환한다

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

 

 

 

🧩 비트 연산자

→  인수를 32비트 정수로 변환하여 이진 연산을 수행한다

→ 비트 AND(&), 비트 OR(|), 비트 XOR(^), 비트 NOT(~)

→  왼쪽 시프트(<<), 오른쪽 시프트(>>), 부호 없는 오른쪽 시프트(>>>)

 

 

 

🧩 쉼표 연산자

→ 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다

 

 

 

🧩 그룹 연산자

→ 연산자 우선순위가 제일 높기 때문에 우선순위를 조절하기 위해 소괄호(())로 피연산자를 감싼다

 

 

 

🧩 typeof 연산자

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

→ 7가지 문자열로 반환: string, number, boolean, undefined, symbol, object, function

→ null은 object로 평가하기 때문에 typeof 연산자가 아닌 일치 연산자 ===를 이용하자

 

 

 

🧩 지수 연산자

→ 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다

→ 지수 연산자 도입 전에는 Math.pow 메서드를 사용했다

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

 

 

 

🧩 그 외의 연산자

→ ?., ??, delete, nuew, instanceof, in 등 9, 10, 17, 19 장에서 깊게 다루도록 하겠다

 

'HTML+CSS+JavaScript > DeepDive' 카테고리의 다른 글

7장 연산자: 코어 자바스크립트2  (0) 2022.07.28
7장 연산자: 코어 자바스크립트1  (0) 2022.07.26
6장 데이터 타입  (0) 2022.07.20
5장 표현식과 문  (0) 2022.07.13
4장 변수와 상수  (0) 2022.07.10