#TIL_21.8.18

JS 사전 퀴즈 문제 해설

function Cat(name, age) {
	this.name = name
    this.age = age
}
const tab = Cat('nana', 7)
console.log(tab.name) // Error ... Cat 의 return 이 없기 때문에 여기서의 this 는 window 를 가르킴

// 위 코드는 아래와 같이 수정하면 원하는 값을 출력할 수 있음
const tab = new Cat('nana', 7) 
// 함수를 실행할 때 new 키워드를 통해 실행하면 this 가 new 를 통해 새로 생성된 객체를 가르킴
console.log(tab.name) // 'nana'

var, let, const

• var: function scope, 변수 재할당 가능
  호이스팅 ... 실행할 때, function scope 상 맨 위로 선언이 끌어올려짐.
  (값 할당 전에 호출될 수 있음 ... 예기치 못한 버그 발생 가능)
• let: block scope, 변수 재할당 가능
• const: block scope, 변수 재할당 불가능
• let 과 const 의 경우에도 호이스팅은 일어나지만, Temporary Dead Zone 이라는 개념으로 인해 할당되기 전에 호출하면 에러가 출력됨.

클로저

• 함수와 함수가 선언된 어휘적 환경의 조합

function outterFunction() {
	const name = 'roto'
    
    return function () {
    	alert(name)
    }
}

const printName = outterFunction()
printname() // 'roto'

위 코드에서 outterFunction 실행 후 name 변수는 소멸해야 하지만, 클로저에 의해 alert(name) 이 잘 작동합니다.

• 즉, 클로저를 이용해서 어떠한 상태를 담아둘 수 있음.
• 내부 함수에서 외부에 있는 변수에 접근이 가능함.

---

명령형 프로그래밍과 선언적인 프로그래밍 방식

• 명령형 프로그래밍은 컴퓨터가 수행할 명령들을 순서대로 써놓은 것이다.
  어떤 방법으로 어떻게 하느냐에 포커싱
• 선언형 프로그래밍은 어떻게 하느냐 보다는 무엇을 표현할 것인가에 포커싱 (대표적으로 HTML)
  무엇을 나타내는지에 대한 묘사

double 을 통한 예시

• 명령형 (어떻게 처리하는지에 대한 묘사)

function double(arr) {
	let result = []
    for (let i = 0; i < arr.length; i++) {
    	result.push(arr[i] * 2)
    }
    return result
}

• 선언형 (무엇을 원하는지에 대한 묘사)

function double(arr) {
    return arr.map(number => number * 2)
}

or 

function double(arr) {
    return arr.filter(param => typeof param === 'number')
    		.map(number => number * 2)
}

---

회고

아직 선언형 프로그래밍 보다 명령형 프로그래밍이 더 익숙하고, 선언형은 사용하기 어렵다.
선언형 프로그래밍을 사용해야 가독성과 유지보수적인 측면에서 훨씬 좋다고 하니 자주 사용해보도록 노력해봐야겠다.

클로저의 개념은 잘 모르고있었지만, 코딩테스트 문제를 풀거나 하면서 나도모르게 사용해본 적이 종종 있는 것 같았다. 앞으로 개념을 정확히 숙지하며 사용하도록 할 것이다.

함수형 프로그래밍보다는 마음이 훨씬 놓이는 강의였다....