언어 과제

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

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

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

JavaScript 형변환

• JavaScript는 기본적으로 자동 형변환을 해줍니다.

let ez = 1 //ez가 숫자형
ez = 'ez'  //ez가 이제 문자열
ez = true  //ez가 이제 불리언

==, ===

• 둘다 비교하는 연산자 입니다. 차이가 있다면 자료형을 분별 하느냐 안하느냐 입니다.

10 == '10' //true
10 === '10'//false

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

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

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

• 둘다 값이 없음을 나타냅니다. 하지만 서로 타입은 다릅니다.
• JavaScript는 초기화를 하지않으면 기본적으로 undefined로 초기화 합니다.
• null은 객체이며 명시적으로 값이 비어있음을 나타낼때 사용합니다.

JavaScript 객체와 불변성이란 ?

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

• 기본형 : boolean, number, null, undefind, string(사실 string은 char의Array형태로 참조형이지만 기본적으로 쓰기때문에 넣음)
• 참조형 : Array, Class, Interface

불변 객체를 만드는 방법

• Object.freeze()

let a = {
  name : 'mhh'
}

Object.freeze(a);

얕은 복사와 깊은 복사

• 기본형 데이터의 변수는 복사를 해도 원래값에 서로 영향을 미치지 않습니다.
• 참조형 데이터 변수를 복사해 데이터값을 바꾸면 원본 변수의 데이터값도 바뀌는것을 얕은 복사라고합니다.

• 참조형 데이터 변수를 복사해 데이터값을 바꾸면 원본 변수의 데이터값이 바뀌지 않는것을 깊은 복사라고합니다.

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

스코프, 호이스팅, TDZ

• 스코프

현재 실행되는 컨텍스트를 말한다. 여기서 컨텍스트는 값과 표현식이 **"표현"**되거나 참조 될 수 있음을 의미한다. 만약 변수 또는 다른 표현식이 "해당 스코프"내에 있지 않다면 사용할 수 없다. 스코프는 또한 계층적인 구조를 가지기 때문에 하위 스코프는 상위 스코프에 접근할 수 있지만 반대는 불가하다.

function exampleFunction() {
    var x = "declared inside function";
    // x는 오직 exampleFunction 내부에서만 사용 가능.
    console.log("Inside function");
    console.log(x);
}

console.log(x);  // 에러 발생

• 호이스팅

JavaScript에서 호이스팅(hoisting)이란, 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미합니다.

JavaScript는 함수의 코드를 실행하기 전에 함수 선언에 대한 메모리부터 할당합니다. 덕분에 함수를 호출하는 코드를 함수 선언보다 앞서 배치할 수 있습니다. 

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

catName("호랑이");

/*
결과: "제 고양이의 이름은 호랑이입니다"
*/

catName("클로이");

function catName(name) {
  console.log("제 고양이의 이름은 " + name + "입니다");
}

/*
결과: "제 고양이의 이름은 클로이입니다"
*/

• TDZ

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

함수 선언식 (function declartion)

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

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

함수 표현식 (function Expression)

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

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

주요 차이점은, 호이스팅에서 차이가 발생합니다.

함수 선언식은 함수 전체를 호이스팅 합니다. 정의된 범위의 맨 위로 호이스팅되서 함수 선언 전에 함수를 사용할 수 있다는 것입니다.

함수 표현식은 별도의 변수에 할당하게 되는데, 변수는 선언부와 할당부를 나누어 호이스팅 하게 됩니다. 선언부만 호이스팅하게 됩니다.

sum(50, 50); // 100
minus(100, 50) // Uncaught TypeError: minus is not a function

function sum(a, b) { // 함수 선언식
  return a + b;
}

var minus = function (a,b) { // 함수 표현식
  return a - b;
}

실행 컨텍스트와 콜 스택

실행 컨텍스트(Execution context)는 자바스크립트 코드가 실행되는 환경입니다.

1. Global Execution context
자바스크립트 엔진이 처음 코드를 실행할 때 Global Execution Context가 생성됩니다. 생성 과정에서 전역 객체인 Window Object (Node는 Global) 를 생성하고 this가 Window 객체를 가리키도록 합니다.

2. Function Execution context
자바스크립트 엔진은 함수가 호출 될 때마다 호출 된 함수를 위한 Execution Context를 생성합니다. 모든 함수는 호출되는 시점에 자신만의 Execution Context를 가집니다.

* 자바스크립트 엔진은 처음 코드를 실행할 떄 단 한번 Global Execution Context를 생성하며 함수를 호출할 때 마다 함수를 위한 Execution context를 생성합니다.

콜 스택(call stack)은 컴퓨터 프로그램에서 현재 실행 중인 서브루틴에 관한 정보를 저장하는 스택 자료구조이다.

 

스코프 체인, 변수 은닉화

• 스코프 체인

스코프에 식별자가 없으면 상위 스코프에서 다시 찾아 나간다. 
이 현상을 스코프 체인 이라고 하며 스코프가 중첩되어있는 모든 상황에서 발생한다.

• 변수 은닉화

(function () {
  var a = 'a';
})();

console.log(a); // a is not defined

함수 외부에서 a를 출력해보면, 아직 정의되지 않았다(a is not defined)는 에러메세지를 확인할 수 있습니다. 이러한 방식과 같이 직접적으로 변경되면 안 되는 변수에 대한 접근을 막는 것을 은닉화라고 합니다.

 

실습 과제

• 콘솔에 찍힐 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);

1

1 101

1

이 찍힐 것이고 console.log(a);의 주석을 풀면 hi()함수 안에 a값이 선언되었기 때문에 에러가 난다.

let b = 1;

const a = 1;

function hi () {

let b = 100;

b++;

console.log(a,b);

}

console.log(a);

console.log(b);

hi();

console.log(b);

a를 hi함수 밖에 선언해주면 에러가 안나며

1

1

1 101

1

이 출력 된다.

• 두 값이 다른 이유를 설명해보세요.

1 == "1";
1 === "1";

첫번째는 타입을 신경쓰지 않기때문에 true이고

두번쨰는 number1과 string1을 비교 하는것이기 떄문에 false이다.