정수가 담긴 배열 array와 정수 n이 매개변수로 주어질 때, array에 n이 몇 개 있는 지를 return 하도록 solution 함수를 완성해보세요.

function solution(array, n) {
    var answer = 0;

    array.filter(v => {
        return v === n ? answer++ : null
    });

      // 다른풀이
    // var arr = [];
    // arr = array.filter(v => {
    //     return v === n ? answer++ : null
    // });
    // answer = arr.length

    return answer;
}

비공개 변수를 갖고 있는 함수.

• 예제 코드

var addClosure = function() {
  var result = 'takoyaki'
  return function() {
    console.log(result)
  }
}
var closure = addClosure()
closure()

• 위 closure() 함수를 호출 할 경우 아래와 같이 전역,함수 컨텍스트가 생성된다.

"전역 컨텍스트": {
    변수객체: {
        arguments: null,
        variable: [{addClosure: Function}, 'closure']
    },
    scopechain: ['전역 변수객체'],
    this: window
}
"addClosure 컨텍스트": {
    변수객체: {
        arguments: null,
        variable: [{result: 'takoyaki'}]
    },
    scopechain: ['addClosure 변수객체', '전역 변수객체'],
    this: window
}

중요한 것은 closure = addClosure(); 할 때, function을 return하는데,function 선언시의 scope chain은 lexical scoping에 의해, ['addClosure 변수객체', '전역 변수객체']를 포함한다. 따라서 closure를 호출 할 때의 컨텍스트는 아래와 같다.

"closure 컨텍스트": {
    변수객체: {
        arguments: null,
        variable: null,
    },
    scopechain: ['closure 변수객체', 'addClosure 변수객체', '전역 변수객체'],
    this: window
}

따라서, closure 함수에서 scope chain을 통해 addClosure의 result 변수에 접근 할 수 있다. 아래 예제를 통해 알아보자.

var counter = function() {
  var count = 0
  function changeCount(num) {
    count += num
  }
  return {
    increase: function() {
      changeCount(5)
    },
    decrease: function() {
      changeCount(-5)
    },
    show: function() {
      console.log(count)
    }
  }
}
var counterClosure = counter()
counterClosure.increase()
counterClosure.show() // 5
counterClosure.decrease()
counterClosure.show() // 0

counter 함수 호출시 return을 통해 counterClosure 컨텍스트에 비공개 변수인 count에 접근할 수 있는 scope chain을 반환 한다. 이렇게 되면, counterClosure에서 계속 count에 접근 할 수 있다. 이 방식으로 비공개 변수를 만들어 활용할 수 있다. 비공개 변수이기때문에 외부에서 조작 할 걱정을 덜 수 있다. 프로그램 사용자는 공개한 메소드만 사용하기때문에, 예상 할 수 없는 상황이 일어나는것을 방지 할 수 있다. 명심해야 할 점은 사용자는 예상을 뒤엎는 상황을 만들 수 있기 때문에 모든 경우의 수를 생각하고 있어야 한다. 자바스크립트에서 위와 같은 상황에 대비할 수 있는 기본적인 방법은 클로저이다.

단점으로는 잘못 사용했을시, 성능 문제와 메모리 문제가 발생 할 수 있다. closure의 비공개 변수는 자바스크립트에서 언제 메모리 관리를 해야할 지 모르기 때문에 메모리 낭비로 이어질 수 있다. 메모리 문제가 발생한다면, 클로저를 의심 해 볼수있다. 또한 scope chain때문에 속도의 영향이 생긴다.

for (var i = 0; i < 10; i++) {
  $('#target' + i).on('click', function() {
    console.log(i)
  })
}

위 예제코드가 있을때, 얼핏 보면 #target0 부터 #target9까지 제대로 이벤트리스너가 연결 된 것처럼 보인다. 하지만, #target0부터 #target9까지 각각 이벤트리스너가 연결되기는 했지만, 실행 결과는 모두 10이다. 왜 그런지 이해가 가지 않는다면, 컨텍스트에 대한 부분을 다시 살펴보기 바란다. lexical scoping에 의해 함수는 선언할 때 scope가 생성된다. 이벤트리스너 안의 i는 외부의 i를 계속 참조 하고 있는것이다. i는 for문 종료 후 최종적으로는 10이 되기 때문에 결과는 모두 10이 된다.

for (var i = 0; i < 10; i++) {
  ;(function(j) {
    $('#target' + i).on('click', function() {
      console.log(i)
    })
  })(i)
}

위 처럼 IIFE를 사용해 클로저를 만들면, j값은 i에 해당하는 숫자로 고정되기 때문에 해결된다.

• 흔히들 변수의 스코프 라고 말한다.
  

Scope : 1. (무엇을 하거나 이룰 수 있는) 기회
        2. (주제, 조직, 활동 등이 다루는) 범위

[네이버 어학사전]

지금 현재 말하는 Scope의 의미는 범위에 가깝다고 말할 수 있다. 다시말해, 변수의 Scope는 변수를 사용할 수 있는 범위로 해석이 가능하다. ES5 까지는 Scope의 범위가 함수 단위의 Scope이다. 아래 코드를 보며 이해해 보자.

// 전역 변수 Scope
var num1 = 5
var num2 = 10

if (num1 < num2) {
  var num3 = 30
} else {
  // 전역 변수는 공유되기때문에 여기서는 var를 생략가능
  var num3 = 50
}

var func = function() {
  // 함수 단위의 Scope가 시작
  var num1 = 15
  var num4 = 20
  console.log(num1) 
  // 15, 현재 스코프에 num1이 있기때문에 현재 스코프의 값을 출력한다.
}
console.log(num3) 
// 30, 함수단위 스코프이기 때문에 같은 전역 공간에 있는 num3값을 출력한다.
func()
console.log(num4) 
// Uncaught ReferenceError : num4 is not defined,
// 함수 단위의 스코프이기 때문에 함수에서 쓰인 변수는 함수에서만 사용 가능하다.

여기서 자바와의 큰 차이점 중 하나를 볼 수 있다. 다른 언어들은 블록 단위의 스코프를 가지고 있어, if문에서도 별도의 스코프를 가지고있지만 자바스크립트에는 함수 단위의 스코프가 존재 한다.

Scope Chaining(스코프 체이닝)

chaining : 1. 체이닝
           2. 연쇄(적 처리)

[네이버 어학사전]

• 범위 안에서 연쇄적으로 처리하는(?) 아래 코드를 보며 이해 해 보자.

var num1 = 10
var func1 = function() {
  // 외부 함수 Scope(func1)의 시작
  var num2 = 15
  var func2 = function() {
    // 내부 함수 Scope(func2)의 시작
    // 1. 현재 스코프(func2)에는 num1 변수가 존재 하지 않는다.
    // 2. 스코프 체인을 타고 스코프 func1로 올라간다.
    // 3. 스코프 func1에도 num1 변수가 존재 하지 않는다.
    // 4. 스코프 체인을 타고 전역 스코프로 올라간다.
    // 5. 전역 스코프의 num1변수를 참조해 num1을 출력한다.
    console.log(num1) // 10

    // 1. 현재 스코프(func2)에는 num2 변수가 존재 하지 않는다.
    // 2. 스코프 체인을 타고 스코프 func1로 올라간다.
    // 3. 스코프 func1에 num2 변수를 참조해 num2를 출력한다.
    console.log(num2) // 15
  }
  func2() // 내부 함수 func2 호출
}
func1() // 함수 func1을 호출

strict mode (Strict mode | MDN)

• ES5에서 새로 생긴 모드이다.
• 코드의 문법을 좀 더 깐깐하게 검사해서 오류를 표출 하는 모드.

'use strict'
// 전역 스코프 상단에 위 구문을 넣어주거나
// 사용하려는 함수 바디 상단에만 넣어주면 된다.
// 미지원 브라우저는 그냥 문자열로 인식하고 오류를 발생시키지 않는다.

var num1 = 10
var func1 = function() {
  // 전역 스코프에 존재하는 변수이기때문에 덮어씌우면서 정상 작동한다.
  num1 = 30
  // 스코프 체인 상에 존재하지 않는 변수를 var없이 선언하면 오류 발생.
  num2 = 50 // Uncaught ReferenceError: num2 is not defined
}
// 스코프 체인 상에 존재하지 않는 변수를 var없이 선언하면 오류 발생.
num3 = 100 // Uncaught ReferenceError: num3 is not defined
func1()

lexical scoping(렉시컬 스코핑)

• scope는 함수를 호출할 때가 아니라, 선언할 때 생긴다.
  • 아래 코드에서 console.log 가 어떻게 찍힐지 생각해 보자.

var result = 'AAA'
function func() {
  console.log(result)
}
function func2() {
  result = 'BBB'
  func()
}
func2() // BBB

var result = 'AAA'
function func3() {
  console.log(result)
}
function func4() {
  var result = 'BBB'
  func3()
}
func4() // AAA

• func3의 result는 func4의 지역변수 result가 아니라, 전역변수 result를 바라보고 있다. 이것을 lexical scoping이라고 한다.
• 함수를 처음 선언하는 순간, 함수 내부의 변수는 자기 scope로부터 가장 가까운 곳에 있는 변수를 참조 한다.
• 위에서 func3 함수 안의 result 변수는 선언시 가장 가까운 전역변수 result를 참조 한다.
• 어떠한 짓을 해도 func3 함수가 한 번 선언된 이상 전역변수를 바라보는 result 변수가 다른걸 바라보게 할 수 없다.
• 유일하게 사용할 수 있는 방법은, 전역변수로 선언된 값을 다른 값으로 변경하는것이다.
• 전역변수 만드는 것은 지양 해야 한다. 이유는, 변수가 섞일 수 있기 때문이다. 다른사람과 협업해 개발하고, 라이브러리 등을 사용하다보면, 같은 변수이름을 사용해 겹치게되는 일을 겪을 수 있다. 해결 할 수 있는 방법 중 하나는, 전역변수 대신 함수 안에 넣어 지역변수로 넣어 사용하거나, 객체 안의 속성으로 만들어 사용하는 것이다.

var obj = {
  result: 'AAA',
  func: function() {
    console.log(this.result)
  }
}

• 위와같이 하면, obj.result,obj.func() 와 같이 접근 해야 하기때문에 obj를 통째로 바꾸지 않는 이상 겹치게 되는 염려를 덜 수 있다. 하지만, 위 방법의 단점은 누군가 고의적으로 result와 func를 바꿀 수 있다. obj를 통째로 바꾸지 않더라도, 코드 밑에 obj.result = "BBB"를 추가 한다면 obj.func()를 할 경우 AAA대신 BBB가 출력 될 것이다. 그걸 방지 하기 위해서는 아래와 같이 하면 된다.

var f = function() {
  var result = 'AAA'
  function func1() {
    console.log(result)
  }
  return { func: func1 }
}
var newFunc = f()
newFunc.func() // AAA

• f() 하게 되면, return에 의해 {func: function(){console.log(result)}}가 newFunc에 저장이 된다. 후에는 newFunc를 통해 func에 접근 할 수 있다. 하지만, result에는 접근 할 수 없다. 함수로 감싼 후 return을 통해 공개변수(func)만 공개하고, 비공개변수(result)는 비공개 하는 방법으로 진행 할 수 있다. 위 코드를 조금 변경하면, 아래와 같다.

var newFunc = (function() {
  var result = 'AAA'
  return {
    func: function() {
      console.log(result)
    }
  }
})()
newFunc.func() // AAA

• 위와같이 변경하면, f같은 변수를 한번 더 거치는대신, newFunc에 바로 집어넣어서 사용 할 수 있다. 위의 방법은 IIFE(즉시 호출 함수 표현식) 또는 모듈 패턴이라고 한다. 위 구문은 라이브러리를 만들 때 기본으로 사용되는 표현식이며, 비공개 변수가 없는 자바스크립트에 비공개 변수 기능을 만들어 주는 역할을 한다.

생각해 보기.

아래 코드를 바로 실행 하지말고, 실행결과를 예상 해 보고, 실행해 예상한 결과와 일치 하는지 비교 해보자.

var result = 'hello'
function func(s) {
  console.log(s + ' ' + result)
}
function func1() {
  var result = 'Bye'
  console.log(result)
  func('Hi,')
}
func1()

Hoisting : 1. 끌어올리기
           2. 들어올려 나르기

[네이버 어학사전]

console.log(str) // Uncaught ReferenceError: str is not defined

당연하게도 str은 선언조차 되지 않았으니 사용이 불가능하고 존재조차 하지 않는다. 하지만 아래 예제에선 다르다.

console.log(str1) // undefined, 오류가 발생하지 않는다. 프로그램은 정상.
console.log(func1) // undefined
console.log(func2)
var str1 = 'gom'
var func1 = function() {
  console.log('ABC')
}
function func2() {
  console.log('ZXY')
}

위의 코드에도 처음 str1이 선언되지 않은 변수 이지만 undefined만 내뱉고 프로그램은 죽지 않았다. 이유는 호이스팅이 일어났기 때문이다. 위 코드는 아래와 같이 변환된다고 보면 된다.

var str1
var func1
function func2() {
  console.log('ZXY')
}
console.log(str1)
console.log(func1)
console.log(func2)
str1 = 'gom'
func1 = function() {
  console.log('ABC')
}

함수 선언식에서는 변수없이 함수를 선언한 것으로 함수 전체코드가 호이스팅된다. 하지만 함수 표현식은 변수 선언과 할당을 구분할 수 있어 선언 부문만 호이스팅된다.

함수 선언식 vs 함수 표현식

간단하게 어떤 차이점이 있는지 알아보자.

함수 선언식(Function Declarations)

일반적인 프로그래밍 언어에서의 함수 선언과 비슷한 형식.

function 함수명(){
    구현 로직
}

function func(){
    return 'Function Declarations';
}
func(); // 'Function Declarations'

함수 표현식(Function Expressions)

유연한 자바스크립트 언어의 특징을 활용한 선언 방식

var 함수명 = function(){
    구현 로직
}

var func = function(){
    return 'Function Expressions';
}
func(); // 'Function Expressions'

함수 선언식과 함수 표현식의 차이점

함수 선언식은 호이스팅에 영향을 받지만, 함수 표현식은 호이스팅에 영향을 받지 않는다. 함수 선언식은 코드를 구현한 위치와 관계없이 자바스크립트의 특징인 호이스팅에 따라 브라우저가 자바스크립트를 해석할 때 맨 위로 끌어 올려진다. 변수와 함수는 사용하기 전 미리 선언해 사용하는것이 의도한대로 코드가 동작한다고 확신을 가지고 개발 할 수 있고, 직접적인 오류 발생으로 파악하기가 더 쉬울것이다.

• 전역 컨텍스트 와 함수 컨텍스트.

  • 코드를 처음 실행 하는 순간 모든것을 포함하는 전역 컨텍스트가 생긴다. (실행 하는 순간은, 브라우저가 스크립트를 로딩해서 실행하는것을 뜻한다.)
  • 전역 컨텍스트는 모든것을 관리하는 환경이며, 페이지가 종료될 때까지 유지된다.
  • 함수를 호출 할 때마다 함수 컨텍스트가 하나씩 생긴다.

• 컨텍스트의 네 가지 원칙

  • 전역 컨텍스트 하나 생성 후, 함수 호출시 마다 컨텍스트가 생성된다.
  • 컨텍스트 생성 시, 컨텍스트안에 변수객체(arguments,variable),scope chain, this가 생성된다.
  • 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수객체 안에서 값을 찾고, 없다면 스코프체인으로 올라가며 찾는다.
  • 함수 실행이 끝나면, 해당 컨텍스트는 사라진다.(클로저는 제외) 페이지가 종료되면, 전역 컨텍스트가 사라진다.

예제코드

var result = 'hello'
function func(s) {
  console.log(s + ' ' + result)
}
function func1() {
  var result = 'Bye'
  console.log(result)
  func('Hi,')
}
func1()

전역 컨텍스트

• 전역 컨텍스트가 생성된 후 변수객체,scope chain, this가 생성된다. 전역 컨텍스트는 arguments가 없고, variable은 해당 스코프들의 변수들을 말한다. 위 코드에서는 result, func, func1 이 있다.
• scope chain은 자기 자신인 전역 변수객체이다.
  • this는 따로 설정되어 있지 않으면 window이다.
  • this를 바꾸는 방법은 new를 호출 하는 것이다. 또는, 함수에 다른 this를 bind할 수 있다.
• 위 코드를 객체 형식으로 표현하면 아래와 같다.

'전역 컨텍스트': {
    변수객체 : {
        arguments: null,
        variable: ['name', 'func', 'func1']
    },
    scopechain: ['전역 변수객체'],
    this: window
}

• 코드를 위에서부터 실행하게 되면, func와 func1은 호이스팅 때문에 선언과 동시에 대입이 된다. 그 후, variable의 result에 'hello'가 대입된다.

variable: [{ name: 'hello' }, { func: Function }, { func1: Function }]

함수 컨텍스트

• 위 예제코드에서 func1()를 하는 순간, 새로운 컨텍스트인 func1() 함수 컨텍스트가 생성된다. 생성되었던 전역 컨텍스트는 그대로 유지 되고, arguments는 없고, variable은 result만 존재 한다. scope chain은 func1 변수객체와 상위의 전역 변수객체이다. this는 따로 설정하지 않았으므로 window이다.

'func1 컨텍스트': {
    변수객체: {
        arguments: null,
        variable: ['result']
    },
    scopechain: ['func1 변수객체', '전역 변수객체'],
    this: window
}

func1를 호출한 후 차례로 실행 하는데, variable의 result에 Bye를 대입해주고, console.log(result); 의 result 변수는 func1 컨텍스트 안에서 찾으면 된다.

variable에 result가 Bye로 설정되어있으니, result가 콘솔에 찍히게 된다. 그 다음 func("Hi,")은 func1 컨텍스트안에서 func 변수를 찾을 수 없다.

찾을 수 없는경우, scope chain에 의해 상위 변수객체에서 찾는다. 상위인 전역 변수객체에서 찾고, variable에 func함수를 호출한다. func함수가 호출 된 후에는 func 컨텍스트도 생성된다. arguments는 s = Hi,이고, scope chain은 func 스코프와 전역 스코프 이다.

여기서 중요한것은, lexical scoping에 따라 func 함수의 scope chain은 선언시 이미 정해져 있다. func1 스코프는 func 컨텍스트의 scope chain이 아니다. variable은 없고, this는 window이다.

'func 컨텍스트': {
    변수객체: {
        arguments: [{s: 'Hi,'}],
        variable: null
    },
    scopechain: ['func 변수객체', '전역 변수객체'],
    this: window
}

컨텍스트가 생성된 후 함수가 실행 되는데, 나중에 생긴 func가 가장 먼저 실행된다. func 함수 안에 console.log(s + " " + result);의 s와 result변수는 func컨텍스트에서 찾으면 된다. s는 arguments에서 찾을 수 있고, result는 func 변수객체에 없으므로, scope chain으로 전역 스코프에서 찾으면 된다. 전역 변수객체로 올라가면, variable에 result값이 hello라고 되어있기 때문에, Hi, Hello가 된다. func 컨텍스트는 func1 컨텍스트와 전혀 관계가 없는것이다. func 함수 종료 후 func 컨텍스트가 사라지고, func1 함수의 실행이 마무리가 된다. func 컨텍스트가 사라지고, func1 컨텍스트도 다음으로 사라지며, 마지막에 전역 컨텍스트도 사라진다.

• ES6 이전의 변수 선언시에 var를 이용해 선언을 했다. ES6에서 새로 추가된 const 와 let을 알아보며, 기존의 var과의 차이점을 알아보자.

• 현재까지 발표된 버전은 ES10이다. (2020.06)

• 우선, var과의 가장 큰 차이점은 Scope 이다. var은 함수스코프이고, const와let은 블록스코프이다.

• 함수스코프의 경우 함수내의 어느곳에서 호출해도 접근이 가능하지만, 블록스코프의 경우 블록내에서만 호출이 가능하며, 해당 블록이 아닌곳 에서는 호출이 불가능하다.

• 예로, if문 내에서 사용한 var 변수는 if문 외부에서도 호출이 가능하지만, const와let은 불가능하다.

if (true) {
  var num = 5
}
console.log(num) // 5

if (true) {
  const num = 5
}
console.log(num) // Uncaught ReferenceError: i is not defined

if (true) {
  let num = 5
}
console.log(num) // Uncaught ReferenceError: i is not defined

• var에는 아래와 같은 문제가 존재 한다.

var str1 = 'AAA'
var str2 = 'BBB' // 이미 생성된 변수명으로 재선언 했으나, 아무런 문제가 발생하지 않는다.
str3 = 'CCC'
var str3 // hoisting으로 인해 ReferenceError에러가 나지 않는다.

console.log(str3) // CCC

• const와let은 var과 다르게 변수 재선언이 불가능하다. const와let의 차이점은 변수의 재할당 여부이다. const는 재할당이 불가능하지만, let은 재할당이 가능하다.

let str = 'AAA'
let str = 'BBB' // 에러
str = 'CCC' // 정상

console.log(str) // CCC

const str = 'AAA'
const str = 'BBB' // 에러
str = 'CCC' // 에러

• const와let의 한가지 더 다른점은, let은 변수 선언 후에 값을 할당 해도 되지만, const는 변수 선언시 값을 할당 해야 한다.

let str
str = 'AAA' // 정상

const str; // 에러
str = "AAA"; // 에러

const str = "AAA"; // 정상

• 하지만, const는 새로운 값을 대입하는것을 막을뿐, 할당된 객체나 배열의 요소를 바꾸는것은 가능하다. 즉, 데이터의 주소값만 고정하는 것 이다.

const arr = [1, 2, 3]
arr[0] = 5
console.log(arr) // [5,2,3]

const obj = { id: 'java' }
obj.id = 'script'
console.log(obj) // {id: "script"}