[JS]14. 헷갈리는 js

in JS




var, let, const

  • const 는 선언 초기화용으로만 사용된다 (선언시 바로 할당해야하며 수정 못한다.)
  • var one = 1 === one = 1 (두 식이 완전히 동일하다)
a = 1
console.log(a)
// 자료형을 설정하지 않으면 자동으로 var 지정된다.
  • var 키워드로 선언한 변수는 중복 선언이 가능하다. (let, const 는 불가능!)
var a = 1
var a = 2
console.log(a) //2
// 해당 코드 오류 없이 출력된다!
  • var 는 함수 단위의 scope
  • let, const 는 블록 단위의 scope



함수

  • 함수 선언식 : function () {}
  • 함수 표현식(익명함수) : let func = function () {} (변수에 할당)
  • 함수 선언식은 호이스팅이 된다.
  • 함수 표현식은 콜백 함수로 사용할 수 있다.
  • 함수를 해석할 수 없을 때 Uncaught TypeError 가 발생한다.
  • return 만 하면 undefined 반환
  • 실행중인 함수의 실행 절차에 대한 정보는 해당 함수의 실행컨텍스트에 저장된다.
  • 실행 컨텍스트는 함수 실행에 대한 세부 정보를 담고 있다.
  • 제어 흐름의 현재위치, 변수 현재값, this 값 등 상세 내부 정보가 저장된다.
  • 함수를 호출할 때 마다 1개의 실행 컨텍스트가 생성된다.



즉시실행함수

  • (() => {console.log("HI")})()
  • 선언과 동시에 실행되는 함수
  • 즉시실행함수 내부에 선언된 변수는 private 하게 사용할 수 있다.
  • 즉시실행함수를 사용할 때는, 괄호를 묶고 함수를 호출해야 한다.



prototype vs proto

  • prototype : only 함수에서 생성자 속성을 만들어 주는것
  • __proto__ : 모든 객체가 가지고 있으며, 조상인 함수의 prototype obejct를 가르킨다. (조상것을 가져다 쓸 수 있다)



if, switch

  • 조건문에 문자열이 들어갈 때는 true 로 인식한다.
if("jnh"){
  console.log("hello")
}
//hello

  • 조건식에서 거짓으로 취급되는 값 : null, undefined, 0, NaN, false

  • switch-case 에서 겉은 값의 조건이 두 개 있다면 앞에 것만 수행된다.

switch(1){
  case 1: console.log(1);break;
  case 1: console.log(2);break;
  default:
}
// 1



자료형

  • 기본 자료형 : Boolean, Null, Undefined, Number, String, Symbol
  • 기본 자료형은 모두 immutable 하다.
  • 값 자체를 변경할 수 없고 할당한 변수에 다른 값으로 재할당 하는 개념
  • 참조 자료형(Obejct)는 mutable 하다.
  • 1 === +1 (true)



class 🤔

class Person {
  constructor(name){
    this.name = name
  }
  age(){
    return this.name === "나현" && "25"
  }
}

const person = new Person("나현")
console.log(person.name, person.age()) //나현 25

const handler = {
  get: function(obj, props){
    return props in obj ? obj[props] : 'test'
  }
}

const proxy = new Proxy({}, handler)

proxy.name = "noel"
proxy.address = 'incheon'

console.log(proxy.address, 'masan' in proxy, proxy.masan) //incheon false test

아직 잘 이해가 안간다 ㅠ



클로져 🤔

prism = (() => {
  let x = 0;
  const real = () => {
    return (x += 1);
  };
  return real;
})();

console.log(prism());
  • 클로저로 호출되는 prism()을 더 이상 호출되지 않도록 메모리를 해제하는 방법 : prism = null;



비트 연산자

  • && : 둘다 1이어야 1
  • || : 둘중 하나만 1이어도 1
  • a >> 1 a를 비트로 바꾸어 왼쪽으로 1비트씩 옮김 (나누기 2)
  • a << 1 a를 비트로 바꾸어 오른쪽으로 1비트씩 옮김 (곱하기 2)
  • 연산자 우선순위 : 곱셈,나눔셈 > 덧셈,뺄셈 > 비트시프트 > 비트 AND,OR > 논리 AND,OR
  • a = 1, b = 2, c = 3일때, a * b && c >> 1 는 10 && 11 » 1
const num = [1,2,3]
function calc(a,b,c){
  return a * b && c >> 1
}
console.log(calc.apply(null, num)) //1



Math.random

  • Math.random : 0 <= num < 1
  • Math.random() * 10 : 0 ~ 9.9999…
  • Math.floor(Math.random() * 10) : 0 ~ 9
  • Math.floor(Math.random() * n) + 1 : 1 ~ n



인터프리터

  • js는 자바 등의 컴파일 방식이 아닌 인터프리터 방식을 사용한다.
  • 인터프리터는 컴파일 된 프로그램보다 느리다



추가적으로 공부할 것

  • Symbol
  • Array.prototype.reduce()
  • 클로저
  • __proto__ vs prototype