모던 자바스크립트 Deep Dive #1

Yejung·2022년 10월 25일
0

📚 22.10.24 1회차 스터디 정리본


📌 프로그래밍

  • 프로그래밍이란 무엇이라고 생각하나요?

    • 컴퓨터에게 실행을 요구하는 일종의 커뮤니케이션
    • 무엇을 실행하고 싶은지 정의하고 코드로 요구사항을 설명하는 작업
  • 컴파일러는 뭐고 인터프리터는 뭔가요?

    • 컴퓨터가 이해할 수 있는 언어, 즉 기계어로 명령을 전달해야함
    • 사람이 이해할 수 있는 약속된 구문으로 구성된 프로그래밍 언어를 사용해 프로그램을 작성한 후, 그것을 컴퓨터가 이해할 수 있는 기계어로 변환해야하는데 이때 사용하는 일종의 번역기가 컴파일러와 인터프리터

컴파일러 언어인터프리터 언어
코드가 실행되기 전 단계인 컴파일 타임에 소스코드 전체를 한번에 머신코드로 변환한 후 실행코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간코드인 바이트코드로 변환한 후 실행
실행 파일을 생성실행 파일을 생성 X
컴파일 단계와 실행 단계가 분리. 컴파일 후 실행 파일을 실행인터프리트 단계와 실행 단계가 분리X. 인터프리터는 한 줄씩 바이트코드로 변환하고 즉시 실행
실행에 앞서 컴파일은 단 한번 수행코드가 실행될 때마다 인터프리트 과정이 반복 수행
컴파일과 실행 단계가 분리되어 있어 구동시간이 오래 걸리지만 실행 속도가 빠르다반복 수행으로 인해 실행 속도가 느리다. 대신 런타임에 실시간 Debugging 및 코드 수정이 가능
구동시에 코드와 함께 시스템으로부터 메모리를 할당받으며 할당받은 메모리를 사용메모리를 별도로 할당받아 수행되지 않으며, 필요할 때 할당하여 사용


📌 자바스크립트

  • 자바스크립트의 특징은 무엇이 있나요?

    • 웹 브라우저에서 동작하는 프로그래밍 언어
    • 개발자가 별도의 컴파일 작업을 수행하지 않는 인터프리터 언어
    • 대부분의 모든 자바스크립트 엔진은 인터프리터와 컴파일러의 장점을 결합 (대부분의 모던 브라우저에서 사용되는 인터프리터는 명시적인 컴파일 단계를 거치지는 않지만 복잡한 과정을 거치며 일부 소스코드를 컴파일하고 실행 -> 동적 기능 지원을 살리면서 실행속도가 느리다는 단점을 극복)
    • 프로토타입 기반의 객체지향 언어


📌 변수

  • 변수란 무엇인가요?

    • 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름
  • 식별자란 무엇인가요?

    • 어떤 값을 구별해서 식별할 수 있는 고유한 이름 (메모리 주소에 붙인 이름)
    • 값이 아니라 메모리 주소를 기억하고 있다.
    • 변수 이름에만 국한해서 사용하지 않는다 (변수, 함수, 클래스 등의 이름은 모두 식별자)
  • 변수를 선언한다는 것은 어떤 것을 의미하나요?

    • 변수를 생성하는 것
    • 값을 저장하기 위한 메모리 공간을 확보하고 변수 이름과 확보된 메모리 공간의 주소를 연결해서 값을 저장할 수 있게 준비하는 것
  • var 키워드는 뭔가요?

    • 뒤에 오는 변수 이름으로 새로운 변수를 선언할 것을 지시하는 키워드
    • 선언 단계와 초기화 단계가 동시에 진행 (암묵적인 초기화가 자동 수행)
  • 변수 선언과 초기화
    - 선언 단계 : 이름을 등록해서 js 엔진에 변수의 존재를 알린다
    - 초기화 단계 : 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당해 초기화한다.

  • 호이스팅이 뭔가요?

    • 인터프리터가 코드 실행에 앞서 함수, 변수 또는 클래스의 선언을 해당 스코프 최상단으로 끌어 올리는 것처럼 보이는 프로세스 (the process whereby the interpreter appears to move the declaration of functions, variables or classes to the top of their scope, prior to execution of the code)
    • JavaScript는 초기화가 아닌 선언만 호이스팅한다
    • let, const, class를 사용한 선언문은 호이스팅이 발생하지 않는 것처럼 동작
  • var 키워드의 문제점은 무엇이 있나요?

    • 변수 중복 선언 허용
    • 함수레벨 스코프를 지원해 의도치 않은 전역변수가 선언될 수 있다
    • 변수 호이스팅에 의해 변수 선언문 이전에 변수 참조 가능
  • let 키워드는 var 키워드와 어떤 점이 다른가요?

    • 변수 중복 선언 금지
    • 블록 레벨 스코프
    • 변수 호이스팅이 발생하지 않는 것처럼 동작
      • 선언단계와 초기화단계가 분리되어 진행 (런타임 이전에 암묵적으로 선언 단계가 먼저 실행되지만 (호이스팅) 초기화 단계는 변수 선언문에 도달했을 때 실행)
      • 스코프 시작지점부터 변수 선언문 지점 전까지는 TDZ이기 때문에 변수를 참조할 수 없다.
  • TDZ

    • 스코프의 시작 지점부터 변수 초기화 시작 지점까지 변수를 참조할 수 없는 구간
  • const 키워드는 어떤 특징이 있나요?

    • 상수 선언을 위해서 사용
    • 반드시 선언과 동시에 초기화해야한다
    • 블록 레벨 스코프
    • 변수 호이스팅이 발생하지 않는 것처럼 동작
    • 재할당 금지
    • 객체를 할당한 경우 값을 변경하는것은 가능
  • 식별자 네이밍 규칙은 어떤 것들이 있나요?

    • 식별자는 특수문자를 제외한 문자, 숫자, _ , $를 포함할 수 있다.
    • 그 중 숫자로 시작하는 것은 허용하지 않는다.
    • 예약어는 식별자로 사용할 수 없다.
  • 네이밍 컨벤션은 어떤 것들이 있나요?

    // 카멜 케이스
    var firstName;
    
    // 스네이크 케이스
    var first_name;
    
    // 파스칼 케이스
    var FirstName;
    
    // 헝가리언 케이스
    var strFirstName; // type + identifier
    var $elem = document.getElementById("myId") // DOM 노드
  • 일반적인 규칙
    - 변수와 함수 ➡ 카멜 케이스
    - 생성자 함수, 클래스 이름 ➡ 파스칼 케이스

  • 리터럴이 뭔가요?

    • 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기법
    • 값을 생성하기 위해 미리 약속한 표기법
      - 예시
      - 정수 리터럴 : 100
      - 16진수 리터럴 : 0x41
      - 불리언 리터럴 : true, false
      - null 리터럴 : null
      - 객체 리터럴 : { name: "Yejung", address: "Gumi" }
      - 함수 리터럴 : function () {}


📌 데이터 타입

  • 데이터 타입의 종류는 어떤 것들이 있나요?

    • 원시 타입 (primitive type)
      - 숫자, 문자, 불리언, null, undefined, 심벌
    • 객체 타입 (reference type) : 객체, 배열, 함수 등
  • 심벌 타입?

    • ES6에서 추가
    • 다른 값과 중복되지 않는 유일무이한 값
    • 주로 이름이 충돌할 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위해 사용
    • 심벌 값을 프로퍼티 키로 사용하여 생성한 프로퍼티는 for ... in 문이나 Object.keys, Object.getOwnPropertyNames 메서드로 찾을 수 없다 (은닉 가능)
    • Object.getOwnPropertySymbols 메서드로 찾을 수 있다
    • Symbol 함수 호출을 통해 생성
  • 데이터 타입은 왜 필요할까요?

    • 값을 저장할 때 확보해야하는 메모리 공간의 크기를 결정하기 위해
    • 값을 참조할 때 한 번에 읽어 들여야 할 메모리 공간의 크기를 결정하기 위해
    • 메모리에서 읽어 들인 2진수를 어떻게 해석할지 결정하기 위해
  • 정적 타이핑이 뭔가요?

    • 변수 선언 시점에 데이터 타입을 선언하고 변수의 타입을 변경할 수 없는 것
    • C, Java : 정적 타입 언어
  • 동적 타이핑이 뭔가요?

    • 선언이 아닌 할당에 의해 타입이 결정되어 재할당에 의해 변수의 타입이 언제든지 동적으로 변할 수 있는 것
    • JavaScript, Python, PHP, Ruby : 동적 타입 언어

출처

문제 : https://github.com/junh0328/prepare_frontend_interview

모던 자바스크립트 deep dive
https://developer.mozilla.org/en-US/docs/Glossary/Hoisting
https://jins-dev.tistory.com/entry/Compiler-%EC%99%80-Interpreter-%EC%9D%98-%EA%B0%9C%EB%85%90%EA%B3%BC-%EC%B0%A8%EC%9D%B4%EC%A0%90

profile
이것저것... 차곡차곡...

0개의 댓글