For job interview, about Javascript 면접 공부하기-자바스크립트

1. What is Javascript? 자바스크립트란?

• Definition 정의 : 개발자가 만든 문서에 방문자가 방문하여 어떤 동작을 취했을 때, 그 동작에 대응하여 반응이 일어날 수 있도록 해주는 언어
• Features 특징
  • Interpreter 인터프리터 언어이다. 코드가 작성된 순서대로 윗줄부터 순차대로 구문 분석을 한다.
  • 클라이언트 스크립트 언어이다. 서버에서 실행되는 것이 아니라 클라이언트 컴퓨터에서 실행되기 때문에 서버의 부하를 줄일 수 있다.
  • 객체 기반 언어이다. 다양한 객체가 존재하며, 그에 해당하는 다양한 기능들이 존재한다.
  • 공개된 언어이다.
  • 다양한 라이브러리를 활용할 수 있다. 대표적으로 jQuery가 있다.
• 변수 선언 시 주의 사항
  • 변수명 첫 글자로는 $, _, 영문자만 올 수 있다.
  • 첫 글자 다음은 영문자, 숫자, $, _ 만 포함할 수 있다.
  • 변수명으로 예약어를 사용할 수 없다.

2. == 연산자와 === 연산자의 차이

문자형 10과 숫자형 10을 비교할 때, == 연산자는 데이터 타입과 상관없이 모양이 같으므로 true를 반환하지만 === 연산자는 모양은 같지만 데이터 타입이 일치하지 않으므로 false를 반환한다.

3. What is Closure? 클로저란?

• Definition 정의 : 간단하게 외부 함수의 변수를 사용하는 내부에 정의된 함수. A scope chain.
• 클로저 생성 조건
  • 내부 함수가 익명 함수로 되어 외부 함수의 반환 값으로 사용된다.
  • 내부 함수는 외부 함수의 실행 환경에서 실행된다.
  • 내부 함수에서 사용되는 변수 x는 외부 함수의 변수 범위(Scope)에 있다.
• Example 예제

  function count() {
    var i;
    for (i = 1; i < 10; i += 1) {
        setTimeout(function timer() {
            console.log(i);
        }, i*100);
    }
  }
  count();
  

10 10 10 10 10 10 10 10 10

• 목표 : 1, 2, 3, …9를 0.1초마다 출력하기
  
• 결과 : 10이 9번 출력
  
• 이유 : timer()는 클로저로써 언제 어디서 어떻게 호출되던지 항상 상위 scope인 count()에게 i를 알려달라고 요청한다. timer()는 0.1초 후에 호출된다. 하지만 첫 0.1초가 지날 동안 이미 i는 10이 되었다.
• 수정 1) 새로운 scope를 추가하여 반복할 때마다 그곳에 각각 따로 값을 저장한다.

function count() {
     var i;
     for (i = 1; i < 10; i += 1) {
         (function(countingNumber) {
             setTimeout(function timer() {
                 console.log(countingNumber);
             }, i * 100);
         })(i);
     }
 }
 count();

• 수정 2) ES6에서 추가된 block scope를 이용한다. (let은 block scope를 가진다.)

  function count() {
   'use strict';
   for (let i = 1; i < 10; i += 1) {
       setTimeout(function timer() {
           console.log(i);
       }, i * 100);
   }
   }
   count();
  

  
  
  

  4. var, let, const

  1. var
• Feature 특징 : 재선언, 재할당 모두 가능하다.

  var a = 'abc';
  var a = 'def'; // no error
  a = 'ghi'; // no error
  

  1. let
• Feature 특징 : 변수가 재선언될 수 없지만, 재할당될 수 있다.
• Example 예제

  let a = 'abc';
  a = 'def'; // no error
  

  1. const
• Feature 특징 : 식별자가 재선언, 재할당될 수 없다. (변경할 수 없다는 뜻이 아니다!)
• Example 예제

  const a = 'abc';
  a = 'def'; // error: reassign isn't available
  

※ 참고 : https://github.com/JaeYeopHan/Interview_Question_for_Beginner/tree/master/JavaScript, https://medium.com/javascript-scene/javascript-es6-var-let-or-const-ba58b8dcde75