기록

Player 세팅에서 Input System Package만 사용하는 상태

게임 뷰 창에서 버튼이 클릭되지 않는 문제가 발생했다.

하지만 시뮬레이터 창, 빌드 후에는 정상적으로 동작이 되는 문제가 있었다.

이런저런 방법을 시도해 보다가 혹시나 해서 시뮬레이터 창을 닫고 다시 플레이해 보니

정상적으로 동작이 되었다.

두 창이 모두 활성화된 상태에서 플레이될 때 에디터루프에서 인풋시스템이 초기화하면서 문제가 생긴 건지 별거 아닌 문제 때문에 꽤 시간을 빼앗긴 일이 생겨서 메모해 둔다.

Arrow Function

화살표 함수

화살표 함수는 return 밖에 없는 함수를 줄여서 표현할 수 있는 함수로, 람다식이라고도 부른다.

function add(a, b){
	return a + b;
}
console.log(add(1, 4)); // 5

// Arrow Function
const add = (a, b) => {
	return a + b;
}

// 또는 
// const add = (a, b) => a + b;
console.log(add(1, 4)); // 5

람다식의 표현은 함수의 앞에 매개변수를 괄호로 묶고 화살표 연산자를 사용한 뒤에 함수의 본문을 작성한다.

화살표 함수의 특징은 함수명, arguments, this 세 가지가 없다.

함수명이 없으므로 익명 함수로 동작하게 된다.

Anonymous Function

익명 함수

익명 함수는 이름이 없는 함수로 함수 코드가 변수명에 저장된 형태이다.

따라서 변숫값으로 구성된 함수 코드를 다른 변수명에 변수를 대입하듯이 사용되거나 다른 함수의 인수로 전달하는 방식으로 주로 사용된다.

const func = function() {
	console.log("Anonymous Function");
};

add라는 이름의 변수에 화살표 함수로 만든 이름 없는 익명 함수가 할당된다.

이렇게 익명함수는 간단한 표현으로 가독성과 간결함이 좋기 때문에 주로 일회성 작업이나 콜백 함수로 사용된다.

One-time Use

일회성 사용

익명 함수는 함수가 특정 작업을 수행한 후 다시 호출될 필요가 없는 경우와 같이 일회성으로 사용되는 경우가 많다.

setTimeOut(function() {
	console.log("Time Out");
}, 2000);

setTimeOut에 전달된 익명 함수는 2초의 시간 지연 후 한 번만 실행되게 된다.

변수나 프로퍼티에 할당 가능

일반적으로 변수나 객체의 프로퍼티에 할당될 수 있다. 이를 사용해서 여러 곳에서 재사용이 가능하다.

conse obj = {
	greet : function() {
    	console.log("Hello");
    }
};
obj.greet(); // Hello

greet 프로퍼티에 할당된 익명 함수는 객체를 통해서 여러 번 다시 사용이 가능하다.

자신을 참조할 수 없음

익명 함수는 이름이 없기 때문에 일반적으로 함수 내부에서 자신을 직접 참조할 수 없다.

따라서 재귀 호출과 같이 자신을 호출이 필요한 경우에는 이름이 있는 함수를 사용하는 것이 좋지만 이를 우회하여 표현식에 이름을 명시적으로 붙일 수 있다.

const factorial = function f(n) { // 이름 f 명시
	if (n <= 1) return 1;
    return n * f(n - 1);
};
console.log(factorial(5)); // 120

f는 함수 표현식의 이름이지만 factorial 변수에 익명 함수처럼 할당되어 내부에서 f를 사용하여 재귀 호출이 가능하다.

this 바인딩 없음

익명 함수 중에서도 화살표 함수는 자체적인 this를 가지지 않고 선언된 환경의 this를 상속받는다.

하지만 일반적인 익명 함수는 호출 문맥에 따라 this를 설정하는데 this 바인딩이 없기 때문에 화살표 함수의 경우 다르게 동작한다.

// anonymous func
const obj = {
  name: "bak",
  regularFunction: function() {
    console.log(this.name);
  }
};
obj.regularFunction(); // bak 

// arrow func
window.name = "global scope";
const obj = {
  name: "bak",
  arrowFunction: () => {
    console.log(this.name);
  }
};
obj.arrowFunction(); // global scope

일반적인 익명 함수에서 this는 문맥, 즉 함수가 호출되는 시점과 방식에 따라서 그 객체가 this가 된다.

하지만 화살표 함수는 고유한 this 바인딩이 없고 대신에 함수를 정의한 상위 스코프의 this를 상속받게 된다.

obj의 메서드로 정의된 것처럼 보이는 화살표 함수는 이러한 바인딩이 없는 특성으로 인해서 상위 스코프의 this를 상속받게 되어 위의 예제의 경우처럼 화살표 함수는 자신이 정의된 시점의 this를 상속받게 된다

따라서 this의 객체는 obj가 아닌  전역 객체 this를 가리키게 되고 this.name 은 window.name을 출력하게 된다.

this

자바스크립트에서 this는 함수가 호출될 때, 즉 함수의 실행 문맥에 따라 결정되는 특수한 객체이다.

Global Context

전역 문맥

전역에서 this를 사용할 때 window 또는 global 객체를 가리킨다.

console.log(this) // this 는 window or global 객체이다

Function Context

함수 문맥

일반 함수 내부에서 this는 호출된 문맥에 따라 다르다. 

기본적으로 전역 문맥에서 호출된 함수의 this는 전역 객체를 가리키지만 엄격 모드에서는 this가 undefined로 설정된다.

"use strict";
function Func(){
	console.log(this);
}

Func(); // undefined

Method Context

메서드 문맥

객체의 메서드로 호출된 함수에서 this는 그 메서드가 속한 객체를 가리키게 된다.

const myObject = {
	name : "bak",
    say : function() {
    	console.log(this.name);
    }
};

myObject.say(); // bak 출력

여기서 this는 myObject 객체가 된다.