JS ES5 핵심 개념(JS ES5 Core Concept)

1. 데이터 타입(Data Type)

데이터 타입(Data Type)은 프로그래밍 언어에서 사용할 수 있는 데이터 (숫자, 문자열, 불리언 등)의 종류를 말합니다.

- 기본형(Primitive Type):

변경 불가능한 값(immutable value)이며 pass-by-value(값에 의한 전달) 합니다. 즉 모두 “하나”의 정보, 즉, 데이터를 담고 있습니다.
객체가 아니면서 method를 가지지 않는 6가지의 타입이 있습니다.
원시 자료형은 모두 “하나”의 정보, 즉, 데이터를 담고 있습니다.
string, number, bigint, boolean, undefined, symbol, (null은 원시 타입과 거의 같게 사용되지만 엄밀히 따지면 객체입니다. 빈 참조를 나타내는 데 자주 사용됩니다.)

Number
String
Boolean
null
undefined
(es6에선 symbol 추가)

- 참조형(Reference Type)

기존에 고정된 크기의 보관함이 아니며 동적으로 크기가 변하는 데이터를 보관하기 위해 변수가 아닌 다른곳에 데이터를 저장하고 변수에는 그 주소(reference)만 할당합니다. 즉, 변수에는 하나의 값 혹은 주소만 저장할 수 있습니다.
자바스크립트에선 원시 자료형이 아닌 모든 것은 참조 자료형입니다.
참조형은 원시형 데이터의 집합입니다.
배열([])과 객체({}), 함수(function(){})가 대표적입니다.
참조 자료형은 기존에 고정된 크기의 보관함이 아닙니다.
참조 자료형을 변수에 할당할 때는 변수에 값이 아닌 주소를 저장합니다.
동적으로 크기가 변하는 데이터를 보관하기위해 변수가 아닌 다른곳에 데이터를 저장하고 변수에는 그 주소만 할당합니다.
배열 – Array : [0,1,2,3,4]
객체 – Object {name : “Hanamon”, age : 16}

Array
Function
RegExp
(es6에선 map, set 등 추가)

2. 함수(Function)

호이스팅(hoisting)

사전적의미는 '끌어올리다' 라는 뜻이며 변수 선언과 함수 선언을 끌어올립니다.
자바스크립트 엔진은 프로그램 실행 전 코드 전반에 걸쳐 선언만을 끌어올립니다.
즉, 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다.
자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑으며 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킵니다.
유효 범위는 함수 블록 {} 안에서 유효합니다.
즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것이며 실제로 코드가 끌어올려지는 건 아니고 자바스크립트 Parser 내부적으로 끌어올려서 처리하는 것입니다. 실제 메모리에서는 변화가 없습니다.

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

console.log(num);  //undefined
var num = 1;

선언부를 최상단으로 끌어올렸기 때문에 '선언만 되고 값은 할당되지 않은' 상태에서 호출을 하게 되어 undefined를 출력한 것입니다.

console.log(num);  //ReferenceError 발생
let num = 1;

let과 const로 선언한 변수는 선언 단계와 초기화 단계가 따로 이루어지기 때문에 호이스팅으로 선언부를 끌어올려도 초기화는 실제로 let을 사용한 부분에서 이루어지기 때문에 초기화가 이루어지지 않은 값에 대해 ReferenceError를 발생시키는 것 입니다.

- 호이스팅의 우선순위

var num1 = 1;
var num2 = 2;

function num1(){
    console.log("num1");
}
function num2(){
    console.log("num2");
}


console.log(typeof num1); //number
console.log(typeof num2); //number

호이스팅은 변수의 선언이 함수의 선언보다 위로 끌어올려지게 됩니다. 그리고 변수에 값을 할당했다면 그 다음에 할당이 이루어지게 됩니다.

- 호이스팅 사용 주의사항

코드의 가독성과 유지보수를 위해 호이스팅이 일어나지 않도록 합니다.
호이스팅을 제대로 모르더라도 함수와 변수를 가급적 코드 상단부에서 선언하면, 호이스팅으로 인한 스코프 꼬임 현상은 방지할 수 있습니다.
let/const를 사용합니다.

함수표현식과 함수 선언문(function declaration & function expression)

함수표현식과 함수 선언문으로 나뉠 수 있습니다.
호이스팅은 함수선언문과 함수표현식에서 서로 다르게 동작하기 때문에 주의해야 합니다.
변수에 할당된 함수표현식은 끌어 올려지지 않기 때문에 이때는 변수의 스코프(scope) 규칙을 그대로 따릅니다.
즉, 함수 선언식만이 호이스팅의 대상이 됩니다. 함수 표현식으로 선언한 함수는 호이스팅이 적용되지 않습니다.

  foo(); //출력 가능
  foo2(); //TypeError 발생

  function foo() { // 함수선언문
          console.log("hello");
  }
  var foo2 = function() { // 함수표현식
          console.log("hello2");
  }

함수 스코프, 실행 컨텍스트 (function scope, execution context)

- 함수 컨텍스트

함수를 호출하면 독자적인 실행 컨텍스트가 생성됩니다.
실행 컨텍스트는 변수객체가 연결되어 있습니다.
이 변수 객체는 현재 실행 컨텍스트의 정의된 모든 변수와 함수를 저장하고 있습니다.

function name(){
     var test_value = "helloworld"; 
}

위 name 함수의 실행 컨텍스트에는 변수 객체가 연결되어 있고, 이 변수 객체는 test_value변수를 저장하고 있습니다.

- 전역컨텍스트

가장 바깥쪽에 존재하는 실행 컨텍스트입니다. 이 또한 실행 컨텍스트 이며 가장 상위에 있기 때문에 전역 컨텍스트라고 부릅니다.
웹브라우저에서는 이 컨텍스트를 window라고 부릅니다.
실행 컨텍스트에 경우 보통 포함된 코드가 모두 실행될 때 파괴되는데, 전역 컨텍스트는 애플리케이션이 종료될 때, 예를들면 웹페이지에서 나가거나 브라우저를 닫을 때까지 계속 유지됩니다.

- 스코프

스코프 혹은 Variable Scope는 변수에 접근이 가능한 유효범위를 뜻합니다. 쉽게 말해 변수, 함수, 매개변수의 접근성 및 생존 기간을 말하는 개념입니다.
스코프는 두종류가 있으며 각각 글로벌 스코프와 로컬 스코프라고 합니다.
글로벌 스코프의 경우 전역 컨텍스트의 스코프, 로컬 스코프의 경우 함수 컨텍스트의 스코프라고 생각하면 이해하기 쉽습니다.

- 스코프 체인

스코프 체인의 목적은 실행 컨텍스트가 접근할 수 있는 모든 변수와 함수에 순서를 정하는 것입니다.
스코프 체인은 변수 객체를 가지고 있으며, 순서대로 가지고 있습니다.

현재컨텍스트의 활성화 객체 -> 부모 컨텍스트에 활성화 객체 -> 부모 컨텍스트에 활성화 객체 -> ... -> 전역 컨텍스트의 변수 객체

활성화 객체란 해당 컨텍스트에 존재하는 변수와 함수이며, 전역 컨텍스트는 활성화 객체를 가지고 있지 않기때문에 변수객체로 적혀있습니다.
위와같이 순서대로 가지고 있으며 끝에는 전역 컨텍스트의 변수객체를 가지고 있습니다.

var color = "blue";
function changeColor(){
    if (color === "blue"){
          color = "red";
    }else {
          color = "blue";
    }
}

changeColor함수 내에서 color식별자를 찾습니다. changeColor 컨텍스트에 변수 객체에 해당 식별자가 없으니 다음 단계로 넘어갑니다.
바로 전역 컨텍스트가 나옵니다. 여기서 변수 객체에서 color 식별자를 찾을 수 있었고 이런식으로 식별자를 찾아갑니다
(끝끝내 식별자를 찾을 수 없다면 일반적으로 오류가 발생합니다.)
이런식으로 스코프 체인이 동작하기 때문에 자식이 부모 변수 객체의 존재하는 식별자를 사용할 수 있으나, 부모는 자식의 식별자에 접근할수가 없습니다. (참고로 함수 매개변수도 변수로 간주됩니다.)

메소드 (method)

객체 안에 선언된 함수입니다.
함수와 메소드의 차이점은, 간단히 생각하면 앞에 '.' 이 있느냐 없느냐의 차이입니다.
'.'이 있냐 없냐로 this가 달라집니다.
자바스크립트에서는 일반적으로 객체 안에 프로퍼티로 정의된 함수를 메서드라고 부릅니다.

콜백함수 (Callback Function)

call 호출하다. back은 다시 돌려주다. 라고 생각하면 이해하기 쉽습니다. 즉 콜백 함수는 호출해서 나한테 돌려줄 함수라고 말할 수있습니다.
콜백 함수는 함수를 일단 따로 전달하고 호출해서 그 결과를 따로 다시 돌려주라는 의미이다. 주고받는다는 의미이기도 하다. 즉 함수 제어권을 맡긴다는 것입니다.

실생활의 예

음식점에 주문을 하려고 합니다.
그런데 음식점의 주문이 밀려 지금 당장 해줄 수 없다고 합니다.
그렇다면 음식 준비가 끝나면 음식을 받아갈 테니 전화를 달라고 부탁합니다.
전화가 오기 전까지 자신이 하고 싶은 일을 할 수 있습니다.

이때 음식점에서 전화가 걸려오고 받는 것이 콜백 함수가 호출되는 시점과 같습니다.

코드의 예

function sum(a, b, callback){
    let result = a + b;
    callback(result);
}

sum(10, 20, function(result){
    console.log(result); // 30
})

sum이라는 함수를 호출할 때 익명 함수를 파라미터로 넘겨줍니다. sum함수가 a와 b를 더하고 callback() 함수에 파라미터를 넘기면 익명 함수가 실행되는 것을 알 수 있습니다.

- 콜백함수 (Callback Function) 사용 이유

1. 콜백 함수는 특정 상황에 함수가 동작하도록 하기 위해 사용합니다.

2. 어떠한 버튼을 눌렀을 때나 어떠한 키보드를 눌렀을 때와 같은 이벤트가 발생했을 경우, 상황에 따라 자신이 원하는 함수를 실행하고 싶은 경우에 활용할 수 있습니다.

3. this

this는 실행 콘텍스트가 실행될 때 합니다.
실행 콘텍스가 실행될 때는 콘텍스트를 지닌 함수가 호출되는 순간이며 이때 this가 활성화되며 즉 함수가 호출될 때 this가 결정이 난다고 말할 수 있습니다.
즉, JS에서 this는 정적으로 할당 되지 않고, 동적으로 할당되며 쉽게 풀이하자면 this가 선언되었을 때가 아닌, 호출되었을 때 결정된다는 의미입니다.

- 전역공간에서의 this

전역 콘텍스트를 실행하는 주체가 this이며 브라우저의 window, 노드의 global 등등이 있다.

- 함수 호출시 this

var d = {
e: function(){
 function f() {
   console.log(this)
	}
    f();
  }
}

d.e();

전역공간에서 함수를 호출하였으면 당연히 호출 시킨 함수 this는 window 및 global을 가르키지만 위의 예시처럼 아무리 e객체안에 있는 메소드 함수 안에 있는 함수 f()을 함수 메소드 안에서 함수를 호출해도 f() 함수의 this는 전역객체의 주체인 window을 선택합니다.
왜냐하면 허무하지만 일종의 자바스크립트 언어의 오류라고 할 수 밖에 없다. 일단 함수 호출의 형태를 보고 (예: f();) 알아낼 수 밖에 없습니다.
그냥 홀로 함수로서 호출되면 전역객체의 메소드라고 생각하면 된다. 호출 함수 앞에 window.이 붙어있다고 생각하면 됩니다.

- 메소드 호출시 this

var a = {
b: function(){
   console.log(this)
  }
}

a.b();

메소드 호출시에는 메소드명 앞에가 this가 된다. 다른 말로 메소드의 '점' 앞이 this라고 할수 있습니다.
위의 코드 예시를 보면 왼쪽 코드는 a.b 중 b가 메소드인데 b '점' 앞에 있는 a가 this라고 볼 수 있다. 즉 a변수이며 b객체를 가르키므로 메소드 함수의 this는 b 객체 자체라고 볼 수 있습니다.

- callback 함수 호출시 this

기본적으로 함수의 this와 같습니다.
제어권을 가진 함수가 callback의 this에 명시한 경우 그에 따릅니다.
하지만 개발자가 this을 bind 메소드를 사용하여 바인딩 한 경우 바인딩채로 callback 으로 넘기면 그에 따라야합니다.

var callback = function() {
 console.dir(this)
}

var obj ={
a: 1,
b: function(cb) {
	cb(this);
  }
}

obj.b(callback) // window

///////////////////////////////////////////////

var callback = function() {
 console.dir(this)
}

var obj ={
a: 1,
b: function(cb) {
	cb.call(this);
  }
}

obj.b(callback) // obj

위의 코드를 보면 callback함수의 예시인데 callback 함수가 obj.b의 인자로 들어가 있어 this가 결정된 것은 obj 변수 안에 있는 b의 객체의 메소드 함수를 호출시키는 것이며 즉 callback 함수=cb() 이다. 이때 호출될 cb()가 홀로 있기 때문에 전역객체의 메소드이며 this는 결국 window가 뜰 수 밖에 없습니다.
즉 callback함수가 this에 영향이 있는 것이 아니라 callback함수가 직접 넘겨준 대상(위의 코드를 예를 들자면 cb() 호출 함수)의 형태에 따라 this가 결정납니다.
하지만 cb();을 call 메소드를 이용하여 cb.call(this);로 해주면 this는 obj로 결정나게 할 수 있게 됩니다.

- 생성자 함수 호출시 this

function Test(a, b) {
  this.name: a
  this.age: b
}

var me = new Test('Jin Seok', 26)

console.log(me)

Test 함수를 new을 이용하지 않고 생성하지 않았다면 this은 전역객체인 window을 가르키겠지만 new을 이용하여 Test 생성 함수를 따로 만들었으면 자동으로 Test 함수의 this는 새로운 Test 생성 함수의 변수인 me 객체 자체가 됩니다.

4. 클로저(Closure)

비공개 변수를 가질 수 있는 환경에 있는 함수가 클로저입니다. 비공개 변수는 클로저 함수 내부에 생성한 변수도 아니고, 매개변수도 아닌 변수를 의미합니다.
클로저를 말할 때는 스코프/컨텍스트/비공개 변수와 함수의 관계를 항상 같이 말해주어야 합니다.

var makeClosure = function() {
  var name = 'jinSeok';
  return function () {
    console.log(name);
  }
};
var closure = makeClosure(); // function () { console.log(name); }
closure(); // 'jinSeok';

closure 함수 안에 console.log(name)이 있는데요. name은 closure 함수의 매개변수도 아니고, closure 함수 내부에서 생성한 변수도 아닙니다. 바로 이런 것이 비공개 변수입니다.
function() { console.log(name) }은 name 변수나, name 변수가 있는 스코프에 대해 "클로저"라고 부를 수 있습니다. 수학적으로는 자유변수라고도 합니다.

특징

함수에서 지역변수 및 내부함수 등을 생성합니다.
외부에 노출시키고자 하는 멤버들로 구성된 객체를 return 합니다.
함수와 그 함수가 선언될 당시의 환경정보 사이의 조합입니다.
선언 당시의 환경에 대한 정보를 담는 객체입니다.(구성 환경)
함수 내부에서 생성한 데이터와 그 유효범위로 인해 발생하는 특수한 현상/상태 입니다.
'최초 선언시의 정보를 유지' 하는 것 입니다.

var counter = function() {
  var count = 0;
  function changeCount(number) {
    count += number;
  }
  return {
    increase: function() {
      changeCount(1);
    },
    decrease: function() {
      changeCount(-1);
    },
    show: function() {
      alert(count);
    }
  }
};
var counterClosure = counter();
counterClosure.increase();
counterClosure.show(); // 1
counterClosure.decrease();
counterClosure.show(); // 0

counter 함수를 호출 할 때, counterClosure 컨텍스트에 counterClosure와 counter가 담긴 scope chain이 생성됩니다. 그렇게 되면 이제 counterClosure에서 계속 count로 접근할 수 있습니다.
return 안에 들어 있는 함수들은 count 변수나, changeCount 함수 또는 그것들을 포함하고 있는 스코프에 대한 "클로저"라고 부를 수 있습니다.
즉, 클로저는 함수 종료후에도 사라지지 않는 지역변수를 만들 수 있습니다.

스코프 체인(scope chain) 및 실행 컨테스트

참고: https://k0502s.tistory.com/153?category=948653

Javascript 실행 콘텍스트 이론

실행 콘텍스트 Execution Context Context는 코드 흐름상의 배경이 되는 조건 및 환경을 뜻한다. 즉 실행 콘텍스트는 실행에 필요한 코드 흐름상의 배경이 되는 조건 및 환경이라고 말할 수 있다. 동일

k0502s.tistory.com

사용목적

접근 권한 제어
지역변수 보호
데이터 보존 및 활용

5. 프로토타입(Prototype)

참고:

https://k0502s.tistory.com/158?category=948653

Javascript 프로토타입(prototype) 이론

프로토타입(prototype) 객체는 프로퍼티를 가질 수 있는데 prototype이라는 프로퍼티는 그 용도가 약속되어 있는 특수한 프로퍼티다. prototype에 저장된 속성들은 생성자를 통해서 객체가 만들어질

k0502s.tistory.com

6. 클래스(Class)

참고:

https://k0502s.tistory.com/159?category=948653

Javascript 클래스(class) 이론

클래스(class) 클래스는 계급, 집단, 집합을 뜻 하는데 자바스크립트에서는 뜻 그대로 집단으로 나뉠 수 있다. 왼쪽 그림에서 class 파트는 직접적으로 사용되는 생성된 객체 배열 [1,2,3] 등등이 아

k0502s.tistory.com

'프로그래밍 개발 > 프론트엔드 개발자 기본 지식' 카테고리의 다른 글

MVC 패턴 (0)	2022.05.08
Test-Driven Development(TDD) (0)	2022.05.08
함수형 프로그래밍과 객체지향 프로그래밍 (0)	2022.04.28
서버 사이드 랜더링(SSR)과 클라이언트 사이드 랜더링(SPA) (0)	2022.04.23
CSS 방법론 (0)	2022.04.23

JS ES5 핵심 개념(JS ES5 Core Concept)