항해 X 동북 ICT 12일차

박지민·2022년 7월 1일

항해99

목록 보기

12/95

1. JavaScript의 특성

JavaScript(이하 JS)는 느슨한 타입의 동적 언어이다. JS는 변수가 어떤 특정한 타입과 연결되지 않으며, 모든 타입으로 할당 및 재할당이 가능하고 변수 생성시 원시 변수의 타입을 미리 선언하지 않아도 된다. 이는 다른 정적 타입 언어같이 형변환에 골머리를 썩힐 일 도 없으며 클래스를 구성할 필요가 없다는 장점을 가진다. 하지만 이런 특성으로 인해 생기는 문제점이 있는데 애초에 JS는 작은 규모의 개발 목적으로 설계된 언어였기 때문에 대형 프로젝트나 협업을 진행할 때 크고 작은 문제들이 발생했다. 그 중 하나가 변수에 예상치 못한 타입이 들어왔을 때 예상치 못한 TypeError를 일으킨다는 것인데 프로젝트의 진행도가 뒷 단계 일 수록, 프로젝트의 규모가 클 수록 버그를 알 수 없거나 찾기 힘든 경우 경우가 잦아졌다.

이러한 JS의 문제점을 보안하기 위해 만들어진 것이 TypeScript이다.(이하 TS) TS는 JS에 정적 타입 시스템을 도입한 모델로 TS를 사용함으로 인해 동적 타입을 정적으로 선언할 수 있으며 타입 유추를 통해 타입이 제어가 가능해진다. 정적 타입 언어는 런타임 이전에 타입이 올바른지에 대해 미리 검사하기 때문에 위에서 발생했던 문제점을 보완할 수 있었다.

2. JavaScript의 자료형과 객체의 불변성

JS의 자료형에는 크게 기본형(Primititve)타입과 객체(Object)타입이 존재한다.

기본형 자료형

기본형 자료형은 값을 그대로 할당한다. 기본적으로 데이터는 하나의 메모리를 사용해 고정된 크기로 저장되면서, 원시 데이터 값 자체를 보관하며 한 번 만든 값은 바꿀 수 없는 불변값의 성질을 지닌다.

Boolean 타입 : 논리적인 요소, true와 false값이 있다.
null 타입 : 빈 값, null 하나의 값만 가질 수 있다.
undefined 타입 : 값을 할당하지 않은 변수가 가지는 값.

null타입과 undefinded 타입은 공통적으로 값이 없을을 의미하지만 값의 종류가 다르다. 이것은 null과 undefinded를 '=='(Equal Operator)와 '==='(Strict Equal Operator')로 비교해 보면 알 수 있는데 Equal Operator의 경우 값이 같으면 true를 반환하고 같지 않으면 false를 반환하지만 Strict Equal Operator의 경우 값의 종류가 같은지를 비교하기 때문에 결과 값이 다르게 나온다.

Number 타입 : Number는 숫자형으로 정수와 부동 소수점, Infinity 및 NaN값(NaN은 숫자가 아님을 의미하며 Infinity는 무한대를 의미한다.)을 포함하는 2가지의 타입으로 존재한다.
BigInt 타입 : BigInt는 JS의 숫자 원시 값이다. Number의 안전 한계를 넘어서는 큰 정수도 안전하게 저장하고 연산 할 수 있다.
String : 문자열 (자바스크립트에서는 " 또는 '중 어떤 것으로 감싸도 문자열로 만들어진다. 이스케이프 문자도 사용 가능하며 문자열끼리 이어 붙이거나 숫자를 붙일때는 + 연산자를 사용한다.)
Symbol : ES 6부터 추가된 기능으로 객체 속성을 만드는 데이터 타입이다.(아직까지는 쓰임이 드물다.)

객체 자료형

JS에서는 기본형 자료형을 제외한 모든 자료형이다. Reference 타입이라고도 하는 객체 자료형은 객체 클래스 뿐만 아니라, 배열(Array)과 함수(Funciton), 정규표현식(RegExp)도 모두 객체에 포함된다. 객체는 중괄호를 이용하여 선언할 수 있으며 아무 값이 없는 비어있는 개체도 선언이 가능하다. 객체 자료형과 기본형 자료형의 가장 큰 차이점은 Reference(참조)에 있는데 원시 타입의 변수는 다른 변수에 값을 할당하거나 함수 인자로 넘길 때, 값을 복사하여 전달하지만, 객체는 메모리 주소를 복사시키며 값 자체는 복사되지 않아 같은 객체를 참조하게 된다. (JS의 배열은 숫자형이나 문자열과 마찬가지로 일반적인 스크립트 언어와 크게 다른 것은 없다. 배열은 크기의 제약이 없고, 하나의 배열에 서로 다른 타입의 변수가 들어갈 수 있다는 특징이 있다.)

JavaScript 형변환

JS에서 형변환은 크게 명시적 형변환과 암묵적 형변환 크게 두가지로 나눌 수 있다. 먼저 명시적 형변환 부터 특징은 다음과 같다.

명시적 형변환
- 개발자가 의도적으로 형변환을 하는 것.
- 주로 string, number, boolean 타입으로 이루어짐.
- Number(), parseInt(), parseFloat(), String(), Boolean() 등
암묵적 형변환
- 특정 타입의 값을 기대하는 곳에 다른 타입의 값이 오면 자동으로 타입을 변환해서 사용.

불변 객체를 만드는 방법

JS에서 불변 객체를 만드는 방법은 const 키워드와 Object.freeze()를 동시에 이용하면 된다. const의 경우 재할당이 불가능하게 만드는 키워드 이고 Object.freeze() 메소드의 경우 객체의 속성을 변경하지 못하기 때문에 각각 서로의 단점을 보완해 불변 객체를 만들 수 있다.

얕은 복사와 깊은 복사

얕은 복사(Shallow Copy)

참조값의 복사를 의미.
데이터가 생성되는 것이 아닌 데이터의 참조값을 전달하여 한 데이터를 공유하는 것.(참조값이 변경되면 원본 객체 및 복사 객체의 값도 변경 됨)

깊은 복사(Deep Copy)

값 자체의 복사를 의미.
새 주소에 담기 때문에 참조를 공유하지 않는다.(독립적인 메모리에 값 자체를 할당하여 생성하는 것)
불변 객체를 만들 때 사용 됨, 깊은 복사가 값 자체의 복사를 의미하기 때문에 깊은 복사를 해야지만 기존 객체와 동떨어진 별개의 데이터를 만들 수 있게 됨.

3. Hoisting, TDZ, Scope

Hoisting이란 함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 Scope에 최상단에 선언하는 것을 말한다. Hoisting의 대상으로는 var, function, let, const 등이 있다. 부가적으로 설명하자면 함수 선언문에서는 코드를 구현한 위치와 관계없이 Hoisting이 동작하지만 함수 표현식에서는 선언과 호출 순서에 따라서 Hoisting이 동작하지 않을 수도 있다.
TDZ(Temporal Dead Zone)는 선언 전에 변수를 사용하는 것을 비허용하는 개념상의 공간을 의미한다. (간단하게 말하지면 TDZ는 변수가 선언 되고 변수의 초기화가 이루어지기 전까지의 구간을 말한다.) 그래서 만약 TDZ 구간 때 선언되지 않거나 초기화 전인 변수를 참조하게되면 에러가 발생하게 된다.
스코프는 변수나 함수에 접근할 수 있는 위치를 의미한다. 스코프의 종류에는 크게 전역(global) 스코프와 지역(Local)스코프가 있는데 전역 스코프의 경우 말 그대로 어느 곳이 던지 해당 변수에 접근 할 수 있따는 것을 의미하여 지역 스코프에서는 해당 지역에서만 접근 할 수 있고 그 외의 곳에서는 접근이 불가능하다. 지역 스코프는 다시 지역 스포크와 함수 스코프로 나뉘어지면 함수 스코프는 JS에서는 함수를 선언할 때마다 생성된다.
```
Lexical Scope (나중에 추가적으로 공부해야 될 내용)
렉시컬 스코프는 상위 스코프를 결정하는 방법 중 하나로 JS 채택하는 방식이다.
함수가 어디서 선언 되었는지에 따라 상위 스코프를 결정한다.
```

4. Execution Context & Call stack

실행 컨텍스트(Exectuion Context)는 실행할 코드에 제공할 환경 정보들을 모아놓은 객체를 말하며 모든 코드들은 특정한 실행 컨텍스트 내에서 실행된다. 실행 컨텍스트에는 크게 두가지가 있는데 전역 실행 컨텍스트(Global Exectuion Context)와 함수 실행 컨텍스트(Function Exectuion Context)가 있다. 전역 실행 컨텍스트는 JS 파일이 엔진에 의해 처음 로드 되었을 때 실행되는 환경이며 함수 실행 컨텍스트는 함수가 호출되고 실행되면서 해당 함수 안에서 생성되는 컨텍스트로 각각의 함수는 고유의 함수안에서 생성된다.
콜 스택(Call Stack)은 코드가 실행되면서 생성되는 실행 컨텍스트를 저장하는 자료구조를 의미하며 JS는 가장 위에 쌓여 있는 콘텍스트를 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

5. Scope Chain, 변수 은닉화

Scope Chain이란 해당 코드 레벨에 참조값이 없다면 상위 레벨의 스코프로 참조 값을 찾아 나가는 현상을 말한다.
변수 은닉화는 외부 객체로부터 '속성 값'을 감추는 것을 말하며 # 접두사를 이용해 클래스에 private 속성을 만듬으로서 설정 할 수 있다. (예전에는 JS에서 private 클래스를 만들 수 없어 Closure을 이용한 방법이나 다른 대안들을 사용했었다고 한다.)

4. 실습 과제

문제

콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지,
왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

예측 값 1, 1 101, 1
실제 값 1, 1 101, 1

첫 번째로 선언한 let b가 첫번째 1값이며 두번째는 hi() 함수를 실행시켰기 때문에 a = 1 b = 100인데 ++로 1을 더해주었기 때문에 101이 나왔고 마지막은 첫번째와 같다.

주석을 푼다면 오류가 발생하는데 이는 a변수가 function 내에서 선언된 변수이기 때문에 함수 스코프에 위치하고 있기 때문이다. 정상적으로 코드를 실행시키기 위해선 함수 밖에 전역 변수로 a를 선언해주면 된다.

5. 참조

주특기 주차가 시작됬다. 이번 주는 주특기 입문 주차로 React에 관련된 간단한 내용을 배우는 주차이다. 하지만 처음부터 난항을 겪었는데 그 중 하나가 위에 작성한 S.A이다. 그동안 S.A가 쉬운편이라 별생각을 안하고 있었는데 작성을 하다보니 생각보다 다뤄야할 내용도 많고 이해가 안되는 부분이 많아서 시간이 오래 걸렸다.