[모던 자바스크립트 Deep Dive] 6~8. 데이터 타입, 연산자, 제어문

모던 자바스크립트 Deep Dive

06~08장 내용 정리

 

회사에서 사용하는 javascript를 좀 더 깊게 공부하기 위해 기초부터 한번 훝으려고 한다.

 

 

---

 

6장. 데이터 타입

JS의 데이터타입 종류

원시 타입	객체 타입
숫자 타입	객체
문자열 타입	함수
불리언 타입	배열
undefined 타입
null 타입
심벌(symbol) 타입

 

 

• 하나의 숫자 타입 제공 : 모두 실수로 처리(배정밀도 64비트 부동소수점 형식)
• 문자열 타입 : 변경 불가능한 값이며 작은 따옴표, 큰 따옴표, 백틱(`)으로 묶어서 사용
• 템플릿 리터널 : 멀티라인 문자열, 표현식 삽입을 할 때 유용하게 사용(ES6 버전)
  • 표현식의 경우 ${variable} 형식으로 백틱안에 있는 문자열 안에 변수를 넣어서 사용
• null 타입 : 변수에 값의 없다는 것을 의도적으로 명시
  • null을 할당하는 것은 더 이상 변수가 참조하던 값을 참조하지 않고, 참조를 제거하며, 메모리 공간에 가비지 컬렉션을 수행하게 됨
  • 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null 반환

 

 

데이터타입이 필요한 이유

• 값 저장 시, 확보해야 하는 메모리 공간의 크기 결정
• 값 참조 시, 읽어들어야 하는 메모리 공간 크기 결정
• 메모리에서 읽어 들인 2진수를 어떻게 해석할 지 결정

 

동적타이핑

자바스크립트 변수 : 선언이 아닌 할당에 의해 타입이 결정됨

• 값은 타입을 가지지만 변수는 타입을 가지지 않음
• 재할당에 의해 변수의 타입은 어제든지 동적으로 변할 수 있음 -> 동적 타이핑
• 동적타입 언어 ex) Javascript, Python, PHP, Ruby, Perl, Lisp ...

 

[동적 타입 언어의 구조적 단점]

• 변화하는 변수 값을 추적하기 어렵고, 값을 확인하기 전에는 타입을 확신할 수 없음
• 이로 인해 유연성은 높지만 신뢰성이 떨어짐

 

[변수 사용시 유의사항]

• 변수는 꼭 필요한 경우에 한해 사용
• 변수의 유효범위를 최대한 좁게하여 변수 부작용을 억제
• 전역변수는 최대한 사용x
• 변수보다는 상수
• 변수 이름은 변수의 목적이나 의미를 파악할 수 있도록 네이밍 

 

"컴퓨터가 이해하는 코드는 어떤 바보도 쓸 수 있다. 하지만 훌륭한 프로그래머는 사람이 이해할 수 있는 코드를 쓴다."

- 마틴 파울러

 

코드는 오해하지 않도록 작성해야 하고, 가독성이 좋은 코드가 좋은 코드임

 

 

 

---

7장. 연산자

연산자의 종류 : 산술, 할당, 비교, 논리, 타입 지수 연산

산술 연산자는 새로운 숫자 값을 만들며 불가능한경우 NaN을 반환

 

 

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

'1' + 2 // '12'
1 + '2' // '12'

1 + true // 2

1 + false // 1

1 + null // 1

+undefined // -> NaN
1 + undefined // -> NaN

 

 

비교연산자

비교 연산자

 

• 동등 비교 vs 일치 비교 -> 엄격성 정도의 차이
• 동등 비교(==) : 피연사자 비교시 암묵적 타입 변환을 통해 타입을 일치 시킨 후 같은 값인지 비교
• 일치 비교(===) : 피연산자 비교시 타입도 같고 값도 같은 경우에 한하여 true를 반환

 

삼항 조건 연산자

var x = 2;
var result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

• 첫 번째 피연산자가 true로 평가되면 두 번째 피연산자 반환, false이면 세 번째 피연산자를 반환
• 삼항 조건 연산자 표현식 : 값으로 평가할 수 있는 표현식인 문

 

typeof : 피연산자의 데이터 타입을 문자열로 반환

// notVariable 선언한적 X
typeof notVariable; // undefined

• 선언하지 않은 식별자를 typeof으로 연산 시, ReferenceError가 발생하지 않고 undefined를 반환

 

 

※ 우선순위가 가장 높은것은 () 이며 그 외에는 기억하기 어려우니 ()를 사용하여 명시적으로 우선순위를 조절하는 것을 권장!

 

 

---

8장. 제어문

 

블록문

• 0개 이상의 문을 {}중괄호로 묶은 것으로, 블록문이라 하며 블록문의 끝에는 자체 종결성을 갖기 때문에 ;세미콜론을 붙이지 않음

 

조건문

• JS는 if ... else와 switch의 두 가지 조건문을 제공

 

IF - ELSE 문

• if...else문의 else if의 경우 여러 번 사용 가능하다. 만약 코드 블록 내의 문이 하나라면 중괄호 생략이 가능
• 대부분의 if...else문은 삼항 조건 연산자로 바꿔 쓸 수 있고, 이 삼항 조건 연산자는 값처럼 사용할 수 있어서 유용하지만 조건에 따른 실행내용이 많을 경우, 가독성을 위해 if...else문을 사용하는 것이 좋음

 

swich문

if...else 문의 조건식은 불리언 값으로 평가 되어야하지만 switch 문은 불리언 값 보다 문자열 혹은 숫자인 값인 경우가 많음

switch (표현식) {
  case 표현식1:
    console.log(표현식1);
    break;
  case 표현식2:
    console.log(표현식2);
    break;
  default:
    console.log(마지막);
}

폴스루 : 위와 같이 사용하며 만약 break가 없이 문이 끝날 때까지 모든 케이스를 실행하는 것
default 에는 일반적으로 break를 생략

 

조건이 엄청 많은 경우 if ... else문 보다 switch 문을 사용했을 대, 가독성이 더 좋다면 switch 문을 사용하는 것이 좋음

 

 

 

반복문

 

for 문

• for는 처음 부분에 변수 선언 또는 할당문, 조건식, 증감식이 존재

 

while문

• for 문은 반복 횟수가 명확할 때, while문은 반복 횟수가 불명확할 때 주로 사용

do..while 문

• 코드 블록을 무조건 한 번 이상 실행 

var count = 0;

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

 

 

break 문

• 레이블 혹은 반복문을 탈출하는데 쓰임
• 레이블, 반복문, switch 문의 코드 블록 외에 break를 사용시 SyntaxError가 발생

※ 레이블 문이란 식별자가 붙은 문으로 아래의 예시를 참고

// foo라는 식별자가 붙은 레이블 블록
foo: {
  console.log(1);
  break foo; // foo 레이블 블록문을 탈출한다.
  console.log(2);
}

console.log('Done!');

 

 

// outer라는 식별자가 붙은 레이블 for 문

outer: for (var i = 0; i < 3; i++){
	for (var j = 0; j < 3; j++) {
    	// i + j === 3이면 outer라는 식별자가 붙은 레이블 for 문을 탈출
        if (i + j === 3) break outer;
        console.log(`inner [${i}, ${j}]`);
    }
}

console.log('Done!');

 

레이블 문을 사용하게 되면 외부로 탈출할 때 유용하지만, 흐름이 복잡해져서 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기때문에 권장하진 않음

 

 

 

continue 문

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

 

let count = 0;

for (let i = 1; i < 10; i++) {
  if (i % 2 === 0)
    continue;
  count++;
}

console.log(count); // 5

 

 

---

 

 

/*

초기부분이라 그런가 크게 다른 언어와 다른 부분이 많지 않다.

빠르게 훑고 넘어가도록 하자.

*/