자바스크립트-ES2015+

변수

• var : 기준 범위는 함수
• let : 변하는 값일 때 사용, 기준 범위는 {}
• const : 상수(변하지 않는 값 사용), 기준 범위는 함수

// var, let
function myTest() {
     if (true) {
          var x = 100; // let
     }
     console.log(x);
}
myTest();

// const
function myTest2() {
     if (true) {
          const x = 100;
          x = 200;
     }
     console.log(x);
}
myTest2();

템플릿 문자열

• ${}로 가져오기 가능

const name = '송재근';
const age = 27;
const height = 174;

console.log(`My name is ${name}
My age is ${age}
My Height is ${height}`);

객체

• 객체의 구성
  • 1개의 데이터(= 프로퍼티) => 키(문자형) + 값 1쌍(모든 자료형)

let dic = new Object();

dic.boy = "소년";
dic.girl = "소녀";
dic.friend = "친구";

console.log(dic.boy);
console.log(dic.girl);
console.log(dic.friend);

• 객체 리터럴
  • {} 사용해서 객체를 생성하는 것

let dic = {
     boy: "소년",
     girl: "소녀",
     friend: "친구"
};

console.log(dic.boy);
console.log(dic.girl);
console.log(dic.friend);

• 객체의 프로퍼티 동적 추가 및 삭제

let dic = {
     boy: "소년",
     girl: "소녀",
     friend: "친구"
};
dic.apple = "사과";
dic.ten = 10;
console.log(dic.apple);
console.log(dic.ten);

// 삭제
let dic = {
     boy: "소년",
     girl: "소녀",
     friend: "친구"
};

delete dic.girl;
console.log(dic.boy);
console.log(dic.girl); // undefined
console.log(dic.friend);

// 객체의 프로퍼티 수정
let dic = {
     present: "현재"
};
console.log(dic.present);
dic.present = "선물";
console.log(dic.present);

• let -> const 수정 비교
  • dic은 참조형 메모리구조를 가짐
    - 콜스택에 있는 참조 주소(불변)
  • 힙메모리에 있는 데이터(변경 가능)

const dic = {
     present: "현재"
};
console.log(dic.present);
dic.present = "선물";
console.log(dic.present);

// const 에러 시키기
const dic = {
     present: "현재"
};
dic = {}; // 이렇게 변경 시키면 에러 발생
console.log(dic.present);
dic.present = "선물";
console.log(dic.present);

• 객체의 프로퍼티와 메소드
  • 객체의 구성요소 : 프로퍼티 + 메소드

const unit = {
     attack: function(weapon) {
          return `${weapon}으로 공격한다.`;
     }
}
console.log(unit.attack('주먹'));
console.log(unit.attack('총'));

// 축약 표현
const unit = {
	attack(weapon) {
		return `${weapon}으로 공격한다.`
	};
}
console.log(unit.attack('주먹'));
console.log(unit.attack('총'));

• 대괄호 표기법

// 대괄호 접근
let dic = {
     boy: "소년",
     girl: "소녀",
     friend: "친구"
};
console.log(dic['boy']);
console.log(dic['girl']);
console.log(dic['friend']);

// 사용자 입력받기
const readline = require("readline");
const rl = readline.createInterface({
     input: process.stdin,
     output: process.stdout
});
let dic = {
     boy: "소년",
     girl: "소녀",
     friend: "친구"
};
rl.question("찾을 단어를 입력하세요. ", function(key) {
     let word = key;
     console.log(word);
     rl.close();
});

• 계산된 프로퍼티

const readline = require("readline");
const rl1 = readline.createInterface({
     input: process.stdin,
     output: process.stdout
});
rl1.question("다이쓰! 무조건 천원, 상품입력? ", function(obj) {
     let basket = {
          [obj]: "1000원",
     }
     console.log(basket[obj]);
     rl1.close();
});

// 단축 프로퍼티
let id = 'jamsu';
let pw = '1111';
let user = {
     id: id,
     pw: pw,
     // id,
     // pw,
}
console.log(user.id);
console.log(user.pw);

// 반복
let human = {
     id: 'jamsu',
     pw: '1111',
     name: 'lch',
     mobile: '010-1111-2222',
     county: 'korea'
}
for (let info in human) {
     console.log(`${info} : ${user[info]}`);
}

화살표 함수

// 1
let plus = (a, b) => {
     return a + b;
}
let result = plus(10, 20);
console.log('두수의 합 : ' + result);

// 2
let plus2 = (a, b) => a + b;
let result2 = plus2(10, 20);
console.log('두수의 합 : ' + result2);

// 매개변수 1개
let plus3 = a => a + 2;
let result3 = plus3(10, 20);
console.log('값의 2증가 : ' + result3);

// 매개변수가 없는 경우
let plus4 = () => "플러스";
let result4 = plus4();
console.log('A ' + result4);

비구조화 할당

• 구조 분해 할당

// 비구조화 할당
const color = ['red', 'green', 'blue'];
let r = color[0];
let g = color[1];
let b = color[2];
console.log(r);
console.log(g);
console.log(b);
let user = {
     id: 'jamsuham',
     pw: '1234',
     nickname: '잠수함',
     age: 30,
};
let id = user.id;
let pw = user.pw;
let nickname = user.nickname;
let age = user.age;
console.log(id);
console.log(pw);
console.log(nickname);
console.log(age);


// 배열 구조 분해
const color2 = ['red', 'green', 'blue'];
let [r2, g2, b2] = color2;
console.log(r2);
console.log(g2);
console.log(b2);


// 배열의 변수 값 변경
const color3 = ['red', 'green', 'blue'];
let [r3, g3, b3] = color3;
[b3, g3, r3] = [r3, g3, b3];
console.log(r3);
console.log(g3);
console.log(b3);

[b4, g4, r4] = ['red', 'green', 'blue'];
console.log(r4);
console.log(g4);
console.log(b4);


// 배열의 기본값 설정
const [a5, b5, c5] = ['C#', 'Java'];
console.log(a5);
console.log(b5);
console.log(c5);

const [a6, b6, c6 = "C++"] = ['C#', 'Java'];
console.log(a6);
console.log(b6);
console.log(c6);


// 일부 요소값 무시
const [a7, , c7, d7] = ['C#', 'Java', 'Python', 'C++'];
console.log(a7);
console.log(c7);
console.log(d7);


// 배열의 나머지 요소 가져오기
const [a8, b8, ...rest] = ['C#', 'Java', 'Python', 'C++', 'react'];
console.log(a8);
console.log(b8);
console.log(rest.length);
console.log(rest[0]);
console.log(rest[1]);
console.log(rest[2]);


// 배열끼리 결합
const arr1 = ['C#', 'js'];
const arr2 = ['python', 'react', 'C++'];
const arr3 = [...arr1, ...arr2];
console.log(arr3);


// 객체 구조 분해
let user2 = {
     id2: 'jamsuham',
     pw2: '1234',
     name2: '잠수함',
     age2: 30,
};
let {id2, pw2, name2, age2} = user2;
console.log(id2);
console.log(pw2);
console.log(name2);
console.log(age2);

let {id3, pw3, name3, age3} = {id3: 'jamsuham', pw3: '1234', name3: '잠수함', age3: 30,} 
console.log(id3);
console.log(pw3);
console.log(name3);
console.log(age3);


// 객체 기본값 설정
let user4 = {
     name4: '잠수함',
     age4: 30,
};
let {id4 = 'guest', pw4 = '1234', name4, age4} = user4;
console.log(id4);
console.log(pw4);
console.log(name4);
console.log(age4);


// 객체의 나머지 요소 가져오기
let user5 = {
     id5: 'jamsuham',
     pw5: '1234',
     name5: '잠수함',
     age5: 30,
};
let {id5, ...rest5} = user5;
console.log(id5);
console.log(rest5.pw5);
console.log(rest5.name5);
console.log(rest5.age5);

프로미스

• 콜백지옥
  • 비동기 처리를 위해 콜백함수 사용
  • 많이 사용하면 답이 없다.... ㅠㅠ
• 프로미스
  • 콜백함수 : 오류 처리 힘듬 + 비동기 1번에 처리 한계
  • 콜백함수 단점을 보완 : 프로미스
  • 자바스크립트에서 비동기 작업을 처리하는 메커니즘
  • 다른 코드의 실행을 블록 시키지 않고 준비되면 비동기 작업의 결과를 처리
  • 지금은 아니지만 이후에 처리한다는 것

// 프로미스 기본코드
var pro1 = new Promise(function(resolve, reject){ // Promise 객체
     resolve('success'); // 어떤 작업 성공? 실패? 콜백함수
});
pro1.then(function(result){
     console.log('result', result);
});


// 프로미스에 많이 사용하는 setTimeout(비동기 처리시 유용)
var pro2 = new Promise(function(resolve, reject){
     setTimeout(function(){
          resolve('success');
     }, 2000);
});
pro2.then(function(result){
     console.log('result', result);
});


// 프로미스 생성코드 노출하지 않기(함수로 감싸기)
function pro3() {
     return new Promise(function(resolve, reject) {
          setTimeout(function(){
               resolve('success');
          }, 2000);
     });
}
pro3().then(function(result) {
     console.log('result', result);
})


// 비동기 작업 코드 추가
function pro4() {
     return new Promise(function(resolve, reject) {
          setTimeout(function() {
               resolve('pro4 success');
          }, 3000);
     });
}
function pro5() {
     return new Promise(function(resolve, reject) {
          setTimeout(function() {
               resolve('pro5 success');
          }, 3000);
     });
}
pro4().then(function(result) {
     console.log('result1', result);

     pro5().then(function(result) { // 콜백 함수 형태
          console.log('result2', result);
     });
});


// 프로미스 체이닝(콜백 함수 형태 보완)
function pro6() {
     return new Promise(function(resolve, reject) {
          setTimeout(function() {
               resolve('pro6 success');
          }, 3000);
     });
}
function pro7() {
     return new Promise(function(resolve, reject) {
          setTimeout(function() {
               resolve('pro7 success');
          }, 3000);
     });
}
pro6().then(function(result) { // 이 부분이 체이닝
     console.log('result1', result);
     return pro7();
}).then(function(result) {
     console.log('result2', result);
});


// 프로미스 작업 수행 실패 시 처리
function pro8() {
     return new Promise(function(resolve, reject) {
          setTimeout(function() {
               reject('pro8 fail');
          }, 3000);
     });
}
function pro9() {
     return new Promise(function(resolve, reject) {
          setTimeout(function() {
               reject('pro9 fail');
          }, 3000);
     });
}
pro8().then(function(result) {
     console.log('result1', result);
     return pro9();
}).catch(function(err) {
     console.log('err', err);
     return Promise.reject(err); // 뒤에 코드 안나오게 하는 것
}).then(function(result) {
     console.log('result2', result);
});


// 프로미스 코드 개선 및 정리
const pro11 = pid => {
     return new Promise((resolve, reject) => {
          setTimeout(() => {
               if (pid == 'jamsuham') {
                    resolve('pro11 success');
               } else {
                    reject('pro11 err');
               }
          }, 4000);
     });
}
const pro12 = ppw => {
     return new Promise((resolve, reject) => {
          setTimeout(() => {
               if (ppw == '1111') {
                    resolve('pro12 success');
               } else {
                    reject('pro12 err');
               }
          }, 4000);
     });
}
const id12 = 'jamsuham';
const pw12 = '1111';
pro11(id12).
then(result => {
     console.log('result11', result);
     return pro12(pw12);
}).then(result => {
     console.log('result12', result);
}).catch(err => {
     console.log('err', err);
     return Promise.reject(err);
})