🗂️ Scope

📑 default parameter

function defaultPrice(price = 4) {
	return price
}
defaultParameter()  // 4;
defaultParameter(8) // 8;

매개변수도 변수다. price는 4라는 기본값을 가지고 있고, 저 함수 scope에서 쓰이는 값이다.

📑 lexical scope

scope는 함수를 선언할 때 생긴다.
선언하는 순간, 함수 내부의 변수는 자기 스코프부터 가장 가까운 곳(상위 범위)에 있는 변수를 계속 참조하게 된다.

스코프를 구분하는 걸 숙달해야겠다. 어느 곳에서는 안 쓰이고 어느 곳에서 쓰이고 내부 스코프에서 변수를 재할당하면 외부에 있던 변수가 재할당된다는 걸 조심해야겠다.

📑 closure

클로저는 함수와 함수가 선언된 어휘적 환경의 조합이다. 이 환경은 클로저가 생성된 시점의 유효 범위 내에 있는 모든 지역 변수로 구성된다.

multipeBy3과 multipleBy5 함수는 클로저 함수다. 함수의 정의 본문은 공유하지만 서로 다른 어휘(맥락)적 환경을 저장한다. multipleBy3은 multipleByAmount 파라미터를 3으로 환경에 세팅해 놓은 상태다. 마찬가지로 MultipleBy5은 multipleByAmount 파라미너를 5로 환경에 세팅한 상태다.

🗂️ Types

📑 참조 자료형을 변수에 할당할 경우, 데이터의 주소가 저장된다.

const nums1 = [1, 2, 3];
const nums2 = [1 ,2, 3];
nums1 === nums2  // false;  nums1과 nums2 서로 주소값이 다르다.

[1, 2, 3]  // 데이터가 heap에 저장되지만 변수 할당이 되지 않아 주소는 어디에도 저장되지 않는다.
nums1 === [1, 2, 3];   // false; 서로 다른 주소에 저장되었기 때문에 false가 된다.

🗂️ Object

📑 'this'는 method를 호출하는 시점에 결정됩니다.

const cal = {
	prop:14,
  	func: function() {
    	return this.prop
	}
}
console.log(cal.func());  // 14;

this

this는 class 키워드가 없던 시절 쓰이던 객체지향 프로그래밍을 할 때 쓰였다. 일반 함수에 new 키워드를 사용하여 클래스와 인스턴스 객체를 만들었다.

function Phone(brand) {
	this.brand = brand;
}

const phone = new Phone("Apple");
console.log(phone)  // Phone {brand: "Apple"}

객체 안에 객체 속성과 메서드를 활용하기도 했다.
하지만, 여기서 문제가 발생한다. 함수가 함수 호출 장소에 따라서 작동이 달라지고 에러가 날 수 있다. 이래서 bind()라는 메서드가 등장했다.

const obj = {
	hi = "hello",
  	console: function() {
    	console.log(this.hi);
    },
    oneSecondLater: function() {
    	setTimeout(function() { console.log(this.hi)}, 1000)
    }
}

obj.hi  // "hello";
obj.onSecondLater // undefined;

const obj = {
	hi = "hello",
  	console: function() {
    	console.log(this.hi);
    },
    oneSecondLater: function() {
    	setTimeout(function() { console.log(this.hi)}.bind(this), 1000)
    }
`

obj.hi();   // "hello"
obj.onSecondLater() // "hello"

this 이런 곳에 쓰면 복잡해지기 때문에, 현재는 class 내에서 인스턴스 객체를 참조 할 때 유용하다. 굳이 다른 곳에서 쓰지 않아도 된다.

함수가 호출 될때마다 그 함수는 "어떤 객체"의 method일 것이다. 호출될 때마다 그 "어떤 객체"를 물어보는 것이 this

🔥마지막으로

객체는 쉬운거 같으면서도 클로저나 this 요런게 나오면 한층 생각해질게 많아진다. 특히 객체 다룰 일이 많을 거같아서 꼼꼼히 읽는 연습을 하자.