TIL0501 javascript review

var, let, const

javascript에서 변수를 선언하는 방법은 var, let, const 이렇게 세가지가 있다
먼저 var 는 같은 이름의 변수를 한 번 더 선언해도 에러가 나오지 않는다

var name = "pin";
console.log(name);  //"pin"
var name = "jake";
console.log(name);  //"jake"

이렇게 var의 유연한 처리는 간단한 코드에서는 편리하지만 코드가 길어진다면 자기도 모르게 변수가 바뀔 위험이 있다
그래서 나온 것이 let 과 const 다 let은 변수에 값을 재할당 할 수 있지만 const 는 재선언, 재할당 둘 다 불가하다

let name = "pin";
console.log(name);  //"pin"
name = "jake";
console.log(name);  //"jake"

변수의 생성 순서는 선언 > 초기화 > 할당 이렇게 이루어 지는데
var는 선언과 초기화 단계가 한번에 이루어진다
하지만 let 은 선언 단계와 초기화 단계가 분리되어 진행한다

변수는 재할당이 필요할 때를 빼고는 const를 쓰는 것이 좋다
const 를 사용하면 의도하지 않은 재할당을 막아주기 때문에 에러가 날 위험이 적다

camelCase, snake_case

변수 이름이나 클래스 아이디 등 이름을 정할때 두가지 방법을 사용할 수 있다
camelCase 와 snake_case 인데 이 두 방법은 코드의 가독성을 높여준다
snake_case 보다는 camelCase 를 더 많이 쓴다

camelCase 방법은 두가지로 나눠지는데 lowerCamelCase 와 UpperCamelCase 이다
lowerCamelCase 는 맨 앞 글자를 소문자로 하는 것이고
UpperCamelCase 는 맨 앞 글자도 대문자로 하는 것이다

snake_case 도 마찬가지로 두가지로 나뉘는데 Train_Case 와 spinal_case 이다
보이는것처럼 Train_Case 는 앞글자가 대문다 spinal_case 는 소문자이다

keyup, keydown, keypress

keyup 은 사용자가 키를 누르고 나오면 실행된다
keydown 은 사용자가 키를 눌렀을 때 실행된다 계속 쭉 눌러도 하나만 눌림
keypress 는 사용자가 키를 눌렀을 때 실행된다 계속 쭉 누르면 계속 실행된다

class, object, for-in, Object.entries, arrow function 연습코드

//MyMath 인스턴스 생성
class MyMath {
  constructor(num11, num22) {
    this.getNumber = [num11, num22];
    this.add = num11 + num22;
    this.substract = num11 - num22;
    this.multiply = num11 * num22;
  }
//discount 함수 
  discount(num11, num22) {
//discount 키 만들어서 값 넣기
    this.discount = this.add * 0.7;
  }
}
const result3 = new MyMath(12, 49);
//result3 에 discount 함수 실행
result3.discount();
console.log(result3);
// result3 을 키 2쌍의 키밸류 배열로 나누기
const slice = Object.entries(result3);
console.log(slice);
//
// 중간 결과
[
  [ 'getNumber', [ 12, 49 ] ],
  [ 'add', 61 ],
  [ 'substract', -37 ],
  [ 'multiply', 588 ],
  [ 'discount', 42.699999999999996 ]
]
//
//값이 50보다 크면 값을 'Top'으로 변경
const clear = () => {
   for (let i in slice) {
     if (slice[i][1] > 50) {
       slice[i][1] = 'Top';
     }
   }
  return slice;
}
clear();
//
// 결과
[
  [ 'getNumber', [ 12, 49 ] ],
  [ 'add', 'Top' ],
  [ 'substract', -37 ],
  [ 'multiply', 'Top' ],
  [ 'discount', 42.699999999999996 ]
]