[TIL] 엘리스 SW 엔지니어 트랙 Day 014

📖 오늘 배운 내용 - 2021.11.11

• 실행 컨텍스트
• 스코프(Scope)
• 호이스팅
• 자바스크립트 내장 객체
• 전개 연산자
• toLocaleString
• toFixed

 

📝 [스코프] 지역 / 전역 변수

• 변수가 작동하는 유효 범위, 변수에 접근할 수 있는 범위
• JS에는 2가지 스코프 타입이 있다. = Global / Local
  • 전역(Global ) 스코프는 어느 곳에서든지 해당 변수에 접근할 수 있다.
  • 지역(Local) 스코프는 해당 지역에서만 접근할 수 있다.

var a = "global"; // Global Scope

function localFunction() {
    var a = "local";
    console.log(a);
}

localFunction(); // local

console.log(a); // global

var a = "global"; // Global Scope

function localFunction() { // loval Scope
    console.log(a); // a가 전역이기 때문에 global 출력
}

localFunction(); // global

 

📝 호이스팅(Hoisting)

• 변수 선언 / 함수 선언을 코드의 맨 위로 끌어올려진 것 같은 현상

console.log(named); // undefined
var named = "Elice"

console.log(named); // error
let named = "Elice"

• var든 let이든 일단 자바스크립트는 변수 존재는 알고 있다. 그러나 let은 값을 넣어주기 전까지는 접근할 수 없다.

function test() {
    console.log(a);
    var a = "test";
}

test();

• 함수를 제외한 모든 곳에서 호이스팅이 일어난다.(if, for)
• 단, 함수에도 호이스팅이 일어나는데 그 경우에는 함수의 최상단까지 호이스팅이 일어난다.

 

📝 실행 컨텍스트(Execution Context)

• 자바스크립트가 실행되기 위해 알아야 할 정보들(필요한 변수, scope, this)이 필요하다.
• 이 모든 것을 통틀어서 실행 컨텍스트라고 한다.
• 기본적으로 자바스크립트가 실행될 때 가지고 시작하게 되는 게 실행 컨텍스트이다.

 

📕 실행 컨텍스트의 종류

• 전역 실행 컨텍스트 = 하나만 존재(유일)
• 지역 실행 컨텍스트 = 다수 존재

 

📕 Global Execution Context(GEC, 전역 실행 컨텍스트)

• 자바스크립트가 실행될 때 가지고 시작함.
• Global 개념을 생각하면 된다.

 

📕 Function Execution Context(FEC, 지역 실행 컨텍스트)

• 함수적인 실행 컨텍스트
• FEC는 함수 단위로 실행이 된다.
• 즉, 함수 호출 시 무조건 FEC가 하나 만들어진다.

var a = 10;
function a () {
    console.log("Test");
}

function b () {
    console.log("Test2");
}

a();
b();
// GEC는 1개
// FEC는 2개

 

📝 실행 컨텍스트의 동작 과정

📕 1. Creation Phase

• 실행 컨텍스트의 뼈대가 만들어지는 단계

 

📕 2. Execution Phase

• 실행 컨텍스트가 실행되는 단계

 

📝 전개 연산자

function sumArray(sum, ...arr) {
    if (arr.length === 0) 
        return sum;

    const [head, ...tail] = arr;

    return sumArray(sum + head, ...tail);
}
sumArray(0, 1, 2, 3, 4, 5);

• 함수의 마지막 매개변수 앞에 “…”를 붙이면 모든 후속 매개변수를 배열에 담아 저장한다.
• 위 코드에서 처음에는 sum은 0, arr = [1, 2, 3, 4, 5]가 들어간다.

 

📝 toLocaleString

• 숫자 단위 콤마 적용하기

 

📝 toFixed

• 고정 소수점 표기법으로 표기해 반환

var numObj = 12345.6789;

numObj.toFixed();       // Returns '12346': 반올림하며, 소수 부분을 남기지 않습니다.
numObj.toFixed(1);      // Returns '12345.7': 반올림합니다.
numObj.toFixed(6);      // Returns '12345.678900': 빈 공간을 0으로 채웁니다.

 

💡 오늘 깨달은 것

• 이전에도 한번 학습했던 내용인데 완벽하게 이해하지 않아서 쉽지 않았던 시간이었다.
• 내일 온라인 수업 내용 또한 자바스크립트 동작원리, 실행 컨텍스트에 대한 내용이니까 잘 정리해서 내 걸로 만들자! 그리고 포스팅하고 주기적으로 보자!
• Math.random()은 0 ≤ num < 1 사이이다.

 

📌 참고

• Date.prototype.toLocaleString() - JavaScript | MDN
• Number.prototype.toFixed() - JavaScript | MDN