[항해99][W2 - Javascript 과제]

joy_five·2022년 9월 23일
0

개념정리

목록 보기
2/11
🐤 JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?
  • 느슨한 타입(loosely typed)의 동적(dynamic) 언어

    A: Javascript 가 느슨한 타입의 동적 언어라는 의미는, 변수의 어떤 특정 타입과 연결되지 않고 모든 타입의 값으로 할당 가능한 언어라는 의미입니다.
    예시로 하기 자동형변환을 들 수 있는데, 자동 형변환이란 변수의 자료형을 data에(혹은 명령문에 포함된 자료형 표기법에 따라) 할당된 자료형이 아니라 다른 값으로 비교도 가능합니다.
    또한 동적 언어는 오류여부를 실행되는 시점에 확인할 수 있습니다.

  • JavaScript 형변환

    A: Javascript는 타입이 유연한 (느슨한 타입) 언어입니다.
    아래 예시와 같이 String 자료형과 Number 자료형으로 다른 언어에서는 자료형에 따라 다른 값으로 분류되나, 비교 연산자 중 ==, !=를 사용할 경우 자동 형변환이 일어나므로 문자열 10과 숫자 10을 비교하여도 True로 반환될 수 있습니다.

// example
10 == '10' //True 
1 == True //True (Boolean형에서의 True는 1)

[추가개념]
+) 암시적 변환 : 자바스크립트 엔진이 필요에 따라 자동으로 데이터타입 변환
+) 명시적 변환 : 개발자의 의도에 따라 데이터타입을 변환

  • ==, ===

    A: 기본적으로 두 연산자는 동일한 기능을 하나, ==(과 !=도 동일) 연산자는 타입을 변환하여 값을 비교하고, ===(!==) 연산자는 타입을 변환하지 않습니다.
    따라서 ==, !=와 같은 연산자를 이용할때 Javascript의 느슨한 타입의 동적 언어의 특징이 두드러진다고 할 수 있습니다.

  • 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.

    A: 느슨한 타입의 동적 언어라는 것은 타입을 포함한 정밀한 값을 이용하지 않는다는 의미와 동일합니다. 따라서, 개발목적에 따라 편리한 방식으로 활용될 수 있지만, 반대로 정밀한 값을 요구하는 상황에서는 버그 발생율이 더 높아질 수 있습니다.
    동적타입 언어는 실행을 통해 오류확인을 하게 되는데, 타입을 부여해주는 TypeScript 를 사용하면 실행 이전에도 오류를 점검해볼 수 있는 방법이 있습니다.

  • undefined와 null의 미세한 차이들을 비교해보세요.

A: Undefiend는 말그대로 정의되지 않은 값을 의미합니다. 따라서 '아직' 값이 없다고 표현할 수 있으며, Null은 '값이 없는 상태' 그 자체를 의미합니다.

🐤 JavaScript 객체와 불변성이란 ?
  • 기본형 데이터와 참조형 데이터

    A: 기본형 데이터 [number, string, boolean, undefined, null, symbol]
    참조형 데이터: 기본형 데이터 외 모든 데이터를 참조형 데이터로 분류할 수 있습니다. (객체, Array 등)

  • 불변 객체를 만드는 방법

    A: Object.freeze() 를 활용할 수 있습니다.

  • 얕은 복사와 깊은 복사

    A: 얕은 복사[Shallow Copy]란, 객체 복사 시 '객체만' 복사하여 새 객체를 생성하므로, 원본 객체의 메모리 주소 값이 변경된 경우 복사 객체의 인스턴스 변수 값 또한 함께 변경됩니다.
    깊은 복사[Deep Copy]란, 객체 복사 시 '객체와 인스턴스 변수'까지 복사하여 새 주소에 담는 방식으로, 참조를 공유하지 않아 원본 객체의 인스턴스 변수 값이 변경되어도 복사 객체에는 영향을 끼치지 않습니다.

🐤 호이스팅과 TDZ는 무엇일까 ?
  • 스코프, 호이스팅, TDZ

    A:
    스코프 : 변수, 함수, 클래스가 접근할 수 있는 유효 범위 (Scope)
    var와 let 선언문이 각각 전역 키워드, 지역 키워드로 분류되는 것은 이 '스코프'가 다르기 때문입니다.
    호이스팅 : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 말합니다. 변수의 선언과 초기화를 분리 후 선언만 코드의 최상단으로 옮기는 것과 같습니다.
    var의 경우 전역 키워드로, 선언 이전에 변수를 입력해도 실행에 문제가 없는데 이 때 이 상황을 '호이스팅'이라고 볼 수 있습니다.
    TDZ : 전역 키워드가 아닌 블록 내 적용되는 지역 키워드에서 발생하는 상황으로 예시를 들어보자면, 호이스팅이 불가한 지역 키워드 let 혹은 const 를 활용하였을때 선언 이후가 아닌 변수 선언 이전에 변수를 불러온다면, 불러올 값이 없기 때문에 (아직 선언되지 않았기 때문에) referenceError가 납니다. 이 선언 이전 혹은 초기화를 하기 전의 상태를 일시적인 사각지대라고 합니다.

  • 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이

    A:

함수 선언식(Function Declarations) : 함수명이 정의되어 있고, 별도의 할당 명령이 없는 식

function sum(a, b) {
	return a + b;
}

함수 표현식(Runction Expressions) : 정의한 function을 별도의 '변수에 할당'하는 식

const sum = function (a, b) {
	return a + b;
}

함수 선언식은 함수 전체를 호이스팅 하므로, 정의된 범위의 맨 위로 호이스팅 되어 함수 선언 이전에도 함수를 사용할 수 있습니다.
함수 표현식은 별도의 변수에 할당하는 개념이며, 변수는 '선언부' 와 '할당부'를 나누어 호이스팅 하는데 이 때 '선언부'만 호이스팅 하게 됩니다.
따라서, 함수 선언식으로 작성한 함수는, 함수 전체가 호이스팅 되므로 전역적으로 선언하게 되면서 동명의 중복 함수가 발생될 경우 에러가 발생할 수 있습니다. 경우에 따라 함수 선언식 / 함수 표현식의 스코프와 호이스팅 방식을 고려하여 사용할 필요가 있습니다.

  • 여러분이 많이 작성해온 let, const, var, function 이 어떤 원리로 실행되는지 알 수 있어요.

A:
1)let : 변수 재할당은 가능하나 지역 스코프에 적용되는 키워드로 선언 블록 내에서 적용됨
2)const : 상수를 선언하는 키워드로, 재할당이나 재선언이 불가함. 이 선언은 함수에 전역 또는 지역일 수 있는 상수를 만들어내므로, '상수 초기자'를 필요로 함.
3)var : 전역 변수, 선택적 초기화 및 변수 재할당 가능.
4)Function : 지정된 매개변수를 갖는 함수 정의. 조건부 선언 가능, 함수 선언식의 경우 호이스팅 가능

  • 실행 컨텍스트와 콜 스택

    A:
    실행 컨텍스트 (Execution context)는 JS가 실행되는 환경을 의미합니다.
    실행할 코드에 제공할 환경 정보를 모아놓은 객체라고도 할 수 있으며, 모든 코드는 실행 컨텍스트 안에서 실행됩니다. JS는 어떤 실행 컨텍스트가 활성화될 때 선언된 변수를 호이스팅하고, 생성 과정에서 전역 객체 Window Object를 생성하고 this 가 Window 객체를 가리키도록 합니다.
    콜 스택 (Call Stack)은 컴퓨터 프로그램에서 현재 실행중인 서브 루틴에 관한 정보를 저장하는 스택 자료구조입니다. 좀 더 자세히 설명하자면, JS가 함수 호출을 기록하기 위한 일종의 우물과 같은 형태의 데이터 구조를 의미합니다. 가장 최상단에 있는 함수가 실행되고, 가장 위에 쌓여있는 컨텍스트의 연관 코드를 실행하는 방식으로 전체 코드의 환경과 순서를 보장합니다.

  • 스코프 체인, 변수 은닉화

    A:
    스코프 체인 : 스코프에 식별자가 없는 경우 상위 스코프에서 다시 찾아가는 현상을 스코프 체인이라고 합니다.
    변수 은닉화 : 외부 객체로부터 속성 값(데이터, 변수값)을 감추는 특성 즉, 변경되는 안되는 변수에 대한 직접적인 접근을 막는 것을 변수 은닉화라고 합니다.

profile
😤 Started in Sep. 2022 😎 I'm going to further!

0개의 댓글