2장 알아둬야 할 자바스크립트

2.1 ES2015+

• const 와 let const: 변수 재선언, 재할당 불가능let: 변수 재할당 가능, 재선언시 오류 발생 → 따라서, 변수 선언시 기본적으로 const 사용, 재할당시 let 사용
  
  
• 템플릿 문자열
  `${변수}` → 사용시 따옴표 사용+가독성 향상
  
  
• 객체 리터럴객체란? 배열이나 함수가 아닌 이외의 형태를 갖춘 것 
  객체 리터럴 안에 동적 속성 선언 가능 

const name = "김유라"
const year = 1999
const month = 3
const date = 2
const gender = "F";
--------------------------
const info = {
	name = "김유라"
	year = 1999
	month = 3
	date = 2
	gender = "F";
}

→ 코드 양 ⬇️

cf. https://www.youtube.com/watch?v=1SYv8YgXOyQ

 

• 화살표 함수
  function 선언대신 ⇒ 로 함수 선언
  → 기본적으로 화살표 함수를 쓰되, this 사용시 화살표 함수와 function 둘 중 하나 선택
• 구조 분해 할당
  구조 분해: 배열이나 객체의 속성을 분해하여 그 값을 변수에 담을 수 있게 하는 표현식
  구조 분해 할당:새로운 변수 이름으로 할당하는 것

let user ={name:"Mike",age:30};
let {name:userName, age:userAge}=user;
console.log(userName) //"Mike"
console.log(userAge) //30

 

• 클래스 (cf.Syntatic Sugar)
  클래스: 데이터나 함수를 묶어 놓은 것,템플릿
  오브젝트: 클래스의 인스턴스

//1. Class declarations 
class Person {
	constructor(name, age) {
		this.name =name;
		this.age=age;
	}
	speak() {
		console.log(`${this.name}:Hello !`);
	}
}
const yura = new Person ("yura", 10);

//cf. 2. Getter(값 리턴) and Setter (값 설정) 
const yura = new Person ("yura", 10);

class User {
	constructor(firstName,lastName,age){
	this.firstName = firstName;
	this.lastName = lastName;
	this.age = age;
	}
	
	get age() {

		return this._age; //Range Error Maximum call stack 
}

	set age(value) {
//		this._age=value;
		this._age=value<0? 0: value;
}

}

const user1= new User ('Steve','jobs',-1);
console.log(user1.age) // 0

class 내부에서 선언된 this.age는 get age를 가리키게 되고 setter를 정의한 순간 this.age는 setter를 호출하게됨 → 전달받은 value가 setter를 계속해서 호출

따라서 이러한 에러를 방지하기 위해 _변수를 사용

 

• 프로미스
  프로미스: 자바스크립트 비동기 처리 문법

state: pending -> fulfilled or rejected
Producer vs Consumer 

1. Producer
//**When new Promise is created, the executor runs automatically.**
const promise = new Promise((resolve,reject) => {
	//doing some heavy work (network, readFiles)
	console.log("doing something");
	setTimeout(() =>{
		//resolve('yura');
		reject(new Error("no network"));
	},2000);
});

2. Consumers : then, catch, finally 
promise
.then((value)=>{
	});
.catch(error)=>{
	console.log(error);
});
.finally(()=>{
	console.log('finally');
});

 

• async/ await (cf.Syntatic Sugar)
  promise를 동기적으로 사용하게 하는 문법
  promise를 깔끔하게 사용하는 방법

1. async
async function fetchUser() {
	//do network request in 10sec ...
	return 'yura';;
}
const user= fetcUser();
	console.log(user);

2. await 
function delay(ms)}
	return new Promise(resolve=>setTimeout(resolve,ms));
}

async function getApple() {
	await delay(3000);
	return "Apple";
}

async function getBanana() {
	await delay(3000);
	return "Banana";
}

async function pickFruits() {
	const apple = await getApple();
	const banana = await getBanana();
	return `${apple} + ${banana}`);
}
pickFruits().then(console.log);

cf. 3. useful Promise APIs
function pickAllFruits() {
	return Promise.all([getApple(), getBanana()]).then((fruits=>
		fruits.join(" + ")
	);
}
pickAllFruits().then(console.log);

function pickOnlyOne() {
	return Promise.race()

• Map,Set
  Map
  배열 내 모든 요소 각각에 대해 주어진 함수 호출의 결과를 모아 새로운 배열 반환
  key-value의 쌍을 저장, 삽입 순서를 기억
  Set
  중복을 허용하지 않는 값을 모아 놓은 컬렉션
  set에 키가 없는 값이 저장
• 널 병합 / 옵셔널 체이닝
  널 병합 (중첩된 오브젝트 자료 내에서 사용)
  왼쪽 값이 null 또는 undefined일 때 오른쪽 값을 반환하고, 그렇지 않으면 왼쪽 값을 반환하는 논리 연산자
  cf. OR(논리연산자) 와 차이점
  OR 논리연산자는 왼쪽값이 falsy한 값일 경우 오른쪽 값을 반환
  옵셔널 체이닝 ?.참조값이 nullish하다면 에러 발생 대신 리턴값을 undefined 로 읽어온다.

2.2 프런트엔드 자바스크립트

1. AJAX : 페이지 이동없이 서버에 요청과 응답을 받는 기술 (axios)
2. FormData : 동적인 데이터 제어
   cf.encodeURIComponent, decodeURIComponent : 주소에 한글이 있을경우 이를 처리하기 위한 메서드
3. 데이터 속성과 dataset
   보안과 관련없는 코드들은 FE로 보내도 OK

2.3 함께보면 좋을자료

https://developer.mozilla.org/ko/docs/Web/JavaScript

JavaScript | MDN

https://github.com/axios

axios

https://developer.mozilla.org/ko/docs/Web/API/FormData

FormData - Web API | MDN