모던 딥 자바스크립트 6 -10장

목차

• 06장. 데이터 타입
• 07장. 연산자
• 08장. 제어문
• 09장. 타입 변환과 단축 평가
• 10장. 객체 리터럴

 

---

06장. 데이터 타입

구분	데이터 타입	설명
원시타입 (변경불가)	숫자	정수와 실수 구분 없이 숫자
	문자열	문자열
	불리언	true / false
	undefined	암묵적으로 할당되는 값
	null	값이 없다는 것을 의도적 명시
	symbol
객체타입		객체,함수,배열 등

 

자바스크립트의 모든 값은 데이터 타입을 갖는다. 

변수의 할당되는 값의 데이터 타입에 따라 확보해야 할 메모리 공간의 크기가 결정된다.

 

데이터 타입이 필요한 이유는 다음과 같다.

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

---

1. 숫자(Number)

- 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다.

- 모든 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다.

• Infinity:양의 무한대
• -Infinity:음의 무한대
• NaN : 산술 연산 불가(not a number)

2. 문자열(String)

- 문자열은 작은따옴표(') , 큰따옴표("),백틱(`)으로 텍스트를 감싼다.

- + 연산자를 사용해 문자열을 연결할수있다.

- 템플릿 리터럴(ES6 도입)

• 문자열을 백틱(`)으로 감싸며, 줄바꿈과 모든 공백이 있는 그대로 허용된다.
• 표현식 삽입을 통해 문자열을 조합 할 수 있다. 표현식은 ${ } 으로 감싼다. 

3. 불리언(Boolean)

- 불리언 타입의 값은 참(true)과 거짓(false) 뿐이다.

4. undefined

변수를 선언한 이후 값을 할당하지 않으면 undefined가 반환된다. -> 초기화 되지 않은 변수

자바스크립트 엔진이 변수를 초기화 할때 사용하는 값이다.

5. null

변수에 값이 없다는 것을 의도적으로 명시할때 사용한다.

6.심벌(symbol)

다른값과 중복되지 않는 유일무이한 값이다.

생성된 심벌값은 외부에 노출되지 않으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다.

7.객체

자바스크립트는 객체기반의 언어이며, 6가지 원시타입 이외의 값은 모두 객체다.

---

동적타이핑

 

정적타입언어 ( C, C++,JAVA,GO,코틀린,러스트,스칼라)

- 변수 선언 시점에 변수의 타입이 결정되고, 변수의 타입을 변경할 수 없다.

- 명시적 타입 선언이라 한다.

 

동적타입언어 ( 자바스크립트,Python,PHP,Ruby,리스프,펄 )

- 값을 할당하는 시점에 변수의 타입이 동적으로 결정되고, 변수의 타입을 언제든 변경할 수 있다.

- 변수는 선언이 아닌 할당에 의해 타입이 결정(타입추론)

- 동적 타입언어는 유연성은 높지만 신뢰성은 떨어진다

• 변수의 무분별한 남발은 줄이고, 최소한으로 유지하도록 주의
• 변수의 스코프는 최대한 좁게 만들어 부작용 억제
• 변수보다는 상수(const)를 사용해 값의 변경을 억제
• 변수의 이름은 목적이나 의미를 파악할 수있게 심사숙고해서 지어야한다.       

---

07장.연산자

산술연산자

- 이항산술 연산자 ( 덧셈( + ) , 뺄셈( - ), 곱셈( * ), 나눗셈( / ), 나머지( % )

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

- 단항산술 연산자 ( ++증가,  --감소 , + , - )

전위 증가/감소 연산자 : 피연산자의 값을 증가/감소 시킨 후 ! 다른 연산 수행 ++x --x 
후위 증가/감소 연산자 : 다른 연산을 수행한 후 ! 피연산자의 값을 증가/감소 x++ x--

 

할당연산자

우항에 있는 피연산자의 평가결과를 좌항에 있는 변수에 할당한다.

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

var x = 10
x += 5 // x = x+5 // 15 
x -+ 5 // x = x-5 // 10
x *= 5 // x = x*5 // 50
x /= 5 // x = x/5 // 10
x %= 5 // x = x%5 // 0

 

비교연산자

동등비교연산자 (느슨한 비교) : 암묵적 타입 변환을 통해 타입을 일치시킨 후 값을 비교

일치 비교 연산자 (엄격한 비교) : 값도 같고, 타입도 같아야 true

==	동등 비교	암묵적 타입변환 후 값이 같으면 true를 반환 ( 타입 불일치 O )
!=	부동등 비교
===	일치 비교	값과 타입 둘다 일치해야 true를 반환
!==	불일치 비교

 

 

대소 관계 비교 연산자

>	초과
>=	이상
<	미만
<=	이하

 

 

삼항 조건 연산자

삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식 문이다 = 값처럼 쓸 수 있다.

 조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일때 반환할 값 

 

논리 연산자

||	논리합 (OR)
&&	논리곱 (AND)
!	부정 (NOT)

 

쉼표 연산자

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

 

그룹연산자

소괄호 () 로 감싸는 그룹연산자는 우선순위가 가장 높다.

 

typeof 연산자

피연산자의 데이터 타입을 문자열로 반환한다.

값이 null타입인지 확인할때는 일치연산자(===)를 사용하자.

 

지수연산자(ES7도입)

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

2 ** 2; // 4
2 ** 0; // 1
2 ** 5; // 32

---

08장.제어문

블록문
0개 이상의 문을 중괄호로 묶은 것으로 코드 블록 혹은 블록이라고 부른다.

자바스크립트는 블록문을 하나의 실행 단위로 취급한다.

블록문은 언제나 문의 종료를 의미하는 자체 종결성을 갖기 때문에 세미클론을 붙이지 않는다.

 

조건문( if...else문 / switch문 )

 

(1) if...else문

• 논리적 참,거짓으로 실행할 코드블록을 결정한다.
• 코드 블록 내의 문이 하나라면 중괄호 생략가능하다.
• 대부분의 if...else 문은 삼항 조건 연산자로 바꿔 쓸 수 있다.
• if...else문은 표현식이 아니기 때문에 변수에 할당할 수 없다.(삼항 조건연사자는 표현식이기때문에 변수할당 가능)

* 삼항 조건 연산자
조건식 ? 조건식이 true일 때 반환할 값 : 조건식이 false일때 반환할 값 

if(조건식) {
 //조건식이 참이면 코드 블록 실행
 }else if (조건식 2) {
 //조건식2가 참이면 코드 블록 실행
 }else {
  // 조건식1과 조건식2과 거짓이면 이 코드 블록 실행
  }
  
  // 문이 하나면 중괄호 생략가능
  let num = 2;
  let kindl
  if (num < 0 ) kind = "음수" ;

 

(2) swich 문

• 다양한 상황(case)에 따라 실행할 코드 블록을 결정할 때 사용한다.
• break 코드 블록에서 탈출하는 역할
• default 맨 마지막에 위치하므로 실행이 종료되면 자동으로 switch문을 빠져나간다 -> break 생략

switch(표현식) {
 case 표현식1:
   switch 문의 표현식과 표현식이1이 일치하면 실행;
   break; //코드 블록에서 탈출하느 ㄴ역할
 case 표현식2:
   switch 문의 표현식과 표현식2가 일치하면 실행;
   break;
 default: // break을 생략
   switch 문의 표현식과 일치하는 case가 없을때 실행;
 }

 

반복문 ( for문 / while문 / do...while문 )

 

(1) for문

• 조건식이 거짓으로 평가될 때 까지 코드 블록을 반복 실행한다.
• 변수 선언문은 단 한번만 실행
• 반복횟수가 명확할때 주로 사용

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

for(;;){ ... } // 무한루프

 

(2) while문

• 평가 결과가 참이면 코드 블록을 계속해서 반복 실행한다.
• 반복 횟수가 불명확할 때 주로 사용

(3) do ... while문

• 코드 블록을 먼저 실행하고 조건식을 평가한다(-> 코드 블록은 무조건 한번 이상 실행 )

---

09장. 타입 변환과 단축 평가

자바스크립트의 모든 값은 타입이 있다.

타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다.

타입 변환 결과를 예측하지 못하거나 예측이 일치하지 않는다면 오류를 생산할 가능성이 높아진다.

개발자가 의도적으로 값의 타입을 변환하는 명시적타입변환(타입 캐스팅)과 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되는 암묵적 타입(타입 강제 변환)이 있다.

 

암묵적 타입 변환 ( 자바스크립트 엔진이 코드의 문맥을 고려해 암묵적으로 타입 강제 변환)

(1) 문자열 타입으로 변환

0 + '' // "0"
NaN + '' // "NaN"
true + '' // "true"

// + 연산자는 하나 이상이 문자열이면 문자열 연결 연산자로 동작한다.

 

(2) 숫자 타입으로 변환

// 산술 연산자의 피연산자 중 숫자타입이 아니면 강제 타입변환

1 * "10" // 10
1 / "red" // NaN
"2" > 0 // true

// + 단항 연산자는 숫자 타입의 값으로 암묵적 타입 변환
+"1" // 1
+false // 0
+undefined // NaN

 

(3) 불리언 타입으로 변환

• 자바스크립트 엔진의 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환 한다.
• Falsy 값 : false, undefined, null, 0, -0, NaN , ' '(빈문자열)
• Truthy 값 : Falsy값 이외의 모든 값

---

명시적 타입 변환( 개발자의 의도에 따라 명시적으로 타입을 변경)

(1) 문자열 타입으로 변환하는 방법

• String 생성자 함수 사용
• Object.prototype.toString 메서드 사용
• 문자열 연결 연산자(+) 사용

String(1); // "1"
String(true); // "true"

(Infinity).toString(); // "Infinity"

NaN + ''; // "NaN"

 

(2) 숫자 타입으로 변환

• Number 생성자 함수
• + 단항 산술 연산자 
• * 산술 연산자 
• 문자열→숫자 parseInt , parseFloat 함수 사용

Number("3.14"); //3.14
Number(false); // 0

+'true'; // 1
10.53 * 1; // 10.53

parseInt("0"); // 0

 

(3) 불리언 타입으로 변환하는 방법

• Boolean 생성자 함수 사용
• ! 부정 논리 연산자 두번 사용 

---

10장. 객체 리터럴

자바스크립트는 객체 기반의 프로그래밍 언어이며, 원시 값을 제외한 모든것이 객체다.

객체 타입은 다양한 타입의 값을 하나의 단위로 구성한 복합적인 자료구조다.

변경 불가능한 원시 값과는 다르게 객체 타입의 값은 변경이 가능하다.

 

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다.

• 프로퍼티 : 객체의 상태를 나타내는 값 ( 키와 값으로 구성)
  • 키(key) : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값 (식별자 역할을 한다)
  • 값(value) : 자바스크립트에서 사용할 수 있는 모든 값
• 메서드 : 프로퍼티를 참조하고 조작할 수 있는 동작 -> 프로퍼티 값이 함수인 경우 method라고 부른다.

자바스크립트는 프로토타입 기반 객체지향언어로 다양한 객체 생성 방법을 지원한다.

• 객체 리터럴 : 사람이 이해할 수 있는 문자/약속된 기호
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스

---

객체 리터럴

사람이 이해할 수 있는 문자 또는 약속된 기호를 사용하여 값을 생성하는 표기법을 말하며, 자바스크립트의 유연함과 강력함을 대표하는 객체 생성 방식이다.

중괄호 { } 내에 0개 이상의 프로퍼티를 정의한다.(표현식)

• 여기서 중괄호는 코드블록을 의미하지 않기 때문에 중괄호 뒤에 세미클론을 붙인다.

프로퍼티 접근 방법

객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

• 마침표 표기법 : ( . ) 사용
• 대괄호 표기법 : ( [ "  " ] ) 사용
  • 대괄호 내부 프로퍼티 키는 반드시 따옴표로 감싼 문자열이여야 한다.
  • 프로퍼티 키가 식별자 네이밍 규칙을 준수하지 않는 이름이면, 대괄호 표기법을 사용해야 한다.
  • 프로퍼티 키가 숫자로 이루어진 문자열인 경우 따옴표로 생략할 수 있다.

 

let person ={
	name : "Lim",
    age : 28
 };
 
 let empty = {}; // 빈 객체
 
 person.name; // 마침표 표기법
 pserson["age"]; // 대괄호 표기법

---

프로퍼티 값 갱신 

이미 존재하는 프로퍼티에 값을 할당하면 값이 갱신된다.

 

프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 동적으로 생성되어 값이 할당 된다

 

프로퍼티 삭제

존재하는 프로퍼티 값을 delete 연산자를 사용해 삭제할 수 있다.

 

ES6 객체 리터럴 확장기능

프로퍼티 값으로 변수를 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일때 프로퍼티 키를 생략할 수 있다.