React 과제

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

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

• JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다.
• JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능합니다.

let foo = 42 // foo가 숫자
foo = 'bar' // foo가 이제 문자열
foo = true // foo가 이제 불리언

JavaScript 형변환

var x = "999";    //문자형 999

var y = "99.99";    //문자형 99.99

var a = parseInt(x);    //숫자형 정수 999

var b = parseInt(y);    //숫자형 정수 99

var a = parseFloat(x);    //숫자형 실수 999

var b = parseFloat(y);    //숫자형 실수 99.99

var a = Number(x);    //숫자형 정수 999

var b = Number(y);    //숫자형 실수 99.99

var x = "a999";    //문자형 a999

var y = "a99.99";    //문자형 a99.99

var a = parseInt(x);    //숫자형 NaN

var b = ParseInt(y);    //숫자형 NaN

var a = parseFloat(x);    //숫자형 NaN

var b = parseFloat(y);    //숫자형 NaN

var a = Number(x);    //숫자형 NaN

var b = Number(y);    //숫자형 NaN

※ 문자열 맨앞에 문자로 시작하면 형변환을 해도 값을 인식하지 못한다.

var x = "999a9";    //문자열 999a9

var y = "99.9a9";    //문자열 99.9a9

var a = parseInt(x);    //숫자형 999

var b = parseInt(y);    //숫자형 99

var a = parseFloat(x);    //숫자형 999

var b = parseFloat(y);    //숫자형 99.9

var a = Number(x);    //숫자형 NaN

var b = Number(y);    //숫자형 NaN

• 숫자형을 문자형으로 변환하기

var 변수 = String(숫자);    //숫자를 문자로 변환해줌

var 변수 = 숫자.toString(진법);    //숫자를 문자로 변환해줌 - 변환하면서 진법을 바꿀 수 있음

var 변수 = 숫자.toFixed(소수자리수);    //숫자를 문자로 변환해줌 - 실수형의 소수점 자리를 지정할 수 있음

var 변수 = 숫자 + "문자열";    //숫자와 문자열을 한 문자열로 더해줌

var x = 123;    //숫자형 123

var a = String(x);    //문자형 123

var a = x.toString();    //문자형 123

var a = x.toString(2);    //문자형 1111011(2진법)

var a = x.toString(16);    //문자형 7b(16진법)

var a = x.toFixed();    //문자형 123

var a = x.toFixed(1);    //문자형 123.0

var y = 99.999;    //숫자형 99.999

var a = x.toFixed();    //문자형 99

var a = x.toFixed(1);    //문자형 99.9

var a = x.toFixed(3);    //문자형 99.999

var a = x.toFixed(4);    //문자형 99.9990

==, ===

==를 사용하면 다음과 같은 사실이 성립한다.

254 == '254'                // return true
true == 1                   // return true
undefined ==null           // return true
'abc' ==newString('abc')  // return true
null ==false               // return false
'true' ==true              // return false
true == 2                   // return false

===를 사용하면 다음과 같은 사실이 성립한다.

254 === '254'               // return false
true === 1                  // return false
undefined ===null          // return false
'abc' ===newString('abc') // return false

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

• 실행 도중에 변수에 예상치 못한 타입이 들어와 타입에러가 발생할 수 있음
• 동적타입 언어는 런타임 시 확인할 수 밖에 없기 때문에, 코드가 길고 복잡해질 경우 타입 에러를 찾기가 어려워 집니다.
• 이러한 불편함을 해소하기 위해 TypeScipt나 Flow 등을 사용할 수 있습니다.

undefined와 null의 차이점을 설명하세요

• undefined은 변수를 선언하고 값을 할당하지 않은 상태,
• null은 변수를 선언하고 빈 값을 할당한 상태(빈 객체)이다.
• 즉, undefined는 자료형이 없는 상태이다.
• 따라서 typeof를 통해 자료형을 확인해보면 null은 object로, undefined는 undefined가 출력되는 것을 확인할 수 있다.

🐤 JavaScript 객체와 불변성이란 ?

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

• 기본형 데이터는 값을 그대로 할당한다.
• 메모리상에 고정된 크기로 저장되며 원시 데이터 값 자체를 보관하므로,
• 불변적이다.
• 기본적으로 같은 데이터는 하나의 메모리를 사용한다.(재사용)
• 참조 타입은 변수에 할당할때 값이 아닌 데이터의 주소를 저장한다.
• Object
• Array
• const 로 선언된 변수 배열에 Array.push를 적용할 수 있는 이유는 배열은 참조 타입이기 때문에 데이터의 주소를 대입할 수 있기 때문이다.
• Function RegExp
• 문자열에 나타나는 특정 문자조합과 대응시키기 위해 사용되는 패턴이다.
• Map
• else..
• 참조형은 기본형 데이터의 집합이다. 참조형 데이터는 값이 지정된 주소값을 할당한다.

JavaScript 형변환

const test = {
    'name' : 'jung'
};

Object.freeze(test);

• 먼저 const키워드로 바인딩 된 변수를 상수화 시킨 다음,
• Object.freeze()로 해당 변수를 동결 객체를 만들면
• 객체의 재할당과 객체의 속성 둘 다 변경불가능한 불변 객체가 된다.

얕은 복사와 깊은 복사

• 얕은 복사 Shllow Copy
• 얕은 복사란 객체를 복사할 때 위의 예제처럼 원래값과 복사된 값이 같은 참조를 가리키고있는 것을 말한다.
• 객체안에 객체가 있을 경우 한개의 객체라도 원본 객체를 참조하고 있다면 이를 얕은 복사라고 한다.

1. Object.assign()
2. 전개연산자

• 깊은 복사 Deep Copy
• 깊은 복사된 객체는 객체안에 객체가 있을 경우에도 원본과의 참조가 완전히 끊어진 객체를 말한다.

1. 재귀함수를 이용한 복사
2. JSON.stringify()
3. 라이브러리 사용

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

스코프, 호이스팅, TDZ

스코프

---

• 자바스크립트의 스코프는 함수 레벨 스코프를 따른다.
• 같은 함수 레벨에 존재하면 값을 참조할 수 있다는 건데
• ES6에서 let 키워드가 도입되면서 블록 레벨 스코프를 사용할 수 있게 됐다.

호이스팅

---

• 함수의 코드를 실행하기 전에 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것.
• 초기화를 제외한 선언만 호이스팅.
• 그렇기 때문에 선언, 정의된 코드보다 호출하는 코드를 먼저 배치할 수 있음.
• 변수의 선언과 초기화를 분리.
• 변수의 선언을 코드의 최상단으로 끌어올림.

TDZ(Temporal Dead Zone, 일시적 사각지대)

---

• TDZ의 영항을 받는 구문 const, let, class
• 변수 스코프의 맨 위에서부터 ~ 변수의 초기화 완료 시점까지의 변수는 TDZ에 들어간 변수

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

• 함수 선언식 (function declartion)

함수명이 정의되어 있고, 별도의 할당 명령이 없는 것

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

• 함수 표현식 (function Expression)

정의한 function을 별도의 변수에 할당하는 것

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

• 함수 선언식은 함수 전체를 호이스팅 합니다. 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것입니다.
• 함수 표현식은 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 됩니다. 선언부만 호이스팅하게 됩니다.

실행 컨텍스트와 콜 스택

Execution Context

• Execution Context 는 자바스크립트의 핵심 개념으로, 코드를 실행하기 위해 필요한 환경이다.
• 더 자세히 말하자면, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체이다.
• 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념.
• 모든 코드는 특정한 실행 컨텍스트 안에서 실행된다.
• javascript는 어떤 execution context가 활성화되는 시점에 선언된 변수들을 위로 끌어올리고(hoisting), 외부 환경 정보를 구성하고, this값을 설정하는 등의 동작을 수행한다.

callstack

• call은 호출을 뜻한다.stack은 출입구가 하나뿐인 깊은 우물 같은 데이터 구조다.
• 따라서 callstack은 자바스크립트가 함수 호출을 기록하기 위해 사용하는 우물 형태의 데이터 구조이다.
• 항상 맨 위에 놓인 함수를 우선으로 실행된다.
• 이런 식으로 자바스크립트 엔진은 가장 위에 쌓여있는 context와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

스코프 체인, 변수 은닉화

• 스코프는 함수의 중첩에 의해 계층적 구조를 가짐. ⇒ 외부 함수(outer function) / 중첩 함수(nested function)
• 변수를 참조할 때, 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프로 이동하면서 선언된 변수를 검색함.
• 여러 스코프에서 동일한 식별자를 선언한 경우, 무조건 스코프 체인 상에서 가장 먼저 검색된 식별자에만 접근 가능 ⇒ 변수 은닉화(variable shadowing)
• 스코프 체인은 outerEnvironmentReference와 밀접한 관계를 가짐.

💡 스코프 체인은 실행 컨텍스트의 렉시컬 환경을 '단방향'으로 연결한 링크드 리스트

🐤 실습 과제

 

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

let b = 1;

function hi () {

const a = 1;

let b = 100;

b++;

console.log(a,b);

}

//console.log(a);

console.log(b);

hi();

console.log(b);

• 제일 먼저 15번째 라인에서 1 이 출력됩니다.
  • 왜냐면 function에서 정의된 b는 그 내부에서만 정의되어지기 때문이고
  • 15번째라인에서는 아직 함수가 호출되지 않았기 때문입니다.
• 다음으로 17번째 라인에서 hi() 로 함수가 호출되면 10번째 라인을 통해 1 101 이 출력됩니다.
  • 왜냐면 함수로 전달된 인자는 없고,
  • 함수내부에서 새롭게 a, b값이 할당 되었으며
  • b++을 했기 때문입니다.
• 마지막으로 19번째 라인에서 1이 출력됩니다.
  • hi 함수에서 b++을 해도 그 증가는 함수 내부에서 실행된 것이기에
  • 함수밖에는 영향을 줄 수 없습니다.
  • 따라서 1 이 출력됩니다.
• 주석을 풀면 Uncaught ReferenceError: a is not defined 가 뜹니다.
  • 왜냐면 a는 hi함수 내부에서만 정의된 상수이기 때문입니다.