15 :: node.js 개념, Hoisting, 내장객체, FormData

엘리스 SW 엔지니어 트랙 15일차

 

 

오티 빼고 한 주에 5일씩

오늘로 3주차 마지막 날이다

 

1~2 주차는 쉬엄쉬엄 가는듯 하다가

3주차부터 엑셀 사정없이 밟는다

 

 

오늘도 잘 모르는 내용

아니 이제 나오는 것들 대부분 잘 모르는 이야기

집중하자!

 

 

오늘은

"옛날 옛적에 자바스크립트가 있었는데" 느낌

어떻게 움직이고, 각 역할들에 대한 이야기

 

 

자바스크립트 코드는

자바스크립트 엔징을 통해 파싱되고 실행된다

Chrome 브라우저는 V8 엔진 사용

 

 

node.js

브라우저 외에서

자바스크립트 코드를 실행할 수 있게 해주는 프로그램!!

그렇구나~

 

이거봐 알고나니 개념은 별거 아니잖아

웹을 벗어나기 위한 JavaScript의 도약이라고 알아두자

 

브라우저 환경, node.js 환경에서

같은 코드를 작성해도 다른 작동이 될 수도 있다

 

 

렉시컬 환경(Lexical Environment)

함수가 사용하는 변수들을 둘러싼 환경

특정 변수의 값은 함수의 렉시컬 환경안에서 찾을 수 있다

실행 컨텍스트 안에 정의된 Variable Object로 생각할 수 있다

 

봐도 모르겠지만 이런게 있다 생각~

 

 

생성 단계에서

자바스크립트 엔진은

실행 컨텍스트를 생성하고

 

함수 선언문, 함수 표현식, 변수 등

실행 컨텍스트에 저장한다

 

• 함수는 값이 저장
• 변수는 값이 저장 안되고
  실행 컨텍스트에서 렉시컬 환경을 구성

• var 변수는 저장시 undefined로 초기화
• let, const는 초기화 안된다(접근조차 불가)

 

 

실행 단계에서

자바스크립트 엔진은

변수에 값을 할당하는 구문을 만나서

실행 컨텍스트에 값을 저장한다

 

 

Hoisting

변수 선언전에 사용되는 것

var가 Hoisting의 원흉

let, const, var 모두 생성 단계에서 변수명은 저장된다

그런데 왜 var만 에러가 안날까??

 

위에도 적어 놓았듯이

생성 단계에서 

var는 undefined 값으로 초기화되고

 

let, const는 어떤 값으로도 초기화가 안된다 無無無

값이 아예 없기에 에러가 뜨고

Hoisting이 일어나지 않는 것처럼 보이는 것

 

함수는 실행전에

실행 컨텍스트에 다 저장되니까 OK

 

 

자바스크립트 내장 객체

유용한 녀석들 있으니 살펴보자

 

 

• globalThis
  • 브라우저 window, 노드 global 인데 이 둘 통일?
• window
  • 윈도우 창 조작 
  • innerHeight
  • innerHeight
  • 등등
• document
  • 오 이녀석도 유용하지
  • createElement
  • querySelector
  • write
  • createTextNode
  • 등등
• Number
• NaN
• isNaN
• Math
  • max
  • min
  • floor
  • random
• Date
  • getDay
  • setDate
  • toDateString
  • getTime
  • now - 현재 시간 밀리초
• String
  • trim
  • toUpperCase
  • includes
  • split
  • replace
  • indexOf
• JSON
  • stringify
    • 자바스크립트 객체 => JSON 문자열

    • JSON.stringify({ name: "Santa", food: "cookie" })
      
      // 결과 => { "name": "Santa", "food": "cookie" }

  • parse
    • JSON 문자열 => 자바스크립트 객체

    • JSON.parse({ "name": "Santa", "food": "cookie" })
      
      // 결과 => { name: "Santa", food: "cookie" }

  • 객체에 따옴표 붙으면 JSON 문자열 인가보다

 

오늘의 하이라이트는

Destructuring Assignment

ES6 문법, reduce의 사용법

 

 

그리고 FormData()의 발견

굉장히 유용한 녀석이 될 수도 있겠다

HTML form 태그의 데이터를 가져와서 조작할 수 있다.

MDN 링크 => https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

 

 

nodejs #google