리액트안에서의 자바스크립트

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

 

📌 JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어입니다.  

Javascript변수는 만들었을때 바로 특정 타입 값으로 연결되지 않으며 어떤 타입의 값으로 할당할수도 있으며 또한 재할당 할 수도 있습니다. 흔히 자바스크립트는 untyped 또는 weakly-typed언어라고도 많이 부릅니다.

 

예를 들어 "12345" 라는 문자열과 1이라는 숫자를 곱하게 되면 원래는 문자열에 int라는 type을 자바에서는 설정해주겠지만 자바스크립트에서는 그냥 "12345 * 1 === 해도 결과값은 12345로 숫자로 나오게 됩니다. 그러므로 자바스크립트는 weakly-typed라고 볼수 있지요. 그리고 자바스크립트에서는 String a = "blah"; 또는 var a:String = 'blah' 이런식으로 타입을 줄 수가 없는 형태입니다. 이래서 untyped 언어라고도 불립니다. 

 

동적(dynamic)언어라는 것은 

x = 12345;    // number
x = "string"; // string
x = { key: "value" }; // object

이런식으로 위에도 언급했듯이 변수명에 따로 지정해주지 않아도 다양한 타입을 줄수 있다는것이 가장 큰 자바스크립트의 특징이라고 할 수 있습니다.

 

📌 JavaScript 형변환 

자바스크립트는 매우 유연한 언어입니다. 그러므로 때로는 자바스크립트 엔진이 필요여부에 따라 '암시적변환' 또는 개발자의 의도에 따라 '명시적변환'을 실행합니다.

 

🟥 암시적변환

암시적변환이란 자바스크립트 엔진이 필요에 따라 자동으로 데이터 타입을 변환시키는것

ex)

산술연산자 : 더하기 연산자(+)는 숫자보다 문자열이 우선시 되기 때문에 숫자형이 문자형을 만나면 문자형으로 변환된다.

number + number // number
number + string // string
string + string // string
string + boolean // string
number + boolean // number

그 외 연산자: (-, *, /, %)는 숫자형이 문자형보다 우선시 되기 때문에 더하기 연산자와 같은 문자형 변환이 일어나지않는다.

string * number // number
string * string // number
number * number // number
string * boolean //number
number * boolean //number

 

🟥 명시적변환

명시적변환이란 개발자가 의도를 가지고 데이터 타입을 변환시키는것

 

ex)

타입을 변경하는 기본적인 방법은 'Object(), String(), Boolean(), Number()와 같은 함수를 이용하게 되긴하는데 new 연산자가 없을경우 사용한 함수는 타입을 변환하는 함수로써 사용된다.

 

여러 자료형을 숫자타입으로 변형하는 방법

1. Number()

2. parseInt()

3. parseFloat()

4. +()

 

여러 자료형을 문자타입으로 변형하는 방법

1. String()

2. .toString()

3. .toFixed() -> 인자를 넣으면 인자값만큼 반올림하여 소수점을 표현하며 소수점을 넘치는 값이 인자로 들어올때 '0'으로 길이를 맞춘 문자열을 반환

 

여러 자료형을 불린(Boolean)타입으로 변형하는 방법

1. Boolean()

 

📌 '=='와 '==='의 차이점 

자바스크립트는 엄격한 비교와 유형변환 비교를 모두 지원하기 때문에 어떤 연산자가 어떤 비교조건에 사용되는지가 중요하다. ==는 변수 값을 기반으로 유형을 수정하는데에 비해 ===는 변수 유형을 고려합니다.

 

두 연산자는 값이 일치할 경우 true를 return하며 값이 일치하지 않으면 false를 return한다.

 

💭'==' 는 연산자를 이용하여 서로 다른 유형의 두 변수의 값을 비교

-> 특히 두 피연산자의 값이 타입이 다를 경우에는 일부 피연산자의 타입을 변환 후에 값을 비교합니다. 

타입을 바로 비교하지 않으므로 ===연산자에 비해 느슨하다.

ex)

10 == '10' // 문자열을 숫자로 변환 후 값을 비교
true == 1 // 불리언 값을 1로 변환 후 값을 비교
true == '1' // 불리언 값을 1로 변환하면 1 == '1'이 되지만 문자열 '1'을 숫자로 변환 후 값을 비교 true를 반환
true == 'true' // 1 == 'true'가 되지만 문자열 'true'는 숫자로 변환 불가능 하기에 1=='true'로 되어 false를 return
null ==  undefined // null과 undefined는 다르지만 ==에서는 true를 반환

 

💭'==='는 엄격한 비교를 한다, 특히 값이랑 자료형이 true일때

-> 타입을 변환하지 않으므로 타입이 세팅되어있지 않다면 false를 반환. NaN은 자기 자신을 포함하여 어떠한 값과도 일치 하지 않음. 즉 NaN이 존재할경우 항상 false를 return하게 됩니다.

-> 정확한 문자열을 비교할때에는 localeCompare 메소드를 사용하는 것이 좋습니다 왜냐하면 문자열이 눈으로 보는 것과달리 인코딩 방식이 다를 수도 있기 때문입니다.

ex)

10 === 10   // true

10 === '10' // false

true === 1  // false

true === 'true' // false

null === undefined // false

NaN === NaN // false

📌 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점과 보완할 수 있는 방법은 무엇이 있을까? 

 

💭 Javascript는 변수 생성 시 원시 변수의 타입을 미리 선언하지 않아도 되는 장점은 있지만 많은 기능 명세서와 API가 오고가는 대형프로젝트 또는 협업 프로젝트를 진행시에 각각의 변수 타입이 올바른지 체크하는 것이 굉장히 까다롭기 때문에 배포했을때 예상하지 못한 문제를 직면할 수 있습니다.

 

// 백엔드 개발자가 전달한 명세서 
{ 
id: number,
product_name: string, 
price: number
}

// 프런트 개발자가 전달한 데이터
{ 
id: 12345,
product_name: 'water melon', 
price: '12,000'
}

이 예시에서 보듯이 id가 숫자로 오고 product_name은 문자열로 오는 것까지는 괜찮으나 price는 숫자로 와야하는데 프런트 개발자가 전달한 데이터는 문자열로 보내듯이 type error가 발생할 수 있습니다.

 

💭이런 문제점을 보완하기 위해 정적타입 체크와 강력한 문법을 추가한 Typescript를 이용하여 문제점을 해결가능합니다.

 

🟥 Typescript는 Javascript에 타입을 부여한 정적 타입 언어입니다. Typescript를 브라우저에서 실행할 시 파일을 변환하는 트랜스 파일 과정(일종의 컴파일 과정)을 거치며 사용하게 됩니다. 컴파일 같은 경우는 한 언어로 작성된 소스 코드를 다른 언어로 변환하는 것이며 트랜스 파일 과정이란 작성된 소스코드와 비슷한 수준의 다른 언어로 변환한다는게 큰 차이입니다. 여기서는 Typescript를 트랜스파일하면 Javascript가 출력되는 것입니다. 공식적으로는 컴파일 된다고 똑같이 표현을 합니다. 

 

🟥 Typescript 같은 정적 타입 언어는 런타임 전에 타입이 올바른지에 대한 검사를 시행하게 되며 동적타입 언어는 런타임에 프로그램의 타입이 올바른지에 대한 검사를 실행한다 즉 선 처리 후 실행과 선 실행 후 처리라는 차이점이 있습니다.

이렇게 되면 래퍼런스 오류를 일으키는 코드가 존재할시 Typescript는 컴파일 과정에서 오류를 출력하는 반면에 Javascript는 해당 구문이 실행되는 시점에서 오류를 출력하게 됩니다. 

 

 

📌 undefined와 null의 미세한 차이 

 

💭 undefined는 변수중에 존재하지 않는다라는 것을 의미하며 어떤 것으로도 설명되지 않는 변수를 의미합니다.

💭 null은 변수중에 설명은 되지만 값이 빠져있는 경우를 의미합니다

 

ex)예시

let a;
console.log(a); // undefined

let b = null;
console.log(b); // null

변수가 undefined일지 null일지 구별할때는 == 또는 ===를 쓸수 있는데 == 같은 경우는 느슨하게 비교하기 때문에 undefined와 null을 똑같이 true로 리턴해 줍니다. 그래서 비교해줄때

//a = undefined variable

let a;
if (a == null) {
  console.log('Null or undefined value!');
} else {
  console.log(a);
}

이렇게 한번에 표기를 해줄수있습니다 null이나 undefined일때 true를 리턴해줘 할때

하지만 ===를 쓴다면 서로 null과 undefined에서 type을 바로 비교해주는데 서로 같지 않기 때문에 false를 리턴해줍니다.

그러므로 각각이 null인지 undefined인지 표기를 구분지어줘서 쓸때 좋습니다.

let a;

if (a === null) {
  console.log('Null Value!');
} else if (a === undefined) {
  console.log('Undefined Value!');
}

 

 

🎁  JavaScript 객체와 불변성이란 ?

 

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

 

💭기본형데이터 타입(Primitive Type)

기본형 타입의 종류에는 숫자(Number), 문자열(String), 불리언(Boolean), null, undefined, 심볼(Symbol) 이 있습니다.

* Symbol 같은경우는 ES6에 추가, 객체 속성을 만드는 데이터 타입입니다

 

기본형 데이터는 값을 그대로 할당하며 메모리상에 고정된 크기로 저장이 되고 원시데이터 그 값 그 자체를 보관하므로 불변적인 데이터입니다.  

같은 데이터는 하나의 메모리를 사용하게 됩니다(재사용 가능)

 

원리는 기본형 데이터가 

var a;
var b = 'abc';
var c = b;

//새로 할당하려는 부분
a = 10;
b = false;

변수명	a	b	c	d
주소	@1	@2	@3	...

주소	1	2	3	...
데이터	10	false	false	...

변수 a는 1번 영역, b는 2번 영역, c는 3번영역에 해당주소를 확보하고 해당주소를 변수명과 맵핑을 시킵니다.

기존변수명을 새로 할당하게 될경우에는 새로운 변수는 별도의 공간을 확보하고 불리언값을 통해 기존 변수에 대입되는 구조입니다.

var c = 20; 이런식으로 하면 3의 위치에 데이터 false 부분이 20으로 변경이됩니다.

 

💭 참조형데이터 타입(Reference Type)

참조형데이터 타입에는 객체(Object), 배열(Array), 함수(Function), 정규표현식(RegExp), Map, WeakMap, Set, WeakSet 등이 있습니다.   

 

📌 불변 객체(Immutable Object)를 만드는 방법 

 

💭 상태값을 수정할 수 없는 객체 또는 객체를 처음 생성 후에는 객체가 가지는 상태를 변경할 수 없는 것을 의미

💭 불변객체는 상태가 변하지 않기 때문에 단순

💭 Multi Threading 환경에서 Thread Safety를 보장 및 상수로서 Cache 사용하기도 용이

 

자바스크립트에서 불변객체를 만들 수 있는 방법은 기본적으로 2가지가 있습니다

1. const

2. Object.freeze()

🟥 const

ES6 문법부터 let과 const를 지원을 하며 const 키워드는 변수를 상수로 선언 가능. 일반적으로 상수로 선언된 변수는 값을 바꾸지 못하는 것으로 알려져 있다. 

 

그런데 상수로 선언한 객체는 불변객체인가?

예를들어 

const exam = {};
exam.name = "yong";

console.log(exam); // {"yong"}

const는 할당된 값이 상수가 되는 것이 아닌 바인딩된 값이 상수가 되는 여기서는 exam 변수가 상수가 되기 때문에 const키워드로 선언된 exam 변수에는 객체 재할당은 불가능하지만 객체의 속성은 변경 가능

 

객체 재할당이 불가능한 이유

변수의 값 즉 객체 사이의 바인딩 자체가 변경이 되기 때문에 상수인 exam 변수는 재할당이 불가능

 

객체의 속성이 변경가능한 이유

실제 객체가 변경이 되지만 ( {} -> name: "yong") 객체와 변수(exam)사이의 바인딩은 변경이 되지 않기 때문에 객체의 속성은 변경 가능

 

그러므로 재할당은 불가능하지만 객체 속성을 변경함에 따라 변수에 바인딩된 객체의 내용까지 변경이 되기 때문에 불변객체라고 부르기는 힘들다.

 

🟥 Object.freeze()

기본제공 메소드이며 "객체를 동결하기 위한 메소드"이다

let food = {
  name : "kimchi"
}

Object.freeze(food);

이런식으로 사용이 가능하며 food 변수에 key value를 가진 객체를 바인딩 한 후 밑에 freeze를 메소드를 통해 바인딩된 변수를 동결 객체로 만든 상황이다. 그러므로 food의 객체의 속성을 변경하는 시도는 불가능하다.

food.name = 'kimchi';
console.log(food)// {name: 'kimchi'}

이렇게 객체 속성 자체를 변경하는 시도는 무시가 되는 현상이 일어난다.

 

But! 동결된 객체를 반환하기는 하지만 객체의 재할당은 가능하다

food = {
price : 2000
};
console.log(food);

이렇게 객체의 재할당은 가능하지만 이것도 완벽한 동결된 객체라고 보기는 힘들다.

그렇다면 결국 불변객체는

const와 Object.freeze() 조합으로 만들수있다.

const food = {
  name : 'kimchi'
};

Object.freeze(food)

이렇게 바인딩 된 변수를 상수화 시키고 Object.freeze()로 해당 변수를 동결 객체를 만들면 객체의 재할당과 객체의 속성 둘다 변경불가능한 불변 객체를 만들 수 있다.

 

📌 얕은 복사와 깊은 복사 

💭 얕은 복사(Shallow Copy)는 객체의 참조값(주소 값)을 복사하는 것이고 깊은 복사(Deep Copy)는 객체의 실제 값을 복사하는 것입니다. 우선 자바스크립트에는 원시값, 참조값 이 두가지 데이터 타입의 값이 존재합니다.

 

🟥 원시값

해당 값은 기본 자료형(단순 데이터)를 의미합니다. Number, String, Boolean, null, undefined, 등이 이 데이터에 해당합니다. 변수에 원시값을 저장할 시 변수의 메모리 공간에 실제 데이터 값을 저장하게 됩니다. 할당된 변수를 조작 시 저장된 실제 값이 조작됩니다.

 

🟥 참조값

해당 값은 여러 자료형으로 구성되는 메모리에 저장된 객체를 의미합니다. Object, symbol, array등이 이 데이터에 해당합니다. 변수에 객체를 저장할 시 독립적인 메모리 공간에 값을 저장하게 되고 변수에 저장된 메모리 공간의 참조(즉 위치 값)를 저장하게 됩니다. 그래서 할당된 변수를 조작할때 사실 객체 자체를 조작하는 것이 아닌 해당 객체의 참조(위치 값)를 조작하게 되는 것입니다.

 

원시값을 복사할 때 그 값이 다른 메모리 공간에 할당되기 때문에 복사를 하고 값을 수정해도 기존의 원시값을 저장한 변수에는 영향을 주지 않습니다. 이렇듯이 실제 값을 복사하는 것을 깊은 복사라고 합니다

ex)

const a = 7;
let b = a;
b = 1

console.log(a); //7
console.log(b); //1

참조값을 복사할 때는 변수가 객체의 참조를 가리키고 있어서 복사된 변수 또한 객체가 저장된 메모리 공간의 참조를 향해 가리키고 있습니다. 그렇기 때문에 복사 및 객체를 수정 시 두 변수는 똑같은 참조를 가리키고 있기에 기존 객체를 저장한 변수에 영향을 줍니다. 이처럼 객체의 참조값(위치 값)을 복사하는 것을 얕은 복사라고 합니다. 

const a = {
  number : 1
}
let b = a;
b.number = 5

console.log(a); // {number : 5}
console.log(b); // {number : 5}

 

얕은 복사 방법

"얕은 복사란 객체를 복사할 때 기존 값과 복사된 값이 같은 참조를 가리키고 있는 것을 말합니다. 객체 안에 객체가 있을 경우 한 개의 객체라도 기존 변수의 객체를 참조하고 있다면 이를 얕은 복사라고 합니다"

 

🟥 Array.prototype.slice()

해당 방법은 start부터 end 인덱스까지 기존 배열에서 추출을 하고 새로운 배열을 리턴하는 메소드. start부터 end 인덱스를 설정안할 시 기존배열을 전체 얕은 복사합니다.

const origin = ['a', 2, true, 4, "hi"];
const copy = origin.slice();

console.log(JSON.stringify(origin) === JSON.stringify(copy)); // true
copy.push(10);

console.log(JSON.stringify(origin) === JSON.stringify(copy)); // false

console.log(origin); // ['a', 2, true, 4, "hi"];
console.log(copy); // ['a', 2, true, 4, "hi", 10];

여기에서는 array의 type이라 기존배열에 영향을 미치지 않기 때문에 깊은 복사로 보일수도 있지만 원시값은 기본적으로 깊은 복사입니다. 하지만 array는 원시값을 저장한 1차원 배열일 뿐이기 때문에 깊은 복사가 아니다.

 

const original = [  
  [1, 1, 1, 1],  
  [0, 0, 0, 0],  
  [2, 2, 2, 2],  
  [3, 3, 3, 3],
];

const copy = original.slice(); 

console.log(JSON.stringify(original) === JSON.stringify(copy)); // true 

// 복사된 배열에만 변경과 추가.
copy[0][0] = 99; 
copy[2].push(98); 

console.log(JSON.stringify(original) === JSON.stringify(copy)); // true 

console.log(original);
// [ [ 99, 1, 1, 1 ], [ 0, 0, 0, 0 ], [ 2, 2, 2, 2, 98 ], [ 3, 3, 3, 3 ] ]

console.log(copy);
// [ [ 99, 1, 1, 1 ], [ 0, 0, 0, 0 ], [ 2, 2, 2, 2, 98 ], [ 3, 3, 3, 3 ] ]

 이렇게 1차원 배열이 아니라 중첩구조를 가진 2차원배열에는 얕은 복사를 수행하는 것이 바로 보입니다.

 

🟥 Object.assign()

이 메소드는 Object.assign(생성할 객체, 복사할 객체)

즉 처음에는 첫번째 인자에 빈 객체를 넣어주고 두번째 인자로 복사할 객체를 넣어주면 됩니다.

 

const object = {  
  a: "a",  
  number: {    
    one: 1,    
    two: 2,  
  },
}; 

const copy = Object.assign({}, object); 

copy.number.one = 3; 

console.log(object === copy); // false
console.log(object.number.one  === copy.number.one); // true

Object.assign()은 속성의 값을 복사하기 때문에 다른 대안을 사용해야 합니다. 출처 값이 객체에 대한 참조인 경우, 참조 값만을 복사합니다.

 

🟥  Spread연산자 (전개연산자)

 

const object = {  
  a: "a",  
  number: {    
    one: 1,    
    two: 2,  
  },
}; 

const copy = {...object} 

copy.number.one = 3; 

console.log(object === copy); // false
console.log(object.number.one  === copy.number.one); // true

 

깊은 복사 방법

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

복사를 하는 목적 자체는 기존 객체의 복사본으로 가져와 별도로 활용하기 위함이 대부분인데 기존 객체까지 건드린다면 이것은 복사를 하는 목적에 벗어나기에 깊은복사가 중요합니다.

 

🟥 JSON.parse && JSON.stringify

JSON.stringify()는 객체를 json 문자열로 변환하고 이 과정에서 원본 객체와의 참조가 모두 끊어지는 형태가 생깁니다. 객체를 json 문자열로 변환 후 JSON.parse()를 이용해 다시 원래의 객체 즉 자바스크립트 객체로 만들어줍니다. 

이 방법은 간단하지만 다른 방법에 비해 느리다는 단점과 객체가 function일 경우 undefined로 처리가 됩니다.

 

const object = {  
  a: "a",  
  number: {    
    one: 1,    
    two: 2,  
  },  
  arr: [1, 2, [3, 4]],
}; 

const copy = JSON.parse(JSON.stringify(object)); 

copy.number.one = 3;
copy.arr[2].push(5); 

console.log(object === copy); // false
console.log(object.number.one === copy.number.one); // false
console.log(object.arr === copy.arr); // false 

console.log(object); // { a: 'a', number: { one: 1, two: 2 }, arr: [ 1, 2, [ 3, 4 ] ] }
console.log(copy); // { a: 'a', number: { one: 3, two: 2 }, arr: [ 1, 2, [ 3, 4, 5 ] ] }

 

🟥 재귀함수를 이용한 복사

하지만 복잡하고 이해하기 어렵습니다.

const object = {  
  a: "a",  
  number: {    
    one: 1,    
    two: 2,  
  },  
  arr: [1, 2, [3, 4]],
}; 

function deepCopy(object) {  
  if (object === null || typeof object !== "object") {    
    return object;  
  }  // 객체인지 배열인지 판단  
  const copy = Array.isArray(object) ? [] : {};   

  for (let key of Object.keys(object)) {    
    copy[key] = deepCopy(object[key]);  
  }   

  return copy;
} 

const copy = deepCopy(object); 

copy.number.one = 3;
copy.arr[2].push(5); 

console.log(object === copy); // false
console.log(object.number.one === copy.number.one); // false
console.log(object.arr === copy.arr); // false 

console.log(object); // { a: 'a', number: { one: 1, two: 2 }, arr: [ 1, 2, [ 3, 4 ] ] }
console.log(copy); // { a: 'a', number: { one: 3, two: 2 }, arr: [ 1, 2, [ 3, 4, 5 ] ] }

🟥 Lodash 라이브러리 이용

const deepCopy = require("lodash.clonedeep") 

const object = {  
  a: "a",  
  number: {    
    one: 1,    
    two: 2,  
  },  
  arr: [1, 2, [3, 4]],
}; 

const copy = deepCopy(object); 

copy.number.one = 3;
copy.arr[2].push(5); 

console.log(object === copy); // false
console.log(object.number.one === copy.number.one); // false
console.log(object.arr === copy.arr); // false 

console.log(object); // { a: 'a', number: { one: 1, two: 2 }, arr: [ 1, 2, [ 3, 4 ] ] }
console.log(copy); // { a: 'a', number: { one: 3, two: 2 }, arr: [ 1, 2, [ 3, 4, 5 ] ] }

마지막으로 Lodash 라이브러리를 사용하는 방법이 있습니다. 라이브러리를 이용하여 안전하고 쉽게 깊은 복사를 하는 장점이 있는데 설치를 해야한다는 문제와 개발에는 효율적이지만 코딩테스트 등에는 module처럼 사용할 수 없다는 것이 큰 단점입니다.

 

🎁 호이스팅과 TDZ는 무엇인가?

📌스코프, 호이스팅, TDZ   

🟥 스코프

변수나 함수에 접근할 수 있는 위치

function foo() {
  var x;
}

여기에서 x의 스코프는 foo() 입니다.

 

💭 어휘적 스코프

정적 스코프(Static scope), 렉시컬 스코프(Lexical scope)라고도 불리며, 프로그램을 실행하지 않고 소스 코드에 존재하는대로 해석한 스코프입니다.

 

💭 변수 스코프

어휘적(정적)으로 지정되며, 즉 프로그램의 정적 구조를 보면 변수의 스코프를 판단할 수 있고 함수를 어디서 호출했는지 등에 영향을 받지 않는다. 또한 변수 스코프는 함수이며, 함수만이 새 스코프를 도입할 수 있습니다.

 

💭 중첩 스코프

스코프가 변수의 스코프 안에 중첩되어 있으면 그 변수는 해당 스코프 전체에서 접근할 수 있습니다.

function foo(arg){
  function bar(){ //중첩 스코프 bar()
    console.log(`Hi, ${arg}`);
  }
  bar();
}

foo("jacob"); //Hi, jacob

💭 Shadowing

내부 스코프에서 외부 스코프에 있는 변수와 이름이 같은 변수를 선언하면, 내부 스코프와 그 안에 중첩된 모든 스코프는 외부 스코프의 이름이 같은 변수에 접근할 수 있습니다. 내부 변수가 바뀌어도 외부 변수는 바뀌지 않으며, 내부 스코프에서 빠져나가면 다시 접근할 수 있습니다.

var x = "global";
function f(){
  var x = "local";
  console.log(x);  // local
}
f(); // local
console.log(x); // global

🟥 호이스팅

함수 안에 있는 선언들을 모두 끌어 올려서 해당 함수 유효 스코프의 최상단에 선언 하는 것.
(var 선언문이나 function 선언문 등을 해당 스코프의 선두로 옮긴 것처럼 동작하는 특성)

 

호이스팅 해야할 대상

var 변수 선언과 함수선언문에서만 호이스팅이 일어납니다.
var 변수/함수의 선언만 위로 끌어 올려지며, 할당은 끌어 올려지지 않습니다.
let/const 변수 선언과 함수표현식에서는 호이스팅이 발생 x

 

💥 var , let , const 키워드로 선언된 변수는 선언 부분만 끌어올려진다고 생각할 수 있습니다. 따라서 var 의 경우에는 변수 선언전에도 참조할 수 있지만 할당을 하지 않았기에 undefined입니다.

 

let 또는 const가 호이스팅이 발생하지 않는 이유

💥 식별자가 호이스팅 후 실제 코드에서 선언되기 전까지 TDZ(Temporal Dead Zone/일시적 사각지대)에 있기 때문에 let, const 선언코드가 있는 곳 이전에는 해당 변수에 참조할 수 없게 됩니다.

 

🟥 Temporal Dead Zone(TDZ)

참조 오류가 나는 구간인 스코프 시작지점부터 초기화 지점까지의 구간.
초기화가 되기 전까지는 TDZ라는 곳에 머물러서 초기화(혹은 할당)이 될 때까지 잠시 '죽어있는 상태'이기 때문에 선언 전에 참조가 불가능한 것. 선언 전에 변수를 사용하는 것을 비허용하는 개념상의 공간입니다.

 

console.log(a); // undefined
f1(); // undefined
console.log(f2) // undefined
f2(); // TypeError: f2 is not a function
function f1(){
  console.log(b);
  var b = 5;
}
var f2 = function () {
  console.log(c);
  var c = 7;
}
var a = 10;

지역변수 : {}안에서 선언된 변수 즉 블록 안에서만 사용가능

전역변수 : {}밖에서 선언된 변수 즉 어디든지 쓰일수 있는 변수

 

호이스팅 시 function 안에서 쓴 것 빼고는 전부 전역변수라고 생각하면 됩니다.

 

💥 const , let 말고도 class 구문과 클래스의 constructor() 내부의 super(), 기본 함수 매개변수도 TDZ 제한이 있습니다. 반면 var , function 구문은 TDZ에 영향을 받지 않으며 현재 스코프에서 호이스팅이 됩니다.

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

🟥 함수 선언식(function declaration)

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

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;
}

💥 함수 선언식  => 정상적으로 해당 값을 출력

 

호이스팅을 마치게 된다면

function sum(a, b) { // 함수 선언식 - 함수 전체 호이스팅
  return a + b;
};

var minus; // 함수표현식 - 선언부만 호이스팅

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

function (a,b) { // 함수 표현식 - 할당부는 그대로
  return a - b;
}

아래와 같이, 오류나는 부분, 즉 함수 표현식을 코드를 호출하는 부분 위에 작성하면 에러없이 정상적으로 출력됩니다.

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

sum(50, 50); // 100
minus(100, 50) // 50

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

💥 함수 선언식으로 작성한 함수는 함수 전체가 호이스팅이 되는데 전역적으로 선언하게 될 시 중복적으로 동명의 함수를 쓰게 된다면 에러를 발생 시킬 수 있습니다. 함수 표현식으로 작성하게 될시 이를 미연에 방지 할 수 있습니다.

 

📌let, const, var, function 의 실행원리 

💭 let변수와 const 변수는 ES6 이후 스펙에서 새롭게 등장한 변수입니다. 이와 같은 이유 때문에 브라우저 배포용 코드 같은 경우는 아직도 var 변수만 사용되는 경우도 있습니다.

 

우선 var, let, const 3가지를 구분 짓는 가장 큰 차이점은

1. 값 변경 여부

2. 스코프 범위

3. 호이스팅 가능 여부

이며 우선순위에 있어서는 const, let, var 순입니다.

 

 

🟥 값 변경 여부

var와 let을 값이 선언된 이후에도 값을 변경할 수 있지만, const는 생성할 때 선언된 초기값을 변경할 수 없습니다.

 

🟥 스코프 범위

var은 함수스코프를 가지지만, let과 const 변수는 블록 스코프를 가지게 됩니다.

 

🟥 호이스팅 가능 여부

var는 호이스팅이 가능하지만, let과 const는 호이스팅이 불가능합니다.

 

💭 function()의 원리

 

💥함수를 실행하기 위해서는 이름(식별자)이 필요합니다. 이름이 있어야 스코프에서 값을 참조할 수 있기 때문입니다.

 

💥엔진이 함수 선언문을 만나면 식별자를 관리하는 특별한 집합(EnviromentRecord)에 함수의 이름을 식별자로 넣고 함수 객체를 생성하여 참조합니다. 그리고 함수 실행 구문 중 foo를 만나면 값을 스코프를 통해 가져옵니다. 그 다음 구문이 () 이므로 실행 가능하다면 실행합니다.

 

💥만약 스코프에서 식별자를 찾지 못했다면 참조 에러(ReferenceError)를 출력하고, 식별자는 찾았지만 실행할 수 없는 타입이라면 타입 에러(TypeError)를 출력합니다.

 

📌 실행 컨텍스트와 콜 스택

💭 실행 컨텍스트와 콜 스택

이 과정을 이해할려면 우선 자바스크립트 엔진 자체가 어떻게 코드를 읽는가에 대해서 들어가봐야 합니다. 말도 의사표현을 내가 어떻게 하냐에 따라 결과가 달라지듯이 자바스크립트 또한 코드를 이해하는 나름의 원칙이 있습니다.

 

🟥 실행 컨텍스트(Execution Context)

실행 컨텍스트는 자바스크립트의 핵심 개념으로 코드를 실행하기 위해 필요한 환경이다. 더 자세히 말하자면, 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 모든 코드는 특정한 실행 컨텍스트 안에서 실행됩니다. 

javascript는 어떤 execution context가 활성화되는 시점에 선언된 변수들을 위로 끌어올리고(hoisting), 외부 환경 정보를 구성하고, this값을 설정하는 등의 동작을 수행하는데, 이로 인해 다른 언어에서는 발생할 수 없는 특이한 현상들이 발생

 

🟥 Global Execution Context

디폴트 실행 컨텍스트로, 자바스크립트 파일이 엔진에 의해 처음 로드되었을 때 실행되기 시작하는 환경이다.

 

🟥 Function Execution Context

우리가 execution context를 따로 구성하는 방법은 함수를 실행하는 것 뿐이다. 함수가 호출되고 실행됨에 따라서 해당 함수 안에서 생성되는 컨텍스트. 각각의 함수는 고유의 실행 컨텍스트를 가진다. 그리고 전역 실행 컨텍스트에 언제나 접근할 수 있다.

 

(1) Global Execution Context 생성.

자바스크립트 파일이 열리는 순간(별도의 명령 없이) 전역 실행 컨텍스트가 생성된다. 그리고 global execution context가 가장 먼저 callstack에 push된다. 지금 callstack의 맨 위에는 global execution이 있으므로 자바스크립트 엔진은 이제 전역 실행 컨텍스트 상에서 코드를 읽어내려가기 시작한다.

(2) foo함수 호출.

foo함수를 호출할 때, Global Execution Context는 멈춘다. 왜냐하면 자바스크립트는 싱글 스레드 환경이기 때문에, 한 번에 하나의 코드만을 실행할 수 있기 때문이다.

(3) 자바스크립트 엔진은 foo함수에 대한 환경 정보를 수집해서 foo execution context를 생성한 후, callstack에 push한다. 이제 함수 내부의 코드들이 순서대로 진행된다.

(4) bar함수 호출. foo함수의 Execution Context는 멈춘다.

(5) bar함수의 Execution Context가 생성되고 callstack에 push된다. 읽어내려간다. console.log함수를 실행한다. 전역 변수인 a의 값이 콘솔창에 뜸으로써 console.log함수의 실행이 끝난다.

(6) 더 읽어내려갈 게 없으므로 bar함수의 Execution Context가 종료된다. callstack에서 pop-out된다. 그리고 해당 함수 바로 밑의 Execution Context, 여기에선 foo함수의 Execution Context가 계속된다.

(7) 더 읽어내려갈 게 없으므로 foo함수의 Execution Context가 끝난다.

(8) 더 읽어내려갈 게 없으므로 Global Execution Context가 끝난다.

 

 

🟥 callstack(콜스택)

call은 호출을 뜻한다.
stack은 출입구가 하나뿐인 깊은 우물 같은 데이터 구조다.

따라서 callstack은 자바스크립트가 함수 호출을 기록하기 위해 사용하는 우물 형태의 데이터 구조이다.

항상 맨 위에 놓인 함수를 우선으로 실행된다. 이런 식으로 자바스크립트 엔진은 가장 위에 쌓여있는 context와 관련 있는 코드들을 실행하는 식으로 전체 코드의 환경과 순서를 보장한다.

 

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

 

🟥 스코프 체인

함수는 전역에서 정의할 수도 있고 함수 몸체 내부에서도 할 수 있다. 함수 몸체 내부에서 함수가 정의된 것을 '함수의 중첩', 중첩 함수를 포함하는 함수를 '외부 함수'라고 한다.

함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있는데, 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다. 이때 외부 함수의 지역 스코프를 중첩 함수의 상위 스코프라고 지칭한다.

var x = "global x";
var y = "global y";

function outer (){
  var z = "outer's local z";
  console.log(x); //global x
  console.log(y); //global y
  console.log(z); //outer's local z
  
  function inner (){
    var x = "inner's local x";
    console.log(x); //inner's local x
    console.log(y); //global y
    console.log(z); //outer's local z
  }
  inner();
}
outer();

console.log(x); //global x
console.log(z); //ReferenceError: z is not defined

위의 예제 코드는 outer 함수가 만든 지역 스코프 내에 inner 함수가 만든 지역 스코프가 있으므로 outer 스코프가 inner 스코프의 상위 스코프이다. 그리고 outer 함수의 지역 스코프의 상위 스코프는 전역 스코프이다.

이처럼 모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프이다.

 

🟥 스코프 체인에 의한 변수 검색

 

변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 참조할 변수가 존재하지 않는다면 상위 스코프의 방향으로 이동하며 선언된 변수를 검색한다. 이를 통해 상위 스코프에서 선언한 변수를 하위 스코프에서 참조할 수 있다. 반대로 하위 스코프에서 유효한 변수는 상위 스코프에서 참조할 수 없다.

 

🟥 변수 은닉화

 

💥 캡슐화는 객체의 상태를 나타내는 프로퍼티를 참조하고 조작할 수 있는 동작인 메서드를 하나로 묶는 것을 말한다. 캡슐화는 객체의 특징 프로퍼티나 메서드를 감출 목적으로 사용하기도 하는데 이를 정보 은닉이라 한다.

정보 은닉은 적절치 못한 접근으로부터 객체의 상태가 변경되는 것을 방지해 정보를 보호한다.

 

💥 대부분의 객체지향 프로그래밍 언어는 클래스를 정의하고 그 클래스를 구성하는 멤버에 public, private, protected 같은 접근 제한자를 선언하여 공개 범위를 한정할 수 있다. 하지만 자바스크립트는 접근 제한자를 제공하지 않는다.

 

💬 실습과제 

let b = 1;
function hi () {
  const a = 1;
  let b = 100;
  b++;
  console.log(a,b); //const, let은 블럭스코프에서 유효해서 함수 내부의 변수들에 접근 후 출력
}

console.log(a); //Reference Error 오류가 발생
                //(a변수를 전역적으로 만들어주지 않아서 이것을 해결하기 위해서는 let b = 1;쪽에 let a= 1; 이런식으로 만들어줘야함)
console.log(b); //let b=1에 접근(전역 b변수) 1을 출력
hi(); //함수 실행 => 1, 101을 출력
console.log(b); //let b=1에 접근(전역 b변수) 1을 출력