모던 자바스크립트-Deep Dive 08,09

Gavri·2022년 3월 16일
0

DeepDive

목록 보기
4/12

제어문

제어문은 조건에 따라 코드 블럭을 실행하거나 반복 실행할 때 사용한다. 일반적으로 코드는 위에서 아래로 순차적으로 실행 된다.
제어문을 통해 코드의 실행 흐름을 인위적으로 제어가 가능하다.

블록문

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

function ex(){ // { 함수 블록
  ... 
}
var x = 1;
if (x < 10) { // 제어문 블록
  x++;
}

조건문

조건문은 if...else , switch 이 존재한다

var a = 1;
if(a === 1){ // 소괄호 안에 조건은 js 엔진에 의해 암묵적으로 불리언 값으로 강제 변환 된다.
  ...	// a 가 number고 1일때
}else if(a === 2){
  ...	// a 가 number고 2일때
}else{
  ...	// 그외
}
//	간단한 if else 문의 경우 삼항 조건 연산자를 활용하는것이 좋다
var b = a === 1 ? 1:0;
var count = 1; 
switch(count){
  case 1: console.log("count1");
  case 2: console.log("count2");
  default: console.log("default");
}
// 해당 스위치 문을 거칠경우 count1 만 출력되는 것이 아니라 count2 default 까지 출력된다
// 이러한 문제를 폴스루라고하며 방지하기 위해선 break; 문으로 해당 조건에 맞으면 탈출하도록 해주어야 한다.
switch(count){
  case 1: console.log("count1");
    break;
  case 2: console.log("count2");
    break;
  default: console.log("default");
    break;
}  

반복문

반복문은 조건식의 평가 결과가 참인 경우 코드 블록을 실행한다.
js 는 세 가지 반복문인 for, while, do...while 문을 제공한다

//for
for(변수 선언문 또는 할당문; 조건식; 증감식){
  조건식이 참이면 실행될 문;
};
for(let i = 0; i < 10; i++){
  ...
};
 
  //while
 let i = 0;
  while(i < 10){
    ...
  };

// do while
let count = 0;
  do{
    count ++;
  }while (count < 3);

break,continue 문

break 문은 코드 블럭을 탈출 하는 용도이다.
레이블 문, 반복문, switch 문의 코드 블럭 외에 break문을 사용하면 SyntaxError(문법 에러)가 발생한다.

continue문은 반복문의 코드 블럭 실행을 현 지점에서 중단하고 반복문의 증감식으로 실행 흐름을 이동 시킨다

for(let i = 0; i < 10; i++){
  if(i%2 === 0) continue;  // 짝수만 건너 뛴다.
  console.log(i);
}
// 결과 1,3,5,7,9 

타입 변환과 단축 평가

타입 변환이란?

js의 모든 값은 타입이 있다. 개발자가 의도적으로 값의 타입을 변환 하는 것을 명시적 타입 변환 또는 타입 캐스팅 이라한다. 개발자의 의도와 상관없이 js 엔진에 의해 암묵적으로 타입이 변환 되는 경우를 암묵적 타입 변환 또는 타입 강제 변환이라 한다.

// 명시적 타입 변환
var x = 10;
var str = x.toString();

var y = 10;
var str1 = y + ""; // js엔진은 y 값인 10을 바탕으로 새로운 문자열 값 "10"을 생성하고  '10' + ""를 평가한다.
console.log(typeof y, typeof str1) // number, string  y 의 값은 변하지 않는다.

// 암묵적 타입 변환의 예
'10' + 2 // '102'
5 * '10' // 50
!0 // true
if(1) {} // 블록문 실행

불리언 타입으로 변환

js 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값 (거짓으로 평가되는 값)으로 구분한다
Truthy : true,'str', 1이상의 숫자값 등등
Falsy : false,null,0,""(빈문자열) 등이 존재한다.

명시적 타입 변환

개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양하다. 표준 빌트인 생성자 함수(String,Number,Boolean)를 new 연산자 없이 호출하는 방법과 빌트인 메서드를 사용하는 방법, 그리고 앞에서 살펴본 암묵적 타입 변환 이용하는 방법이 있다.

문자열 타입으로 변환

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

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

3.문자열 연결 연산자 사용하는 방법
1 + "";
NaN + "";

숫자 타입으로 변환

  • Number생성자 함수를 new 연산자 없이 호출하는 방법
  • parseInt parseFloat 함수를 사용하는 방법
  • +단항 산술 연산자를 이용하는 방법
  • *산술 연산자를 이용하는 방법

불리언 타입으로 변환

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

단축 평가

단축 평가는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 의미한다

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

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

옵셔널 체이닝 연산자,null 병합 연산자

const elem = null;
const value = elem?.value;

const foo = null ?? 'default string';
console.log(foo) // default string
// 해당 ??(null 병합 연산자)가 도입되기 전에는 || 를 사용한 단축 평가를 통해 변수의 기본값을 설정하였다. 
//	||를 사용할경우 null undefined 뿐만 아니라 false가 되는 Falsy값이 들어오면 기본값을 반환하여 예기치 않은 동작을 일으켰다
profile
모든건 기록으로

0개의 댓글