[DAY16] Today I Learned

1nxeo·2023년 2월 21일

항해99

목록 보기
16/63
post-thumbnail

1. String.prototype.repeat()

const mood = 'Happy! ';

console.log(`I feel ${mood.repeat(3)}`);
// Expected output: "I feel Happy! Happy! Happy! "

2. 데이터타입

[KEYWORD]
기본형, 참조형, 불변성, 메모리 주소, 식별자, 변수, 가변값, 데이터 영역, 변수 영역, 불변 객체, 얕은 복사, 깊은 복사,
undefined, null
  1. 다른 언어에서는 어떻게 데이터 타입을 정의 할까요?

  2. 다른 언어들처럼 데이터 타입을 다룬다면 장단점은 무엇이 있을까요?

  3. 기본형 데이터와 참조형 데이터를 굳이 왜 구분해서 다룰까요? 혹시 하나의 방식으로 다 다룰수는 없을까요?

  4. 왜 불변 객체를 이용해야 할까요? 어떤 실수가 있을 수 있을까요?

  5. 왜 자바스크립트에는 undefined와 null이 있을까요?


  1. 타입을 지정하는 언어는 어떠한 언어가 있는지 확인해보고 해당 언어들과 자바스크립트의 방식의 장단점을 조사해주세요, 가능하다면 실제 케이스를 찾아보고 대답해주세요
    자바, C, C++ : 변수 생성시에 타입이 어떤 자료형인지 명시하기 때문에 컴파일 할때 안맞으면 error, 컴파일시에 실행 속도가 빠름. 근데 번거로움
    자바스크립트 : 타입 명시 없음. 코드 작성 빠르고 유연. 타입을 정하지 않고 작성하기 때문에 타입에러에 취약함.
  1. 변수와 식별자는 어떻게 다를까요?
  • 변수
    : 변할 수 있는 수. 꼭 숫자여야 할 필요는 없다. -> 변할 수 있는 무언가.(데이터)

  • 식별자
    : 어떤 데이터를 식별하는 데 사용하는 이름, 즉 변수명

  1. 기본형과 참조형은 자바스크립트에서 어떻게 다르고 어떻게 구현되어 있나요?
  • 기본형
    : 불변값, 값이 담긴 주소값을 바로 복제--> 불변성
  • 참조형
    : 묶음을 가리키는 주소값을 복제, 메모리 할당할 때 객체 변수 프로퍼티 메모리 영역이 별도로 존재함. 객체, 배열

기본형 값이 담긴 주소값을 바로 복제해서 불변성을 가지고 있고,
참조형은 값이 담긴 묶음 가르키는 주소값을 가르킨다.

참조형은 객체들이니, 객체들은 따로 메모리에 할당된다.
즉, 객체는 프로퍼티들이 메모리에 따로 할당이 된다.

기본형이나 참조형이나 데이터 자체를 변경하고자 하면(새로운 데이터 할당)
기존 데이터는 변하지 않는다. 하지만 참조형은 '가변성'을 가지고 있는데,
이 가변은 데이터 자체가 아니라 내부 프로퍼티를 변경할때 성립하는 것이다.
이는 데이터 저장 방식부터 살펴보면 된다.
데이터 저장 방식부터 다르기 때문에 이후 동작에도 차이가 있다.

기본형은 값이 담긴 주솟값을 바로 복제하며 불변성을 가지고 있다.
참조형은 값이 담긴 주솟값들로 이루어진 묶음을 가리키는 주솟값을 복제한다.
또한 참조형은 '객체의 변수(프로퍼티) 영역'이 별도로 존재한다는 점도 기본형과 다르다.

  1. 불변 객체에 대해서 알게된 만큼 작성해주세요

  2. 얕은 복사와 깊은 복사는 어떠한 차이점이 있으며, 그렇다면 각각의 복사는 어떠한 장단점이 있을까요?


3. 실행 컨텍스트

[KEYWORD]
실행 컨텍스트, this, 환경 정보, 스택, 큐, 전역 컨텍스트, 콜스택, Variable Environment,
Lexical Environment, 호이스팅, 함수 선언문, 함수 표현식, 스코프, 스코프체인,
  1. 실행 컨텍스트는 무엇일까요?
    : 실행할 코드에 제공할 환경 정보들을 모아놓은 객체
    : 동일한 환경에 있는 코드들을 실행할 때 필요한 환경정보들을 모아 컨텍스트를 구성하고 이를 콜스택에 쌓아올렸다가, 가장 위에 쌓여있는 컨텍스트와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장.
    : 구성하는 방법 - 함수를 실행 (자동 생성되는 전역공간과 악마로 취급받는 eval제외하면)
    : ES6에서는 블록{}에 의해서도 새로운 실행컨텍스트가 생성됨.

  2. 실행 컨텍스트 객체가 활성화되는 시점에 수집되는 정보는 무엇일까요? 각각 왜 수집할까요?
    : 실행 컨텍스트 객체가 활성화되는 시점에 수집되는 정보 - arguments

  • Variable Environment : 현재 컨텍스트 내의 식별자들에 대한 정보 + 외부 환경 정보. 선언 시점의 Lexical Environment 의 스냅샷으로, 변경 사항은 반영되지 않음.

  • Lexical Environment : 처음에는 Variable Environment와 같지만, 변경사항이 실시간으로 반영됨.

  • ThisBinding : this 식별자가 바라봐야 할 대상 객체

  • 수집목적 : 자바스크립트 엔진은 해당 컨텍스트에 관련된 코드들을 실행하는 데 필요한 환경정보들을 수집해서 실행컨텍스트에 저장해놓는데, 이 객체는 엔진이 활용할 목적으로 생성할 뿐 개발자가 코드를 통해 확인할 수는 없다.

  1. 호이스팅은 무엇일까요?
    : 끌어올리다.라는 의미의 hoist에 ing을 붙여 만든 동명사로, 변수 정보를 수집하는 과정을 더욱 이해하기 쉬운 방법으로 대체한 가상의 개념.(아래에 구문이 존재해도 위에서 쓸 수 있도록 우선적으로 메모리 공간에 저장)
    : 선언문이 코드의 선두로 끌어올려진 것처럼 동작하는 자바스크립트 고유의 특징을 호이스팅이라고 한다.
  • 변수 호이스팅 : var 키워드를 사용한 변수 선언문 이전에 변수를 참조하면 변수 호이스팅에 의해 undefined로 평가
  • 함수 호이스팅 : 함수 선언문으로 정의한 함수를 함수 선언문 이전에 호출하면 함수 호이스팅에 의해 호출이 가능함.
  1. 왜 귀찮게 호이스팅같은 개념이 있을까요?
    자바스크립트 엔진이 정보를 좀더 쉽게 수집할 수 있게 하려고 ?
    자바스크립트의 특징! 이다 호이스팅은... 컴파일 안하려고..?ㅋㅋㅋㅋ
    자바스크립트 엔진에서 코드 실행하기 전에 실행 컨텍스트를 저장합니다 ~
    https://tecoble.techcourse.co.kr/post/2021-04-25-hoisting/

함수가 실행될때 함수가 실행 컨텍스트 위에 올라가고
코드가 실행되려면 렉시컬 환경(함수가 호출되면서 실행될 코드들이 담겨있는 곳)이 필요하고 렉시컬 환경을 미리 만들어두기 위해 호이스팅이 일어난다

  1. 함수 선언문과 함수 표현식은 어떻게 다를까요?
    둘 다 함수를 새롭게 정의할 때 쓰이느 방식, 생성 시점이 다름.
    함수 선언문 : function 정의부만 존재하고 별도의 할당 명령이 없는 것을 의미함. 반드시 함수명이 정의되어있어야 함
    함수 표현식 <<사용권장>> : 정의한 function을 별도의 변수에 할당하는 것을 말함. 함수명이 없어도 됨.
  2. 스코프는 무엇일까요?
    : 식별자에 대한 유효범위.
    : 스코프체인은 '식별자의 유효범위'를 안에서부터 바깥으로 차례로 검색해 나가는 것을 의미함. 어떤 경계 A의 외부에서 선언한 변수는 A의 외부 뿐만 아니라 내부에서도 접근 가능하지만, A의 내부에서 선언한 변수는 오직 A의 내부에서만 접근이 가능함.
  3. 스코프는 왜 중요할까요?
    : 만약 스코프라는 개념이 없다면 같은 이름을 갖는 변수는 충돌을 일으키므로 프로그램 전체에서 하나밖에 사용할 수 없음.
    : 스코프(유효범위)를 통해 식별자인 변수 이름의 충돌을 방지하여 같은 이름의 변수를 사용할 수 있게 함. 스코프 내에서 식별자는 유일해야 하지만, 다른 스코프에는 같은 이름의 식별자를 사용할 수 있음. 즉, 스코프는 네임스페이스 이다.

4.마무리

  1. 우리가 실행 컨텍스트를 제대로 이해하지 못한다면 어떤 문제가 일어날까요?
    동일한 변수를 사용했을 때, 원하는 변수에 원하는 값을 넣지 못하지않을까 ?

  2. 우리가 스코프를 제대로 이해하지 못한다면 어떤 문제가 일어날까요?
    중복선언으로 인해 오류가 발생할 수 있다.

profile
항상 피곤한 인서의 개발블로그

0개의 댓글