[modern-js] chapter 2.7 ~ 2.12

2.7. 형변환

1.1 문자형으로 변환

• 문자형의 값이 필요할 때 자동으로 문자형으로 변환
  - 주로 무언가를 출력할 때 자동으로 문자형으로 변환된다.
  - 예를들어 alert(value) 에서 value가 문자형이 아니면 문자형으로 자동 변환된다.
• String(value) 메서드를 활용해서 문자형으로 변환할 수 있다.

const val = 123;
const str = String(val);
alert(val); // 문자형으로 형변환이 되어 사용된다.
console.log(typeof str); // string

1.2 숫자형으로 변환

• 수학과 관련된 함수와 표현식에서 자동으로 변환된다.

console.log('6' / '3'); // 3, 숫자형이 아닌 값에 나누기와 같은 수학연산을 하면 숫자형으로 변환이 된다.

• Number(value) 메서드를 활용해서 숫자형으로 변환할 수 있다.

• +'3' 와 같이 더하기 기호로 숫자인 문자열을 숫자형으로 변환할 수 있다.

• 규칙

전달받은 값	숫자형 변환
undefined	NaN
null	0
true / false	1 / 0
문자형	- 처음과 끝 공백 무시 - 빈 문자열이면 0 - 숫자가 아닌 문자열이면 NaN

1.3 불린형으로 변환

• 논리연산 을 수행할 때 자동으로 불린형으로 변환된다.
• Boolean() 메서드를 통해 불린형으로 변환할 수 있다.
• 규칙

전달받은 값	불린형 변환
0, null ,undefined, NaN, ""(빈문자열) (직관적으로 비어있는 값은 false이다)	false
그 외의 값 (직관적으로 비어있지 않은 값은 true이다)	true

1.4 기억하기

• Number(undefined) 는 0이 아닌 NaN 이다.

• Boolean(' ') , Boolean('0') 은 false가 아닌 true이다.

2.8 기본연산자와 수학

2.1 용어

• 피연산자 : 연산에 수행되는 대상

• 단항 연산자 : 피연산자를 하나만 받는 연산자, -x

• 이항 연산자 : 피연산자를 2개를 받는 연산자 , a + b

2.2 수학

// 덧셈, +
console.log(1 + 2) // 3

// 뺄셈, -
console.log(2 - 1) // 1

// 곱셈, *
console.log(3 * 2) // 6

// 나눗셈, /
console.log(4 / 2) // 2
console.log(4 / 3) // 1.3333333333333333

// 나머지, %
console.log(5 % 2) // 1

// 거듭제곱, **
console.log(2**3) // 8

2.3 문자열 연결 +

문자열끼리 연결할 때 + 를 사용할 수 있다.

주의할 점은 + 의 피연산자 중 하나라도 문자열이 있다면 문자열이 아닌 나머지가 문자열로 형변환이 되어 문자열로 연결되어진다.

console.log('hello' + ' world'); // hello world

console.log('hello' + 3); // 3은 문자열로 형변환

console.log(6 - '2'); // 4, 기본적으로 수학기호는 숫자형으로 변환된다.

console.log('6' / ;2) // 3

2.4 숫자형으로 변환 +

숫자인 문자열 앞에 + 를 붙여주면 숫자형이 된다.

const val = '123';
console.log(typeof +val); // number

2.5 연산자 우선순위

• 자바스크립트에 연산자 우선순위가 존재한다

  	- [연산자 우선순위](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_Precedence)

• 일반적으로 우리가 잘 알고 있는 수학에서의 우선순위와 동일하다.

• 소괄호를 이용한다면 우선순위를 지정할 수 있다.

  	```js
  	console.log((1 + 2) * 3); // 9
  	```

2.6 할당연산자

값을 반환하는 할당 연산자

자바스크립트의 대부분의 연산자들은 값을 반환한다. 할당연산자 = 또한 값을 반환한다. 이런 특징을 이용하면 복잡한 표현식을 작성할 수 있다.

let a = 1;
const b = 2;
const c = 3 - (a = b + 1);

console.log(a, c); // 3, 0

할당 연산자 체이닝

let a, b, c;

a = b = c = 2 + 1;

console.log(a, b, c); // 3 3 3

복합 할당 연산자

let n = 1;

n += 1;
console.log(n); // 2

n -= 1;
console.log(n); // 1

n *= 2;
console.log(n); // 2

n /= 2;
console.log(n); // 1

2.7 증감연산자 ++, --

let cnt1 = 1;
alert( 2 * ++cnt1 ); // 4, 전위

let cnt2 = 1;
alert( 2 * cnt2++ ); // 2, 후위

2.8 쉼표연산자

쉼표연산자는 여러 표현식을 한 줄에서 평가를 할 수 있게 한다.

다만 마지막 표현식의 평가 결과만 반환된다.

const a = (1 + 2, 3 + 4);

console.log(a); // 7

// 아래와 같이 여러 동작을 한줄에 처리하려는 구조에 활용
for (a = 1, b = 3, c = a * b; a < 10; a++) {
    ...
}

2.9 비교 연산자

3.1 기본예제

console.log( 2 > 1 );  // true
console.log( 2 == 1 ); // false
console.log( 2 != 1 ); // true

3.2 문자열 비교

• 유니코드 순으로 비교

console.log( 'Z' > 'A' ); // true
console.log( 'Glow' > 'Glee' ); // true
console.log( 'Bee' > 'Be' ); // true

3.3 다른형 비교

• 비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꾼다.
• 불린값의 경우 true는 1, false는 0으로 변환된 후 비교된다.

console.log( '2' > 1 ); // true, 문자열 '2'가 숫자 2로 변환된 후 비교가 진행됩니다.
console.log( '01' == 1 ); // true, 문자열 '01'이 숫자 1로 변환된 후 비교가 진행됩니다.

console.log( true == 1 ); // true, 
console.log( false == 0 ); // true

// 흥미로운 상황
const a = 0;
console.log( Boolean(a) ); // false

const b = "0";
console.log( Boolean(b) ); // true
console.log(a == b); // true!
// '0'을 0으로 변환하여 비교

3.4 일치연산자 === !==

console.log( 0 == false ); // true
console.log( 0 === false ); // false

3.5 null과 undefined

• null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않다.

console.log( null === undefined ); // false
console.log( null == undefined ); // true

• 동등 연산자 ==는 피연산자가 undefined나 null일 때 형 변환을 하지 않는다.

console.log( null == 0 ); // (2) false

• 산술 연산자나 기타 비교 연산자 < > <= >= 일 때는 null 은 0, undefined 은 NaN 으로 숫자형으로 변환된다.

console.log( null > 0 );  // (1) false
console.log( null >= 0 ); // (3) true

• undefined를 다른 값과 비교가 불가하다.
  - 산술 연산자나 기타 비교 연산자 < > <= >= 일 때는 NaN
  - 동등 연산자 == 일 때는 null이나 undefined와 같고 그 이외의 값과는 같지 않다.

함정 피하기

null과 undefined은 위와 같은 특징 때문에 주의가 필요하다.

• 일치 연산자 === 가 아닌 비교 연산에서undefined나 null이 오지 않도록 한다.

• undefined나 null이 될 가능성이 있는 변수가 >= > < <=의 피연산자가 되지 않도록 한다.

2.10 if와 ? 를 사용한 조건 처리

4.1 if문

if (val == 123) console.log( 'val은 123입니다.' );

if (year < 2015) {
  console.log( '숫자를 좀 더 올려보세요.' );
} else if (year > 2015) {
  console.log( '숫자를 좀 더 내려보세요.' );
} else {
  console.log( '정답입니다!' );
}

4.2 조건부 연산자 ?

// 조건부 연산자
const adult = (age > 18) ? true : false;
const adult = age > 18;

// 다중 조건부
let message = (age < 3) ? '아기야 안녕?' :
  (age < 18) ? '안녕!' :
  (age < 100) ? '환영합니다!' :
  '나이가 아주 많으시거나, 나이가 아닌 값을 입력 하셨군요!';

// if문 대용, but 가독성이 떨어진다.
(company == 'Netscape') ?
   alert('정답입니다!') : alert('오답입니다!');

2.11 논리 연산자

5.1 or 연산자 ||

alert( true || true );   // true
alert( false || true );  // true
alert( true || false );  // true
alert( false || false ); // false

// 피연산자가 불린형이 아니라면 불린형으로 자동 형변환
if (1 || 0) alert('true!'); // true

or 연산자로 첫번째 true찾기

res = val1 || val2 || val3

// example
let firstName = "";
let lastName = "";
let nickName = "바이올렛";

alert( firstName || lastName || nickName || "익명"); // 바이올렛

가장 먼저 true인 값까지 연산을 하고 해당 피연산자의 변환 전 원래 값을 반환한다.

모든 피연산자가 false이면 모든 피연산자가 평가된 후 마지막 피연산자를 반환한다.

5.2 and 연산자 &&

alert( true && true );   // true
alert( false && true );  // false
alert( true && false );  // false
alert( false && false ); // false

// 피연산자가 불린형이 아니라면 불린형으로 자동 형변환
if (1 && 0) { 
  ...
}

and 연산자로 첫번째 false찾기

res = val1 && val2 && val3

// example
(x > 0) && alert( '0보다 큽니다!' );

왼쪽 부터 오른쪽으로 하나씩 피연산자를 평가한다. false이면 평가를 멈추고 해당 피연산자의 변환 전 원래 값을 반환한다.

모든 피연산자가 true로 평가되는 경우 마지막 피연산자가 반환된다.

5.3 단락평가

단락평가 : short circuit evaluation

조건 || 조건이 false일 때 실행할 문;

조건 && 조건이 true일 때 실행할 문;

5.4 not 연산자 !

alert( !true ); // false
alert( !0 ); // true

NOT을 두 개 연달아 사용(!!)하면 값을 불린형으로 변환할 수 있다.

Boolean() 메서드를 사용한 것과 같다.

alert( !!"non-empty string" ); // true
alert( !!null ); // false

우선순위

! > && > ||

2.12 null병합 연산자 ??

a ?? b의 평가 결과는 다음과 같다.

• a가 null도 아니고 undefined도 아니면 a
• a가 null 이거나undefined 이면 b

활용예시

let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

?? 와 || 의 차이

// or연산자
let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName || lastName || nickName || "Anonymous"); // Supercoder

// ??연산자
let firstName = null;
let lastName = null;
let nickName = "Supercoder";

// null이나 undefined가 아닌 첫 번째 피연산자
alert(firstName ?? lastName ?? nickName ?? "Anonymous"); // Supercoder

• ||는 첫 번째 truthy 값을 반환한다.

• ??는 첫 번째 정의된(defined) 값을 반환한다.

null과 undefined, 숫자 0을 구분 지어 다뤄야 할 때 이 차이점을 생각해야된다.

let height = 0;

alert(height || 100); // 100
alert(height ?? 100); // 0

or연산자에서는 false를 암시하는 값(0)은 무시한다. 따라서 0일 때도 값을 할당 하게 되어 주의해야한다.

반면 null병합연산자에서는 정확히 null과 undefined 일 때만 값을 할당한다.

주의

• ?? 연산자는 우선순위가 낮으니 소괄호를 활용하자.
• ?? 연산자는 &&나 || 연산자와 함께 사용할 수 없다.