공부

var 키워드로 변수를 선언하면 다양한 문제점이 발생할 수 있다.

1. 변수 중복 선언 허용

var 키워드로 선언한 변수는 중복 선언이 가능하다.

2. 함수 레벨 스코프

var 키워드로 선언한 변수는 오로지 함수의 코드 블록만을 지역 스코프로 인정한다. 따라서 함수 외부에서 var 키워드로 선언한 변수는 코드 블록 내에서 선언해도 모두 전역 변수가 된다.

var x = 1;

if(true) {
	// x는 전역 변수다. 이미 선언된 전역 변수 x가 있으므로 x 변수는 중복 선언된다.
    // 이는 의도치 않게 변수값이 변경되는 부작용을 발생시킨다.
    var x = 10;
}

console.log(x); // 10

2. 변수 호이스팅

var 키워드로 선언한 변수는 변수 선언문 이전에 참조할 수  있다. 단, 할당문 이전에 변수를 참조하면 언제나 undefined를 반환한다.

이러한 문제점을 해결해줄 let 키워드에 대해서 알아보자.

let 키워드

var 키워드의 단점을 보완하기 위해 ES6에서 새로운 변수 선언 키워드인 let이 도입되었다. var 키워드와의 차이점을 한번 살펴보자

1. 변수 중복 선언 금지

let 키워드로 이름이 같은 변수를 중복 선언하면 문법 에러가 발생한다.

let bar = 123;

let bar = 456; // SyntaxError : Identifier 'bar' has already been declared

2. 블록 레벨 스코프

let 키워드로 선언한 변수는 모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 을 지역 스코프로 인정하는 블록 레벨 스코프를 따른다.

let foo = 1; // 전역 변수

{
	let foo = 2; // 지역변수
	let foo = 3; // 지역변수
}


console.log(foo); // 1
console.log(bar); // ReferenceError : bar is not defined

3. 변수 호이스팅

let 키워드로 선언한 변수는 변수 호이스팅이 발생하지 않는다.

console.log(foo); // ReferenceError : foo is not defined
let foo;

var 키워드의 경우 런타임 이전에 암묵적으로 "선언 단계" 와  "초기화 단계" 가 한번에 진행된다. 그에 반해

let 키워드로 선언한 변수는 "선언 단계" 와 "초기화 단계"가 분리되어 진행된다.

즉, 런타임 이전에 자바스크립트 엔진에 의해 암묵적으로 선언 단계가 먼저 실행되지만 초기화 단계는 변수 선언문에 도달했을 때 실행 된다.

만약 초기화 단계가 실행되기 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. 스코프의 시작 지점부터 초기화 시작 지점까지 변수를 참조할 수 없는 구간을 일시적 사각지대 라고 부른다.

const 키워드

const 키워드는 상수를 선언하기 위해 사용한다. 하지만 반드시 상수만을 위해 사용하지는 않는다. 위에서 알아본 let 과 차이점을 한번 알아보자

const 키워드로 선언한 변수는 반드시 선언과 동시에 초기화해야 한다.

const foo; // SyntaxError: Missing initializer in const declaration

const 키워드로 선언한 변수는 let 키워드로 선언한 변수와 마찬가지로 블록 레벨 스코프를 가지며, 변수 호이스팅이 발생하지 않는다.

1. 재할당 금지

var 또는 let 키워드로 선언한 변수는 재할당이 자유로우나 const 키워드로 선언한 변수는 재할당이 금지된다.

const 키워드로 선언된 변수에 원시 값을 할당한 경우 값을 변경할 수  없다. 

그러나, const 키워드로 선언된 변수에 객체를 할당한 경우 값을 변경할 수 있다.

const person = {
	name : 'Lee'
};

person.name = 'kim';

console.log(person); // {name:'kim'}

const 키워드는 재할당을 금지할 뿐, "불변"을 의미하는게 아니다.

전역번수의 부분별한 사용은 위험하다. 그 이유에 대해서 알아보자

변수의 생명주기

변수는 선언에 의해 생성되고 할당을 통해 값을 갖는다. 생물과 비슷하게 생성되고 소멸되는 생명주기가 있다. 만약 생명주기가 없다면 한번 선언된 변수는 프로그램을 종료하지 않는 한 메모리 공간을 점유하고 있을 것이다.

변수는 자신이 선언된 위치에서 생성되고 소멸한다. 전역 변수의 생명 주기는 애플리케이션의 생명 주기와 같다.

하지만 함수 내부에 선언된 지역 변수는 함수가 호출되고 함수가 종료하면 소멸한다.

function foo() {
	var x = 'local';
    console.log(x); // local
    return x;
}

foo();

console.log(x); // ReferenceError : x is not defined

애플리케이션 생명 주기와 같은 전역 변수의 문제점에 대해서 알아보자

문제점

1. 암묵적 결함

전역 변수를 선언한 의도는 전역, 즉 코드 어디서든 참조하고 할당할 수 있는 변수를 사용하겠다는 것이다.

이는 모든 코드가 전역 변수를 참조하고 변경할 수 있는 암묵적 결함 (implicit coupling)을 허용하는 것이다. 변수의 유효 범위가 크면 클수록 코드의 가독성은 나빠지고 의도치 않게 상태가 변경될 수 있다.

2. 긴 생명 주기

위에서 말했던 것처럼 전역 변수는 생명 주기가 길다. 따라서 메모리 리소스도 오랜 시간 소비한다. 또 var 키워드의 경우 변수의 중복 선언을 허용하므로 생명 주기가 긴 전역 변수는 변수 이름이 중복될 가능성이 있다.

3. 스코프 체인 상에서 종점에 존재

전역 변수는 스코프 체인 상에서 종점에 존재한다. 이는 변수를 검색할 때 전역 변수가 가장 마지막에 검색된다는 것을 의미한다.

즉, 전역 변수의 검색 속도가 가장 느리다.

그렇다면 전역 변수를 억제하려면 어떻게 해야할까?

전역 변수를 반드시 사용해야 할 이유가 없다면 지역 변수를 사용해야한다. 변수의 스코프는 좁으면 좁을수록 좋다.

억제 방법

1. 즉시 실행 함수

함수 정의와 동시에 호출되는 즉시 실행 함수는 단 한 번만 호출된다. 모든 코드를 즉시 실행 함수로 감싸면 모든 변수는 즉시 실행 함수의 지역 변수가 된다.]

(function () {
	var foo = 10; // 즉시 실행 함수의 지역 변수
}());

console.log(foo); // ReferenceError : foo is not defined

2. 네임스페이스 객체

전역에 네임스페이스 역할을 담당할 객체를 생성하고 전역 변수처럼 사용하고 싶은 변수를 프로퍼티로 추가하는 방법이다.

var MYAPP = {}; // 전역 네임스페이스 객체

MYAPP.name = 'Lee';

console.log(MYAPP.name); // Lee

3. 모듈 패턴

클래스를 모방하여 관련이 있는 함수를 모아 즉시 실행 함수로 감싸 하나의 모듈을 만든다. 정보 은닉을 구현하기 위해서도 사용한다.

var Counter = (function() {
	// private 변수
    var num = 0;
    
    // 외부로 공개할 데이터나 메서드를 프로퍼티로 추가한 객체를 반환한다.
    return {
    	increase() {
        	return ++num;
        },
        decrease() {
        	return --num;
        }
    };
}());


// private 변수는 외부로 노출되지 않는다.
console.log(Counter.num); // undefined

console.log(Counter.increase()); // 1

스코프?

스코프(scope = 유효범위)는 자바스크립트를 포함한 모든 프로그래밍 언어의 기본적이며 중요한 개념이다.

var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수

if(true) {
	var var2 = 2; // 코드 블록 내에서 선언한 변수
    if(true) {
    	var var3 = 3; // 중첩된 코드 블록 내에서 선언한 변수
    }
}

function foo() {
	var var4 = 4; // 함수 내에서 선언한 변수
    
    function bar() {
    	var var5 = 5; // 중첩된 함수 내에서 선언한 변수
    }
}

console.log(var1); // 1
console.log(var2); // 2
console.log(var3); // 3
console.log(var4); // ReferenceError: var4 is not defined
console.log(var5); // ReferenceError: var5 is not defined

변수는 자신이 선언된 위치에 의해 자신이 유요한 범위, 즉 다른 코드가 자신을 참조할 수있는 범위가 결정된다.

모든 식별자(변수 이름, 함수 이름, 클래스 이름 등)는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다. 이를 스코프라 하며, 즉 스코프는 식별자가 유요한 범위를 의미한다.

var x = 'global;

function foo() {
	var x = 'local';
    
    console.log(x); // ?
}


foo();

console.log(x) // ?

위의 예제를 살펴보면 코드의 가장 바깥 영역과 foo 함수 내부에 같은 이름을 갖는 x 변수를 선언했고 1, 2에서 x 변수를 참조한다. 

이때 자바스크립트 엔진은 이름이 같은 두 개의 변수 중에서 어떤 변수를 참조해야 할지 결정해야 한다. 이것을 식별자 결정이라 한다.

자바스크립트 엔진은 스코프를 통해 어떤 변수를 참조해야 할 것인지 결정한다. 따라서 스코프는 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라고도 할 수 있다.

위 예제에서 코드의 가장 바깥 쪽에 선언된 x 변수는 어디서든 참조할 수  있다. 하지만 foo 함수 내부에서 선언된 x 변수는 foo 함수 내부에서만 참조할 수  있고 foo 함수 외부에서는 참조할 수  없다. 이때 두 개의 x 변수는 식별자 이름이 동일하지만 자신이 유효한 범위, 즉 스코프가 다른 별개의 변수다.

* var 키워드로 선언한 변수의 중복선언

function foo () {
	var x= 1;
    // 해당 변수 선언문은 자바스크립트 엔진에 의해 var 가 없는 것처럼 동작한다.
    var x= 2;
    
    console.log(x); // 2
}

foo();


function bar() {
	let x = 1;
    
    let x = 2; // SyntaxError : Ientifier 'x' has already been delcared
}

스코프의 종류

코드는 전역(global)과 지역(local)으로 구분할 수 있다.

전역은 전역 스코프를 만든다. 전역에 변수를 선언하면 전역 스코프를 갖는 전역 변수가 된다. 전역 변수는 어디서든 참조 가능하다.

지역이란 함수 몸체 내부를 말한다. 지역은 지역 스코프를 만든다. 지역에 변수를 선언하면 지역 스코프를 갖는 지역 변수가 된다.

지역 변수는 자신의 지역 스코프와 하위 지역 스코프에서 유효하다.

스코프 체인

함수는 전역에서 정의할 수도 있고 함수 몸체 내부에서 정의할 수도 있다. 함수 몸체 내부에서 함수가 정의된 것을 '함수의 중첩'이라고 한다.

함수는 중첩될 수 있으므로 함수의 지역 스코프도 중첩될 수 있다. 이는 스코프가 함수의 중첩에 의해 계층적 구조를 갖는다는 것을 의미한다.

모든 스코프는 하나의 계층적 구조로 연결되며, 모든 지역 스코프의 최상위 스코프는 전역 스코프다.

이렇게 스코프가 계층적으로 연결된 것을 스코프 체인이라고 한다.

변수를 참조할 때 자바스크립트 엔진은 스코프 체인을 통해 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다.

이를 통해 상위 스코프에서 선언한 변수를 하위 스코프에서도 참조할 수 있다.

자바스크립트 엔진은 스코프 체인을 따라 변수를 참조하는 코드의 스코프에서 시작하여 상위 스코프 방향으로 이동하며 선언된 변수를 검색한다. 상위 스코프에서 유요한 변수는 하위 스코프에서 자유롭게 참조할 수  있지만 하위 스코프에서 유요한 변수를 상위 스코프에서 참조할  수는 없다.

함수 레벨 스코프

지역은 함수 몸체 내부를 의미하고 지역은 지역 스코프를 만드는데 이는 코드 블록이 아닌 함수에 의해서만 지역 스코프가 생성된다는 의미이다.

var 키워드로 선언된 변수는 오로지 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다. 이러한 특성을 함수 레벨 스코프라 한다.

var x = 1;

if (true) {
	// var 키워드로 선언된 변수는 함수의 코드 블록(함수 몸체)만을 지역 스코프로 인정한다.
    var x = 10;
    // 이미 선언된 전역 변수 x가 있으므로 x변수는 중복 선언되어 재할당 된다.
}

console.log(x); // 10

렉시컬 스코프

var x = 1;

function foo() {
	var x = 10;
   	bar();
}


function bar() {
	console.log(x);
}

foo(); //? 
bar(); //?

렉시컬 스코프란 함수를 어디서 정의했는지에 따라 상위 스코프를 결정하는 것을 의미한다. 함수가 호출된 위치는 상위 스코프 결정에 어떤한 영향도 주지 않으며, 함수의 상위 스코프는 언제나 자신이 정의된 스코프다.

그렇기 때문에 위 예제를 실행했을 경우 전역 변수 x의 값 1을 두번 출력한다.

함수 호출

// 함수 선언문 
function add(x, y) {
	return x + y;
}

// 함수 호출
// 인수 1과 2가 매개변수 x와 y에 순서대로 할당되고 함수 몸체의 문들이 실행된다.
var result = add(1, 2);

인수는 함수를 호출할 때 지정하며, 개수와 타입에 제한이 없다.

매개변수는 함수를 정의할 때 선언하며, 함수 몸체 내부에서 변수와 동일하게 취급된다. 일반 변수와 마찬가지로 undefined 로 초기화 된 이후 인수가 순서대로 할당된다.

매개변수는 함수 몸체 내부에서만 참조 가능하고 몸체 외부에서는 참조 불가능하다.

함수는 매개변수의 개수와 인수의 개수가 일치하는지 체크하지 않는다. 인수가 할당되지 않은 매개변수의 값은 undefined이다.

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

// 2 + undefined
console.log(add(2)); // NaN


// 매개변수보다 인수가 더 많은 경우 초과된 인수는 무시한다.
function add(x, y) {
	return x + y;
}

console.log(add(2, 5, 10)); // 7

이러한 상황이 발생한 이유는

1. 자바스크립트 함수는 매개변수와 인수의 개수가 일치하는지 확인하지 않는다.
2. 자바스크립트는 동적 언어이기 때문에 함수의 매개변수 타입을 사전에 지정할 수 없다.

따라서 함수를 정의할때 적절한 인수가 전달되었는지 확인할 필요가 있다.

// a, b, c 의 값이 Falsy 인 경우 0으로 초기화
function add(a, b, c) {
	a = a || 0;
    b = b || 0;
    c = c || 0;
    
    return a + b + c;
}


console.log(add(1,2)); // 3
console.log(add()); // 0



// ES6 에서 도입된 매개변수 기본값
function add(a = 0, b = 0, c = 0) {
	return a + b + c;
}

console.log(add(1,2,3)); // 6
console.log(add()); // 0

반환문

함수는 return 키워드와 표현식(반환값)으로 이루어진 반환문을 사용해 실행 결과를 함수 외부로 반환할 수 있다.

반환문은 2가지 역할을 한다.

1. 반환문은 함수의 실행을 중단하고 함수 몸체를 빠져나간다. 따라서 반환문 이후에 다른 문이 존재하면 실행되지 않는다.
2. 반환문은 return 키워드 뒤에 오는 표현식을 평가해 반환한다. 지정하지 않으면 undefined가 반환된다.

function foo() {
	return;
}

console.log(foo()); // undefined

function foo() {
	// 반환문을 생략하면 암묵적으로 undefined 반환
}

console.log(foo()); // undefined


// 줄바꿈이 있으면 세미콜론 자동 삽입 기능에 의해 세미콜론이 추가되어 예상하지 못한 결과가 나올 수 있다.
function multiply(x, y) {
	return
    x * y;
}

console.log(multiply(2,3)); // undefined

참조에 의한 전달과 외부 상태의 변경

function changeVal(primitive, obj) {
	primitive += 100;
    obj.name = 'kim';
}

var num = 100;
var person = { naem : 'Lee' };

changeVal(num, person);

console.log(num); // 100 

console.log(perosn); // {name : 'kim'}

원시 타입인 num의 경우 값 자체가 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 그 값을 변경해도 원본은 훼손되지 않는다. 어떠한 부수 효과도 발생하지 않는다.

하지만 객체 타입 인수는 참조 값이 복사되어 매개변수에 전달되기 때문에 함수 몸체에서 참조 값을 통해 객체를 변경할 경우 원본이 훼손된다.

다양한 함수의 형태

1. 즉시 실행 함수

// 익명 즉시 실행 함수
(function () {
	var a = 3;
    var b = 5;
    return a * b;
}());

// 기명 즉시 실행 함수
(function foo() {
	var a = 3;
    var b = 5;
    return a * b;
}());

foo(); // ReferenceError : foo is not defined

// 즉시 실행 함수는 단 한번만 호출되며 다시 호출할 수 없다.


// 즉시 실행 함수도 일반 함수처럼 값 반환이 가능하다.
var res = (function () {
	var a = 3;
    var b = 5;
    return a * b;
}());

console.log(res); // 15

// 즉시 실행 함수도 일반 함수처럼 인수 전달이 가능하다.

res = (function () {
    return a * b;
}(3, 5));

console.log(res)); // 15

2. 재귀 함수

함수가 자기 자신을 호출하는 것을 재귀 호출이라 한다. 재귀 함수는 자기 자신을 호출하는 행위. 즉 재귀 호출을 수행하는 함수를 말한다.

function countdown(n) {
	if(n < 0) return;
    console.log(n);
    countdown(n -1); // 재귀호출
}

contdown(10);

// countdown 은 함수 내부에서 자신을 호출할 때 상요한 식별자이고 함수 이름이다.
// 만약 탈출하지 못하면 무한 호출되어 스택 오버플로 에러가 발생한다.

3. 중첩 함수

함수 내부에 정의된 함수를 중첩 함수 또는 내부 함수라고 한다.

function outer() {
	var x = 1;
    
    // 중첩 함수
    function inner() {
    	var y = 2;
       
       // 외부 함수의 변수를 참조할 수 있다.
        console.log(x + y); // 3
    }
    inner();
}

outer();

4. 콜백 함수

함수의 매개변수를 통해 다른 함수의 내부로 전달되는 함수를 콜백 함수라고 하며, 매개변수를 통해 함수의 외부에서 콜백 함수를 전달받은 함수를 고차 함수라고 한다.

고차 함수는 콜백 함수를 자신의 일부분으로 합성한다. 매개변수를 통해 전달받은 콜백 함수의 호출 시점을 결정해서 호출한다.

즉, 콜백 함수는 고차 함수에 의해 호출되며 이때 고차 함수는 필요에 따라 콜백 함수에 인수를 전달할 수 있다.

// 외부에서 전달받은 f를 n만큼 반복 호출
function repeat(n, f) {
	for(var i = 0; i < n; i++) {
    	f(i); // i 를 전달하면서 f를 호출
    }
}

repeat(5, function(i) {
	if(i%2) console.log(i);
}); // 1 3

// 콜백 함수를 사용하는 고차 함수 map
var res = [1, 2, 3].map(function(item) {
	return item * 2;
});

console.log(res); // [2,4,6]

5. 순수 함수와 비순수 함수

부수 효과가 없는 함수를 순수 함수라 하고, 외부 상태에 의존하거나 외부 상태를 변경하는, 부수 효과가 있는 함수를 비순수 함수라고 한다.

순수 함수는 동일한 인수가 전달되면 언제나 동일한 값을 반환하는 함수다. 

var count = 0; // 현재 카운트

function increase(n) {
	return ++n;
}

// 순수 함수가 반환한 결과겂을 변수에 재할당하여 상태를 변경
count = increace(count); 
console.log(count)); // 1

반대로 함수의 외부 상태에 따라 반환값이 달라지는 함수, 다시 말해 외부 상태에 의존하는 함수를 비순수 함수라고 한다. 부수효과가 있다.

var count = 0;

// 비순수 함수
function increase() {
	return ++count; // 외부 상태에 의존하며 외부 상태를 변경한다.
}

increase();
console.log(count); // 1

함수?

함수는 자바스크립트에서 가장 중요한 핵심개념이다. 

수학의 함수는 "입력"을 받아 "출력"을 내보내는 일련의 과정을 정의한 것이다. 

프로그래밍 언어의 함수도 수학의 함수와 같은 개념이다. 함수 f(x, y) = x + y를 자바스크립트의 함수로 표현하면 다음과 같다.

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

add(2,5); // 7

프로그래밍 언어의 함수는 일련의 과정을 문으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것이다.

프로그래밍 언어의 함수도 입력을 받아 출력을 내보낸다. 이때 함수 내부로 입력을 전달받는 변수를 매개변수, 입력을 인수, 출력을 반환값이라 한다. 함수는 값이며, 여러 개 존재할 수 있으므로 특정 함수를 구분하기 위해 식별자인 함수 이름을 사용할 수 있다.

함수는 함수 정의를 통해 생성하며, 자바스크립트의 함수는 다양한 방법으로 정의할 수 있다.

// 함수 정의
function add(x,y) {
	return x + y;
}

위에서 선언한 함수를 사용하기 위해서는 함수 호출을 해야한다.

// 함수 호출
var result = add(2,5);

console.log(result); // 7

함수를 사용하는 이유는 무엇일까?

함수는 필요할 때 여러 번 호출할 수 있기 때문에 실행 시점을 개발자가 정의할 수 있다. 또 몇 번이든 재사용이 가능하다. 

동일한 작업을 반복적으로 수행해야 한다면 같은 코드를 중복해서 사용하는 것 보단 정의된 함수를 사용하는 것이 바람직하다.

이렇게 코드의 중복을 억제하고 재사용성을 높이는 함수는 유지보수 편의성을 높이고 코드의 신뢰성을 높여준다.

함수 리터럴

자바스크립트의 함수는 객체 타입의 값이다. 따라서 함수도 함수 리터럴로 생성할 수 있다.

일반 객체와의 차이점이 있다면 일반 객체는 호출할 수 없지만 함수는 호출할 수 있다.

함수 정의

함수 정의란 함수를 호출하기 이전에 인수를 전달받을 매개변수와 실행할 문들, 그리고 반환할 값을 지정하는 것을 말한다.

4가지 방법이 존재한다.

// 1. 함수 선언문
function add(x, y) {
	return x + y;
}


// 2. 함수 표현식 
var add = function (x, y) {
	return x + y;
}

// 3. Function 생성자 함수 (사용하지x)
var add = new Function('x', 'y', 'return x+y');


// 4. 화살표 함수
var add = (x, y) => x + y;

1. 함수 선언문

함수 선언문은 함수 이름을 생략할 수 없다.

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

// SyntaxError : Function statements require a function name

함수 선언문은 표현식이 아닌 문이다. 개발자 도구에서 함수 선언문을 실행하면 완료 값 undefined가 출력된다. 함수 표현식이 만약 표현식인 문이라면 완료 값 undefined 대신 표현식이 평가되어 생성된 함수가 출력되어야 한다.

표현식이 아닌 문은 변수에 할당할 수 없다.

// 함수 선언문은 표현식이 아닌 문이므로 변수에 할당할 수 없다.
var add = function add(x, y) {
	return x + y;
}

console.log(add(2, 5)); // 7

하지만 위의 예제에서는 마치 변수에 함수 선언문이 할당된 것 처럼 보인다.

자바스크립트 엔진은 문맥에 따라 해석을 달리한다. 함수 이름이 있는 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석하고, 함수 리터럴이 값으로 평가되어야 하는 문맥이면 함수 리터럴 표현식으로 해석한다.

// 함수 리터럴을 단독으로 사용하면 함수 선언문으로 해석된다.
// 함수 선언문에서는 함수 이름을 생략할 수 없다.
function foo() {console.log('foo');}

foo(); // foo

(function bar() {console.log('bar');});
bar(); // ReferenceError: bar is not defined

그룹 연산자 () 내에 있는 함수 리터럴(bar)은 함수 선언문으로 해석되지 않고 함수 리터럴 표현식으로 해석된다.

함수 선언문과 함수 리터럴 표현식은 함수 객체를 생성한다는 점에서 동일하지만 호출에 차이가 있다.

자바스크립트 엔진은 함수 선언문을 해석해 함수 객체를 생성한다. 이때 함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 함수 이름과는 별도로 생성된 함수 객체를 가리키는 식별자가 필요하다.

함수 객체를 가리키는 식별자가 없으면 생성된 함수 객체를 참조할 수 없으므로 호출할 수 없다. 

자바스크립트 엔진은 생성된 함수를 호출하기 위해 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고, 거기에 함수 객체를 할당한다.

예제를 보자

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

console.log(add(1,3)); // 4

위의 add(1,3) 은 식별자를 의미할까 아니면 함수 이름을 의미할까?

함수는 함수 이름으로 호출하는 것이 아니라 함수 객체를 가리키는 식별자로 호출한다. 즉, 함수 선언문으로 생성한 함수를 호출한 것은 함수 이름 add가 아니라 자바스크립트 엔진이 암묵적으로 생성한 식별자 add인 것이다.

2. 함수 표현식

값의 성질을 갖는 객체를 일급 객체라 한다. 자바스크립트의 함수는 일급 객체이다. 이 말은 함수를 값처럼 자유롭게 사용할 수 있다는 의미이다.

함수는 일급 객체이므로 함수 리터럴로 생성한 함수 객체를 변수에 할당할 수 있다. 이러한 함수 정의 방식을 함수 표현식이라고 한다.

// 함수 표현식
var add = function (x, y) {
	return x + y;
}

console.log(add(2,5)); // 7

함수 리터럴의 함수 이름은 생략할 수 있다. 이러한 함수를 익명 함수라 한다. 함수 표현식의 함수 리터럴은 함수 이름을 생략하는 것이 일반적이다.

함수를 호출할 때는 함수 이름이 아니라 함수 객체를 가리키는 식별자를 사용해야한다.

함수 이름은 함수 몸체 내부에서만 유효한 식별자이므로 함수 이름으로 함수를 호출할 수 없다.

// 함수 표현식
var add = function foo(a, b) {
	return a + b;
}

// 함수 객체를 가리키는 식별자로 함수 호출
console.log(add(1,3)); // 4

// 함수 이름으로 호출하면 ReferenceError 가 발생한다.
console.log(foo(1,3));

함수 생성 시점과 함수 호이스팅

// 함수 참조
console.dir(add); // f add(x,y)
console.dir(sub); // undefiend

// 함수 호출
console.log(add(2, 5)); // 7
console.log(sub(2, 5)); // TypeError: sub is not a function

// 함수 선언문
function add(x, y) {
	return x + y;
}

// 함수 표현식
var sub = function(x, y) {
	return x - y;
}

위 예제와 같이 함수 선언문으로 정의한 함수는 함수 선언문 이전에 호출할 수 있다. 그러나 함수 표현식으로 정의한 함수는 함수 표현식 이전에 호출할 수 없다.

이는 함수 선언문으로 정의한 함수와 함수 표현식으로 정의한 함수의 생성 시점이 다르기 때문이다.

모든 선언문이 그렇듯 함수 선언문도 런타임 이전에 자바스크립트 엔진에 의해서 먼저 실행된다. 함수 선언문으로 함수를 정의하면 런타임 이전에 함수 객체가 먼저 생성된다. 함수 이름과 동일한 이름의 식별자를 암묵적으로 생성하고 생성된 함수 객체를 할당한다.

이처럼 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트의 고유의 특징을 함수 호이스팅이라한다.

변수 호이스팅과 함수 호이스팅이 같진 않다. var 키워드로 선언된 변수는 undefined로 초기화되고, 함수 선언문을 통해 암묵적으로 생성된 식별자는 함수 객체로 초기화된다.

함수 표현식은 변수에 할당된는 값이 함수 리터럴인 문이다. 변수 선언은 런타임 이전에 실행되어 undefined로 초기화되지만 변수 할당문의 값은 할당문이 실행되는 시점 = 런타임에 평가되므로 함수 표현식의 함수 리터럴도 할당문이 실행되는 시점에 평가되어 함수 객체가 된다.

함수 표현식이으로 함수를 정의하면 함수 호이스팅이 아니라 변수 호이스팅이 발생한다.

따라서 함수 표현식 이전에 함수를 참조하면 undefined로 평가된다. 그렇기 때문에 함수 표현식으로 정의한 함수는 반드시 함수 표현식 이후에 참조 또는 호출해야 한다.

4. 화살표 함수

ES6에서 도입된 화살표 함수는 키워드 대신 화살표 => 를 사용해 좀 더 간략한 방법으로 함수를 선언할 수 있다. 화살표 함수는 항상 익명 함수로 정의한다.

const add = (x, y) => x + y;

console.log(add(1,3)); // 4

메시지

HTTP 메시지는 단순한 줄 단위의 문자열이다. 

웹 클라이언트에서 웹 서버로 보낸 HTTP 메시지를 요청 메시지라고 부른다. 서버에서 클라이언트로 가는 메시지는 응답 메시지라고 부른다. 그 외의 HTTP 메시지는 없다. HTTP 요청과 응답 메시지의 형식은 굉장히 비슷하다.

- 시작줄 

  메시지의 첫 줄은 시작줄로, 요청이라면 무엇을 해야 하는지 응답이라면 무슨 일이 일어났는지 나타낸다.

- 헤더

  시작줄 다음에는 0개 이상의 헤더 필드가 이어진다. 각 헤더 필드는 쉬운 구문분석을 위해 쌍점(:)으로 구분되어 있는 하나의 이름과 하나의 값으로 구성된다.

- 본문

  빈 줄 다음에는 어떤 종류의 데이터든 들어갈 수 있는 메시지 본문이 필요에 따라 올 수 있다. 요청의 본문은 웹 서버로 데이터를 실어 보내며, 응답의 본문은 클라이언트로 데이터를 반환한다.

TCP 커넥션

TCP / IP

HTTP는 애플리케이션 계층 프로토콜이다. HTTP는 네트워크 통신의 핵심적인 세부사항에 대하여 신경 쓰지 않는다. 대중적이고 신뢰성 있는 인터넷 전송 프로토콜인 TCP/IP 에게 맡긴다.

TCP가 제공한는 것

• 오류 없는 데이터 전송
• 순서에 맞는 전달(데이터는 언제나 보낸 순서대로 도착한다)
• 조각나지 않는 데이터 스트림(언제든 어떤 크기로 보낼 수 있다)

TCP/IP 는 TCP 와 IP가 층을 이루는, 패킷 교환 네트워크 프로토콜의 집합이다. 어떤 컴퓨터나 네트워크든 서로 신뢰성 있는 의사소통을 하게 해 준다.

일단 TCP 커넥션이 맺어지면, 클라이언트와 서버 컴퓨터 간에 교환되는 메시지가 없어지거나, 손상되거나, 순서가 뒤바뀌어 수신되는 일은 결코 없다.

네트워크 개념상, HTTP 프로토콜은 TCP 위의 계층이다. HTTP는 자신의 메시지 데이터를 전송하기 위해 TCP를 사용한다. 

접속, IP 주소 그리고 포트번호

HTTP 클라이언트가 서버에 메시지를 전송할 수 있게 되기 전에, 인터넷 프로토콜 주소와 포트번호를 사용해 클라이언트와 서버 사이에 TCP/IP 커넥션을 맺어야 한다.

TCP 커넥션을 맺는 것은 다른 회사 사무실에 있는 누군가에게 전화를 거는 것과 다소 비슷하다. 

TCP에서는 서버 컴퓨터에 대한 IP 주소와 그 서버에서 실행중인 프로그램이 사용중인 포트번호가 필요하다.

URL을 사용하여 IP주소와 포트번호를 알아낸다.

예시 ) http://www.netscape.com:80/index.html 

URL은 도메인 이름 혹은 호스트 명, IP 주소가 있으며 포트번호(80)을 가지고 있다. 호스트 명은 도메인 이름 서비스(DNS)라 불리는 장치를 통해 쉽게 IP로 변환될 수 있다.

웹의 구성요소

1. 프락시 : 클라이언트와 서버 사이에 위치한 HTTP 중개자
2. 캐시 : 많이 찾는 웹페이지를 클라이언트 가까이에 보관하는 HTTP 창고
3. 게이트웨이 : 다른 애플리케이션과 연결된 특별한 웹 서버
4. 터널 : 단순히 HTTP 통신을 전달하기만 하는 특별한 프락시
5. 에이전트 : 자동화된 HTTP 요청을 만드는 웹클라이언트

1. 프락시

웹 보안, 애플리케이션 통합, 성능 최적화를 위한 중요한 구성요소인 HTTP 프락시 서버에 대해 살펴보자.

그림과 같이 프락시는 클라이언트와 서버 사이에 위치하며 클라이언트의 모든 HTTP 요청을 받아 서버에 전달한다. 이 애플리케이션은 사용자를 위한 프락시로 동작하며 사용자를 대신해 서버에 접근한다.

프락시는 주로 보안을 위해 사용된다. 모든 웹 트래픽 흐름 속에서 신뢰할 만한 중개자 역할을 한다. 또한 프락시는 요청과 응답을 필터링한다. 예를 들어 무언가를 다운받을 때 바이러스를 검출한다.

2. 캐시

웹캐시와 캐시 프락시는 자신을 거쳐 가는 문서들 중 자주 찾는 것의 사본을 저장해 두는, 특별한 종류의 HTTP 프락시 서버다. 클라이언트는 멀리 떨어진 웹 서버보다 근처의 캐시에서 더 빨리 문서을 다운 받을 수 있다. HTTP는 , 캐시를 효율적으로 동작하게 하고 캐시된 콘텐츠를 최신 버전으로 유지하면서 동시에 프라이버시도 보호하기 위한 많은 기능을 정의한다.

전 세계의 웹브라우저, 서버, 웹 애플리케이션은 모두 HTTP(Hypertext Transfer Protocol)를 통해 서로 대화한다. HTTP는 현대 인터넷의 공용어이다.

HTTP는 신뢰성 있는 데이터 전송 프로토콜을 사용하기 때문에, 데이터가 지구 반대편에서 오더라도 전송 중 손상되거나 꼬이지 않음을 보장한다. 

웹 클라이언트와 서버

웹 콘텐츠는 웹 서버에 존재한다. 웹 서버는 HTTP 프로토콜로 의사소통하기 때문에 보통 HTTP 서버라고 불린다. 웹 서버는 인터넷의 데이터를 저장하고, HTTP 클라이언트가 요청한 데이터를 제공한다.

클라이언트는 서버에게 HTTP 요청을 보내고 서버는 요청된 데이터를 HTTP 응답으로 돌려준다. 

예를 들어, 'http://www.oreilly.com/index.html" 페이지를 열어볼 때, 웹브라우저는 HTTP 요청을 www.oreilly.com  서버로 보내고, 서버는 요청을 받은 객체 ('/index.html')를 찾고, 성공했다면 그것의 타입, 길이 등의 정보와 함께 HTTP 응답에 실어서 클라이언트에게 보낸다.

리소스

웹 서버는 웹 리소스를 관리하고 제공한다. 웹 리소스는 웹 콘텐츠의 원천이다. 가장 단순한 웹 리소스는 웹 서버 파일 시스템의 정적 파일이다. 정적 파일은 텍스트 파일, HTML 파일, 마이크로소프트 워드 파일, 어도비 아크로팻 파일, JPEG 이미지 파일, AVI 동영상 파일, 그 외 모든 종류의 파일을 포함한다.

하지만 리소스는 반드시 정적 파일이어야 할 필요는 없다. 카메라에서 라이브 영상을 가져와 보여주거나, 주식 거래, 부동산 데이터베이스 검색 등도 가능하다.

요약하자면, 어떤 종류의 콘텐츠 소스도 리소스가 될 수 있다.

미디어 타입

인터넷은 수천 가지 데이터 타입을 다루기 때문에, HTTP는 웹에서 전송되는 객체 각각에 신중하게 MIME 타입이라는 데이터 포맷 라벨을 붙인다. MIME (Multipurpose Internet MAil Extensions, 다목적 인터넷 메일 확장)은 원래 각기 다른 전자메일 시스템 사이에서 메시지가 오갈 때 겪는 문제점을 해결하기 위해 설계 되었다.

웹 서버는 모든 HTTP 객체 데이터에 MIME 타입을 붙인다. 웹 브라우저는 서버로부터 객체를 돌려받을 때, 다룰 수 있는 객체인지 MIME 타입을 통해 확인한다.

MIME 타입은 사선(/)으로 구분된 주 타입과 부 타입으로 이루어진 문자열 라벨이다. 예를들어

• HTML로 작성된 텍스트 문서는 text/html 라벨이 붙는다.
• plain ASCII 텍스트 문서는 text/plain 라벨이 붙는다.
• JPEG 이미지는 image/jpeg가 붙는다.
• GIF 이미지는 image/gif 가 붙는다.
• 애플 퀵타임 동영상은 video/quicktime이 붙는다.

등이 있다.

URI

웹 서버 리소스는 각자 이름을 갖고 있기 때문에, 클라이언트는 관심 있는 리소스를 지목할 수 있다. 서버 리소스 이름은 통합 자원 식별자(uniform resource identifier), 혹은 URI로 불린다. URI는 인터넷의 우편물 주소 같은 것으로, 정보 리소스를 고유하게 식별하고 위치를 저장할 수 있다.

예를 들어, '죠의 컴퓨터 가게' 의 웹 서버에있는 이미지 리소스에 대한 URI 라면 이런 식이다.

- http://www.joes-hardware.com/specials/saw-blase.gif

위의 그림은 죠의 컴퓨터 가게 서버에 있는 GIF 형식의 톱날 그림 리소스에 대한 URI 가 HTTP 프로토콜에서 어떻게 해석되는지 보여둔다. HTTP는 주어진 URI로 객체를 찾아온다. URI에는 두 가지가 있는데. URL과 URN이라는 것이다.

URL

통합 자원 지시자(uniform resource locator, URL)는 리소스 식별자의 가장 흔한 형태다. URL은 특정 서버의 한 리소스에 대한 구체적인 위치를 서술한다. URL은 리소스가 정확히 어디에 있고 어떻게 접근할 수 있는지 분명하게 알려준다.

대부분의 URL은 세 부분으로 이루어진 표준 포맷을 따른다.

• URL의 첫 번째 부분은 스킴(scheme)이라고 불리는데, 리소스에 접근하기 위해 사용되는 프로토콜을 서술한다. 보통 HTTP 프로토콜이다.
• 두 번째 부분은 서버의 인터넷 주소를 제공한다. (예: www.joes-hardware.com)
• 마지막은 웹 서버의 리소스를 가리킨다. (예: /specials/saw-blade.gif)

오늘날 대부분의 URI는 URL이다.

URN

URI의 두 번째 종류는 유니폼 리소스 이름(uniform resource name, URN)이다.

URN은 콘텐츠를 이루는 한 리소스에 대해, 그 리소스의 위치에 영향 받지 않는 유일무이한 이름 역할을 한다. 위치 독립적인 URN은 리소스를 여기저기로 옮기더라도 문제없이 동작한다. 리소스가 이름을 변하지 않게 유지하는 한, 여러 종류의 네트워크 접속 프로토콜로 접근해도 문제없다.

원시 타입과 객체 타입은 크게 3가지 측면에서 다르다

• 원시 타입의 값, 즉 원시 값은 변경 불가능한 값이다. 이에 비해 객체(참조) 타입의 값, 즉 객체는 변경 가능한 값이다.
• 원시 값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장된다. 이에 비해 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장된다.
• 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다. 이에 비해 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다.

원시값

변경 불가능한 값

원시 타입(primitive type)의 값, 즉 원시 값은 변경 불가능한 값(immutable value) 이다. 한번 생성된 원시 값은 읽기 전용 값으로서 변경할 수 없다.

위에서 score 가 참조하던 메모리 공간의 주소가 바뀐 이유는 변수에 할당된 원시 값이 변경 불가능한 값이기 때문이다. 만약 원시 값이 변경 가능한 값이라면 변수에 새로운 원시 값을 재할당했을 때 변수가 가리키던 메모리 공간의 주소를 바꿀 필요없이 원시 값 자체를 변경하면 그만이다. 만약 그렇다면 변수가 참조하던 메모리 공간의 주소는 바뀌지 않는다.

하지만 원시 값은 변경 불가능한 값이기 때문에 값을 직접 변경할 수 없다. 따라서 변수 값을 변경하기 위해 원시 값을 재할당하면 새로운 메모리 공간을 확보하고 재할당한 값을 저장한 후, 변수가 참조하던 메모리 공간의 주소를 변경한다. 값의 이러한 특성을 불변성(immutability) 이라 한다.

불변성을 갖는 원시 값을 할당한 변수는 재할당 이외에 변수 값을 변경할 수 있는 방법이 없다.

문자열과 불변성

원시 값인 문자열은 다른 원시 값과 비교할때 독특한 특징이 있다.

문자열은 0개 이상의 문자로 이루어진 집합을 말하며, 1개의 문자는 2바이트의 메모리 공간에 저장된다. 따라서 문자열은 몇 개의 문자로 이루어 졌느냐에 따라 메모리 공간의 크기가 결정된다. (1개의 문자로 이루어진 문자열은 2바이트, 10개의 문자로 이루어진 문자열은 20바이트)

자바스크립트의 문자열은 원시 타입이며, 변경 불가능하다. 문자열이 생성된 이후에는 변경할 수 없음을 의미한다.

var str = 'Hello';
str = 'world';

위의 예제에서 첫 번째 문이 실행되면 문자열 'Hello'가 생성되고 식별자 str은 문자열 'Hello'가 저장된 메모리 공간의 첫 번째 메모리 셀 주소를 가리킨다. 두 번째 문이 실행되면 이전에 생성된 문자열 'Hello'를 수정하는 것이 아니라 새로운 문자열 'world'를 메모리에 생성하고 식별자 str은 이것을 가리킨다. 이때 문자열 'Hello'와 'world' 모두 메모리에 존재한다. 

var str = 'string';

// 문자열은 유사 배열이므로 배열과 유사하게 인덱스를 사용해 각 문자에 접근할 수 있다.
// 하지만 문자열은 원시 값이므로 변경할 수 없다. 이때 에러가 발생하지 않는다.
str[0] = 'X';

console.log(str); // string

값에 의한 전달

var score = 80;
var copy = score;

console.log(score); // 80
console.log(copy); // 80

score = 100;

console.log(score); // 100
console.log(copy); // ?

score 변수에 숫자 값 80을 할당했다. 그리고 copy 변수에 score 변수를 할당했다. copy = score 에서 score 는 변수 값 80으로 평가되므로 copy 변수에도 80이 할당될 것이다. 이때 새로운 숫자 값 80이 생성되어 copy 변수에 할당된다.

이처럼 변수에 원시 값을 갖는 변수를 할당하면 할당받는 변수에는 할당되는 변수의 원시 값이 복사되어 전달된다. 이를 값에 의한 전달이라 한다. 

var score = 80;

var copy = score;

console.log(score, copy); // 80 80
console.log(score === copy); // true

이때 score 변수와 copy 변수의 값 80은 서로 다른 메모리 공간에 저장된 별개의 값이라는 것을 주의하자. 

따라서 score 변수의 값을 아무리 변경해도 copy 변수의 값에는 어떠한 영향도 주지 않는다.

값에 의한 전달 이라는 용어는 자바스크립트를 위한 용어가 아니므로 오해의 소지가 있을 수 있다.

엄격하게 표현하면 변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달되기 때문이다. 이는 변수와 같은 식별자는 값이 아니라 메모리 주소를 기억하고 있기 때문이다.

식별자로 값을 구별해서 식별한다는 것은 식별자가 기억하고 있는 메모리 주소를 통해 메모리 공간에 저장된 값에 접근할 수 있다는 것을 의미한다. 즉, 식별자는 메모리 주소에 붙인 이름이라고 할 수 있다.

"값의 의한 전달"도 사실은 값을 전달하는 것이 아니라 메모리 주소를 전달한다. 

객체

객체는 프로퍼티의 개수가 전해져 있지 않으며, 동적으로 추가하고 삭제할 수 있다. 또 프로퍼티의 값에도 제약이 없다. 따라서 객체는 원시 값과 같이 확보해야 할 메모리 공간의 크기를 사전에 정해 둘 수 없다. 

따라서 객체는 원시 값과는 다른 방식을 동작하도록 설계되어 있는데 원시 값과의 비교를 통해 이해해보자.

변경 가능한 값

객체(참조) 타입의 값, 즉 객체는 변경 가능한 값(mutable value)이다. 

var person = {
	name : 'Lee'
};

원시 값을 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 원시 값에 접근할 수 있다. 즉, 원시 값을 할당한 변수는 원시 값 자체를 값으로 갖는다. 하지만 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근하면 참조 값(reference value)에 접근할 수 있다. 참조 값은 생성된 객체가 저장된 메모리 공간의 주소, 그 자체다.

다시 말해 원시 값을 할당한 변수를 참조하면 메모리에 저장되어 있는 원시 값에 접근한다. 하지만 객체를 할당한 변수를 참조하면 메모리에 저장되어 있는 참조 값을 통해 실제 객체에 접근한다.

// 할당이 이루어지는 시점에 객체 리터럴이 해석되고, 그 결과 객체가 생성된다.
var person = {
	name : 'Lee'
};

// person  변수에 저장되어 있는 참조 값으로 실제 객체에 접근한다.
console.log(person); // {name : "Lee"}

객체를 할당한 변수는 재할당 없이 객체를 직접 변경할  수 있다. 즉, 재할당 없이 프로퍼티를 동적으로 추가할 수도 있고 프로퍼티 값을 갱신할  수도 있으며 프로퍼티 자체를 삭제하는 것도 가능하다.

참조에 의한 전달

var person = {
	name : 'Lee'
};

// 참조 값을 복사(얕은 복사)
var copy = person;

객체를 가리키는 변수(원본, person)를 다른 변수(사본, copy)에 할당하면 원본의 참조 값이 복사되어 전달된다. 이를 참조에 의한 전달이라 한다.

위 그림처럼 원본 person을 사본 copy에 할당하면 원본 person의 참조 값을 복사해서 copy에 전달한다. 이때 원본 person과 사본 copy는 저장된 메모리 주소는 다르지만 동일한 참조 값을 갖는다. 원본과 사본이 모두 동일한 객체를 가리킨다. 이것은 두 개의 식별자가 하나의 객체를 공유한다는 것이다. 따라서 원본 또는 사본 중 어느 한쪽에서 객체를 변경하면 서로 영향을 받는다.

var person = {
	name : 'Kim'
};

// 참조 값을 복사(얕은 복사). copy와 person은 동일한 참조 값을 갖는다.
var copy = person;

// copy와 person은 동일한 객체를 참조한다.
console.log(copy === person); // true

// copy를 통해 객체를 변경한다.
copy.name = 'Lee';

// person을 통해 객체를 변경한다.
person.address = 'seoul';

// 서로 영향을 주고받는다.
console.log(person); // {name: "Lee", address: "seoul"}
console.log(copy); // {name: "Lee", address: "seoul"}

자바스크립트의 모든 값은 타입이 있다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다. 이때 개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(explicit coercion) 또는 타입 캐스팅(type casting) 이라 한다.

var x = 10;

// 명시적 타입 변환 숫자 -> 문자열
var str = x.toString();
console.log(typeof str, str); // string 10

개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환되기도 한다. 이를 암묵적 타입 변환(implict coercion) 또는 타입 강제 변환(type coercion)이라 한다.

var x = 10;

// 암묵적 타입 변환 숫자 -> 문자열
var str = x + '';
console.log(typeof str, str); // string 10

명시적 타입 변환이나 암묵적 타입 변환이 기존 원시 값(위에서 x)을 직접 변경하는 것은 아니다. 원시 값은 변경 불가능한 값이므로 변경할 수 없다. 타입 변환이란 기존 원시 값을 사용해 다른 타입의 새로운 원시 값을 생성하는 것이다.

암묵적 타입 변환

// 피연산자가 모두 문자열 타입이어야 하는 문맥
'10' + 2 // '102'

// 피연산자가 모두 숫자 타입이어야 하는 문맥
5 * '10' // 50

// 피연산자 또는 표현식이 불리언 타입이어야 하는 문맥
!0 // true
if(1) {}

위처럼 표현식을 평가할 때 코드의 문맥에 부합하지 않는 다양한 상황이 발생할 수 있다. 이때 자바스크립트 엔진은 가급적 에러를 발생시키지 않기 위해 암묵적 타입 변환을 통해 표현식을 평가한다.

암묵적 타입 변환이 발생하면 문자열, 숫자, 불리언과 같은 원시 타입 중 하나로 타입을 자동 변환한다.

문자열 타입으로 변환

// 숫자 타입
0 + '' // '0'
-0 + '' // '0'
1 + '' // '1'
NaN + '' // 'NaN'

// 불리언 타입
true + ''  // 'true'
false + '' // 'false'

// null 타입
null + '' // 'null'

// undefined 타입
undefined + '' // 'undefined'

// 객체 타입
({}) + '' // '[object Object]'
Math + '' // '[object Math]'
[] + ''   // ''
[10, 20] + '' // '10,20'
(function(){}) + '' // 'function(){}'
Array + '' // 'function Array() { [native code] }'

숫자 타입으로 변환

1 - '1' // 0
1 * '10' // 10
/ 'one' // NaN

'1' > 0 // true

// 문자열 타입
+'' // 0
+'0' // 0
+'string' // NaN

// 불리언 타입
+true // 1
+false // 0

// null 타입
+null // 0

// undefined 타입
+undefined // NaN

// 객체 타입
+{} // NaN
+[] // 0
+[10,20] // NaN
+(function(){}) // NaN

불리언 타입으로 변환

if('') console.log('1');
if(true) console.log('2');
if(0) console.log('3');
if('str') console.log('4');
if(null) console.log('5');

// 2 4

자바스크크립트 엔진은 불리언 타입이 아닌 값을 Truthy 값(참으로 평가되는 값) 또는 Falsy 값(거짓으로 평가되는 값)으로 구분한다.

제어문의 조건식과 같이 불리언 값으로 평가되어야 할 문맥에서 암묵적 타입 변환된다.

false 로 평가되는 Falsy 값

• false
• undefined
• null
• 0, -0
• NaN
• '' (빈 문자열)

Falsy 값 외의 모든 값은 모두 true로 평가되는 Truthy  값이다.

명시적 타입 변환

개발자의 의도에 따라 명시적으로 타입을 변경하는 방법은 다양하다.

문자열 타입으로 변환

문자열 타입이 아닌 값을 문자열 타입으로 변환하는 방법은 다음과 같다.

1. String 생성자 함수를 new 연산자 없이 호출하는 방법
2. Object.prototype.toString 메서드를 사용하는 방법
3. 문자열 연결 연산자를 사용하는 방법

// 1. String 생성자 함수를 new 연산자 없이 호출하는 방법
// 숫자 타입 -> 문자열 타입
String(1); // '1'
String(NaN); //'NaN'

// 불리언 타입 -> 문자열 타입
String(true); // 'true'
String(false)' // 'false'


// 2.Object.prototype.toString 메서드를 사용하는 방법
// 숫자 타입 -> 문자열 타입
(1).toString(); // '1'
(NaN).toString(); // 'NaN'

// 불리언 타입 -> 문자열 타입
(true).toString(); // 'true'
(false).toString(); // 'false'

// 3. 문자열 연결 연산자를 이용하는 방법
// 숫자 타입 -> 문자열 타입
1 + '' // '1'
NaN + '' // 'NaN'

// 불리언 타입 -> 문자열 타입
true + '' // 'true'
false + '' // 'false'

숫자 타입으로 변환

숫자 타입이 아닌 값을 숫자 타입으로 변환하는 방법은 다음과 같다.

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
2. parseInt, parseFloat 함수를 사용하는 방법 (문자열만 숫자 타입으로 변환 가능)
3. + 단항 산술 연산자를 이용하는 방법
4. * 산술 연산자를 사용하는 방법

// 1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 -> 숫자 타입
Number('0'); // 0
Number('-1'); // -1

// 불리언 타입 -> 숫자 타입
Number(true); // 1
Number(false); // 0


// 2. parseInt, parseFloat 함수를 사용하는 방법 (문자열만 변환 가능)
// 문자열 타입 -> 숫자 타입
parseInt('0'); // 0
parseInt('-1'); // -1
parseFloat('10.53'); // 10.53

// 3.+ 단항 산술 연산자를 이용하는 방법
+'0'; // 0
+'-1'; // -1

// 불리언 타입 -> 숫자 타입
+true; // 1
+false; // 0

// 4.* 산술 연산자를 사용하는 방법
'0' * 1; // 0
'-1' * 1; // -1

// 불리언 타입 -> 숫자 타입
true * 1; // 1
false * 0; // 0

불리언 타입으로 변환

불리언 타입이 아닌 값을 불리언 타입으로 변환하는 방법은 다음과 같다.

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
2. ! 부정 논리 연산자를 두 번 사용하는 방법

// 1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
// 문자열 타입 -> 불리언 타입
Boolean('x'); // true
Boolean(''); // false
Boolean('false'); // true

// 숫자 타입 -> 불리언 타입
Boolean(0); // false
Boolean(1); // true
Boolean(NaN); // false
Boolean(Infinity); // true

// null 타입 -> 불리언 타입
Boolean(null); // false

// undefined 타입 -> 불리언 타입
Boolean(undefined); // false

// 객체 타입 -> 불리언 타입
Boolean({}); // true
Boolean([]); // true

// 2. ! 부정 논리 연산자를 두 번 사용하는 방법
// 문자열 타입 -> 불리언 타입
!!'x'; // true
!!''; // false
!!'false'; // true

// 숫자 타입 -> 불리언 타입
!!0; // false
!!1; // true
!!NaN; // false
!!Infinity; // true

// null 타입 -> 불리언 타입
!!null; // false

// undefined 타입 -> 불리언 타입
!!undefined; // false

// 객체 타입 -> 불리언 타입
!!{}; // true
!![]; // true

논리 연산자를 사용한 단축 평가

단축 평가(short-circuit evaluation)는 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것을 말한다. 

'Cat' && 'Dog' // -> 'Dog'

논리곱(&&) 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다.

첫 번째 피연산자 'Cat' 은 Truthy 값이므로 true로 평가된다. 여기서 두 번째 피연산자가 위 논리곱 연산자 표현식의 평가 결과를 결정한다. 논리곱 연산자는 논리 연산의 결과를 결정하는 두 번째 피연산자, 즉 문자열 'Dog'를 그대로 반환한다.

논리합(||) 연산자도 동일하게 동작한다.

단축 평가는 다음 규칙을 따른다.

// 논리합(||) 연산자
'Cat' || 'Dog' // 'Cat'
false || 'Dog' // 'Dog'
'Cat' || false // 'Cat'

// 논리곱(&&) 연산자
'Cat' && 'Dog' // 'Dog'
false && 'Dog' // false
'Cat' && false // false

단축 평가를 통해 에러를 발생시키지 않는 겨웅가 있다.

1. 객체를 가리키기를 기대하는 변수가 null 또는 undefined가 아닌지 확인하고 프로퍼티를 참조할 때

객체는 키와 값으로 구성된 프로퍼티의 집합이다. 만약 객체를 가리키기를 기대하는 변수의 값이 객체가 아니라 null 또는 undefined인 경우 객체의 프로퍼티를 참조하면 타입 에러가 발생한다. 

var elem = null;
var value = elem.value; // TypeError : Cannot read Property 'value' of null


// 단축 평가 사용
var elem = null;

var value = elem && elem.value; // null

2. 함수 매개변수에 기본값을 설정할 때

함수를 호출할 때 인수를 전달하지 않으면 매개변수에는 undefined가 할당된다. 이때 단축 평가를 사용하면 에러를 방지할 수 있다.

function getStringLength(str) {
	str = str || '';
    return str.length;
}

getStringLength(); // 0
getStringLength('Hi'); // 2

옵셔널 체이닝 연산자

ES11(ECMAScript2020)에서 도입된 옵셔널 체이닐(optional chaining) 연산자 ?. 는 좌항의 피연산자가 null 또는 undefined인 경우 undefined를 반환하고, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.

var elem = null;

// elem이 null 또는 undefined 이면 undefined 를 반환, 그렇지 않으면 우항의 프로퍼티 참조를 이어간다.
var value = elem?.value;
console.log(value); // undefined

null 병합 연산자

ES11(ECMAScript2020)에서 도입된 null 병합 (nullish coalescing) 연산자 ?? 는 좌항의 피연산자가 null 또는 undefined인 경우 우항의 피연산자를 반환하고, 그렇지 않으면 좌항의 피연산자를 반환한다. 변수의 기본값을 설정할때 유용하다.

var config = {min:10};

if(config.min === undefined || config.min === null) {
	config.min = 20;
}

if(config.max === undefined || config.max === null) {
	config.max = 100;
}

config;

// Null 병합 할당 연산자
var config2 = {min:10};
config2.min ??= 20;
config2.max ??= 100;
config2;

객체란 무엇일까?

자바스크립트는 객체 기반의 프로그래밍 언어이다. 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체다.

원시 타입은 단 하나의 값만 나타내지만 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복잡한 자료구조이다. 또한, 원시 타입의 값, 즉 원시 값은 변경 불가능한값이지만 객체 타입의 값, 즉 객체는 변견 가능한 값이다.

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키(key)와 값(value)으로 구성된다.

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있으며, 자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다. 따라서 함수도 프로퍼티 값으로 사용할 수 있다. 프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드(method)라 부른다.

위처럼 객체는 프로퍼티와 메서드로 구성된 집합체다. 프로퍼티와 메서드의 역할은 다음과 같다.

• 프로퍼티 : 객체의 상태를 나타내는 값(value)
• 메서드 : 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

객체 리터럴에 의한 객체 생성

c++ 이나 자바 같은 클래스 기반 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자를 호출하여 인스턴스를 생성하는 방식으로 객체를 생성한다.

*인스턴스란?

자바스크립트는 다양한 객체 생성 방법을 지원한다.

• 객체 리터럴
• Object 생성자 함수
• 생성자 함수
• Object.create 메서드
• 클래스

가장 일반적인 방식은 객체 리터럴을 사용한 방법이다.

var person = {
	name : 'Kim',
    age : '29',
    sayHello : function() {
    	console.log(`Hello my name is ${this.name} and my age is ${this.age}`);
    }
};

console.log(typeof person); // object
console.log(person); // {name : "Lee", sayHello: f}



var empty = {}; // 빈 객체
console.log(typeof empty); // object

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성된다.

var person = {
	// 프로퍼티 키는 name, 프로퍼티 값은 'Kim'
    name : 'Kim',
    // 프로퍼티 키는 age, 프로퍼티 값은 29
    age : 29
}

// 프로퍼티를 나열할 때는 쉼표로 구분한다. 일반적으로 마지막 프로퍼티 뒤에는 쉼표를 사용하지 않는다.

프로퍼티 키와 프로퍼티 값으로 사용할 수 있는 값은 다음과 같다.

• 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
• 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값

// ES5 프로퍼티 키 동적 생성
var obj = {};
var key = 'Hello';

obj[key] = 'world';

console.log(obj); // {hello : 'world'}



// 빈 문자열도 프로퍼티 키로 사용할 수 있다.
var foo = {
	'' : ''
};

console.log(foo); // {"" : ""}


// 이미 존재하는 프로퍼티 키를 중복 선언시 나중에 선언한 프로퍼티가 덮어씌워진다.
var foo = {
	name : 'Lee',
    name : 'Kim'
};

console.log(foo); // { name : "Kim" }

메서드

함수는 자바스크립트의 객체다. 따라서 함수는 값으로 취급할 수 있기 때문에 프로퍼티 값으로 사용 가능하다. 이때 일반 함수와 구분하기 위해 메서드(method)라 부른다. 즉, 메서드는 객체에 묶여 있는 함수를 의미한다.

var circle = {
 radius: 5, // 프로퍼티
 
 // 원의 지름
 getDiameter : function() { // 메서드
 	return 2 * this.radius; // this 는 circle을 가리킨다.
 }
};

console.log(circle.getDiameter()); // 10

// 메서드 내부에서 사용한 this 키워드는 객체 자신을 가리키는 참조변수다.

프로퍼티 접근

프로퍼티에 접근하는 방법은 다음과 같이 두 가지다.

• 마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법
• 대괄호 프로퍼티 접근 연산자([...])를 사용하는 대괄호 표기법

var person = {
  name : 'Kim'
};


// 마침표 표기법
console.log(person.name); // Kim

// 대괄호 표기법
console.log(person['name']); // Kim

// 대괄호 표기법을 사용하는 경우 반드시 접근 연산자 내부에 지정하는 프로퍼티 키는 반드시 따옴표로 감싼 문자열이어야 한다.

var person = {
	name: 'Kim'
};

console.log(person[name]); // ReferenceError : name is not defined

위 예제에서 ReferenceError 가 발생한 이유는 대괄호 연산자 내의 따옴표로 감싸지 않은 이름, 즉 식별자 name을 평가하기 위해 선언된 name 을 찾았지만 찾지 못했기 때문이다.

객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다. 이때 RefereceError 가 발생하지 않는다.

var person = {
	name : 'Kim'
};

console.log(person.age); // undefined

프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

var person = {
	name : 'Lee'
};

person.name = 'Kim';

console.log(person); // { name : "Kim" }

프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값이 할당된다.

var person = {
	name : 'Kim'
};

// person 객체에는 age 프로퍼티가 존재하지 않는다.
// 따라서 person 객체에 age 프로퍼티가 동적으로 생성되고 값이 할당된다.
person.age = 29;

console.log(person); // { name : "Lee", age : 20 }

프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다. 이때 delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식이어야 한다. 만약 존재하지 않는 프로퍼티를 삭제하면 아무런 에러 없이 무시된다.

var person = {
	name : 'Kim'
};

person.age = 29;

delete person.age;

console.log(person); // {name:"Kim"}

ES6에서 추가된 객체 리터럴의 확장 기능

// 프로퍼티 축약 표현
// 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 키를 생략할 수 있다. 
// 이때 프로퍼티 키는 변수 이름으로 자동 생성된다.
let x = 1, y = 2;

const obj = {x, y};

console.log(obj); // {x:1, y:2}



// 프로퍼티 키 동적 생성
const prefix = 'prop';
let i = 0;

// 객체 리터럴 내부에서 계산된 프로퍼티 이름으로 프로퍼티 키를 동적 생성
const obj = {
	[`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i,
    [`${prefix}-${++i}`]: i
};

console.log(obj); // {prop-1: 1, prop-2: 2, prop-3: 3}



//메서드 축약 표현
// 매서드를 정의할 때 function 키워드를 생략한 축약 표현을 사용할 수 있다.
const obj = {
	name : 'Kim',
    sayHello() {
    	console.log(`Hi my name is ${this.name}`);
    }
};

obj.sayHello(); // Hi my name is Kim