🐤JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?
-
느슨한 타입(loosely typed)의 동적(dynamic) 언어
->JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며,
모든 타입의 값으로 할당 (및 재할당) 가능
ex)
let foo = 42 // foo가 숫자
foo = 'bar' // foo가 이제 문자열
foo = true // foo가 이제 불리언 -
JavaScript 형변환
(1) 암시적변환 : 암시적 변환이란 자바스크립트 엔진이 필요에 따라 자동으로 데이터타입을 변환시키는 것이다.
(2) 명시적변환 : 명시적변환이란 개발자가 의도를 가지고 데이터타입을 변환시키는 것이다. -
==, ===
(1) ===은 양쪽에 위치한 값이 같은 경우 true로 평가되며, 다른 경우 false로 평가된다.
(2) ==은 ===와 같은 기능을 가지고 있지만, 자동형변환기능을 가지고있다. -
느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.
(1) 문제점 : JavaScript는 느슨한 타입의 동작언어이기 때문에 (변수 생성시)원시변수의 타입을 미리 선언하지 않아도 된다는 장점이 있다. 하지만 많은 기능 명세서와 API가 오고 가는 대형프로젝트(혹은 협업 시)에서 타입이 올바른지 체크하는 것이 굉장히 까다롭기 때문에 배포 시 예상치 못한 문제와 직면할 수 있다.
ex)
->price의 타입이 다르기 때문에 오류가 발생됨
(2) 해결책 : JavaScript의 단점을 보완하여 정적 타입 체크와 강력한 문법을 추가한 TypeScript를 사용하여 보완 가능
- undefined와 null의 미세한 차이들을 비교해보세요.
(1) undefined은 변수를 선언하고 값을 할당하지 않은 상태 즉, undefined는 자료형이 없는 상태이다.
(2) null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다.
🐤 JavaScript 객체와 불변성이란 ?
-
기본형 데이터와 참조형 데이터
(1) 기본형 데이터
종류 : 논리형(boolean), 정수형(int), 실수형(double), 문자형(char)
(2) 참조형 데이터
종류 : 배열(Array), 클래스(Class), 인터페이스(Interface) -
불변 객체를 만드는 방법
'변하지 않는 객체' 즉 이미 할당된 객체가 변하지 않는다는 뜻을 가지고 있다.
->name값이 변화하지 않고, "kim"을 유지하는 상태 -
얕은 복사와 깊은 복사
(1) 얕은 복사(Shallow Copy)
객체를 복사할 때, 해당 객체만 복사하여 새 객체를 생성한다.
복사된 객체의 인스턴스 변수는 원본 객체의 인스턴스 변수와 같은 메모리 주소를 참조한다.
따라서, 해당 메모리 주소의 값이 변경되면 원본 객체 및 복사 객체의 인스턴스 변수 값은 같이 변경된다.
(2) 깊은 복사(Deep Copy)
객체를 복사 할 때, 해당 객체와 인스턴스 변수까지 복사하는 방식.
전부를 복사하여 새 주소에 담기 때문에 참조를 공유하지 않는다.
🐤호이스팅과 TDZ는 무엇일까 ?
- 스코프, 호이스팅, TDZ
(1) 스코프 : 변수, 함수, 클래스가 접근할 수 있는 유효 범위.
(2) 호이스팅 : 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
(3) TDZ
- 함수 선언문과 함수 표현식에서 호이스팅 방식의 차이
(1) 함수 선언식 (function declartion) 함수명이 정의되어 있고, 별도의 할당 명령이 없는 것함수 전체를 호이스팅 합니다. 정의된 범위의 맨 위로 호이스팅되서 함수
ex)
function sum(a,b) {
return a + b;
}
(2) 함수 표현식 (function Expression)정의한 function을 별도의 변수에 할당하는 것별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 된다.
ex)
const sum = function(a,b) {
return a + b;
}
함수 선언식으로 작성한 함수는, 함수 전체가 호이스팅 된다고 하였는데, 전역적으로 선언하게 되면, 중복적으로 동명의 함수를 쓰게 되었을때, 원치 않는 결과를 초래할 수 있다. 이를 방지하려면 함수 표현식으로 작성하면 된다.
-
let, const, var, function
(1) var : 변수 재선언 가능const, let : 변수 재선언 불가능
(2) const : 변수 재할당 불가능 (상수)let : 변수 재할당 가능
(3) var : functional-scope 로 호이스팅됨const, let : block-scope 로 호이스팅됨 -
실행 컨텍스트와 콜 스택
(1) 실행 컨텍스트 : 자바스크립트의 핵심 개념으로, 코드를 실행하기 위해 필요한 환경이다. 더 자세히 말하자면, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다. 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념.
모든 코드는 특정한 실행 컨텍스트 안에서 실행된다. javascript는 어떤 execution context가 활성화되는 시점에 선언된 변수들을 위로 끌어올리고(hoisting), 외부 환경 정보를 구성하고, this값을 설정하는 등의 동작을 수행하는데, 이로 인해 다른 언어에서는 발생할 수 없는 특이한 현상들이 발생한다.
(2) 콜 스택 : 자바스크립트가 함수 호출을 기록하기 위해 사용하는 우물 형태의 데이터 구조이다. 항상 맨 위에 놓인 함수를 우선으로 실행된다. 이런 식으로 자바스크립트 엔진은 가장 위에 쌓여있는 context와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.
- 스코프 체인, 변수 은닉화
(1) 스코프 체인 : 스코프에 식별자가 없으면 상위 스코프에서 다시 찾아 나간다. 이 현상을 스코프 체인 이라고 하며 스코프가 중첩되어있는 모든 상황에서 발생한다.
(2) 변수 은닉화 : 외부 객체로부터 '속성 값(데이터, 멤버 변수값)'을 감추는 특성
실습과제
- 콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요.
주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.
- 두번째 콘솔에 있는 b값은 function에 b가 100으로 정의되어 있고, 100을 1 더했기 때문에 101로 출력된다. 첫번째,세번째 콘솔에 있는 b값은 function에 있는 b가 아닌 let b=1;를 불러오기 때문에 1로 출력된다.
- 주석을 풀고 실행했을때 오류가 생긴건 function에 있는 a를 출력하는게 아니라 정의되지 않은 a값을 불러오려고 했기 때문에 오류가 날수밖에 없는것 같다.
- 해결방법(주관적인 생각)
(1) function안에 console.log(a)를 입력한다.
(2) let b = 1;처럼 새로 정의한다.
- 두 값이 다른 이유를 설명해보세요.
1 == "1";
1 === "1";
- '=='은 1과 "1"을 자동 유형변화 해서 비교해주기 때문에 true값이 나온다.
- '==='은 두 피연산자의 유형이 다르기 때문에 false값이 나온다.
(1은 숫자로 인식, "1"은 문자열로 인식)
