[Deep Dive] 07-09장

07장 연산자

연산자는 하나 이상의 표현식을 대상으로 연산을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라 한다.

피연산자가 "값"이라는 명사의 역할을 한다면 연산자는 "피연산자를 연산하여 새로운 값을 만든다"라는 동사의 역할을 한다고 볼 수 있다.

 

 

산술 연산자

• 이항 산술 연산자 : 2개의 피연산자를 산술 연산하여 숫자 값을 만든다.

이항 산술 연산자	의미	부수 효과
+	덧셈	X (피연산자에 어떠한 효과도 없음)
-	뺄셈	X
*	곱셈	X
/	나눗셈	X
%	나머지	X

 

• 단항 산술 연산자 : 1개의 피연산자를 산술 연산하여 숫자 값을 만든다

단항 산술 연산자	의미	부수 효과
++	증가	피연산자의 값을 변경하는 암묵적 할당이 이루어짐
--	감소	피연산자의 값을 변경하는 암묵적 할당이 이루어짐
+	어떠한 효과도 없다. 음수를 양수로 반전하지도 않음 (숫자 타입으로 변환한 값을 생성해서 반환)	X
-	양수를 음수로, 음수를 양수로 반전한 값을 반환 (숫자 타입으로 변환한 값을 생성해서 반환)	X

증가/감소 (++/--) 연산자는 위치에 의미가 있다.
- 피연산자 앞에 위치한 전위 증가/감소 연산자는 먼저 피연산자의 값을 증가/감소시킨 후, 다른 연산을 수행한다.
- 피연산자 뒤에 위치한 후위 증가/감소 연산자는 먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소시킨다.

 

var x = 1, result;
x++;
console.log(x) // 1

x = 5
// 선할당 후증가
result = x++;
console.log(result, x); // 5 6
// 선감소 후할당
result = x++;
console.log(result, x); // 5 5

// 부호를 반전
-(-10); // 10

x = '1';
// 문자열을 숫자로 타입 변환
console.log(+x); // 1
console.log(x); // '1'

x = true;
// 불리언 값을 숫자로 타입 변환
console.log(+x); // 1
console.log(x); // true

x = false;
// 불리언 값을 숫자로 타입 변환
console.log(+x); // 0
console.log(x); // false

x = 'Hello';
// 문자열을 숫자로 타입 변환할 수 없으므로 NaN을 반환
console.log(+x); // NaN
console.log(x); // 'Hello'

// 부호를 반전
-(-10) // 10

 

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

'1' + 2; // '12'

1 + null // 1 (false, null은 0으로 타입 변환)

+undefined // NaN (undefined는 숫자로 타입 변환 되지 않음)

 

이 예제에서 주목할 것은 개발자의 의도와는 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다는 것이다. 이를 암묵적 타입 변환 또는 타입 강제 변환이라고 한다.

 

 

할당 연산자

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

할당 연산자	예	동일 표현	부수 효과
=	x = 5	x = 5	O (좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있다.)
+=	x += 5	x = x + 5	O
-=	x -= 5	x = x - 5	O
*=	x *= 5	x = x * 5	O
/=	x /= 5	x = x / 5	O
%=	x %= 5	x = x % 5	O

 

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

var a, b, c;

// 연쇄 할당 : 오른쪽에서 왼쪽으로 진행
// 1. c = 0 으로 평가
// 2. b = 0 으로 평가
// 3. a = 0 으로 평가
a = b = c = 0;

 

 

비교 연산자

비교 연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환한다.

비교 연산자	의미	사례	설명	부수 효과
==	동등 비교	x == y	x와 y의 값이 같음	X
===	일치 비교	x === y	x와 y의 값과 타입이 같음	X
!=	부동등 비교	x != y	x와 y의 값이 다름	X
!==	불일치 비교	x !== y	x와 y의 값과 타입이 다름	X

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

일치 비교 연산자는 좌항과 우항의 피연산자가 타입도 같고 값도 같은 경우에 한하여 true를 반환한다.

 

NaN === NaN; // false
Number.isNaN(NaN) // true

NaN는 자신과 일치하지 않는 유일한 값이다. 따라서 숫자가 NaN인지 조사하려면 Number.isNaN() 함수를 이용한다.

또 자바스크립트에는 양의 0과 음의 0이 존재하는데 이 둘을 비교하면 true를 반환한다.

 

ES6의 Object.is() 메서드는 예측 가능한 정확한 비교 결과를 반환한다.
Object.is(NaN, NaN) // true

 

대소 관계 비교 연산자는 피연산자의 크기를 비교하여 불리언 값을 반환한다.

대소 관계 비교 연산자	예제	설명	부수 효과
>	x > y	x가 y보다 크다	X
<	x < y	x가 y보다 작다	X
>=	x >= y	x가 y보다 크거나 같다	X
<=	x <= y	x가 y보다 작거나 같다	X

 

 

삼항 조건 연산자

삼항 조건 연산자는 조건식의 평가 결과에 따라 반환할 값을 결정한다.

삼항 조건 연산자 표현식은 값처럼 다른 표현식의 일부가 될 수 있어 매우 유용하다.

// 조건식 ? 조건식이 true일 때 반환값 : 조건식이 false일 때 반환값
var result = score > 60 ? 'pass' : 'fail';

 

 

논리 연산자

논리 연산자는 좌항과 우항의 피연산자를 논리 연산한다.

논리 연산자	의미	부수 효과
||	논리합 (OR)	X
&&	논리곱 (AND)	X
!	부정 (NOT)	X

논리 부정 연산자는 언제나 불리언 값을 반환한다. 만약 피연산자가 불리언 값이 아니면 불리언 타입으로 암묵적 타입 변환된다.

논리합 또는 논리곱 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다.

// 논리합 연산자
true || true;
true || false;
false || false;
false || true;

// 논리곱 연산자
true && true;
true && false;
false && false;
false && true;

// 논리 부정 연산자
!true // false
!0 // true
!'Hello'; // false

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

 

드 모르간의 법칙을 활용하면 복잡한 표현식을 좀 더 가독성 높은 표현식으로 변환할 수 있다.
!(x || y) === (!x && !y)

 

 

쉼표 연산자

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

var x, y, z;

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

 

그룹 연산자

소괄호로 피연산자를 감싸는 그룹 연산자는 연산자 우선순위가 가장 높다.

 

 

typeof 연산자

typeof 연산자는 피연산자의 데이터 타입을 문자열로 반환한다.

typeof 연산자로 null 값을 연산해 보면 'null'이 아닌 'object'를 반환한다. typeof 연산자가 반환하는 문자열은 7개의 데이터 타입과 완전히 일치하지 않는다는 점을 주의하자.

var foo = null;

typeof foo === null; // false
foo === null; // true

 

 

지수 연산자

ES7에서 도입된 지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 값을 반환한다.

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

2 ** 2 // 4
2 ** 0 // 2
(-5) ** 2 // 25

var num = 5;
num **= 2; // 25

 

그 외의 연산자

-

 

연산자의 부수 효과

-

 

연산자 우선 순위

연산자 우선 순위란 여러 개의 연산자로 이뤄진 문이 실행될 때 연산자가 실행되는 순서를 말한다.

연산자 우선 순위를 모두 기억하기 보다는 연산자 우선 순위가 가장 높은 그룹 연산자를 사용하여 우선 순위를 명시적으로 조절하는 것을 권장한다.

 

 

연산자 결합 순서

결합 순서	연산자
좌항에서 우항	+, -, *, /, %, <, <=, >, >= ...
우항에서 좌항	++, --, 할당 연산자, typeof ...

 

 

 

08장 제어문

제어문은 조건에 따라 코드 블럭을 실행하거나 반복 실행할 때 사용한다.

 

블록문

블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라 부른다. 일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적이다.

불록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 블록문의 끝에는 세미콜론을 붙이지 않는다는 것에 주의하자.

 

 

조건문

조건문은 주어진 조건식의 평가 결과에 따라 코드 블록의 실행 여부를 결정한다.

 

• if ... else 문
  : 논리적 참, 거짓으로 실행할 코드 블록을 결정한다.
  : if ... else 문의 조건식이 불리언 값이 아닌 값으로 평가되면 암묵적으로 불리언 값으로 변경되어 평가된다.
  : 만약 코드 블록 내의 문이 하나 뿐이라면 중괄호를 생략할 수있다.
  : 대부분의 if ... else 문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

if (조건식1) {
// 조건식1이 참이면 실행
} if else (조건식2) {
// 조건식2가 참이면 실행 (옵션)
}else {
// 조건식1, 2가 모두 거짓이면 실행 (옵션)
}

 

• switch 문
  : 논리적 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드 블록을 결정한다.
  : case문에 해당하는 마지막 문에  break문을 사용하지 않으면 다음 case의 문으로 연이어 이동하는 것을 폴스루라 한다. 폴스루를 이용해 여러개의 case문을 하나의 조건으로 사용할 수도 있다.

switch (표현식) {
  case 표현식1:
    표현식과 표현식1이 일치하면 실행할 문;
    break; // 코드 블록에서 탈출하는 역할
  case 표현식2: 
    표현식과 표현식2가 일치하면 실행할 문;
    break;
  default:
    표현식과 일치하는 case문이 없을 때 실행할 문;
}

switch (표현식) {
  case 표현식1: case 표현식2: case 표현식3:
    실행할 문
    break;
  case 표현식4: case 표현식5: case 표현식6:
    실행할 문
    break;
  default:
  	실행할 문
}

 

 

반복문

반복문은 조건식의 평가 결과가 참일 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다. 이는 조건식이 거짓일 때까지 반복된다.

 

• for 문
  : for 문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.
  : for 문의 변수 선언문, 조건식, 증감식은 모두 옵션이다. 어떤 식도 선언하지 않으면 무한루프가 된다.
  : for 문 내에 for 문을 중첩해서 사용할 수 있으며 이를 중첩 for 문이라 한다.

for (변수 선언문 또는 할당문; 조건식; 증감식) {
  조건문이 참인 경우 반복 실행될 문;
}

for (var i = 0; i < 2; i++) {
  console.log(i);
}

/*
1. for문을 실행하면 제일 먼저 var i = 0; 이 실행된다. 변수 선언문은 단 한 번만 실행된다.
2. 변수 선언문의 실행이 종료되면 조건식이 실행된다.
3. 조건식의 평가 결과가 true면 코드 블록이 실행된다.
4. 코드 블록 실행이 종료되면 증감식이 실행된다.
5. 증감식 실행이 종료되면 조건식이 실행된다. (조건식의 평가 결과가 false일 때까지 반복한다.)
*/

// 무한 루프
for (;;) {
  ...
}

 

• while 문
  : 주어진 조건식의 평가 결과가 참이면 계속 해서 코드 블록을 반복 실행한다. for 문은 반복 횟수가 명확할 때 주로 쓰고, while 문은 반복 횟수가 불명확할 때 주로 사용한다.
  : 조건식의 평가 결과가 언제나 참이면 무한 루프된다. 무한 루프를 탈출하기 위해서는 break문으로 코드 블록을 탈출한다.

var count = 0;

// 무한 루프
while (true) {
  count++;
  if (count === 3) break;
}

 

• do ... while 문
  : do ... while 문은 코드 불록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 불록은 무조건 한 번 이상 실행된다.

var count = 0;

do {
  count++;
} while (count < 3);

 

• break 문
  : break 문은 레이블 문, 반복문의 코드 블록을 탈출한다.
  : 참고로 레이블 문은 식별자가 붙은 문을 말한다.
  : 중첩된 for 문의 외부 for 문을 탈출 할 때 레이블 문을 사용한다.

// foo 라는 식별자가 붙은 레이블 문
foo : { 
  break foo; // foo 레이블 코드 블록을 탈출
}

// outer 라는 식별자가 붙은 레이블 for 문
outer : for () {
  for () {
    break outer; // outer 라는 식별자가 붙은 for 문을 탈출
  }
}

 

• continue 문
  : continue 문은 반복문의 코드 블록 실행을 현 시점에서 중단하고 반복문의 조건식으로 실행 흐름을 이동시킨다. break 문처럼 반복문을 탈출하지는 않는다.

var count = 0;
var string = 'Hello world';

// continue 문을 사용하지 않으면 if 문 내에 코드를 작성해야 한다.
for (var i = 0; i < string.length; i++) {
  if (string[i] === 'l') {
  	count++;
  }
}

// continue 문을 사용하면 if 문 바깥에 코드를 작성할 수 있다.
for (var i = 0; i < string.length; i++) {
  if (string[i] !== 'l') continue;
  count++;
}

 

 

 

09장 타입 변환과 단축 평가

타입 변환이란?

개발자가 의도적으로 타입을 변환하는 것을 명시적 타입 변환(explicit coercion) 또는 타입 캐스팅(type casting)이라 한다.

개발자의 의도와는 상관없이 평가식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환(implicit coercion) 또는 타입 강제 변환(type coercion)이라 한다.

암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하는 것이 아니다. 바자스크립트 엔진은 표현식을 에러 없이 평가하기 위해 피연산자의 값을 암묵적으로 타입 변환해 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다.

 

 

암묵적 타입 변환

• 문자열 타입으로 변환

1 + '2' // '12'

`1 + 1 = ${1 + 1}` // '1 + 1 = 2'

0 + '' // '0'
NaN + '' // 'NaN'
true + '' // 'true'
null + '' // 'null'

(Symbol()) + '' // TypeError: Cannot Convert a Symbol value to a string

({}) + '' // '[object Object]'
[] + '' // ''
[10, 20] + '' // '10,20'
(function(){}) + '' // 'function(){}'
Array + '' // 'function Array() { {native code} }'

 

• 숫자 타입으로 변환

1 - '1' // 0
1 * '10' // 10
'1' > 0 // true
+'' // 0
+'1' // 1
+'string' // NaN

+true // 1
+false // 0
+null // 0
+undefined // NaN

+Symbol() // TypeError: Cannot convert a Symbol value to a number

+{} // NaN
+[] // 0
+[10, 20] // NaN

 

• 불리언 타입으로 변환 : 제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 참으로 평가되는 값은 true로 거짓으로 평가되는 값은 false로 암묵적 타입 변환된다.
  (거짓으로 평가 되는 값: false, undefined, nill, 0, -0, NaN, 빈 문자열'')

if (!false) console.log('1'); // 1
if (!undefined) console.log('1'); // 1
if (!null) console.log('1'); // 1
if (!0) console.log('1'); // 1
if (!NaN) console.log('1'); // 1
if (!'') console.log('1'); // 1

 

 

명시적 타입 변환

• 문자열 타입으로 변환

// String 생성자 함수를 new 연산자 없이 호출하는 방법
String(1); // '1'
String(true); // 'true'

// Object.prototype.toString 메서드를 사용하는 방법
(1).toString(); // '1'
(true).toString(); // 'true'

// 문자열 연결 연산자를 이용하는 방법
1 + ''; // '1'
true + ''; // 'true'

 

• 숫자 타입으로 변환

// Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('0') // 0
Number(true) // 1

// ParseInt, ParseFloat 함수를 사용하는 방법 (문자열만 변환 가능)
parseInt('0') // 0

// + 단항 산술 연산자를 이용하는 방법
+'0' // 0
+true // 1

// * 산술 연산자를 이용하는 방법
'0' * 1; // 0
true * 1 // 1

 

• 불리언 타입으로 변환

// Boolean  생성자 함수를 new 연산자 없이 호출하는 방법
Boolean('x'); // true
Boolean(''); // false
Boolean(NaN); // false
Boolean(Infinity); // true
Boolean(0); // false
Boolean({}); // true
Boolean([]); // true

// ! 부정 논리 연산자를 두 번 사용하는 방법
!!1; // true
!!null; // false
!!nudefinded // false

 

 

 

단축 평가

• 논리 연산자를 사용한 단축 평가
  : 논리곱(&&) 연산자와 논리합(||) 연산자는 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 이를 단축 평가라 한다. 단축 평가는 표현식을 표현하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다. 단축 평가를 사용하면 if문을 대체할 수 있다.

단축 평가 표현식	평가 결과
true || anything	true
false || anything	anything
true && anything	anything
false && anything	false

 

• 단축 평가가 유용한 상황

// 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때
var elem = null;
var value = elem && elem.value; // null


// 함수 매개변수에 기본값을 설정할 때
function getStringLength(str) {
  str = str || '';
  return str.length;
}

getStringLength(); // 0
getStringLength('hi'); // 2

 

• 옵셔널 체이닝 연산자
  : ES11에서 도입된 옵셔널 체이닝 연산자 ?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다. 옵셔널 체이닝 연산자는 좌항 피연산자가 false로 평가되는 값이라도 null 또는 undefined가 아니면 우항의 프로퍼티 참조를 이어간다.

var elem = null;
var velue =  elem?.value;
console.log(value); // undefined

 

•  null 병합 연산자
  : ES11에서 도입된 null 병합 연산자 ??는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 변수에 기본값을 설정할 때 유용하다. null 병합 연산자 좌항 피연산자가 false로 평가되는 값이라도 null 또는 undefined가 아니면 좌항의 피연산자를 그래도 반환한다.

var foo = null ?? 'default string';
console.log(foo); // 'default string'