javascript_core

자바스크립트 내용 정리

데이터 타입

원시(기본) 타입(primitive type)

Type	Value
Boolean	true, false
Number	정수, 실수
String	"문자열"
Null	null
Undefined	undefined

원시 타입은 실제 값을 변수에 저장한다. 비교시 실제 값을 가지고 비교한다. 모든 원시 타입은 값을 표현하는 리터럴 형식이 있다.

리터럴 : 코드에 직접 입력된 문자열이나 숫자처럼 변수에 저장되지 않은 값. 값 자체

참조 타입(reference type)

• Object
• Array

참조 타입은 할당된 변수에 값을 직접 저장하지 않는다. 참조 타입은 실제 값이 있는 메모리상 위치를 참조하고 있다. 모든 참조 타입도 값을 표현하는 리터럴 형식이 있다.

예제 : 원시 타입과 참조 타입의 비교 방식

참조 타입의 복사 (얕은 복사와 깊은 복사)

참조 타입을 새로운 변수에 복사하는 방법은 얕은복사(Shallow Copy)와 깊은복사(Deep Copy) 두 가지가 있다.

얕은 복사는 1-depth에 해당하는 속성 값만 복사하는 방법이다. 따라서, 내부 속성에 참조 타입 변수가 있는 경우 외부에서 참조 값을 변경하면 원본 변수의 속성도 변경된다.

깊은 복사는 모든 속성을 복사하여 원본과 완전히 분리되는 완전한 복사본을 만드는 방법이다.

예제 : 참조 타입의 복사

함수

함수 생성 방식

• 함수 선언문 방식 (function statement)

function add(x, y) { return x + y; }

• 함수 표현식 방식 (function expression)
  • 함수도 하나의 값으로 취급되므로 할당이 가능하다.
  • 표현식의 경우 일반적으로 함수 이름을 사용하지 않는데, 이를 익명 함수 표현식이라 한다.

var add = function (x, y) { return x + y; } // 함수 리터럴

• Function() 생성자 함수 사용 방식
  • 일반적으로 사용하지 않는 방식

var add = new Function('x', 'y', 'return x + y');

함수도 객체다

• 자바스크립트는 함수도 객체다. 따라서 속성(property)을 추가/삭제 할 수 있다.
• 일반 객체는 아래와 같은 동작이 가능하다.
  • 리터럴에 의한 생성
  • 변수나 배열의 요소, 객체의 프로퍼티 등에 할당 가능
  • 함수의 인자로 전달 가능
  • 함수의 리턴값으로 리턴 가능
  • 동적으로 프로퍼티를 생성 및 할당 기능

이 같은 특징으로 자바스크립트에서는 함수를 일급 객체(First Class) 라고 부른다.
1급 객체는 위에 나열한 기능을 모두 만족하는 객체를 말한다.

1급 객체(First class object)의 조건

• 변수나 데이터 구조안에 담을 수 있다.
• 파라미터로 전달 할 수 있다.
• 반환값(return value)으로 사용할 수 있다.
• 할당에 사용된 이름과 관계없이 고유한 구별이 가능하다.
• 동적으로 프로퍼티 할당이 가능하다.

• 변수, 프로퍼티의 값으로 할당

var foo = function () { return 100; }; // 변수에 할당
var obj = {};
obj.baz = function() { return 200; }; // 프로퍼티에 할당

• 함수 인자로 전달

var foo = function(func) { func(); };
foo(function() { console.log('bar'); });

• 리턴값으로 활용

var foo = function() { 
    return function () {
        console.log('this function is the return value');
    };
};

var bar = foo();
bar();

함수의 다양한 형태

• 콜백 함수 함수를 등록하거나 이벤트가 발생하는등 특정 시점에 도달했을때 호출되도록 하는 함수 이벤트 리스너 형태로 사용

function doSomething(callback) {
    // ...

    // Call the callback
    callback('stuff', 'goes', 'here');
}

function foo(a, b, c) {
    // I'm the callback
    alert(a + " " + b + " " + c);
}

doSomething(foo);

참조 : 자바스크립트 콜백 함수 이해하기

• 내부(중첩) 함수 함수 코드 내부에 또 다시 함수를 정의하여 사용하는 함수
  함수 내부에서만 지역적으로 사용 하는 경우나 중복 코드를 내부에서 재사용할 때 사용

function A(){
var a = "1";
  function B(){
    var b = "2";
  }
}

• 즉시 실행 함수 (IIFE:Immediately-invoked function expression)
  함수를 정의함과 동시에 실행하는 함수
  최초에 한번의 실행만을 필요로 하는 초기화 코드 부분에 사용
  변수를 전역으로 선언하는것을 피하기 위해 라이브러리 구현시 사용

// 권장 (더글라스 클락포트)
(function() {
    init();
}());

(function() {
    init();
})();

함수 vs. 메소드

함수와 메소드는 일련의 동작과, 표현방식, 구현도 동일하다.
하지만 메소드는 객체가 가지고 있는 동작이다.
메소드를 수행하기 위해서는 해당 메소드를 가지고 있는 객체를 통해서만 수행 가능하다.

클래스 : 객체를 정의하기 위한 문법
객체(실체화 되기전) : 인스턴스(실체화 된 후)
객체의 인스턴스화 : 객체를 실제 사용가능하도록 만듬 (new Object();)
객체의 속성 / 프로퍼티 : 멤버 함수(메소드), 멤버 변수

호이스팅(hoisting)

호이스팅의 단어 뜻은 들어올림, 끌어올림이다.
자바스크립트는 컴파일 과정에서 변수와 함수를 호이스팅(끌어올림) 한다.

변수 호이스팅

자바스크립트 엔진이 자바스크립트 구문을 해석할 때 유효 범위 안의 최상단으로 변수 선언을 끌어올린다. 선언문은 항상 자바스크립트 엔진에서 최우선으로 해석하고, 할당문은 프로그램 동작과정에서 실행 된다.

선언(Declaration)과 할당(Assignment)을 이해해야 한다.

function hoistingExam(){  
    console.log("value=" + value);
    var value = 10;
    console.log("value=" + value);
}
hoistingExam();

// 실행결과
// value = undefined  // 값이 없음을 나타냄 (에러가 나지 않음)
// value = 10  

function hoistingExam(){  
    var value; // 변수 호이스팅 (할당이 아닌 선언만 올려진다) 
    console.log("value=" + value);
    value = 10;
    console.log("value=" + value);
}
hoistingExam();  
// 실행결과
// value = undefined  
// value = 10  

var value = 30;  
function hoistingExam(){  
    console.log("value=" + value); 
    var value = 10; 
    console.log("value=" + value); 
}
hoistingExam();  
// 실행결과 
// value = undefined (함수 내부에 선언되어진 value 변수가 호이스팅된다)
// value = 10  

함수 호이스팅

함수는 함수 선언문 방식으로 선언된 함수만 유효 범위 안의 최상단으로 함수 선언을 끌어올린다.

// 함수 선언문
hoistingExam(); // 선언은 아래에 있지만 정상적으로 실행된다
function hoistingExam(){  
    var hoisting_val = 10;
    console.log("hoisting_val ="+hoisting_val);
}
// 실행결과
// hoisting_val = 10  

//함수 표현식
hoistingExam2(); // 호이스팅 안됨
var hoistingExam2 = function(){  
    var hoisting_val =10;
    console.log("hoisting_val ="+hoisting_val);
}
// 실행결과 (에러)
// hoistingExam2 of object is not a function  

//Function 생성자
hoistingExam3(); // 호이스팅 안됨
var hoistingExam3 = new Function("","return console.log('Ya-ho!!');");  
// 실행결과 (에러)
// hoistingExam3 of object is not a function  

함수 표현식과 Function 생성자를 이용한 함수 정의는 변수에 함수를 초기화하는 방식이므로 선언에 해당하는 변수는 호이스팅 되지만, 할당에 해당하는 함수 정의부분은 호이스팅되지 않는다.

console.log(fun); // undefined 값이 없음을 나타냄 (에러가 나지 않음)
var fun = function hello() { console.log('g'); };
console.log(fun); // function () 

참조 : 자바스크립트 호이스팅
참조 : Javascript Scope의 이해 - 호이스팅

실행 컨텍스트 (Execution Context)

실행 문맥, 컨텍스트로도 불린다. 실행가능한 코드를 형상화하고 구분하는 추상적인 개념으로, 자바스크립트에서는 코드 블록이 실행되는 환경이라고 할 수 있다. 실행 컨텍스트가 생성되는 경우는 전역 코드, eval() 실행, 함수 안의 코드를 실행하는 경우이다. 이 실행 컨텍스트는 코드 실행에 필요한 여러가지 정보를 담고 있는데 정보란 대부분의 경우 함수를 뜻한다.

자바스크립트는 일종의 호출 스택(Call Stack)을 가지고 있는데, 이 곳에 실행 컨텍스트가 쌓인다. 이 호출 스택의 최상단에 위치한 실행 컨텍스트가 현재 실행되고 있는 실행 컨텍스트가 되는 것이다.

실행 컨텍스트는 크게 3가지로 이루어져 있다.

• 활성화 객체 : 실행에 필요한 정보 (arguments, 변수, ...)
• 유효 범위 정보 : 현재 실행 컨텍스트의 유효 범위를 나타낸다.
• this 객체 : 현재 실행 컨텍스틑 포함하는 객체

위 코드를 실행하면 함수 abcFunction의 실행 구문에서 위와 같은 실행 컨텍스트가 생성된다.
생성 순서는 다음과 같다.

1. 활성화 객체 생성
2. arguments 객체 생성
3. 유효범위 정보 생성
4. 변수 생성
5. this 객체 바인딩
6. 실행

참조 : Javascript Scope의 이해 - 실행 문맥

스코프와 클로저

스코프

스코프를 직역하면 영역, 범위라는 뜻이다. 프로그램 언어에서의 유효범위는 어느 범위까지 참조하는지. 즉, 변수와 매개변수(parameter)의 접근성과 생존기간을 뜻한다.

참조 : 스코프와 클로저

클로저

특정 함수가 참조하는 변수들이 선언된 렉시컬 스코프(lexical scope : 정적 유효 범위/ 즉, 정의된 환경)는 계속 유지되는데, 그 함수와 스코프를 묶어서 클로저라고 한다.

참조 : 스코프와 클로저

Lexical Scoping은 다른 말로 Static Scoping 이라고도 한다. 한 변수의 스코프가 그 변수가 정의된 블럭 내부에서만 유효한 변수 참조 방법을 말한다.

this

자바스크립트에서 this는 함수나 스코프 기반으로 결정되는 것이 아니라 호출 방법에 따라 변경된다. 함수 호출시에 선행 부모가 없는 경우에는 일반적으로 브라우저의 global object인 window 객체가 부모가 된다.

자바스크립트의 모든 함수 호출은 내부적으로든 명시적으로든 call()/apply()를 이용하는데, 다음과 같은 호출시에 모든 this는 someThing이다.

일반 함수 호출시에도 내부적으로 call() 함수가 호출된다.

• someThing.someFunction(arg1, arg2, argN)
• someFunction.call(someThing, arg1, arg2, argN)
• someFunction.apply(someThing, [arg1, arg2, argN])

예제 : 중첩 함수에서의 this
예제 : 여러 상황에서의 this

prototype과 prototype chaining을 활용한 class 구현

참조 : 프로토타입을 통한 공유