모던자바스크립트 deep dive 정리(1~8)

자바스크립트 기초를 탄탄히 하고자 구입한책!

책을 읽으면서 중요한 내용을 타이핑 하면서 한번더 정리해 볼 것이다.

 

 

4장 변수

 

4.1변수란 무엇인가? 왜필요한가?

 

10,20,+ 라는 기호(리터럴과 연산자)의 의미를 알고 있어야하며 , 10+20 이라는 표현식의 의미도 해석(파싱)할 수 있어야 한다.

=>메모리는 데이터를 저장할 수 있는 메모리 셀의 집합체 이다. 

각 셀은 메모리 주소를 갖는다 이메모리 주소는 메모리 공간의 위치는 나타내며 

숫자값 10 과 20은 메모리 상의 임의의 위치(메모리 주소)에 기억(저장)되고 cpu는 이 값을 읽어 들여 연산을 수행한다 .

메모리에 저장되는 모든 값은 2진수로 저장.

연산이 끝나면 연산결과도 메모리에 저장되지만 cpu가 연산해서 만들어 낸 숫자값 30은 재사용할 수 없다.

프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 메커니즘을 제공한다.

변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름을 말한다.즉 변수는 프로그래밍 언어에서 값을 저장하고 참조하는 메커니즘으로 값의 위치를 가르키는 상징적인 이름이다.

var result = 10 +20;

변수에 값을 저장하는 것을 할당(대입,저장)이라 하고, 변수에 저장된 값을 읽어 들이는 것을 참조 라고 한다.

 

4.2식별자

 

변수이름을 식별자 라고도 한다. 식별자는 어떤 값을 구별해서 식별할 수 있는 고유한 이름을 말한다.

식별자는 값이 아니라 메모리 주소를 기억하고 있다 실벽자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 뜻이다 즉 실벽자는 메모리 주소에 붙인 이름이라고 할수있다

변수 ,함수,클래스등의 이름은 모두 식별자이다. 메모리 상에 존재하는 어떤값을 식별할수 있는 이름은 모두 식별자이다

 

4.3 변수선언

 

변수선언이란 변수를 생성하는 것을 말한다 변수를 사용하려면 반드시 선언이 필요하다. 변수를 선언할 때는 var ,let,const 키워드를  사용한다

var score

+변수 선언한 이후 아직 변수에 값을 할당하지 않았다. 

변수 선언에 의해 확보된 메모리 공간은 비어있는것이 아니라 자바스크립트 엔진에 의해 undefined 이라는 값이 암묵적으로 할당되어 초기화 된다

 

4.4 변수선언의 실행 시점과 변수 호이스팅 

console.log(score) //undefined

var score;// 변수 선언문

변수 선언문 보다 변수를 참조하는 코드가 앞에있다. 자바스크립트 코드는 인터프리터에 의해 한줄씩 순차적으로 실행되므로 console.log(scroe)가 가장 먼저 실행되고 순차적으로 다음 줄에 있는 코드를 실핸한다.

그 이유는 변수선언이 소스코드가 한줄씩 순차적으로 실행되는 시점, 즉 런타임이 아니라 그 이전 단계에서 먼저 실행되기 때문이다 

이처럼 변수선언문이 코드의 선두로 끌어 올려진 것처럼 동작 하는 자바스크릅티의 고유한특징을 변수 호이스팅 이라고한다

 

4.5 값의 할당

var scrore; //변수 선언

score = 80; //값의 할당

변수선언은 소스코드가 순차적으로 실행되는 시점인 런타임 이전에 먼저 실행되지만 값을 할당은 소스코드가 순차적으로 실행되는 시점인 런타임에실행된다.

 

4.6값을 재할당

var score=80; //변수 선언과 값을 할당

score=90; // 값의 재할당

재할당은 변수에 저장된 값을 다른값으로 변경한다 . 그래서 변수라고 하는것

만약 값을 재할당할수 없어서 변수에 저장된 값을 변경할 수 없다면 변수가 아니라 상수라고 한다 .

 

5장 표현식과 문 

 

5.1값

 

값은 표현식이 평가 되어 생성 된 결과를 말한다 .

var sum = 10 +20// 변수에는 10 +20이 평가되어 생성된 숫자 값 30이 할당된다.

 

5.2리터럴

리터럴은 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법을 말한다.

 

5.3 표현식

표현식은 값으로 평가될 수 있는 문이다. 즉 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조한다.

var score = 50+50;

=>위는 리터럴과 연산자로 이뤄져 있다 . 50+50 평가되어 숫자값 100을 생성하므로 표현식이다. 

 

5.4문

 

문은 프로그램을 구성하는 기본단위이자 최소 실행 단위다 . 

토큰이란 문법적인 의미를 가지며,문법적으로 더이상 나눌 수 없는 코드의 기본요소를 의미한다.

 

5.6 표현식인 문과 표현식이 아닌문

 

표현식인 문과 표현식이 아닌문을 구별하는 가장 간단하고 명료한 방법은 변수에 할당해 보는것

표현식인 문은 값으로 평가되므로 변수에 할당 할 수 있다.

하지만 표현식이 아닌문은 값으로 평가할수없으므로 변수에 할당하면 에러가 발생한다.

 

 6장 데이터 타입 

 

데이터 타입은 값의 종류를 말한다. 자바스크립트에서 모든 값은 데이터 타입을 갖는다 .총 7개

 

구분	데이터 타입	설명
원시타입	숫자타입	숫자,정수와 실수 구분없이 하나의 숫자 타입만 존재
	문자열 타입	문자열
	불리언 타입	논리적 참과 거짓
	undefinded 타입	var 키워드로 선언된 변수에 암묵적으로 할당 되는값
	null 타입	값이 없다는 것을 의도적으로 명시할때 사용하는값
	심벌 타입	es6에 추가된 타입
객체타입		객체,함수,배열 등

6.1 숫자타입

자바스크립트 숫자타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다 .이는 정수로 표시된다 해도 사실은 실수라는것

즉 정수로 표시되는 수끼리 나누더라도 실수가 나올수 있다.

 

6.2문자열 타입

문자열은 작은따옴표(' '), 큰따옴표(" ") 또는 백틱(` `)으로 감싼다. 일반적으론 작은따옴표 사용

 

6.3 템플릿 리터럴

<이스케이프 시퀀스>

문자열 내에서 줄바꿈등의 공백을 표현하기 위해

\n 다음행으로 이동

\t 들여쓰기

<표현식 삽입>

var first = 'Ung - mo ';

varr last = 'Lee';

console.log(`my name is ${first} ${last}.`); // my name is ung-mo Lee

 

console.log(`1+2 = ${1+2}`); // 1+2 = {1+2}

 

6.4 불리언 타입

논리적 참거짓 true , false

 

6.5 undefined 타입

var 키워드로 선한 변수는 암묵적으로 undefined 으로 초기하됨

 

6.6 null 타입

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

 

6.7 심벌타입

es6에서 추가된 7번째 타입으로 변경 불가능한 원시타입의 값이다 . 

심벌값은 다른 값과 중복 되지 않는 유일무이한 값 즉 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용

 

6.8 객체타입

자바스크립트를 이루고있는 거의 모든 것이 객체

 

6.9 데이터 타입의 필요성

-값을 저장할 때 확보해야하는 메모리 공간의 크기를 결정하기위해

-값을 참조할 때 한번에 읽어 들여야 할메모리 공간의크기를 결정하기 위해

-메모리에 읽어 들인 2진수를 어떻게 해석해야 할지 결정하기 위해

 

6.10 동적 타이핑

자바스크립트의 변수는 선언이 아닌 할당에 의해 타입이 결정 된다.

그리고 재할당에 의해 변수타입은 언제든지 동적으로 변할수 있다.

이러한 특징을 동적 타이핑 이라하며 자바스크립트를 동적 타입언어라고 한다

+ 자바스크립트 , 파이썬, php,루비 ,리스프 , 펄 등이 있다

 

7장 연산자

 

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

이때 연산의 대상을 피연산자라 하며 피연사자는 값으로 평가될 수 있는 표현이여야 한다.

그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

 

7.1 이항 산술 연산자 

+ = * / %

 

    단항 산술 연산자

++ -- + = 

=>이항 산술 연산자와는 달리 증가/감소(++ / --) 연산자는 피연산자의 값을 변경하는 부수 효과가 있다는것.

 

7.2 할당 연산자

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

할당연산자는 좌항의 변수에 값을 할당하므로 변수값이 변하는 부수효과가 있다.

= , +=, -= , *= ,/= ,%=

 

7.3 비교 연산자

좌항과 우항의 피연산자를 비교한 다음 그결과를 불리언 값으로 변환한다.

비교 연산자는if문이다 for문과 같은 제어문의 조건식에서 주로 사용

비교연산자	의미	사례	설명	부수효과
==	동등비교	x==y	x와y의 값이 같음	X
===	일치비교	x===y	x와 y의 값의 타입이같음	X
!=	부동등 비교	x!=y	x와 y의 값이 다름	X
!==	불일치 비교	x!==y	x와 y의 값과 타입이 다름	X

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

 

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

 

NaN은 자신과 일치하지않는 유일한값이다.

따라서 숫자가 NaN인지 조사히려면 빌트인 함수 Number.isNan을 사용한다

 

Number.isNan(NaN) // true

Number.isNan(10); // false

Number.isNan(1 + undefined) ; //true

 

object.is 메서드 : 예측가능한 정확한 비교 결과를 반환

-0 === +0 //true

Object.is (-0 ,+0) // false

 

Nan ===Nan //false

object .is(Nan,Nan) ; //true

 

7.4 삼항 조건 연산자

 

var result = score >=60 ? 'pass' : 'fail'

첫번째 피연산자가 true 로 평가되면 두번째 피연산자를 반환하고 ,첫번째 피연산자가 false로 평가되면 세번째 피연산자를 반환 

 

7.5 논리연산자

|| && !

논리 부정(!)연산자는 언제나 불리언 값을 반환

 

7.6 쉼표 연산자

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

 

7.7 그룹 연산자

소괄호()로 피연산자를 감싸는 그룹연산자는 자신의 피연산자인 표현식을 가장먼저 평가 우선순위가 가장 높음

 

7.8 typeof 연산자

7가지 문자열 "string" , "number", "boolean", " undefined" , "symbol' , "object", "function" 중 하나를 반환한다.

 

7.9 지수 연산자

math.pow(2,2) //4

2**2; //4

2**(3**2); //512

(-5)**2;//25

 

7.11 연산자의 부수효과

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

 

8장 제어문

 

1) 블록문 

   0개 이상의 문을 중괄호로 묶은것 자스는 블록문을 하나의 실행 단위로 취급 일반적으로 제어문이나 함수를 정의할때 사용하는 것이 일반적

2) 조건문

if ... else 문

var x =2

var result;



if(x %2) {  //2%2는 0이다 이때 0은 false를 암묵적으로 강제 변환된다

result = '홀수';

}else{

result = '짝수';

}

console.log(result); //짝수

switch문

var month =2;

var monthName;



switch(month){

case 1 : monthName = 'January';

case 2 :monthName ='feburary';

case 3 : monthName = 'march';

}

console .log(monthName);  // Invalid month

 

'feburary' 가출력 되지않고  Invalid month 가 출력 되는 이유는 default문을 실행하지 않았기때문

이를 풀스루 라고한다 .

 

3) 반복문

for문

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

for (var i = 1, i <=6 , i++){

  for (var j = 1 ; j <=6 ; j ++) {

    if ( i +j ===6)

console.log(` [ ${i} , ${j}] `);

}

}

출력결과 

[1,5]

[2,4]

[3,3]

[4,2]

[5,1]

 

while 문

for문은 반복 횟수가 명확할 때 주로 사용하고 while 문은 반복 횟수가 불명확 할때 주로 사용한다.

var count = 0;

//count가 3보다 자을 때까지 코드 블록을 계속 반복 실행한다

while (count < 3 ) {

 console.log(count); //0 1 2 

count ++;

}

do while 문

var count = 0;

do{

 console.log(count);

count ++;

}while(count < 3) ;

 

4) break문

코드 블록 탈출 

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!);

=> 레이블문은 중첩된 for 문을 외부로 탈출할 때 유용하지만 그밖의 경우에는 일반적으로 권장하지 않는다 .레이블 문을 사용하면 프로그램의 흐름이 복잡해저 가독성이 나빠지고 오류를 발생시킬 가능성이 높아지기 때문이다.

 

var string = 'Hello world.';

var search = 'l'

var index;



for(var i = 0 ; i < string.lengtj; i ++) {

  if (string [i] === search) {

    index= i ;

    break;

  }

}console .log (index ) // 2

 

5)continue문

var string = 'Hello world.';

var search = 'l'

var index;



for(var i = 0 ; i < string.lengtj; i ++) {

  if (string [i] === search) continue;

    count ++; // continue 문이 실행되면 이문은 실행되지 않는다

  

}console .log (count) // 3