자바스크립트 문법 정리

타입

JS는 런타임에서 타입이 정해지기 때문에 error 발생 가능성이 존재,
그에 따라 TypeScript가 개발됐다.

primitive type : 값 자체 저장
object 타입 : 객체의 주소 저장

premitive types는 값이 변하는 Immutable data types, 

object 타입은 값이 변하지 않는 Mutable data types이다.

비교 연산자

 // 느슨한 비교, type 변환 포함
 1 == true  // true
 
 // 엄격한 비교, type 변환 없음, (사용 권장)
 1 === true // false

object는 메모리 탑제 시, 주소가 저장되므로 같은 data를 할당 해도 비교시 false가 된다.

호이스팅(Hoisting)

선언부를 상단으로 이동시킨다.

// print();  - 함수 선언 전 호출하므로 Error 발생
const print = function () { // 초기화가 아닌 선언부만 끌어올리므로 호이스팅 x
  console.log(`print`);
};

console.log(sum(1, 3)); // 함수가 호이스팅되서 error 발생하지 않음
function sum(a, b) { // 함수 선언부는 호이스팅에 의해 상단으로 이동됨
  return a + b;
}

arrow function

익명함수 + 간결한 함수 표현

 const test1 = () => console.log(`test`);
 const test2 = (a, b) => a + b;
 const test3 = (a, b) => {
 	return a * b;
 };

class(ES6)

prototype-based 기반으로 그 위에 문법만 class가 추가됨.

클래스 선언

 class Person {
   // constructor
   constructor(name, age) {
     // fields
     this.name = name;
     this.age = age;
   }
 
   // methods
   speak() {
     console.log(`${this.name}: hello!`);
   }
 }
 
 const ellie = new Person(`ellie`, 20); // 인스턴스(object) 생성
 console.log(ellie, typeof ellie); // > Person {name: "ellie", age: 20} "object"
 console.log(ellie.name); // > ellie
 console.log(ellie.age); // > 20
 ellie.speak(); // > ellie: hello!

Getter & Setter

 class User {
 	// 생성자 필드
   constructor(firstName, lastName, age) {
     this.firstName = firstName;
     this.lastName = lastName;
     this.age = age;
   }
 
 	// getter
   get age() {
     return this._age;
   }
 
 	// setter
   set age(value) {
     // if (value < 0) {
     //   throw Error(`-1은 안됩니다..`);
     // }
     this._age = value < 0 ? 0 : value; // 생성자 필드명 앞에 _ 를 붙이는게 관습
   }
 }
 const user1 = new User(`Steve`, `job`, -10); // set
 console.log(user1.age); // get

Ajax JSON

브라우저 API로 XMLHttpRequest, fetch 가 존재하며
AJAX로 Data를 주고 받을 때의 포맷으로 JSON을 많이 사용한다

Object to JSON

 json = JSON.stringify([`apple`, `banana`]);
 console.log(json); // ["apple","banana"]
 
 const rabbit = {
   name: `tori`,
   color:`white`,
   size: null,
   birthDate: new Date(),
   // symbol: Symbol(`id`), // JS에만 존재하는 data라서 serialize 되지 않는다
   // 객체 내부에 화살표 함수를 정의하면 this는 전역객체를 가리킴(window)
   // 아래의 함수 문법은 jump: function()과 같음
   jump() { // 함수는 object의 data가 아니기 때문에 serialize 되지 않는다
     console.log(`${this.name} can jump!`);
   }
 };
 json = JSON.stringify(rabbit); // 객체
 console.log(json);
 json = JSON.stringify(rabbit, [`name`, `color`]); // 원하는 key의 값만 serialize 할 수 있음
 console.log(json);

JSON to Object

 obj = JSON.parse(json)
 console.log(obj)
 
 const rabbit = {
   name: `tori`,
   color:`white`,
   size: null,
   birthDate: new Date(),
    jump() { 
    console.log(`${this.name} can jump!`);
   }
 };  
 json = JSON.stringify(rabbit); // 객체
 
 let obj = JSON.parse(json);
 console.log(obj);
 // obj.jump(); // > error : stringify 할 때, 함수는 serializee 되지 않아서 jump는 존재하지 메서드임
 // console.log(rabbit.birthDate.getDate()); // > 날짜 '일' 이 출력됨
 // console.log(obj.birthDate.getDate()); // > error : serializee된 birthDate는 string 이기 때문에 당연히 getDate API가 호출 안됨
 
 obj = JSON.parse(json, (key, value) => {
   // console.log(`key: ${key}, value: ${value}`);
   return key === `birthDate` ? new Date(value) : value;
 });
 
 console.log(obj.birthDate.getDate()); // > 날짜 '일' 이 출력됨 : 위에 콜백함수로 string을 JS의 API로 수정해서 deserialize 했기 때문에 잘 동작함

출처 : https://www.youtube.com/watch?v=wcsVjmHrUQg&list=PLv2d7VI9OotTVOL4QmPfvJWPJvkmv6h-2&index=1