1. SPA(Single Page Application) 만들 때 사용된다.
   • 새로고침없이 부드럽게 동작 가능한 페이지
   • vanilla JS로 쓰기에는 소스코드가 너무 길어짐
   • 다른 라이브러리에 비해 React의 사용자가 많고, 오래됨
2. html 재사용 편리
3. 같은 문법으로 앱개발 가능(React Native)
4. 취업할 때 못하면 뽑지를 않는다…..😢

😤React프로젝트 만들기

Power Shell창에서 npx create-react-app 프로젝트이름

• npx는 JS를 스크립트로써 실행시켜주는 환경
• create-react-app은 react를 자동으로 만들어주는 스크립트

blog 폴더 파헤치기❗

• node_modules 폴더 : 라이브러리 코드 보관함
• public 폴더 : static 파일 모아 놓는 곳
• src 폴더 : 코드 짜는 곳

• 웹페이지는 html코드로 이루어져 있는데, index.js가 js파일을 웹페이지로 변경해준다.

🤗레이아웃 만들 때 쓰는 JSX 문법 3개

jsx

• .js파일에서 쓰는 html 대신 쉽게 사용할 수 있는 대체품(부가기능)

  jsx 미사용 시 React에서

  를 만드려면

  React.createElement('div', null, 'Hello World') ← 매우 복잡함

className

• html에서는
  으로 쓰지만, React에서는 className으로 써야 함.
• js문법인 class와 겹침

{} 문법

html

let post = ‘강남 우동 맛집’;
document.querySelector('h4).innerHTML = post;
.
.
.
<h4></h4>

JSX

let post = ‘강남 우동 맛집’;
<h4>{ post } </h4>

style

<h4 style={{color:'red',  fontSize: '16px'}}> 블로그입니다 </h4>

❗style 안에는 object만 들어 올 수 있음❗

😊변수와 state

return()

• return() 안에 소스를 작성해야 함.
• 하나의 태그로 끝나야 함.

변수

• 자료를 잠깐 저장할 때 사용 됨.

State

import { useState } from 'react';

funtion App() {
    let [a,b] = useState('남자 코트 추천');

let [a, b]

a: state에 보관했던 자료

b: 자료를 변경하는데 도움을 주는 state 변경 도와주는 함수

• useSate를 써도 Array 형태로 남는다❗

Array

let num = [1, 2];

let a = num[0];
let c = num[1];

Destructuring 문법

let num = [1, 2];

let [a, c] = [1, 2];

🤔그래서 왜 state를 써야 하는 거지?

• 일반 변수는 갑자기 변경되면 html에서 자동으로 변경이 안됨. → state는 자동 재랜더링 이 됨!
• 화면에 보여지는 자주 변경되는 내용에 대해서 사용하면 편리함.
• 많이 사용하면 랜더링을 자주 하면서 느려진다.

😊버튼 기능 개발 & 리액트 state 변경

let [글제목, b] = useState(["남자 코트 추천", "강남 우동맛집", "파이썬독학"]);

return (
    <div className="App">
      <div className="black-nav">
        <h4> {logo} </h4>
      </div>
      <div className="list">
        <h4> {글제목[0]} </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4> {글제목[1]} </h4>
        <p>2월 17일 발행</p>
      </div>
      <div className="list">
        <h4> {글제목[2]} </h4>
        <p>2월 17일 발행</p>
      </div>
    </div>
  );

✍️warring 메시지 없애는 법

/* eslint-disable */

• 개인적으로는 warring 보여주는 게 편합니다…

onClick ={}

• {}안에는 함수만 들어올 수 있음.

  function 혹은 () ⇒ {}

State변경 하는 법

• 등호를 사용해서는 html상에서 변경이 적용이 안된다.

  따봉 = 따봉 + 1 ← 변경 안됨.

let [따봉, 따봉변경] = useState(0);

return (
.
.
.
{글제목[0]} <span onClick={()=>{따봉변경(따봉+1)}}>👍</span>
.
.
.
)

• 따봉변경은 state 변경용 함수. ← state 변경 ← 재랜더링이 제대로 된다.

React, Angular, Vue라이브러리 중에서 Vue 라이브러리를 공부하는 이유

Vue.js란?

MVVM 패턴을 사용하는 자바스크립트 프레임워크입니다. SPA(Single Page Application) Web-App을 개발할 때 사용자 인터페이스를 만들기 위해 사용됩니다.

1. 배우기 쉽다 - 다른 프레임워크에 비해 배우기 쉽습니다. - 짜야할 코드가 복잡해질수록 다른 라이브러리에 비해 간편하게 소스를 적을 수 있습니다. - 그렇다고 기능이나 성능이 떨어지지 않습니다. - Javascript 문법에 익숙하지 않아도 쉽게 코드 작성이 가능합니다.

2. 코드 작성 방법이 정해져 있다. - v-if 등 문법이 정해져 있어 협업할 때 좋습니다.

3. HTML 렌더링이 빠르다. - React와 Angular보다 렌더링 속도가 빠릅니다.(ms 단위여서 크게 체감될 정도는 아니라고 합니다.)

4. Vue3이 기본 버전이 되다. - 22년 2월 7일부터 Vue3이 기본 버전이 되면서 Vue3 공부를 하려고 합니다.

자바스크립트의 가장 기본적인 데이터 타입

[이번 장에서 공부할 내용]

• 객체 생성
• 검색
• 설정
• 삭제
• 테스트
• 프로퍼티 열거

6.1 객체 소개

객체는 복합된 값이다.

- 객체는 여러가지 값(기본 값이나 다른 객체)을 모아서 이름을 통해 값을 저장하고 가져올 수 있게 한다. - 객체는 프로퍼티의 순서 없는 집합이며 각 프로퍼티에는 이름과 값이 있다. - 프로토타입으로 불리는 다른 객체에서 프로퍼티를 상속하기도 한다.

• 객체

  • 문자열, 숫자, 심벌, true, false, null, undefined가 아닌 값
  • 가변이며 값이 아닌 참조로 조작한다.

• 프로퍼티

  • 이름과 값이 있다. - 프로퍼티 이름에는 빈 문자열과 심벌을 포함해 어떤 문자열이든 쓸 수 있다 - 프로퍼티는같은 이름을 가질 수 없다. - 상속되지 않은 프로퍼티를 가리켜 자체 프로퍼티(own property)라고 부른다.

** 🔔프로퍼티 속성 **

1. 쓰기 가능(writable) - 프로퍼티에 값을 설정할 수 있는지 없는지를 나타낸다.
2. 열거 가능(enumerable) - for/in 루프에 프로퍼티 이름을 반환할지 안 할지를 나타낸다.
3. 변경 가능(configurable) - 프로퍼티를 삭제할 수 있는지 없는지, 속성을 바꿀 수 있는지 없는지를 나타낸다.

6.2 객체 생성

객체를 생성할 때는 객체 리터럴, new 키워드 또는 Object.create() 함수를 사용한다.

6.2.1 객체 리터럴

객체 리터럴

• 가장 단순한 형태는 콜론으로 구분한 이름:값 쌍을 콤마로 구분해 중괄호로 감싼 형태

let empty = {};                                // 프로퍼티가 없는 객체
let point = { x: 0, y: 0 };                    // 숫자 프로퍼티 두 개
let p2 = { x: point.x, y: ponint.y+1}        // 좀 더 복잡한 값
let book = {
  "main title": "JavaScript",                // 이 프로퍼티 이름에는 스페이스와 하이폰
  "sub-title": "The Definitive Guide",        // 들어 있으므로 문자열 리터럴을 썼습니다.
  for: "all audiences",                        // for는 예약어지만 따옴표를 쓰지 않았습니다.
  author: {                                    // 이 프로퍼티의 값은
    firstname: "David",                        // 객체입니다.
    surname: "Flanagan"
  }
};

• 마지막 프로퍼티 뒤에 콤마를 쓸 수 있다.
• 리터럴을 평가할 때마다 새 객체가 만들어진다.
• 각 프로퍼티의 값도 리터럴을 평가할 때마다 평가된다.

• 반복적으로 호출죄는 함수나 루프 바디 안에 있으면, 새 객체를 여러 개 만들 수 있다.

6.2.2 new

- new 연산자는 새 객체를 생성하고 초기화한다. - new 키워드 뒤에는 반스기 함수 호출이 있어야 한다. - 생성자라 부르고, 새로 생성된 객체를 초기화하는 목적으로 사용한다.

let 0 = new Object();    // 빈 객체를 만든다. {}와 같다.
let a = new Array();    // 빈 객체를 만든다. []와 같다.
let d = new Date();        // 현재 시간을 나타내는 Date 객체를 만든다.
let r = new Map();        // 키와 값을 연결하는 Map 객체를 만든다.

⭐6.2.3 프로토타입

- 자신과 연결된 두 번째 객체를 의미한다. - 객체 리터럴을 사용해 생성한 객테는 모두 같은 프로토타입을 가진다. - 프로토타입 객체는 Object.prototye이라는 코드로 참조할 수 있다.

6.2.4 Object.create()

- Object.create()는 첫 번째 인자를 프로토타입 삼아 새 객체를 생성한다.

let o1 = Object.create({x: 1, y: 2});    // o1은 x와 y 프로퍼티를 상속한다.
o1.x + o1.y                                // => 3

• 인자로 null을 전달하면, 기본 메서드가 없다.(+ 연산자와 함께 사용 불가능)

  let o2 = Object.create(null);    // o2는 프로터치나 메서드를 상속하지 않는다.

• 빈 객체를 만들고 싶으면 Object.prototype을 전달한다.

• 강력한 기능

  let o3 = Object.create(Object.prototype);    // o3은 {}나 new Object()와 같다.

  - Object.create()를 사용하는 목적 중 하나는 서드 파티 라이브러리에서 객체를 변경하는 사고를 막는 것이다.
• 객체를 라이브러리 함수에 전달하지 않고 원래 객체를 상속하는 객체를 전달하면, 라이브러리에서 부주의하게 프로퍼티 값을 바꾸더라도 원래 객체에는 영향이 없다.

  let o = { x: "don't change this value" };
  library.function(Object.create(o));    // 의도치 않은 변경에 대한 방어

6.3 프로퍼티 검색과 설정

- 프로퍼티 값에 접근할 때는 점(.)이나 대괄호([]) 연산자를 사용한다.

• 값이 객체인 표현식.(점)프로퍼티 이름(단순한 식별자)
• 값이 객체인 표현식[프로퍼티 이름(문자열로 평가되는 표현식)]

  let author = book.author;        // book의 author 프로퍼티를 가져온다.
  let name = author.surname;        // author의 surname 프로퍼티를 가져온다.
  let title = book["main title"];    // book의 main title 프로퍼티를 가져온다.

- 프로퍼티 생성 or 설정

book.edition = 7;                    // book에 edition 프로퍼티를 만든다.
book["main title"] = "ECMAScript";    // main title 프로퍼티를 변경한다.

6.3.1 연관 배열인 객체

6.4 프로퍼티 삭제

6.5 프로퍼티 테스트

6.6 프로퍼티 열거

6.7 객체 확장

6.8 객체 직렬화

6.9 객체 메서드

6.10 확장된 객체 리터럴 문법

문은 자바스크립트의 문장이나 명령어라고 할 수 있다.

주요 키워드

• 조건문
• 루프
• 점프
  

5.1 표현문

할당이나 함수호출처럼 부수 효과가 있는 표현식은 그 자체로 문이 될 수 있다.

• 할당문 - 표현문의 주요 카테고리 중 하나이다.

  greeting = "Hello" + name;
  i *= 3;

• 증감연삼자(++, --) - 변수의 값을 바꾸는 부수 효과가 있다.

  counter++;

• delete - delete 연산자에는 객체 프로퍼티를 삭제하는 중요한 부수 효과가 있다. - 거의 하나의 문으로 사용된다.

  delete o.x;

• 함수 호출 - 표현식이지만 프로그램의 상태나 호스트 환경에 영향을 미치는 부수적 효과가 있다. - 함수에 부수 효과가 없다면 그 자체로는 호출에 의미가 없다. (더 큰 표현식이나 할당문의 일부 제외)

  console.log(debugMessage);
  displaySpinner();            // 웹 앱에서 스피너를 표시하는 가상의 함수

  
  

❗모두 세미콜론으로 종료 했다❗

5.2 복합문과 빈 문

• 문 블록 - 문 여러 개를 묶어서 복합문으로 만든다.

🔔규칙

1. 블록은 세미콜론으로 끝나지 않는다. - 블록 안에 있는 기본문은 세미콜론으로 끝난다.
2. 블록에 들어 있는 행은 자신을 감싼 중괄호를 기준으로 들여쓴다. - 필수는 아니지만, 이해하기 쉽다.

{
  x = Math.PI;
  cx = Math.cos(x);
  console.log("con(π) = " + cx);
}

- 문 블록을 사용하면 허용되는 하위 문 하나에 문 여러 개를 넣을 수 있다. - 복합문은 자바스크립트가 문 하나를 예상하는 곳에 문 여러 개를 넣을 때 사용한다.

• 빈 문 - 문이 있을 것으로 예상되는 곳에 문을 쓰지 않는다. - 자바스크립트 인터프리터는 빈 문을 실행할 때 아무 일도 하지 않는다. - 빈 바디를 갖는 루프를 만들고자 할 때 유용하다.

  // 배열 a를 초기화합니다.
  for(let i = 0; i < a.length; a[i++] = 0;

  - 의도적으로 비운 것이라면 세미콜론(;)을 붙이지 말고, 주석을 달자.

  // 개발자의 의도와 다르게 실행된 예제
  if ((a === 0) || (b === 0));    // 아무 일도 하지 않는 행
    o = null;                    // 조건과 상관없이 항상 실행되는 행

  // 개발자의 의도대로 실행된 예제
  for(let i = 0; i < a.length; a[i++] = 0; /* 의도적으로 비움. */

  
  

5.3 조건문

분기점(branch)에 따라 인터프리터가 문을 실행하기도 하고, 실행하지 않기도 한다.

5.3.1 if

- 자바스크립트가 조건에 따라 문을 실행할 수 있게 하는 기본적인 제어문

1. 표현식(expression) 평가 : 결과값이 true일 때

   if (expression)
   statement

• 문 블록을 써서 여러 문을 하나로 모을 수 있다.

  if (!address) {
  address = "";
  message = "Please specify a mailing address.";
  }

  
  

2. else 절 : 결과값이 false일 때

if (expression)
  statement1
else
  statement2

• else절과 함께 if 문을 중첨해 쓸 때는 else 절이 적절한 if 문과 연결되도록 주의해야 한다.

if (i === j) {
  if (j === k) {
    console.og("i equals k");
  }
} else { //중괄호의 위치로 결과가 달라진다.
      console.log("i doesnt't equal j");
}

5.3.2 else if

- 선택지가 여러개일 때 사용되는 관용적 표현(자바스크립트 문은 아님.)

if ( n === 1){
    // 코드 블록 #1을 실행합니다.
} else if (n === 2) {
    // 코드 블록 #2을 실행합니다.
} else if (n === 3) {
    // 코드 블록 #3을 실행합니다.
} else { 
    // 전부 실패하면 블록 #4을 실행합니다.
}

5.3.3 switch

- 모든 분기점이 같은 같은 표현식의 값에 사용될 때 유용하다. - switch 문이 실행되면 먼저 expression의 값을 계산 후, case 라벨의 표현식과 같은 것을 순차적으로 찾아낸다.

switch(n) {
  case 1:
    // 코드 블록 #1을 실행합니다.
    break;    // 다음 case로 넘어가지 않음.
  case 2:
    // 코드 블록 #2을 실행합니다.
    break;
  case 3:
    // 코드 블록 #3을 실행합니다.
    break;
  default: // default 라벨이 없으면 case 문은 종료된다.
    // 코드 블록 #4을 실행합니다.
    break;
}

🔔switch 문 평가 방법

1. switch 키워드 다음에 있는 표현식을 먼저 평가하고, 일치하는 값을 찾을 때까지 case 표현식을 순서대로 평가한다.
2. 연산자 === 사용, 타입 변환을 거치지 않고 일치해야 한다.
3. case 표현식 전체가 평가되는 것은 아니므로, case 표현식에는 함수 호출이나 할당처럼 부수 효과가 있는 것은 피해야 한다.

5.4 반복문

• 경로를 자기 자신 쪽으로 구부린 코드 일부를 반복하는 문이며 루프라고 하기도 한다.

• 루프는 모두 배열 요소를 순회할 때 쓸 수 있다.

5.4.1 while

- 자바스크립의 기본 루프

while (expression)
  ststement

🔔while 문 평가 방법

1. while 문을 실행하면 먼저 expression을 평가한다.
2. false 값이라면 루프 바디를 건너뛴다.
3. true 값이라면 statement를 실행하고, 루프 맨 위로 올라가 expression 평가를 반복한다.
   ### 5.4.2 do/while \- 루프 맨 위가 아니라 맨 아래에서 평가된다. ```js do statement while (expression); ```

✅do/while과 while 차이

1. do/while 문은 루프 시작을 알리는 do와 루프 끝을 알리는 while 키워드가 모두 있어야 한다.
2. do/while 문은 항상 세미콜론(;)으로 끝나야 한다. (while 루프는 루프 바디를 중괄호로 감싼 경우에는 세미콜론이 필요하지 않는다.)

5.4.3 for

- 루프를 단순화 한다. - 초기화, 테스트, 업데이트를 표현식 하나로 묶고, 이들을 루프 문법에 명시적으로 표현한다.

//for 문은 while 문으로 변경할 수 있다.
for(initialize; test; increment)
  statement

// 같은 실행을 하는 while 문
initialize;
while(test) {
  staement
  increment;
}

- initialize, test, increment은 생략 가능하지만, 세미콜론(;)은 필수이다.

// for 문 무한루프
for(;;)

// while 문 무한루프
while(true)

⭐5.4.4 for/of

- ES6에서 정의한 새 반복문. - 이터러블(iterable) 객체에서 동작한다. (배열, 문자열, 세트, 맵은 이터러블)

• for 키워드 + 루프가 하는 일을 괄호로 묶어서 표현
• of 키워드 + 이터러블 객체로 평가되는 표현식

  // for/of를 써서 숫자 배열을 순회하며 합을 구하는 예제
  

let data = [1, 2, 3, 4, 5, 6, 7, 8, 9], sum = 0; for(let element of data) { sum += element; } sum // => 45

<br />

\- 배열은 <span style=color:red>동적으로</span> 순회한다.
- 반복 중간에 배열 자체에 변화가 발생한다면 반복 결과가 바뀌기도 한다.


#### for/of와 객체
\- 일반 객체(객체는 기본적으로 이터러블이 아님)에 `for/of`를 사용하려 하면 런타임에 `TypeError`가 일어난다.
```js
let o ={ x: 1, y:2, z: 3};
let keys = "";
for(let k of Object.keys(o)) {
  keys += k;
}
keys    // => "xyz"

• Object.key()
  • 객체의 프로퍼티 이름으로 이루어진 배열을 반환하며 배열은 for/of를 사용할 수 있는 이터러블

    let sum = 0;
    for(let v of Object.values(o)) {
    sum += v;
    }
    sum        // => 6

• Object.entries()
  • 객체 프로퍼티의 키와 값이 모두 필요하다면 Object.entries()와 분해 할당을 통해 for/of를 사용할 수 있다.
  • 배열의 배열을 반환한다.

    let paris = "";
    for (let [k, v] of Object.entries(o)) {
    paris += k + v;
    }
    paris        // => "x1y2z3"

    
    

5.4.5 for/in

자바스크립트에서 표현식으란 어떤 값으로 평가(evaluate)되는 구절

4.1 기본 표현식

- 가장 단순한 표현식

• 리터럴 값
• 자바스크립트 예약어 중 표현식 -this는 일정한 값이 아니며 프로그램에서 사용한 위치에 따라 다른 값으로 평가 된다.

  true        // boolean 값 ture로 평가됨
  false        // boolean 값 false로 평가됨
  null        // null로 평가됨
  this        // '현재' 객체로 평 됨

• 변수, 상수, 번역 객체의 프로퍼티에 대한 참조

4.2 객체와 배열 초기화 표현식

- 초기화 표현식(initalize)은 그 값이 새로 생성된 객체나 배열인 표현식 (객체 리터럴 혹은 배열 리터럴로 불리기도 함.) - 프로퍼티와 요소 값을 지정하는 다양한 하위 표현식으로 구성됨

• 배열 초기화 - 대괄호( [] )와 콤마(,)로 구분

  []            // 빈 배열
  [1,2,3+4]    //요소가 3개인 배열, 마지막은 7이다.

• 객체 초기화 - 중괄호( {} )로를 쓰고 각 하위 표현식은 프로퍼티 이름과 콜론(:)으로 구분

  let p ={x:2.3, y: -1.2};    // 프로퍼티가 두 개 있는 객체
  let q = {};                    // 빈 객체
  q.x = 2.3; q.y = -1.2;        // 이제 q의 프로퍼티는 p의 프로퍼티와 같아진다.

• ES6 이후에는 객체 리터럴을 중첩 가능하다.

  let rectangle = {
  upperLeft: {x: 2, y: 2},
  lowerRight: {x: 4, y: 5}

타입: 표현하고 조작할 수 있는 값을 종류 값: 값을 사용하기 위해 변수에 값을 저장한다 변수 : 변수에는 이름이 있으며 프로그램은 변수 이름을 통해 값을 참조한다.

3.1 개요와 정의

자바스크립트의 타입은 기본 타입과 객체 타입으로 나뉜다.

1. 기본 타입

• 숫자
• 문자열
• boolean
• null
• undefined

  2. 객체 타입

• 이름 붙은 값의 순서 없는 집합
• 배열
• 기타는 11장에서 설명

  3. 심벌(symbol)

프로그래밍 어휘 구조

그 언어로 프로그램을 작성할 때 지켜야 할 기본적인 규칙의 집합

자바스크립의 어휘 구조

• 대소문자 구분, 스페이스, 줄바꿈
• 주석
• 리터럴
• 식별자와 예약어
• 유니코드
• 선택 사항인 세미콜론
  

2.1자바스크립트 프로그램의 텍스트

- 키워드, 변수, 함수 이름, 기타 식별자(iden-tifier)를 쓸 때 대소문자를 일관적으로 써야 한다.

• 자바스크립트는 대소문자를 구별한다. (online, Online, OnLine, ONLINE은 모두 다른 변수)

• 토큰 사이의 공백을 무시하며, 대부분의 경우 줄바꿈도 무시한다. (프로그램에서 공백과 줄바꿈을 마음대로 쓸 수 있으므로 사용자에게 맞는 일관적인 형식으로 작성 가능하다.)

• 스페이스 문자(\u0020)외에 탭(tab), ASCII 제어 문자, 유니코드 스페이스 문자를 모두 공백으로 인식한다.

• 뉴라인(\n), 캐리지 리턴(\r), 캐리지리턴/라인 피드를 모두 줄바꿈 문자로 인식한다.

2.2 주석

- 주석은 자바스크립트 코드에 대한 설명 등을 작성 한다.

// 한 줄 주석
/* 여러 줄 주석
 * 각 행 앞의 *문자는 없어도 되지만
 * 그럴듯해 보임
*/

2.3 리터럴(literal)

- 리터럴(literal)은 프로그램 안에 직접 쓴 데이터 값이다.

12                // 숫자 12
1.2                // 숫자 1.2
"hello world"    // 문자열
'Hi'            // 문자열
true            //boolean
false            //boolean
null            //객체가 존재하지 않음

2.4 식별자와 예약어

- 식별자는 이름으로 상수,변수, 프로퍼티, 함수, 클래스의 이름에 사용하고 일부 루프의 라벨로도 사용한다.

- 식별자 규칙 시작

• 글자
• 밑줄(_)
• 달러 기호($)

중간

• 글자
• 숫자
• 밑줄
• 달러 기호
  

2.4.1예약어

- 예약된 키워드로 식별자로 사용할 수 없다. ⬆️예약어 예시

2.5 유니코드

- 자바스크립트 프로그램은 유니코드 문자셋으로 작성된다. - 유니코드 문자는 모두 문자열이나 주석에 사용할 수 있습니다. - 수정할 때 편리하게 사용하기 위해 ASCII글자와 숫자만 쓰는게 일반적이다.

const π = 3.14; //수학 기호를 변수로 사용
const sí = true;                //영어가 아닌 언어를 변수로 사용

2.5.1 유니코드 이스케이프 시퀀스

- 컴퓨터 중 유니코드 문자를 정확히 표시, 입력, 처리하지 못하는 것이 있어서 유니코드 문자를 표현하는 이스케이프 시퀀스(escaape sequence)를 정의한다.

- \u문자로 시작하고 정확히 네 개의 16진수 문자(0-9, A-f)를 쓰거나, 1~6개의 16진수를 중괄호 안에 쓰는 형태이다.

let café = 1;    // 유니코드 문자로 변수 정의
caf\u0029        // => 1; 이스케이프 시퀀스로 변수에 접근
caf\u{E9}        // => 1; 다른 형태의 이스케이프 시퀀스

- ES6에서 이모지와같이 16비트 이상 필요한 유니코드 포인트를 지원하기 위해 중괄호 문법을 도입했다.

consloe.log("\u{1F600}");    // 웃는 얼굴 이모지 출력

2.5.2. 유니코드 정규화

- 자바스크립트 프로그램에 ASCII 문자가 아닌 문자를 사용할 때는 유니코드에 그 문자를 인코딩 방법이 하나 이상 있음을 반드시 인지해야 한다. - 텍스트 에디터에는 똑같이 표시되지만, 이전 인코딩이 달라 자바스크립트는 다른 것으로 간주한다.

const café = 1;    // "caf\u{e9}"인 상수
const café = 1;    // "caf\u{301}"인 다른 상수
café            // => 1: 값이 1인 상수
café            // => 2: 값이 2인 상수

- 자바스크립트는 해석하고 있는 소스코드가 이미 정규화를 마친 상태라고 가정하여, 스스로 정규화를 수행하지 않는다.

2.6 세미콜론

- 자바스크립트에서는 세미콜론을 굳이 넣지 않아도 된다.

2.6.1생략 가능한 경우

a = 3;
b = 4

2.6.2. 생략이 불가능한 경우

1) 함수를 연달아 적을 때

a = 3; b =4;

2) 의도하지 않은 결과로 해석이 될 때

입력

let y = x + f
(a=b).toString()

해석

let y = x + f9a+b).toString();

입력

return
true;

해석

return; true;

의도

return true;

return, break, contiue 다음에 어떤 표현식을 쓴다면, 그 사이에 줄바꿈이 들어가서는 안된다.

3) ++, --연산자

- 후위 연산자로 사용 시 반드시 적용할 표현식과 같은 행에 작성해야 한다.

4) =>(화살표 함수)

- 반드시 매개변수 리스트와 같은 행에 있어야 한다.

웹의 프로그래밍 언어로 객테 지향, 함수형 프로그래밍 스타일에 적합한 고수준의 동적인 인터프리터 언어

-자바스크립트와 자바는 완전히 다른 언어이다! -자바스크립트의 일급 함수라는 개념은 스킴(Scheme), 프로토타입에 기반한 상속은 셀프(self)에서 가져왔다.

자바스크립트 핵심 키워드

• 주석 //이중 슬래시 뒤에 나오는 내용은 모두 주석입니다.

  
  

• 변수 선언

  let x; //x라는 변수 선언 (자바스크립트 변수에는 타입이 없다.)

  
  

• 변수에 값 할당

  let x;
  x = 0;
  
  x = 1; //정수
  x = 0.1; //실수
  x = true; //boolean
  x = false; //another boolean
  x = null; //'값이 없다'
  x = undefined; //어떤 값도 할당되지 않아서 자료형을 알 수 없음
  

• 배열

  let book {                    //객체는 중괄호로 감싸 표현한다.
    topic: "JavaScript",    //"topic"의 프로퍼티 값은 "JavaScript"이다.
    edition: 7
  };

  
  
  • 배열

    let book {                    //객체는 중괄호로 감싸 표현한다.
    topic: "JavaScript",    //"topic"의 프로퍼티 값은 "JavaScript"이다.
    edition: 7
    };