[엘리스 sw 엔지니어 트랙] 15일차 변수 정의 과정, 호이스팅, 내장 객체

수업 15일차

점점 Javascript의 묘미를 알게 되는거같은 기간이다. 이제는 하루에 8시간씩 앉아서 수업듣고 코딩하고 공부하는게 익숙해져가는 것 같다~!

이론

• 자바스크립트 엔진은 코드 실행 전 실행 컨텍스트 생성
  실행 컨텍스트는 두 단계를 통해 생성
  생성 단계에서 변수 선언을 읽는다
  실행 단계에서 변수 값을 할당한다.
  렉시컬 환경 : 함수가 사용하는 변수들을 둘러싼 환경
  생성 단계 : 함수 선언문, 함수 표현식, 변수 등을 읽어 실행 컨텍스트에 저장, 실행 컨텍스트 생성
  실행 단계 : 변수에 값을 할당하는 구문을 만나면 실행 컨텍스트에 값을 저장, 변수 값 할당, 코드 실행
  호이스팅 : 변수가 선언된 시점보다 앞에서 사용되는 현상, var변수가 생성 단계에서 undefined으로 초기화 되는 원인
  var : 변수 재할당 가능, 함수 스코프 변수
  let : 변수 재할당 가능, 블록 스코프 변수
  const : 변수 재할당 불가능, 블록 스코프 변수
  globalThis : 전역 객체를 지칭하는 변수, 브라우저 환경에서는 window객체와 같음
  window : DOM document를 포함하는 창을 나타내는 객체, 현재 창의 정보를 얻거나 조작
  document : 브라우저에 로드된 웹페이지, 문서의 정보를 얻는다.
  isNaN : 빈문자열, 잘못된 입력을 유저의 입력으로 포맷팅함
  Math : 기본적인 수학 연산 메서드, 상수를 다루는 객체.
  Math.max : 최대값
  Math.min : 최솟값
  Math.random() : 0에서 1 사이의 float number을 구한다
  Math.floor : 소숫점 이하 숫자를 버린다.
  Date : 특정 시점의 날짜를 표시하기 위한 객체
  setDate() : 시간 설정
  toDataString() : 특정 포맷의 문자열 반환
  getTime() : 시간을 밀리초 단위로 반환
  split() : 주어진 문자열에 따라 타겟 문자열을 나눈다.
  replace() : 주어진 문자열을 검색하여 타겟 문자열로 변환한다.
  indexOf() : 특정 문자열을 검색하여 시작점의 인덱스를 반환한다.
  JSON.stringify() : 주어진 객체를 JSON문자열로 만든다.
  JSON.parse() : 주어진 JSON문자열을 자바스크립트에 맞는 결과 객체로 만듬

호이스팅

• 호이스팅은 변수의 선언을 끌어올리는 것을 말한다
• 선언부는 끌어올리고, 할당은 실행되는 시점에 진행된다

var name = 'heaeun'; // name 초기화
var age; // age 선언

console.log({name, age}); // {name: "heaeun", age: undefined}

age = 25; // age 초기화

함수 호이스팅

함수 선언식

선언과 호출이 동시에 일어난다

getName('heaeun'); // "heaeun"

function getName(name) {
  return name;
}

선언식을 언제 사용하는가?

리액트 컴포넌트에서 함수 선언 로직이 너무 길어서 컴포넌트 UI 구현부가 한눈에 안들어 오는경우 함수를 구현부 아래에 배치한다. 이 경우 함수 선언식을 사용해야 한다

함수 표현식

변수 호이스팅과 같다.

선언부가 위로 끌어올려지고 할당은 코드가 실행될때 진행된다.

console.log(test); // undefined
test();
var test = function () {
  console.log('h2?');
};

위의 코드는 아래의 코드와 같은의미다

var test;

console.log(test); // undefined
test();
test = function () {
  console.log('h2?');
};

호이스팅 시점에 선언부만 끌어올리고 할당은 끌어올리지 못하므로 ReferenceError 발생 !

let, const의 호이스팅

var, let, const 차이점

var, let은 재할당이 가능하고 const는 재할당이 불가능하다

호이스팅 측면에서 var와 let, const의 차이점

var, let, const 모두 호이스팅이 된다.
위의 3가지 모두 평가 시점에 LexicalEnvironment에 변수 정보를 수집한다(호이스팅 개념으로 알고있는 동작)

1. var

var는 선언 단계에서 선언된 변수에 접근이 가능하다

2. let, const

let, const는 선언 단계에서 변수 수집을 하지만 코드가 실행되기 전에는 접근이 불가능하다.
변수 수집이 끝나고 실행되기 전까지 접근이 불가능한 이 단계를 TDZ(Temporal Dead Zone)라고 한다

function test() {
  debugger;
  
  console.log('before ? ', {a, b, c});
 
  const a = 1;
  const b = 2;
  const c = 3;

  console.log('after ? ', {a, b, c});
}

test();

호이스팅 되었지만 접근 불가

코드가 실행 되어야만 접근이 가능

Math 프로퍼티

MAth.PI : Math.PI 는 원주율 Pi 값을 반환합니다.

Math.abs : Math.abs 메서드는 인수로 전달된 숫자의 절대값을 반환합니다.

Math.round : Math.round 메서드는 인수로 전달된 숫자의 소수점 이하를 반올림한 정수를 반환합니다.

Math.ceil : Math.ceil 메서드는 인수로 전달한 숫자의 소수점
이하를 올리한 정수를 반환합니다. 소수점 이하를 올림하면 더 큰 정수가 됩니다.

Math.floor : Math.floor 메서드는 인수로 전달한 숫자의 소수점 이하를 내림한 정수를 반환합니다. 소수점 이하를 내림하면 더 작은 정수가 됩니다.

Math.sqrt : Math.sqrt 메서드는 인수로 전달한 숫자의 제곱근을 반환합니다.

Math.random : Math.random 메서드는 임의의 난수를 반환합니다. 이때 난수는 0이상 1만의 실수입니다.

Math.pow : Math.pow 메서드는 첫 번째 인수를 밑으로, 두 번째 인수를 지수로하여 거듭제곱한 결과를 반환합니다. Math.pow 메서드보다 ES7에 도입된 지수 연산자 **를 사용하는 것이 가독성이 더 좋습니다.

Math.max : Math.max 메서드는 전달받은 인수 중 가장 큰 수를 반환합니다. 인수가 전달되지 않으면 -infinity를 반환합니다.

Math.min : Math.min 메서드는 전달받은 인수 중 가장 작은 수를 반환합니다. 인수가 전달되지 않으면 infinity를 반환합니다.

JSON

• 데이터를 주고 받는 포맷
• key와 value로 이루어져 있는 파일 포맷
• 가독성이 좋다.
• 언어나 플랫폼과 관계없이 사용 가능하다.

코드를 입력하세요

Object to JSON

• 객체를 JSON으로 변경하는 방법 : JSON.stringify()
  변경하면 key, value 모두 " " 가 붙음.
  변경하고자 하는 객체안에 메소드가 있는 경우 JSON으로 변경될 때 제외된다.

const rabbit = {
  name: 'tori',
  color: 'white',
  size: 'null',
  birthDate: new Date(),
  jump: () => {
    console.log(`${name} can jump!`);
  }

}
let json = JSON.stringify(rabbit);
console.log(json);
////{"name":"kim","color":"white","size":"null","birthDate":"2020-12-19T11:03:07.200Z"}

JSON to Object

• JSON을 객체로 변경하는 법 : JSON.parse()

let obj = JSON.parse(json);
console.log(obj);
//{name: "tori", color: "white", size: "null", birthDate: "2020-12-19T11:31:45.807Z"}

위 코드에서 birthDate는 JSON.stringify()를 했을 때 Date 객체에서 얻은 문자열을 가져온다. 이를 방지하기 위해선 아래 코드처럼 작성을 해야한다.

let obj = JSON.parse(json, (key, value) => {
	return key === 'birthDate' ? new Date(value) : value;
    // JSON에서 가져오는 key값이 'birthDate'인 경우 new Date(value)로 새로 생성, birthDate 이외의 경우 기존 value값을 가져온다.
})