TIL_171012 실행컨텍스트 및 퀴즈

Execution Context

• 실행 컨텍스트는 전역 / Eval / 함수 3가지로
• 전역과 함수는 각자 다른 실행컨텍스트로 다르게 작동
  • 전역 컨텍스트의 경우 VO -> Global Object(DOM,BOM, Built-in)
  • 함수 컨텍스트의 경우 VO -> Activation Object를 가리킴

실행컨텍스트의 3가지 프로퍼티

• 추상적인 개념이지만, 물리적으로는 객체의 형태, 3가지 프로퍼티를 가짐

1) Variable Object (VO / 변수객체)

• 전역 컨텍스트의 경우 VO -> Global Object
• 함수 컨텍스트의 경우 VO -> Activation Object 를 가리킴
• 함수의 경우, 실행컨텍스트마다 각각의 AO를 가짐
• VO가 가지고 있는 정보: 변수 / 매개변수와 인수정보 / 함수 선언 (표현식 제외: 함수표현식은 ‘변수’)

2) Scope Chain

• 스코프가 중첩될때마다 부모함수의 스코프가 자식함수의 스코프 체인에 포함 (갯수가 많아짐)
• 즉, 함수 실행 중 변수를 만나면 현재 스코프에 해당하는 AO에서 검색
• -> 실패하면 스코프 체인에 담긴 순서대로 다음 AO에서

3) This Value

실행 컨텍스트의 작동원리

1. 전역코드에 컨트롤이 들어가면, 실행컨텍스트 스택에 실행 컨텍스트를 생성 (GO는 이미 있는 상태)

2. 실행컨텍스트의 SC를 생성 초기화

3. VI : VO에 프로퍼티와 값을 단계에 따라 세팅

1. 함수 먼저 설정; [프로퍼티]매개변수 : [값]인수
2. 함수 선언식; [프로퍼티]함수명 : [값]함수실체(생성된 객체)
   • 이때, 이미 한번 읽어서 등록되어 있으므로 함수선언식 이전에 함수를 호출할 수 있는 함수 호이스팅 발생
   • 이때, [[scopes]]로 자신의 SC의 리스트를 가리킴
3. 변수; [프로퍼티]변수명 :[값]undefined –> 변수 호이스팅

   4. this 값 결정

---

Closure

1. 내부함수가 외부함수보다 더 오래살아 남을 때,
2. 외부함수의 지역변수를 내부함수가 참조할때,
3. 외부함수가 return하며 종료하며 외부함수의 실행컨텍스트가 사라졌을지언정
4. 내부함수가 실행될시, 외부함수의 변수를 계속 참조할수 있음 -> 자유변수

   //전역변수 사용안
   var counter = 0;
   
       function add() {
         return ++counter;
       }
   
       function myFunction() {
         document.getElementById('demo').innerHTML = add();
       }
   
   //클로저 사용안
   var add = (function () {
        var counter = 0;
        return function () {
          return ++counter;
        };
      }());
   
   /* var add = (function () {
           var counter = 0;
           var poo = function () {
             return ++counter;
           };
           return poo;
         }());   
   */
   
      function myFunction() {
        document.getElementById('demo').innerHTML = add();
      }

---

Quiz

/* #6. 핸드폰번호 가리기

핸드폰 요금 고지서에 표시할 전화번호는 개인정보 보호를 위해 맨 뒷자리 4자리를 제외한 나머지를 ''으로 바꿔야 한다.
전화번호를 나타내는 문자열 str을 입력받는 hideNumbers 함수를 완성하라
예를들어 s가 '01033334444'면 '**4444'를 리턴하고, '027778888'인 경우는 '*****8888'을 리턴한다.
*/
//substring사용 방법으로 해보기!
function hideNumbers(str) {
  var result = str.split('');
  for (var i = 0; i < result.length - 4; i++) {
    result[i] = "*";
  }
  return result.join('');
}
console.log(hideNumbers('01033334444')); // *******4444
console.log(hideNumbers('027778888')); // *****8888

/*#7. 문자열을 숫자로 바꾸기

strToInt 메소드는 문자열 str을 매개변수로 받는다. str을 숫자로 변환한 결과를 반환하도록 strToInt를 작성하라.
예를들어 str이 '1234'이면 1234를 반환하고, '-1234'이면 -1234를 반환한다.
str은 부호(+,-)와 숫자로만 구성되어 있고, 잘못된 값이 입력되는 경우는 없다.
*/
function strToInt(str) {
  return str * 1;
  //2 - return +str;
  //3 - return parseInt(str);
  //4 - return Number(str); (비추)
}
console.log(strToInt('1234')); // 1234
console.log(strToInt('-1234')); // -1234

/* #10. Check Palindrom

palindrome(팰린드롬/회문)은 왼쪽에서 오른쪽으로 읽은 다음, 오른쪽부터 왼쪽으로 다시 읽어도 똑같은 형태와 의미를 유지하는 문장이나 단어를 지칭한다.
인자로 전달한 문자열이 palindrome인지 검사하여 Boolean값을 반환하는 함수를 완성하라. 단, 반드시 1자 이상의 문자열을 인자로 전달한다. */
function checkPalindrom(str) {
  return str === str.split('').reverse().join('');
}
console.log(checkPalindrom('dad'));
console.log(checkPalindrom('mom'));
console.log(checkPalindrom('palindrim'));
console.log(checkPalindrom('s'));


/*
Quiz.11
배열의 최대 / 최소값 구하기
배열의 요소 중 최대값 / 최소값을 반환하는 함수를 완성하라.*/
function getMaxValueFromArray(array) {
  //es5 return Math.max.apply(null, array);
  return Math.max(...array);
}
console.log(getMaxValueFromArray([3, 6, -2, -5, 7, 3])); // 7
function getMinValueFromArray(array) {
  return Math.min.apply(null, array);
}
console.log(getMinValueFromArray([3, 6, -2, -5, 7, 3])); // -5

오늘의 느낀점

• 개념적인 부분을 이해하는 것에 비해 알고리즘 문제 풀이가 좀 더 어려움
• 예습 복습의 방법을 글만 여러번 읽는 것보다 예제 코드를 눈으로 컴파일링하고 여기에 익숙해지는 방식으로 바꿔봐야될듯.
• 다양한 메소드를 배울수록 사람들의 알고리즘 풀이식이 점점 더 달라지는걸 몸소 느낌
• 하나의 문제여도 여러풀이방법을 적용해보려 노력한다면 더 공부가 될거 같다 :)