05-20-2022 React 입문주차 S.A

·2022년 5월 20일
0
post-custom-banner

JavaScript의 자료형과 JavaScript만의 특성은 무엇일까 ?

  • 느슨한 타입(loosely typed)의 동적(dynamic) 언어

    Javascript는 느슨한 타입 언어 혹은 동적 타입 언어로 변수의 자료형을 명시적으로 선언할 필요가 없는 언어

  • JavaScript 형변환

String() - 문자열 변환
Number() - 숫자형 변환
Boolean() - true , false 변환
parseInt() - 정수로 변경

  • ==, ===

'==' > value 비교
'==='> value, type 비교

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

동적타입 언어는 런타임 시 확인할 수 밖에 없음
TypeScipt나 Flow 등을 사용할 수 있음.

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

undefined - 비어있는 변수, 존재하지 않는 값.

null - 아무값도 할당 받지 않은 상태.


JavaScript 객체와 불변성이란 ?

  • 기본형 데이터와 참조형 데이터

기본형 데이터 primitive type : null,undefined, string, boolean , number
참조형 데이터 참조형 reference type : object(array,function,regExp)

  • 불변 객체를 만드는 방법

일반적으로 참조형 데이터 타입(Obj)인 객체는 가변값을 가지기 때문에 객체를 복사하면 같은 주소값을 서로 가리키고 복사된 객체의 프로퍼티 값을 변경해도 여전히 같은 주소값을 참조되어 원본값도 변경됨
이러한 현상을 피하기 위해 애초에 서로 다른 주소값을 참조하게 하여 객체 역시 불변성을 확보할 수 있음

  • 얕은 복사와 깊은 복사

얕은 복사(shallow copy) : 바로 아래 단계의 값만 복사하는 방법

let a = {
	name:jun,
  // 1단계
  	like: [{drink : "coffee"}, {food:"italian food"}]  
  //like: [] = 1단계, [ {}, {} ] = 2단계, 1: "" = 3단계
}

깊은 복사(deep copy) : 내부의 모든 값들을 하나하나 찾아서 전부 복사하는 방법


호이스팅과 TDZ는 무엇일까 ?

  • 스코프, 호이스팅, TDZ

    	스코프란(Scope) 유효범위의 의미로 변수가 유효한 함수의 범위를 확인하는 개념

전역 스코프(Global Scope)
-함수 밖에서 불러 올 수 있는 변수
지역 스코프(Local Scope)
-함수 내에서만 불러 올 수 있는 변수

호이스팅(Hoisting)

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미
var로 선언한 변수의 경우 호이스팅 시 undefined로 변수를 초기화합니다. 반면 let과 const로 선언한 변수의 경우 호이스팅 시 변수를 초기화하지 않음

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

함수 선언문

funtion showJs() {
  let a = 0;
};

함수 표현식

const showFn = function(){
  let a = 0;
};

함수 선언문의 경우 함수 전체가 호이스팅 되므로 함수 호출에 있어서 위치의 제약을 받지 않음
const를 사용한 표현식의 경우, const 변수의 선언 부분과 함수 할당 부분은 별개이기 때문에 함수 호출에 있어서 위치의 제약을 받음

  • 실행 컨텍스트와 콜 스택

자바스크립트 엔진은 메모리 힙과 콜 스택(호출스택)으로 나뉨
콜 스택이 하는 일은 실행 컨텍스트들을 쌓는 것.

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

실습 과제

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

function hi () {

const a = 1;

let b = 100;

b++;

console.log(a,b);

}

//console.log(a); a는 함수내 권역변수로 되어 있어서 밖에서 불가함

console.log(b); // 첫 번째 출력

hi(); // 두 번째

console.log(b); // 세 번째 출력
profile
Life is a natural-nine
post-custom-banner

0개의 댓글