get/set, destructuing, Promise, async/await, for of, Symbol, Map, Set, customHTML

브라우저 로직 정리

 

 

/*
ES6 JS study from codingapple
내용: get/set, destructuing, Promise, async/await, for of, Symbol, Map, Set, customHTML
 */


// object 추출, 수정을 getter(추출,조회) setter(수정)로 함수 만들어 쓰는 아유: obj 자료가 복잡할때 편의성 + 수정을 잘못했을 경우의 실수 방지(안전장치)
// -> ES5부터 set, get 키워드로 형성 가능 (함수를 property화)

var 사람 = {
  name : 'Kim',
  age : 30,
  get nextAge(){  // get 사용시 return 필수 및 파라미터 사용 불가 및 p
    return  this.age + 1  
  },
  set setAge(나이){ // 입력 파라미터 1개 필수
    this.age = parseInt(나이)
  }
}
console.log( 사람.nextAge ) //get 키워드를 추가하면 이렇게 함수를 사용가능
사람.setAge = 40; //set 키워드를 추가하면 이렇게 함수를 사용가능


// 클래스 버전 get, set  
class 사람 {
  constructor(){
    this.name = 'Park',
    this.age = 20
  }
  get nextAge(){
    return this.age + 1
  }
  set setAge(나이){
    this.age = 나이;
  }
}

var 사람1 = new 사람();


// 연습문제[1]: 강아지 class 만들기
class 강아지 {
    constructor(type, color) {
        this.type = type,
        this.color = color 
    }
  한살먹기(){
    if( this instanceof Cat) { // this가 Cat으로 생성된 objct(instacne=class에서 새로 생성되는 obj)인가?
    this.age++
    }}
    

}
var 강아지1 = new 강아지('말티즈', 'white')


// 연습문제[2]: 유사 class 고양이 만들기
class 고양이 extends 강아지 {
    constructor(type, color, age){
        super(type, color),
        this.age = age
    }
}
var 고양이1 = new 고양이('코숏', 'white', 5)


// 연습문제[3]: get/set
class Unit {
    attack = 5
    HP = 100
    get battlerPoint() {
        return this.attack + this.HP
    }
    set heal(amount) {
        this.HP = this.HP + 50
    }   
}


// 연습문제[4]: get/set
var data = {
    odd : [],
    even : [],
    get readData() {
        return [...this.odd, ...this.even].sort((a, b) => a - b) // sort()는 문자열 정렬만 함
    },
    set classifyNum(numbers) {
    numbers.forEach(num => {
        (num % 2 === 0 ? this.even : this.odd).push(num)
    })
    }

}
data.classifyNum = [1, 10, 9, 5, 11]
console.log(data.readData);
console.log(data);
/*
Output:
[ 1, 5, 9, 10, 11 ]
{
  odd: [ 1, 9, 5, 11 ],
  even: [ 10 ],
  readData: [Getter],
  classifyNum: [Setter]
}
*/

// Destructuring (한번에 패턴매칭)
var arr = [2,3,4]
var [a,b,c, d=10] = arr; // 한번에 변수매칭  + default 값 지정 포함가능 (할당안되면 undefined)
var {name: 이름 = 'park', age = 31} = {name: 'kim', age: 30}  // 단 key값 일치해서 입력
// 나이: name key값 value를 '이름'로 변경해서 할당.  31: deafult 값
// 반대로 만들때(여러 변수 한번에 넣기)도 가능
var name = 'kim';
var age = 30;  // 여러게 정의된 변수들에 대해서
var obj = {name, age};  //이렇게 key값만 입력

// 이렇게 복잡한것도 패턴으로 매칭하면 끝
let 신체정보 = {
  body: {
    height: 190,
    weight: 70
  },
  size: ["상의 Large", "바지 30인치"],
};

let {
  body: {
    height, 
    weight
  },
  size: [ 상의, 하의 ]
} = 신체정보;


// ES6의 import & export
// HTML 안에서 쓰려면
{/* 
<script type="module">
</script> 

<script type="module" src="경로">
</script> 


*/}

// export defualt 한 번만 쓸 수 있고 import에서 자유롭게 작명 변형 가능
// export {변수1, 변수2} 형태로 담아야하고 import시에도 이름 정확히 표기, 이름 바꾸려면 {변수1 as 이름변경} 형태로 변경
// export default와 export 동시에 쓰기? -> 가능, import시 deafult의 것을 제일 처음에 표기 후 { } 로 담기
// -> import 이름바꾸기, {a, b} from './뭐시기.js'   (./: 현재경로)
// 한번에 다 import하려면 * as 변수모음 형태로 입력 (as 필수)

// CAP에서 사용시 package.json의 "name": "sample_cds", 아래에 "type" : "module" 추가

// 옛날 문법...이라고하지만 CAP에서 쓰는게 권장되는 문법 (ESM방식도 가능하지만 불완전한 부분이 있음)
// SAPUI5는 자체적 방식이 있음;
// (export 하는 js파일)
module.exports.a = 10 ;
// ------------------------
// (import 하는 js파일)
var 가져온거 = require('/library.js'); 



// 오래걸리는 연산 처리 방법 1: setTimeout() 으로 0초마다 ~씩 반복 형태로 구현하기 (다른 코드 실행 여지 남기기)
// 오래걸리는 연산 처리 방법 2: Web worker로 다른 파일에서 힘든 연산 시키고 완료될 때 값을 가져오라하기
//(메인 js 파일)
var myWorker = new Worker('worker.js'); 
w.onmessage = function(e){
  console.log(e.data) // 1
};

//(worker.js 파일)
var i = 0;
postMessage(i + 1); //postMessage로 전달



// 자바스크립트는 기본적으로 동기식 처리(Synchronous) = 한 번에 코드 한 줄씩 차례로 실행
// 비동기식처리(Asynchronous): 오래걸리는 것 있으면 다른것 부터 처리하도록 함 (웹 브라우저의 실행 대기실인 Web API로 구현됨)
// 비동기 상황에서 순차적 실행시 콜백함수(= 함수 안에 들어가는 함수)를 이용
function 첫째함수(파라미터){
  console.log(1)
  파라미터();
}

function 둘째함수(){  // 안에 들어가니 콜백함수됨
  console.log(2)
}

첫째함수(둘째함수); // 이렇게 순차적 실행
// 문제점
첫째함수(function(){
  둘째함수(function(){
    셋째함수(function(){
   //   어쩌구..
    });
  });
});

// 이래서 Promise를 써야함: 옆으로 길어지지않고 좋음   Promise = 성공/실패 판정 기계
// 
var 프로미스 = new Promise(function(resolve, reject){  
    //   resolve = 성공; then 내용 실행, reject = 실패; catch 실행 (이름 바꿔도되지만 보통 이렇게 씀)
    var 어려운연산 = 1 + 1 ;
    resolve(성공시전달될데이터);
    // reject();

});  

프로미스.
then(function() {
    // 프로미스가 성공할 경우 실행
    console.log('성공했어요')
}).catch(function(){
    console.log('실패했어요')
})
.then(function(){
    // 뒤에서 더 이어질때 그대로 .then 붙여서 이어나감
})

// .catch: 실행이 실패한 경우 로직 , .finally(성공이든 실패든 마지막에 실행)
// Promise 3개 상태: <resolved>, <rejected>, <pending> 


// async/await :ES8 문법. async를쓰면 Promise obj 자동으로 생김 (.then능)
// await: 기다려주세요
async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    var 결과 = 1 + 1;
    성공();
  });
  어려운연산.then();
}
더하기();

// 위 내용와 같은것이 아래이다.
async function 더하기(){
  var 어려운연산 = new Promise((성공, 실패)=>{
    var 결과 = 1 + 1;
    성공();
  });

  try { 
    var 결과 = await 어려운연산;   // await: 실패()사용시 에러나고 멈춤 -> try catch로 멈춤없이 진행
} catch {

}
}
더하기();

var 프로미스 = new Promise(function(성공, 실패){
    document.getElementById('test').addEventListener('click', function(){
      성공();
    });
})
async function 버튼누르기(){
  var 결과 = await 프로미스;
  console.log('성공했으요')
}

// Promise.all()  : () 안에 있는 것 브라우저에 동시 요창 (JS 병렬처리는 web worker이므로 병렬처리는 아님)
// Promise 추가공부:  https://leafht.tistory.com/195



// 신문법: for of 반복문
for (let 자료 of 어레이) {
    console.log(자료)
}
// 구구단 출력 예제
let 데이터 = [1,2,3,4,5,6,7,8,9] 
for (let i of 데이터) {
  for (let j of 데이터) {
    console.log(`${i} x ${j} = ${i*j}`)
  }
}
// for...of → 배열 값 순회: Array 전용(값 위주)
for (const val of arr) {
    console.log(val); // 1, 2, 3
}

// forEach → 배열 값 순회 (콜백 스타일): Array 전용 (값 + idx)
arr.forEach((val, idx) => {
    console.log(val, idx);
});

// for...in → 객체 키 순회: Object 전용
for (const key in obj) {
    console.log(key); // 'a', 'b'
}

// forEach > for of인 경우:
// forEach는 인덱스를 기본 제공
arr.forEach((val, idx) => console.log(idx, val));

// for...of는 entries() 써야 함
for (const [idx, val] of arr.entries()) {
    console.log(idx, val);
}

// forEach < for of 인 경우:
for (const item of arr) {
    await doSomething(item);  // ✅ 순서 보장
}
// forEach는 await이 제대로 안 됨
arr.forEach(async (item) => {
    await doSomething(item);  // ❌ 순서 보장 안 됨
});







// (참고) symbol 자료형: Object의 비밀스런 key 값 (obj에 저장되지만 공개적으로 안뜨는 key)
var 심볼 = Symbol('주석');
var height = Symbol('설명하는내용')
var peson = {name : 'Kim', [height] : 150};  // symbol 선언후 [ ] 안에 key넣으면 바로 symbol로 인식
 // person.weight = 100; // 이렇게하면 잘 보임

var weight = Symbol('주석')
person[weight] = 100;  // 이렇게 symbol로 저장 -> console에서도 Symbol(설명) : 100 형태로 출력


for (var key in person) {
    console.log(person[key])  // 이렇게 했을 때 Symbol 내용은 나오지 않음
}

// 비밀스럽게 숨기거나 import해서 쓸 때 기존 코드 흐름을 방해하지않으면서 key를 추가하고싶을 떄 사용
// Symbol은 기본적으로 unique로 생성
var a = Symbol('설명1');
var b = Symbol('설명2')
console.log(a === b, a == b);  // False, False
// unique말고 전역 symbol만드려면? -> Symbol.for('설명') 사용;  이걸로 정의했으면 a === b True 뜸









// Map 자료형: 자료간의 연관성을 표현하기위해 사용, iterable이라 for of 사용 가능   
// .map 은 배열 매서드이니 혼동 유의!
var person = new Map();
person.set('name', 'Kim');  // Map {"name" => "Kim", "age" => 20}
person.set('age', 20);
// Map 자료형은 array, 숫자 등 아무 것도 key와 value 지정 가능
person.get('age') // 자료출력
person.delete('age'); //자료삭제
person.size; //자료 몇갠지 알려줌

//자료를 직접 넣고 싶으면
var person = new Map([
  ['age', 20],
  ['name', 'Kim']
]); 





// Set 자료형: 집합 (중복 제거)
var 출석부2 = new Set([ 'john' , 'tom', 'andy', 'tom' ]);  // 'tom' 중복된거 자동 삭제
출석부2.add('sally'); //자료더하기 
출석부2.has('tom'); //자료있는지 확인 (중복제외하여 3개 출력)
출석부2.size;  //자료 몇갠지 세기

var 출석부 = [ 'john' , 'tom', 'andy', 'tom' ];
var 출석부2 = new Set(출석부); //Array를 Set으로 바꾸기
출석부 = [...출석부2]  //Set을 Array로 바꾸기






// --------------------------------------------------------------------------------
// custom HTML: 반복되는 HTML 재사용
class 클래스 extends HTMLElement {
   connectedCallback() {
      let name = this.getAttribute('name');
      this.innerHTML = `<label>${name}을 입력하쇼</label><input>`
   }
   static get observedAttributes() {
       return ['name']
   }
   attributeChangedCallback() {
       //attribute 변경시 실행할 코드
   }
}
customElements.define("custom-input", 클래스);  // <custom-input></custom-input> 커스텀태그(=컴포넌트)에 해당 HTML 적용
// custom input 이름 구체화
// <custom-input name="이메일"></custom-input>
// <custom-input name="비번"></custom-input>