모던 자바스크립트 7~9

해적왕·2023년 9월 20일
post-thumbnail

7장 연산자

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

7-1 산술 연산자

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

- 이항산술연산자

2개의 피연산자를 산술 연산

- 단항산술연산자

전위 증가/감소 연산자

먼저 피연산자의 값을 증가/감소 시킨 후, 다른 연산을 수행

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

후위 증가/감소 연산자

먼저 다른 연산을 수행한 후, 피연산자의 값을 증가/감소

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

- 문자열 연결 연산자

+연산자는 피연산자 중 하나 이사이 문자열인 경우 문자열 연결 연산자로 동작
true는 1 false는 0 -> 암묵적 타입 변환 또는 타입 강제 변환

'1' + 2; // '12'
1 + true; // 2 

7-2 할당 연산자

우항에 있는 피연산자의 평과 결과를 좌항에 있는 변수에 할당
좌항의 변수에 값을 할당하므로 변수 값이 변하는 부수 효과가 있음

7-3 비교 연산자

좌항과 우항의 피연산자를 비교한 다음 그 결과를 불리언 값으로 반환
if문이나 for문과 같은 제어문의 조건식에서 주로 사용

- 동등/일치 비교 연산자

- 대소 관계 비교 연산자

7-4 삼항 조건 연산자

조건식의 평가 결과에 따라 반환할 값 결정

7-5 논리 연산자

우항과 좌항의 피연산자를 논리 연산
|| 논리합(OR)
&& 논리곱(AND)
! 부정(NOT)

7-6 쉼표 연산자

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

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

7-7 그룹 연산자

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

10 * (2 + 3); // 50

7-8 typeof 연산자

피연산자의 데이터 타입을 7가지 문자열로 반환
number string boolean undefined symbol object function

7-9 지수 연산자

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

2 ** 2; // 4

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

지수 연산자는 이항 연산자 중에서 우선 순위가 가장 높음

2 * 5 ** 2; // 50

7-10 그 외의 연산자

7-11 연산자의 부수 효과

부수 효과 연산자는 할당 연산자 (=), 증가/감소 연산자(++/--), delete 연산자

var o = { a: 1 };
delete o.a;
console.log(0); // {}

7-12 연산자의 우선순위

여러 개의 연산자로 이뤄진 문이 실행될 때 연산자가 실행되는 순서

7-13 연산자 결합 순서

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

8장 제어문

조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용

8-1 블록문

0개 이상의 문을 중괄호로 묶은 것
블록문은 언제나 문의 종료를 의미하는 자체 종결성을 가짐

{
	var foo = 10;
}

8-2 조건문

주어진 조건식의 평가 결과에 따라 코드 블록의 실행을 결정
조건식은 불리언 값으로 평가될 수 있는 표현식

- if else 문

주어진 조건식의 평가 결과, 즉 논리적 참 또는 거짓에 따라 실행할 코드 블록 결정

- switch 문

주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case 문

var userDay = "수요일";

switch (userDay) {
  case "월요일":
    alert("월요일은 열심히 시작하는 날입니다.");
    break;
  case "화요일":
    alert("화요일은 한 주의 중간입니다.");
    break;
  case "수요일":
    alert("수요일은 절반을 넘은 날입니다.");
    break;
  case "목요일":
    alert("목요일은 주말이 얼마 남지 않은 날입니다.");
    break;
  case "금요일":
    alert("금요일은 주말을 기다리는 날입니다.");
    break;
  case "토요일":
    alert("토요일은 주말의 시작입니다!");
    break;
  case "일요일":
    alert("일요일은 휴식일입니다. 즐겨보세요!");
    break;
  default:
    alert("잘못된 요일을 입력했거나 인식할 수 없습니다.");
}

8-3 반복문

조건식의 평가 결과가 참인 경우 실행

- for문

- while문

반복 횟수 불명확할 때 실행

var count = 0;
while(true){
	console.log(count);
    count ++;
    //count가 3이면 코드 블록 탈출
    if(count === 3) break;
}

- do while문

코드 블록을 먼저 실행하고 조건식 평가

var count = 0;

do{
  console.log(count); // 0 1 2
  count++;
} while (count < 3);

8-4 break문

코드 블록 탈출

8-5 continue문

반복문의 코드 블록 실행을 한 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동 시킴

for (let i = 0; i < 5; i++) {
  if (i === 2) {
    continue; // i가 2일 때 현재 반복을 건너뛰고 다음 반복으로 이동
  }
  console.log(i); // 0 1 3 4
}

9장 타입 변환과 단축 평가

9-1 타입 변환이란?

값의 타입은 개발자의 의도에 따라 다른 타입으로 변환 가능
개발자가 의도적으로 값의 타입을 변환하는 것 = 명시적 타입 변환 or 타입캐스팅

9-2 암묵적 타입 변환

개발자의 의도와는 상관없이 코드의 문맥을 고려해 암묵적으로 데이터 타입을 강제 변환 하는 것

- 문자열 타입으로 변환

1 + '2' // "12"

- 숫자 타입으로 변환

1 - '1' // 0
1 * '10' // 10

- 불리언입으로 변환

if(true) console.log('2') // 2
if(!false) console.log('3') // 3

9-3 명시적 타입 변환

개발자의 의도에 따라 명시적으로 타입을 변경하는 방법

  • 표준 빌트인 생성자 함수(String, Number, Boolean)를 New연산자 없이 호출하는 방법
  • 빌트인 메서드 사용하는 방법
  • 암묵적 타입 변환을 이용하는 방법

- 문자열 타입으로 변환

String(1) ;
(1).toString();
1 + '';

// "1"

- 숫자 타입으로 변환

Number('1');
parseInt('1');
+'1';
+true;

// 1

- 불리언 타입으로 변환

Boolean('x'); // true
Boolean(''); // false
Boolean('false'); // true

Boolean(0); // false
Boolean(1); // true;

!!'x'; // true
!!''; // false

9-4 단축 평가

- 논리 연산자를 사용한 단축 평가

'Cat' && 'Dog' // 'Dog'
'Cat' || 'Dog' // 'Cat'

- 옵셔널 체이닝 연산자

ES11 도입
?.는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고 그렇지 않으면 우항의 프로퍼티 참조

- null 병합 연산자

ES11 도입
??는 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자 반환
변수에 기본값을 설정할 때 유용

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

0개의 댓글