[코어 자바스크립트] 기타

 

Proxy와 Reflect

Proxy : 객체의 기본 동작을 가로채서 수정하거나 확장할 수 있는 강력한 기능.

let numbers = [0, 1, 2];

numbers = new Proxy(numbers, {
  get(target, prop) {
    if (prop in target) {
      return target[prop];
    } else {
      return 0; // 기본값
    }
  }
});

alert( numbers[1] ); // 1
alert( numbers[123] ); // 0 (해당하는 요소가 배열에 없으므로 0이 반환됨)

 

👆🏻 위 코드처럼 get Proxy를 사용하면 '기본' 값 설정 로직을 원하는 대로 구현할 수 있다. (Proxy로 감싸기 전에는 undefined 가 나옴. undefined 값 말고 다른 기본 값을 proxy문법을 통해서 만들어 줄 수 있는거임.)

 

 

let numbers = [];

numbers = new Proxy(numbers, { // (*)
  set(target, prop, val) { // 프로퍼티에 값을 쓰는 동작을 가로챕니다.
    if (typeof val == 'number') {
      target[prop] = val;
      return true;
    } else {
      return false;
    }
  }
});

numbers.push(1); // 추가가 성공했습니다.
numbers.push(2); // 추가가 성공했습니다.
alert("Length is: " + numbers.length); // 2

numbers.push("test"); // Error: 'set' on proxy

alert("윗줄에서 에러가 발생했기 때문에 이 줄은 절대 실행되지 않습니다.");

 

👆🏻 위의 코드처럼 set 트랩을 사용할 땐 값을 쓰는 게 성공했을 땐 반드시 true를 반환, 실패의 경우에는 반드시 false를 반환해야 합니다.

 

❌ 한 객체를 여러번 Proxy로 감싸는 방식은 예상치 않은 결과로 나타날 수 있기 때문에 사용해서는 안된다.

 

 

커링

여러개의 인자(a, b, c)를 가지는 함수를 받아들여서 한 인자(a)만 받는 함수의 연쇄로 변환하는 프로세스이다.

함수를 부분적으로 적용하고 재사용성을 높일 수 있다.

함수를 호출하는데 쓰이지 않는다. 변환에만 쓰인다.

//ex)

function curry(f) { // 커링 변환을 하는 curry(f) 함수
  return function(a) {
    return function(b) {
      return f(a, b);
    };
  };
}

// usage
function sum(a, b) {
  return a + b;
}

let curriedSum = curry(sum);

alert( curriedSum(1)(2) ); // 3

 

 

참조 타입

let user = {
  name: "John",
  hi() { alert(this.name); },
  bye() { alert("Bye"); }
};

user.hi(); // John (간단한 호출은 의도한 대로 잘 동작합니다.)

// name에 따라 user.hi나 user.bye가 호출되게 해봅시다.
(user.name == "John" ? user.hi : user.bye)()

이 부분에서 (user.name == "John" ? user.hi : user.bye)(); 

에러가 나는 이유는 ?

✅ 메서드의 호출은 user.hi()처럼 해당 메서드를 소유한 객체에 대해서만 이루어져야 메서드 내의 this가 해당 객체를 참조 하는데, 

삼항 연산자로 호출할 때는 호출될 때 this의 값이 정의되어 있지 않아서 문제가 발생한다.

 

let user = {
  name: "John",
  go() { alert(this.name) }
}

user.go() //일반적인 메서드 호출 방법1
(user.go)() //이렇게 직접호출 하는 방법2 이 있다.

위 코드에서 잘못된것은?

-> ; 세미콜론이 빠져있다. 세미콜론을 안붙이면

let user = { go:... }(user.go)() 이런식으로 붙게 되면서 객체 형태의 함수를 호출한 것처럼 되기 때문에 에러가 발생한다. 

 

 

BigInt

• 길이의 제약 없이 정수를 사용할 수 있는 숫자형.
• 정수 리터럴 끝에 n을 붙이거나
• 문자 앞에 BigInt 함수를 호출하거나
• 문자열이나 숫자를 가지고 BigInt 타입의 값을 만들 수 있다.
• BigInt 형 값과 숫자를 섞어서 계산할 수는 없다. alert(1n + 2); // Error
• 필요한 상황이라면 형 변환이 필요하다. (Number를 BigInt로 또는 BigInt를 Number로)
• 근데 bigint가 너무 커져서 숫자형에서 허용하는 자릿수를 넘으면 나머지는 잘려나간다.
• 단항 덧셈 연산자( + )를 사용하면 값을 쉽게 숫자형으로 바꿀 수 있지만 +bigInt 이렇게는 사용할 수 없다.