[모던 자바스크립트 Deep Dive] 스터디 2주차 정리

2주차

07.연산자

 

연산자

연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이 때 연산의 대상을 피연산자라 한다.

//산술연산자
5 * 4  // -> 20

//문자열 연결 연산자
'My name is ' + 'Lee' // -> 'My name is Lee'

//할당 연산자
color = 'red' // -> 'red'

//비교 연산자
3 > 5 // -> false

//논리 연산자
true && false // -> false

//타입 연산자
typeof 'Hi' // => string

 

7-1. 산술연산자

산술연산자

산술연산자는 피연산자를 대상으로 수학적 계산을 수행해 새로운 숫자 값을 만든다. 산술 연산이 불가능한 경우, NaN을 반환한다.

이항 산술 연산자

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

단항 산술 연산자

단항 산술 연산자는 1개의 피연산자를 산술 연산하여 숫자 값을 만든다.
단항 산술 연산자|의미|부수 효과|
|:------:|:--:|:--:|
|++|증가|O|
|--|감소|O|
|+|어떠한 효과도 없다. 음수를 양수로 반전하지도 않는다.|X|
|-|양수를 음수로, 음수를 양수로 반전한 값을 반환한다.|X|

var x = 5, result;

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

//선증가 후할당
result = ++x;
console.log(result, x); // 7, 7

//선할당 후감소
result = x--;
console.log(result, x); // 7, 6

//선감소 후할당
result = --x;
console.log(result, x); // 5, 5

문자열 연결 연산자

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

//문자열 연결 연산자
'1' + 2; // '12'
1 + '2'; // '12

//true는 1로 타입 변환된다.
1 + true; // 2

//false는 0으로 타입 변환된다.
1 + false; // 1

//null은 0으로 타입 변환된다.
1 + null; // 1

//undefined는 숫자로 타입 변환되지 않는다.
+ undefined; //NaN
1 + undefined; //NaN

 

7-2 할당 연산자

할당 연산자

할당 연산자는 우항에 있는 피연산자의 평가 결과를 좌항에 있는 변수에 할당한다.
할당 연산자|예|동일 표현|부수 효과
|:------:|:--:|:--:|:--:
=|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

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

7-3 비교 연산자

동등 비교(==) 연산자

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

일치 비교(===) 연산자

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

7-4 삼항 조건 연산자

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

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

 

7-5 논리 연산자

논리 연산자

논리 연산자는 우항과 좌항의 피연산자를 논리 연산한다.
논리 연산자|의미|부수 효과
|:---:|:--:|:--:
ll | 논리합(OR) | X
&& | 논리곱(AND) | X
! | 부장(NOT) | X

7-6 쉼표 연산자

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

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

 

7-7 그룹 연산자

소괄호('()')로 피연산자를 감싸는 그룹 연산자는 자신의 피연산자인 표현식을 가장 먼저 평가한다.

7-8 typeof 연산자

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

typeof '' // string
typeof 1 // number
typeof true // boolean
typeof undefined // undefined
typeof Symbol() // symbol
typeof {} // object
typeof function () {} // function

 

7-9 지수 연산자

지수 연산자

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

2 ** 2 // 4
2 ** 2.5 // 5.65685424949238
2 ** 0 // 1
2 ** -2 // 0.25

08장. 제어문

제어문

제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행도니다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.

8-1. 블록문

블록문

블록문은 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다.

// 블록문
{
    var foo = 10;
}

// 제어문
var x = 1;
if ( x < 10) {
    x++;
}

// 함수 선언문
function sum(a, b) {
    return a + b;
}

 

8-2 조건문

if...else문

• if...else 문은 주어진 조건식의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록을 결정한다.

  if (조건식) {
    //조건식이 참이면 이 코드 블록이 실행된다.
  } else {
    //조건식이 거짓이면 이 코드 블록이 실행된다.
  }

• if문의 조건식은 불리언 값으로 평가되어야 한다.
• 대부분의 if...else 문은 삼항 조건 연산자로 바꿔 쓸 수 있다.

  var x = 2;
  var result;
  

if ( x % 2) { // 0은 false로 암죽적 강제 변환된다.
result = '';
} else {
result = '';
}

console.log(result) //짝수

<br>

### **switch 문**
+ switch 문은 주어진 표현식을 평가하여 그 값과 일치 하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다.
+ switch 문의 표현식과 일치파는 case 문이 없다면 실행 순서는 default 문으로 이동한다.
```js
switch (표현식) {
    case 표현식1:
        switch 문의 표현식과 표현식1이 일치하면 실행될 문;
        break;
    case 표현식2;
        switch 문의 표현식과 표현식2이 일치하면 실행될 문;
        break;
    default:
        switch 문의 표현식과 일치하는 case 문이 없을 때 실행될 문;
} 

• if...else 문의 조건식은 불리언 값으로 평가되어야 하지만 switch 문의 표현식은 불리언 값보다는 문자열이나 숫자 값인 경우가 많다.
• if...else 문은 논리적 참, 거짓으로 실행할 코드 블록을 결정한다.
• switch 문은 논맂거 참, 거짓보다는 다양한 상황(case)에 따라 실행할 코드를 결정할 때 사용한다.

8-3 반복문

반복문

반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다. 그 후 조건식을 다시 평가하여 여전히 참인 경우 코드 블록을 다시 실행한다.
자바스크립트는 세 가지 반복문인 for문, while문, do...while 문을 제공한다.

for문

for문은 조건식이 거짓으로 평가될 때까지 코드 블록을 반복 실행한다.

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

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

//0 1


//이중 중첩 for 문
for (let i = 1; i <= 6; i++) {
    for (let j =1; j <=6; j++) {
        if (i + j === 6) console.log(`[${i}, ${j}]`)
    }
}
//[1,5]
//[2,4]
//[3,3]
//[4,2]
// [5,1]

 

while 문

• while 문은 주어진 조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다.
• for 문은 반복 횟수가 명확할 때 주로 사용하고 while 문은 반복 횟수가 불명확할 때 주로 사용한다.

  var count = 0;
  

// 무한루프
while (true) {
console.log(count);
count++;
// count가 3이면 코드 블록 탈출한다.
if (count === 3) break;
}

<br>

#### **do...while 문**
+ do...while 문은 코드 블록을 먼저 실행하고 조건식을 평가한다. 따라서 코드 블록은 무조건 한 번 이상 실행된다.
```js
var count = 0;

//count가 3보다 작을 때까지 코드 블록을 계속 반복 실행한다.
do {
    console.log(count); //0 1 2
    count++;
} while (count < 3);

 

break 문

• switch문과 while문에서 살펴보았듯이 break 문은 코드 블록을 탈출한다.
• 중첩된 for 문의 내부 for 문에서 break 문을 실행하면 내부 for 문을 탈출하여 외부 for 문으로 진입한다. 이 때 내부 for 문이 아닌 외부 for 문을 탈출하려면 레이블 문을 사용한다.

continue 문

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

let string = 'Hello World';
let search = 'l';
let count = 0;

for(let i = 0; i < string.length; i++) {
    // 'l'이 아니면 현 지점에서 실행을 중단하고 반복문의 증감식으로 이동
    if (string[i] !== search) continue;
    count++; //continue 문이 실행되면 이 문은 실행되지 않는다.
}

console.log(count); // 3

09장 타입 변환과 단축 평가

9-1 타입변환이란?

• 자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라 한다.

  var x = 10;
  

//명시적 타입 변환
var str = x.toString();
console.log(typeof str, str); // string 10

//x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

+ 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 ***암묵적 타입 변환*** 또는 ***타입 강제 변환***이라 한다.
```js
var x = 10;

//암묵적 타입 변환
var str = x + '';
console.log(typeof str, str); // string 10

// x 변수의 값이 변경된 것은 아니다.
console.log(typeof x, x); // number 10

 

9-2 암묵적 타입 변환

• 암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

  // 피연산자가 모두 문자열 타입이어야 하는 문맥
  '10' + 2 // '102'
  

// 피연산자가 모두 숫자 타입이어야 하는 문맥
5 * '10' // 50

// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 // true
if (1) { }

#### **문자열 타입으로 변환**
```js
1 + '2' // "12"

• 위 예제의 + 연산자는 피연산자 중 하나 이상이 문자열이므로 문자열 연결 연산자로 동작한다.
• 문자열 연결 연산자의 모든 피 연산자는 코드의 문맥상 모두 문자열 타입이어야 한다.

숫자열 타입으로 변환

1 - 'i' // 0
1 * '10' // 10
1 / 'one' // NaN

• 위 예제에서 사용한 연산자는 모두 산술 연산자다. 산술 연산자의 역할은 숫자 값을 만드는 것이다.
• 산술 연산자의 모든 피연산자는 코드 문맥상 모두 숫자 타입이어야 한다.

불리언 타입으로 변환

if ('') console.log('1');
if (true) console.log('2');
if (0) console.log('3');
if ('str') console.log('4');
if (null) console.log('5');

// 2 4

• if 문 이나 for 문과 같은 제어문 또는 삼항 조건 연산자의 조건식은 불리언 값, 즉 논리적 참/거짓으로 평가되어야 하는 표현식이다.
• 자바스크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.

9-3 명시적 타입 변환

문자열 타입으로 변환

• String 생성자 함수를 new 연산자 없이 호출하는 방법
• Object.prototype.toString 메서드를 사용하는 방법
• 문자열 연결 연산자를 이용하는 방법

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

// 2. object.prototype.toString 메서드를 사용하는 방법
(1).toString(); // "1"
(NaN).toString(); //"NaN"

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

<br>

#### **숫자 타입으로 변환**
+ Number 생성자 함수를 new 연산자 없이 호출하는 방법
+ parseInt.parseFloat 함수를 사용하는 방법(문자열만 숫자 타입으로 변환 가능)
+ +단항 산수 연산자를 이용하는 방법
+ *산술 연산자를 이용하는 방법
```js
//1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
Number('0'); // 0
Number('-1'); //-1
Number(true) // 1

//2. parseInt, parseFloat 함수를 사용하는 방법
parseInt('0'); //0
parseInt('-1') //-1

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

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

불리언 타입으로 변환

• Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
• ! 부정 논리 연산자를 두번 사용하는 방법

  //1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
  Boolean('X'); // true
  Boolean(''); // false
  Boolean({}); // true
  

// 2. ! 부정 논리 연산자를 두번 사용하는 방법
!!'x'; // true
!!''; // false
!!null; // false
!!{}; // true