TIL/JS 2023/3/13 📚

공부를 해나가면서 CS지식에 부족함을 느껴 CS학습을 기록+학습하기 위해 앞으로 글을 쭉 써나갈 것입니다!! 부족한 점이 많기 때문에 오류 수정, 더 좋은 방법 등 첨언 해주시면 감사하겠습니다!!

오늘은 캡틴판교님의 블로그글 "간단히 훑어보는 자바스크립트 기본기 다지기"
라는 블로그 글을 보며 내가 아는 것과 모르는 것을 정리해 보았다.
이 분처럼 글도 잘 쓰고싶고 코드도 잘 짜고싶다.. 다방면에서 배울점이 많은 분이라 생각한다. 이렇게 좋은 지식을 공유해주셔서 참 감사하다!!
캡팁판교 - 블로그 출처

호이스팅❓

호이스팅에 대해 학습을 하며 또 다른 블로그의 글을 많이 도움을 받았다.
호이스팅 참고 블로그

필자는 이전 까지 호이스팅이 그저 "맨 위로 올려주는 거" 😂

이렇게 추상적으로 심지어 잘못 알고있었다ㅋㅋ 이번 기회에 새롭게 개념을 정의할 수 있었다.

호이스팅이란 코드를 실행하기 전 변수/함수 선언을 해당 스코프의 최상단으로 끌어올리는 것일까?? ❌
" 호이스팅(Hoisting) 이란 코드가 실행되기 전 변수/함수 선언이 스코프의 최상단으로 끌어올려진 것 같은 현상을 말한다 "⭕️

이를 이해하기 위해서는 자바스크립트 엔진의 "실행 컨텍스트 과정"을 이해해야한다.

실행컨텍스트 ❓

자바스크립트 엔진은 코드를 실행하기 전에 실행 가능한 코드를 형상화하고 구분하는 과정 즉, "실행 컨텍스트 과정"을 거친다.

해당 실행 컨텍스트 과정에서 모든 선언을 스코프에 등록한다.

즉, 실행컨텍스트는 코드가 실행되기 위해 필요한 환경을 의미한다.

위 실행컨텍스트 과정에서 호이스팅이라는 현상이 발생하는 것이다.

선언이 코드 실행보다 먼저 메모리에 저장되는 과정으로 발생하는 현상이다.

내가 정의하는 호이스팅

호이스팅(hoisting)은 기본적으로 변수/함수 선언이 스코프의 최상단에서 이루어지면서 발생하는 현상이다. 변수를 생성할 때 자바스크립트 엔진은 메모리에 선언을 가장 먼저 저장한다. 그 결과 발생하는 현상이다. 마치 스코프의 최상단으로 변수 선언이 올라온 거 같은 현상!!

변수호이스팅

자바스크립트의 모든 선언은 호이스팅이 일어난다!!

console.log(A)
var A ="123"
// undefined
// 선언은 됐지만 값이 할당되지 않았기 때문에 console.log(A)의 시점에선
// undefined가 찍힌다. 
console.log(B)
let B = "123"

// 참조에러 
// 왜그럴까??

순서는 같지만 const,let,var은 호이스팅이 일어나는 것처럼 보이기도하고 안일어난것처럼 보이기도한다.

그렇지만 중요한 것은 모두 호이스팅이 일어났다는 점❗️

다른점은 다음과 같다!

const,let vs var

const와 let은 변수가 선언됐을 때 메모리에 선언이 저장된다.

그렇지만 초기화 과정이 이루어지지않는다. 이것을 이해하기 위해서는 변수가 어떻게 선언, 초기화, 할당 이 이루어지는지 알아야한다.

모든 변수는 선언 될 때 메모리에 저장이 된다. 이는 컨텍스트과정이라 볼 수 있다.
그런데 var은 선언이 되는 시점에서 초기화까지 되어 메모리에 저장되고
let과 const는 선언이 되는 시점에서 선언만 메모리에 저장이된다.

여기서 초기화라 함은 변수 선언 후 해당 변수의 값을 undefined로 비워놓아
할당을 받을 준비를 하는 것이다.

그렇다면 이해할 수 있다.

TDZ : Temporal Dead Zone

const와 let은 초기화(메모리확보X)가 이루어지지 않아 선언만 메모리에 저장되어 변수가 사용되는 시점보다 더 이후에 선언이 이루어졌다면 컴퓨터는 해당 변수를 참조할 수 없다. 해당 과정을 TDZ라고한다. 변수가 const나 let으로 선언 됐을 때 초기화가 이루어지지 않아 참조를 할 수 없는 구간을 말한다.

var 선언과 초기화가 동시에 이루어지기때문에 undefined라는 값이라도 가진 채 사용 될 수 있다.

초기화가 이루어지지 않는다면 해당 집(변수)가 어떤 집인지 알 수 가 없기 때문에 에러가 난다.

자박스크립트 타입

undefined vs null ❓

undefined: 변수의 값이 할당되지 않았을 때 컴퓨터가 undefined로 할당시켜준다. 즉 선언을 하고 값이 들어오지 않았거나 index는 존재하나 값이 비어있다 등 영어 단어 뜻
그대로 <값이 있는거 같은데? 찾을 수 없습니당!> 의 의미이다.
이때 undefined는 값이자 타입이 된다.

null: 개발자가 의도적으로 할당하는 값으로 일부러 빈 값을 넣고 싶을 때 사용한다. 값은 null, 타입은 Object이다!

메서드 정리

delete ❓

객체 프로퍼티는 삭제가 가능하다 객체 자체는 삭제가 불가능하다!!

const Person = {
 name: "park",
  age:12
 
}

delete Person
console.log(Person)
//{name:"park", age:12} 객체변화 X
delete Person.age
console.log(Person)
// {name:"park"}

배열에서 splice vs delete ❓

splice

const arr =[1,2,3,4]
arr.splice(1,1)
// console.log(arr) => [1,3,4]

delete

const arr=[1,2,3,4]
delete arr[1]
//console.log(arr)=>[1,undefined,3,4]

==연산자, ===연산자 ❓

==와 ===의 가장 큰 차이는 타입까지 비교하냐 마냐!!

const A = "123"
const B =  123

console.log(A==B) // true
console.log(A===B) // false

Object, String, Number 프로토타입 객체 메서드 재정의 ❓

String.prototype.printText = function(text){
 console.log(`Print this text out` + ${text}) 
}
const location = "seoul"

location.printText(`GwangJu`)
// Print this text out GwangJu

Object,String,Number 타입은 다음과 같이 prototype을 이용해서 메서드를 만들 수 있다.

즉시 실행 함수 ❓

함수를 정의함과 동시에 바로 실행하는 함수
언제 사용하면 유용할까?? 함수를 최초 1번만 사용할 때!
ex: 초기화 코드!!

(function(name)
 {console.log(`this is the immediate fuction ${name}`)}(`foo`)

기존 함수를 사용할 때에 (함수)(함수실행) 이렇게 사용하면 된다.

(function(name){
  console.log(name +"is 28")
})(name)

클로져

실행이 끝난 함수의 스코프를 참조할 수 있는 함수

(실행이 끝난 함수에 접근할 수 있는 함수)

function parent() {
  var a = 'Parent is done';
  function child() {
    console.log(a);
  }
  //내부의 child에 접근할 수 있을까?
  return child;//return을 해서 내부의 함수를 외부로 가져옴
}
var closure = parent();
//parent는 클로저함수
closure();

위 child는 외부에서 접근이 불가능하다 하지만 Return에 child를 넣어
외부에서 parent함수의 결과값 즉 parent()를 사용해 변수에 할당해
내부에 있는 child에 접근할 수 있다. 이것이 클로저이다

장점

• 데이터 보존이 가능하다.
• 정보의 점근 제한 (캡슐화)
• 모듈화에 유리하다.

🔥클로저 함수는 즉, 자신이 선언 될 당시의 환경을 기억하는 함수🔥

오늘의 공부는 JS 기초에 대해 다시 한번 학습해보고 아직도 모르는 점이 많았기 때문에 더욱 열심히 해야겠다는 생각이 들었다. 특히 가장 많은 투자를 했던 호이스팅에 대해 알 수 있게되어 다행이라는 생각이 들었고 클로져는 분량이 많아 질 거 같아 내일 정리를 한번 해봐야겠다!!