1.값(value)

• 식(표현식expression)이 평가되어 생성된 결과를 말한다.
  평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다.
• 모든 값은 데이터 타입을 가지며, 메모리에 2진수, 즉 비트(bit)의 나열로 저장된다.
• 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다.

변수

• 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름

  var sum = 30+40;
  //변수에는 30+40이 평가되어 생성된 숫자 값 70이 할당 (할당 이전에 평가되어 값 생성 -> sum변수에 할당)

2.리터럴(literal)

사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법(notation)을 말한다. => 값을 생성하기 위해 미리 약속한 표기법

5 // 숫자 리터럴

사람이 이해할 수 있는 아라비아 숫자를 사용해 숫자 리터럴 3을 코드에 기술하면 js엔진은(코드가 실행되는 시점인 런타임에 리터럴을 평가해 값을 생성) 이를 평가해 숫자 값 3을 생성한다.

• 아라비아 숫자, 알파벳
• ' ', " ", . , [ ], { }, // 등

3.표현식(expression)

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

var score =99;

변수 식별자를 참조하면 값 생성 x, 값으로 평가된다.

score;

이처럼, 표현식은 리터럴 / 식별자(변수, 함수 등의 이름) / 연산자 / 함수 호출 등의 조합으로 이뤄질 수 있다.
값으로 평가될 수 있는 문은 모두 표현식이다.

• '표현식'과 '표현식이 평가된 값'의 관계는 동치(동등한 관계)
• 산술 연산자 +의 좌항과 우항에는 숫자 값이 위치해야 한다.
• 이때 숫자 값으로 평가될 수 있는 표현식이라면 숫자 값 대신 사용가능

4. 문(statement)

• 문과 표현식을 구별하고 해석할 수 있다면 js엔진 입장에서 코드를 읽고 실행 결과를 예측하는데 도움이 된다. =버그 줄이고, 코드 품질 향상

• 문은 프로그램을 구성하는 기본 단위이자 최소 실행 단위다.
  문의 집합 = 프로그램 , 문을 작성 순서에 맞게 나열= 프로그래밍

• 문은 여러 토큰으로 구성. token이란 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소를 의미
  ex) 키워드, 식별자, 연산자, 리터럴, 세미콜론(;)이나 마침표(.) 등의 특수 기호는 문법적인 의미를 가지며, 문법적으로 더 이상 나눌 수 없는 코드의 기본 요소 =토큰

• 문은 선언문, 할당문, 조건문, 반복문 등으로 구분할 수 있다.
  변수 선언문을 실행하면 변수가 선언되고, 할당문을 실행하면 값이 할당된다. 조건문을 실행하면 지정한 조건에 따라 실행할 코드 블록({..})이 결정되어 실행되고 반복문을, 실행하면 특정 코드 블록이 반복 실행된다.

5. 세미콜론과 세미콜론 자동 삽입 기능

• 세미콜론(;)은 문의 종료를 나타낸다. 즉, js엔진은 세미콜론으로 문이 종료한 위치를 파악하고 순차적으로 하나씩 문을 실행한다.
• 단, 0개 이상의 문을 중괄호로 묶은 코드 블록({...}) 뒤에는 세미콜론을 붙이지 않는다. ex) if문, for문, 함수 등의 코드 블록 뒤에는 세미콜론을 붙이지 않는다. 이러한 코드 블록은 언제나 문의 종료를 의미하는 자체 종결성(self closing)을 갖기 때문이다.
• 문의 끝에 붙이는 세미콜론은 옵션, 이는 js엔진이 소스코드를 해석할 때 문의 끝이라고 예측되는 지점에 세미콜론을 자동으로 붙여주는 세미콜론 자동 삽입 기능(ASI automatic semicolon insertion)이 암묵적으로 수행되기 때문이다. (but 세미콜론 권장분위기)

6. 표현식과 표현식이 아닌 문

• 표현식인 문은 값으로 평가될 수 있는 문 or 표현식이 아닌 문 : 값 평가 x
  ex) 변수 선언문은 값으로 평가될 수 없다. 따라서 표현식이 아닌 문
• 이처럼 표현식과 문은 비슷해서 구별하기 어렵다고 느낄 수 있다.
  -> 표현식인 문과 표현식이 아닌 문을 구별하는 가장 간단하고 명료한 방법: 변수에 할당해 보는 것이다. 표현식인 문은 값으로 평가되므로 변수에 할당할 수 있다. 하지만 표현식이 아닌 문은 값으로 평가할 수 없으므로 변수에 할당하면 에러가 발생한다.

  //표현식이 아닌 문은 값처럼 사용할 수 없다
  var foo = var x;
  //변수 선언문은 표현식이 아닌 문
  var x;
  //할당문은 그 자체가 표현식이지만 완전한 문이기도 하다. 즉, 할당문은 표현식인 문이다
  x=100;

x=100은 그 자체가 표현식이다. 즉, 할당문은 표현식인 문이기 떄문에 값처럼 사용할 수 있다.

// 포현식인 문은 값처럼 사용할 수 있다.
var foo = x= 100;
console.log(foo); //100

할당문을 값처럼 변수에 할당. 표현식인 문인 할당문을 할당한 값으로 평가된다.
즉, x=100은 x변수에 할당한 값 100으로 평가된다. 따라서 foo변수에는 100이 할당된다.

완료값(completion value)

크롬 개발자 도구에서 표현식이 아닌 문을 실행하면 언제나 undefined를 출력한다. 이를 완료값이라 한다. 완료 값은 표현식의 평가 결과가 아니다. 따라서 다른 값과 같이 변수에 할당할 수 없고 참조할 수도 없다. => 개발자 도구에서 표현식이 아닌 문을 실행하면 완료값 undefined를 출력한다.

var foo = 10; // undefined
if (true) {} //undefined

(+)

undefined: var키워드로 선언된 변수에 암묵적으로 할당되는 값

js 공부방법

4장, 6장, 7장,

문자열 타입
텍스트 데이터 타입을 말하는 것이며 ( 작은따옴표, 큰따옴표, 백틱 ) 으로 표기 가능
따옴표, 백틱으로 감싸지 않을 경우 키워드, 식별자로 인식함.

이스케이프 문자 ₩ 개행정도로 알면 된다.
따옴표 문다열에서 이스케이프 시퀀스를 사용하거나 백틱에서 엔터쳐서 하는것은 같은 결과값을 가ㅣㄴ다.
백틱 외에 ${first} 입력할 경우 그대로 통째로 출력된다.
백틱사용해야함.

불리언 타입
true, false
let a =null;
심벌타입 변경 불가능한 원시 타입 값
다른값과 중복되지 않는 유일무이한 값
메인 페이지 id 값에 사용하지 않을까??
js는 같은 값을 가지고 있으면 변수의 주소는 다를지라도 가르키고 있는 주소는 같다.

7개 제외 모두 객체 타입
number 부동소수점 형식 따름 but 문자는 표준화x (제조사마다 다름)
데이터 타입이 필요한 이유는 메모리에 값을 저장하려면 먼저 확보해야할 메모리 크기 결정해야함
타입에 따라 메모리의 낭비와 손실 없이 값 저장할 수 있기때문이다.
숫자 8바이트 단위로 메모리를 잡아서
정적언어는 정확한 타입 지정으로 콬드의 신뢰성 상승(타입의 일관성 강제)
변수 사용 범위 최소화, 전역변수 사용자제 , const 많이 사용할 것
변수 이름 명확하게 지을 것.
변수를 선언

숫자와 문자 나누었을때 발생하는 에러 NaN (Not-a-number)

연산자 - 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산등을 수행해 하나의 값을 만드는 것.
실행 phase - js가 관리하기 위해 변수, 메모리공간 코드체크 평가한다.
num+ undefined = NaN

동등비교 = 엄격성의 정도가 다르다. 타입 비교, 값 비교
일치비교는 타입을 일치시키지않고 타입의 값을 비교한다.
값과 타입이 모두 같아야 true를 반환한다.

NaN===NaN
NaN은 다른 모든 값과 비교(==, !=, ===, !==)했을 때 같지 않으며, 다른 NaN과도 같지 않습니다. NaN의 판별은 Number.isNaN() 또는 isNaN()을 사용하면 제일 분명하게 수행할 수 있습니다.
아니면, 오로지 NaN만이 자기자신과 비교했을 때 같지 않음을 이용할 수도 있습니다.

var x; x=1;
x++//2 증가 감소 연산자는 피연산자의 값을 변경하는 부수 효과가 있다.
delete연산자는 객체의 속성을 제거하는 효과가 있다.
key 에서 속성 중 하나 삭제하고 찍어보면 undefined 나온다.
but 변수이름 출력해보면 key도 안나옴.
++i 의미 i +=1
(i 값 자체가 바뀐다)

07.연산자

하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산(operation) 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자(operand)라 한다.
피연산자는 값으로 평가될 수 있는 표현식이어야 한다.
그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.

8장

제어문 control flow statement

제어문은 조건에 따라 코드 블록을 실행하거나 반복 실행할 때 사용한다. 일반적으로 코드는 위에서 아래로 실행되지만, 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.

~나중에 살펴볼 forEach, map, filter, reduce같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성 해결하려고 노력한다.

블록문 block statement/ compound statement
블록문은 0개 이상의 문을 중괄호로 묶은것. (코드블록 =블록 )
js는 블록문을 하나의 실행 단위로 취급한다.
일반적으로 문의 종료를 세미콜론으로 종료를 알리지만 블록문은 자체 종결성을 갖고있어 세미콜론으로 종료를 알려줄 필요가 없다.

조건문 conditional statement
조건문으로 우리가 자주 사용하는 if ~else문과 switch문이 있다.
if문의 경우 코드블록내의 문이 하나뿐이라면 중괄호를 생략할 수 있다.
if('화랑') console.log('담배')

fall through : 그 이후로도 스위치 탐색하지 못하고 계속 실행될 경우를 말한다.= ( switch에서 break문이 없는 경우 아래 계속 실행된다)

반복문은 대표적으로 for문, while문 dowhile문이 있다.
for문은 조건식의 평가결과가 true일 경우 코드블록이 실행되는데, 증감문으로 실행 흐름이 이동하는 것이 아니라 코드 블록으로 실행 흐름이 이동한다는 것에 주의하자.
for( 변수 선언문; 조건식; 증감식){...}
for(;;){,,,} = 어떤 식도 선언하지 않으면 무한루프가 된다.

while문은 반복횟수가 불명확할 때 주로 사용한다.
do while문은 코드블록을 먼저 실행하고 조건식을 평가하기 때문에 무조건 한 번 이상 실행된다.

반복문을 대체할 수 있는 다양한 기능
-forEach : 배열을 순회할 때 사용
-for in : 객체의 프로퍼티 열거할 때 사용
-for of : ES6에서 도입된 이터러블을 순회할 때 사용

break문
레이블문, 반복문, switch문의 코드 외에 사용할 경우 SyntaxError가 발생한다. 만약 이중 for문에서 내부 for문에 break문을 사용할 경우 내부 for문에서만 빠져나오고 외부는 계속 진행된다. 이때, 레이블 문을 사용하면 외부 for문까지 탈출할 수 있다. 그 외의 경우는 일반적으로 권장하지 않는다.

out이름: for(let i=0; i<3; i++){
for(let j=0; j<3; j++){
if(i+j ==3) break out이름;
console.log(inner [${i}, ${j}]);}}

label문은 식별자가 붙은 문을 말한다.
foo:console.log('foo');

continue문 continue statement

반복문의 코드 블록 실행을 현 지점에서 중단하고 반복문의 증감식에서 실행 흐름을 이동시킨다. break문과 중단한다는 것은 같지만 탈출하지는 않는다.

• 번외 - 해당하는 문자열 찾기
  const regexp = new RegExp('l','g'); //정규표현식 객체 생성
  console.log(string.match(regexp).length);
  //match: 해당하는 문자열을 배열 형태로 반환하는 함수.
  ₩g₩ = 정규표현식 모든 문자찾아라
  l 개수 다 나온다. hello world => lll 3개

9장 타입변환, 단축변환?

• 명시적 타입 변환 (explicit coercion)
  개발자가 의도적으로 값의 타입을 변환하는 것( 코드에서 개발자의 의도가 명백히 드러난다 )

문자열 타입으로 변환

1. object.prototype.toString 메소드를 사용
2. String 생성자 함수를 new 연산자 없이 호출하는 방법
   toString문법.
3. '+' 문자열 연결 연산자를 이용하는 방법

숫자 타입으로 변환

Number생성자 함수를 new 연산자 없이 호출하는 방법
parseint, parseFloat함수를 사용하는 방법 (문자열만 변환가능)
문자 +숫자 = 문자( 암묵적 타입변환)
암묵적 타입 변환은 기존 변수값을 재할당하여 변경하는 것이 아닌, 피연산자의 값을 암묵적 타입 변환해 새로운 타입의 값을 만들어 단 한번 사용하고 버린다.

Boolean 변환

-false=0 =''=0
-0이라는 값은 별도로 있다. 0과 다른 값이다. 딥다이브 82쪽
Object is(0,0)= true
Object is(0,-0)=false
문자열 타입으로 변환

• 문자열 연결 연산자 모든 피연산자는 코드의 문맥상 모두 문자열 타입이다.
  복잡할 때는 명시적 > 묵시적 타입 변환

#단축평가 (Short-Circuit evaluation)

true || anything true
flase|| anything anything
true && anything anything
false && anything false

예외처리?

옵셔널 체이닝 연산자

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

var elem = null;
var value =elem?.value;
console.log(value); //undefined

null병합 연산자

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

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

undefined +10
Nan
있을 수도 있고, 없을 수도 있는?
쿼리셀렉터-> div
div id="react-page"

document. querySelector('.hello')

null
document. querySelector('.hello').ineerHTML =''
.hello가 있을수도 없을 수도 있다.
의도한 것하면 동작 한다..
null일 수도, 아닐 수도 있으니까.

많이 쓰이나.? 겁나 쓰인다!!

spec에 나와있다

삼항조건 연산자

조건식의 평가 결과에 따라 반환할 값 결정. 자바스크립트의 유일한 삼항 연산자이며, 부수 효과는 없다.
조건식 ? 조건식이 true일 때 반환할 값: 조건식이 false일 때 반환할 값

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