원시타입 vs 참조타입

---

원시타입(Primitive type)

변수를 선언하고 그 변수에 값을 할당할때 값이

number, boolean, null, undefined, string 면 원시타입 이다.

참조타입(Reference type)

원시 자료형이 아닌 모든 것은 참조 자료형 대표적으로
배열, 객체, 함수 가 있다.

변수에 있는 내용을 가져올 때 해당 변수의 값 을 가져오는것이 아니라 주소 값을 가져온다

스코프(scope)

---

스코프는 "변수 접근 규칙에 따른 유효 범위"입니다

첫번째 규칙은 안쪽 스코프에서 바깥쪽 스코프로는 접근할 수 있지만 반대는 불가능합니다.

두번째 규칙은, 스코프는 중첩이 가능하다는 것입니다. 스코프는 마치 중첩된 울타리와 같습니다.

특별히 가장 바깥쪽의 스코프는 전역 스코프(Global Scope)라고 부릅니다. 전역의 반대말은 지역(local)으로 전역이 아닌 다른 스코프는 전부 지역 스코프(local scope)입니다.

"지역 변수는 전역 변수보다 더 높은 우선순위를 가진다"

문제)

let name = '김코딩';

function showName() {
  let name = '박해커'; // 지역 변수
  console.log(name); // 두번째 출력
}

console.log(name); // 첫번째 출력
showName();
console.log(name); // 세번째 출력

let name = '김코딩';

function showName() {
   name = '박해커'; // 지역 변수
  console.log(name); // 두번째 출력
}

console.log(name); // 첫번째 출력
showName();
console.log(name); // 세번째 출력

클로져(closure)

---

클로저란 "외부함수의 변수에 접근할 수 있는 내부함수"

ex)

arrow function 을 이용한 간단한 덧셈 함수

const add = (x, y) => x + y;
add(5, 7);; //12

함수의 호출이 두 번 발생

const adder = x => y => x + y;
adder(5)(7); //12

함수를 리턴하는 함수

• 리턴값이 함수

const adder = x => y => x + y;
adder(5)(7); //12

typeof adder(5) // 'function'

adder(5) // y => x + y  <= 현재 x 값은 5  

클로저 함수의 기본 형태

const adder = x => y => x + y;

// 위의 코드와 동일 합니다.
const adder = function (x) {
  return function (y) {
    return x + y;
  }
}

function (y) {
    return x + y;
  }

위코드의 부분이 adder(5) 부분과 동일합니다.

일반적인 함수는, 함수 실행이 끝나고 나면 함수 내부의 변수를 사용할 수 없습니다. 이와 다르게, 클로저는 외부 함수의 실행이 끝나더라도, 외부 함수 내 변수가 메모리 상에 저장됩니다. (어휘적 환경을 메모리에 저장하기 때문에 가능한 일입니다)

변수 add5 에는 클로저를 통해 리턴한 함수가 담겨 있습니다. add5 는 재미있게도, adder함수에서 인자로 넘긴 5라는 값을 x 변수에 계속 담은 채로 남아있습니다. 외부 함수의 실행이 끝났음에도 말이죠!

클로저를 이용해서 HTML 문자열 만들기

const tagMaker = tag => content => `<${tag}>${content}<$/{tag}>`

const divMaker = tagMaker('div');
divMaker('html') // "<div>html</div>"
divMaker('hello) // "<div>hello</div>"

const divMaker = tagMaker('span');
divMaker('html') // "<span>html</span>"
divMaker('hello) // "<span>hello</span>"