리액트는 컴포넌트라고 불리는 코드의 파편을 이용하여 복잡한 UI를 구성하도록 한다. component는 view라고도 하며 소스코드의 일부이고, html을 생성하는 JS 함수의 모음집이라고 할 수 있다.
함수 컴포넌트와 클래스 컴포넌트
두 가지 유형의 컴포넌트는 모두 데이터(props) 객체 인자를 받은 후 React 엘리먼트를 반환하는 유효한 컴포넌트로 유형은 다르지만 동일하다.
1 2 3 4 5 6 7 8 9 10 11
// 함수 컴포넌트 functionWelcome(props) { return<h1>Hello, {props.name}</h1>; }
// 클래스 컴포넌트 classWelcomeextendsReact.Component{ render() { return<h1>Hello, {this.props.name}</h1>; } }
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
classShoppingListextendsReact.Component{ render() { return ( <div className="shopping-list"> <h1>Shopping List for {this.props.name}</h1> <ul> <li>Instagram</li> <li>WhatsApp</li> <li>Oculus</li> </ul> </div> ); } } // 사용 예제: <ShoppingList name="Mark" />
위와 같이 컴포넌트를 사용하여 React에게 화면에 표현하고 싶은 것이 무엇인지 알려준다. 그리고 데이터가 변경될 때 컴포넌트를 효율적으로 업데이트하고 렌더링한다. 위의 예제에서 shoppingList는 React 컴포넌트 클래스 또는 React 컴포넌트 타입이라고 한다. 개별 컴포넌트는 props라는 매개변수를 받아오고 render함수를 통해 표시할 뷰 계층 구조를 반환한다.
아래 예제에서 App은 React 컴포넌트 클래스 또는 React 컴포넌트 타입이라고 하고, 인스턴스가 아니다. 이 함수는 팩토리 형태이다. 실제 DOM에 렌더링되는 컴포넌트의 인스턴스들을 만든다.
1 2 3
const App = function () { return<div>Hi!</div>; };
1 2 3 4 5 6 7 8 9
// 바벨 이용 "use strict";
var App = functionApp() { return/*#__PURE__*/ React.createElement("div", null, "Hi!"); };
/*#__PURE__*/ React.createElement("div", null);
<div></div>처럼 JSX태그를 작성하고, 컴포넌트 이름을 넣을 때마다 실제 요소를 생성하는 createElement함수를 부른다. JSX를 이용하여 React의 구조를 작성하면 구문을 빌드하는 시점에 React.createElement('div') 이런 식으로 변화된다는 의미이다.
즉 컴포넌트 이름은 컴포넌트 클래스, JSX안에 사용 되는 이름은 컴포넌트 인스턴스가 된다. 이렇게 JSX컴포넌트와 인스턴스 사이를 엮는 것이다.
1 2 3 4 5
// DOM에 렌더링하기 전에 컴포넌트를 인스턴스화해야한다.->JSX를 이용. ReactDOM.render(<App />);
// ReactDOM.render(App); // 이렇게 전달하면 '클래스'를 전달한 것.
주의 rest 파라미터와 spread는 형태가 ‘…’으로 동일한데 rest는 함수에 전달된 인수들의 목록을 배열로 전달받기 위해서 매개변수 앞에 …을 붙이는 것이고, 스프레드는 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 만드는 것이다. 서로 정반대의 개념이다. 참고로 배열에서 rest는 반드시 맨마지막에 위치해야 한다. spread는 어디에 오든 상관없다.
ES6 이전의 함수는 일반함수, 생성자 함수, 메소드의 호출 등 동일한 함수도 다양한 형태로 호출할 수 있었다. 즉 callable이면서 constructor이다. 객체에 바인딩 된 메소드 역시 일반 함수 또는 생성자 함수로 호출 가능하다. 그런데 이와 같은 경우 불필요한 프로토타입 객체를 생성한다.
1 2 3 4
var foo = function () {};
foo(); //일반함수로 호출 new foo(); //생성자 함수로 호출
ES6에서는 함수 호출방식에 제약이 없어 생기는 문제를 방지하고자 함수를 사용 목적에 따라 3가지로 구분한다.
ES6 함수의 구분
constructor
prototype
super
arguments
일반함수
O
O
X
O
메소드
X
X
O
O
화살표 함수
X
X
X
X
메소드
ES6 사양에서 메소드는 메소드 축약 표현으로 정의된 함수 만을 의미한다. 따라서 메소드는 생성자 함수로 호출할 수 없고, 인스턴스 생성, 프로퍼타입 프로퍼티, 프로토타입 등을 생성하지 않는다. 또한 메소드가 바인딩된 객체를 가리키는 내부 슬롯 [[HomeObject]]를 갖고, 이를 이용하여 super키워드를 사용할 수 있다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14
const obj = { x: 1, // foo는 메소드이다. foo() { returnthis.x; }, // bar에 바인딩된 함수는 메소드가 아닌 일반 함수이다. bar: function () { returnthis.x; }, };
기존의 함수 정의 방법보다 간략하게 정의할 수 있고, 콜백 함수 내부에서 this가 전역 객체를 가리키는 문제를 해결하는 데 유용하다. 항상 익명이며, 생성자로 사용할 수 없다.
화살표 함수 정의
매개변수 선언
매개변수가 여러 개면 소괄호 안에 매개 변수를 선언한다. 한개인 경우 소괄호를 생략할 수 있다. (x,y) => {...}
매개 변수가 없을 때 소괄호를 생략할 수 없다. () => {...}
함수 몸체 정의
함수 몸체가 한 줄의 문으로 구성된다면 함수 몸체를 감싸는 중괄호 {}를 생략할 수 있다. 이때 문은 암묵적으로 반환된다. 몸체가 여러 줄로 구성된다면 중괄호를 생략할 수 없고, 반환값이 있다면 명시적으로 반환한다. x => x * x; // 왼쪽의 표현과 동일하다. x => { return x * x; }
화살표 함수는 인스턴스를 생성할 수 없으므로 prototype 프로퍼티가 없고 프로토타입도 생성하지 않는다.
중복된 매개 변수 이름을 선언할 수 없다. const arrow = (a, a) => a + a; // SyntaxError: Duplicate parameter name not allowed in this context
화살표 함수는 함수 자체의 this, arguments, super, new.target 바인딩을 갖지 않는다. 따라서 화살표 함수 내부에서 this, arguments, super, new.target를 참조하면 스코프 체인을 통해 상위 컨텍스트의 this, arguments, super, new.target를 참조한다.
this
화살표 함수는 함수 자체의 this 바인딩이 없다. 화살표 함수 내부에서 this를 참조하면 상위 컨텍스트의 this를 그대로 참조한다. 이를 Lexical this라 한다. 이는 마치 렉시컬 스코프(“12.7. 렉시컬 스코프” 참고)와 같이 화살표 함수의 this가 함수가 정의된 위치에 의해 결정된다는 것을 의미한다.
일반 객체와 배열의 가장 큰 차이점은 배열은 값의 순서가 있고, length 프로퍼티를 갖는다는 것이다. 따라서 순차적으로 순회하면서 요소에 접근할 수도 있고, 특정 위치부터 요소에 접근할 수도 있다.
자바스크립트의 배열
일반적으로 배열은 밀집배열이다. 동일한 크기의 메모리 공간에 동일한 타입의 값이 연속적으로 나열된 자료 구조를 뜻한다. 메모리 공간이 동일하기 때문에 검색 대상 요소의 메모리 주소 = 배열의 시작 메모리 주소 + 인덱스 \ 요소의 바이트 수*로 빠르고 효율적으로 요소에 접근할 수 있다. 그러나 연속적으로 구성되어 있기 때문에 배열에 요소를 삽입하거나 삭제하려면 연속성을 유지하기 위해 요소를 이동시켜야한다는 단점도 존재한다.
자바스크립트의 배열은 메모리 공간의 크기가 동일하지 않아도 되고, 동일한 타입으로 구성되지 않아도 되며, 연속적으로 이어져 있지 않을 수 있다. 이를 희소배열이라 한다. 즉 자바스크립트의 배열은 일반적인 배열(밀집 배열)의 동작을 흉내내어 인덱스를 프로퍼티 키로 갖고, length 프로퍼티를 갖는 특수 객체라고 할 수 있다.
일반적인 배열: 인덱스에 접근하는 속도가 빠르다.
자바스크립트 배열: 인덱스에 접근하는 속도는 일반적인 배열보다 느리지만 특정 요소를 탐색, 요소를 삽입 또는 삭제할 때는 더 빠르다.
length 프로퍼티와 희소 배열
[].length //0 [1,2,3].length //3
배열에 요소를 추가하거나 삭제하면 자동 갱신
length 프로퍼티 값보다 작은 숫자 값을 할당하면 배열의 길이는 줄어든다.
length 프로퍼티 값보다 큰 숫자 값을 할당하면 프로퍼티 값은 변경되고, 실제 배열의 길이가 늘어나는 것은 아니다.
1 2 3 4 5 6 7 8
const arr = [1];
// length 프로퍼티에 현재 length 프로퍼티 값보다 큰 숫자 값을 할당 arr.length = 3;
// length 프로퍼티 값은 변경되지만 실제로 배열의 길이가 늘어나지는 않는다. console.log(arr.length); // 3 console.log(arr); // [1, empty × 2]
위와 같은 경우 값은 변경되지만 실제 배열에 아무런 영향이 없다. 이렇게 배열의 요소가 연속적으로 위치하지 않고 일부가 비어있는 배열을 희소배열이라 한다. 희소배열은 length와 배열 요소의 개수가 일치하지 않다.
배열 생성
배열 리터럴
배열 리터럴은 0개 이상의 요소를 쉼표로 구분하여 대괄호([])로 묶는다. 배열 리터럴은 객체 리터럴과 달리 프로퍼티 이름이 없고 값만이 존재한다.
첫번째 인수에 의해 생성된 배열의 요소값과 인덱스는 두번째 인수에 호출할 함수에게 전달되고 호출된다.
1 2 3 4 5 6
// Array.from의 두번째 인수로 배열의 모든 요소에 대해 호출할 함수를 전달할 수 있다. // 이 함수는 첫번째 인수에 의해 생성된 배열의 요소값과 인덱스를 순차적으로 전달받아 호출된다. const arr3 = Array.from({ length: 5 }, function (v, i) { return i; }); console.log(arr3); // [0, 1, 2, 3, 4]
원본 배열에서 인수로 전달된 요소를 검색하여 인덱스를 반환한다. 중복되는 요소가 있으면 첫번째 인덱스를 반환하고, 해당하는 요소가 없으면 -1을 반환한다.
1 2 3 4 5 6 7 8
const arr = [1, 2, 2, 3];
// 배열 arr에서 요소 2를 검색하여 첫번째 인덱스를 반환 arr.indexOf(2); // -> 1 // 배열 arr에서 요소 4가 없으므로 -1을 반환 arr.indexOf(4); // -1 // 두번째 인수는 검색을 시작할 인덱스이다. 두번째 인수를 생략하면 처음부터 검색한다. arr.indexOf(2, 2); // 2
Array.prototype.push
인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 값을 반환한다. push 메소드는 원본 배열을 직접 변경한다.
1 2 3 4 5 6 7 8
const arr = [1, 2];
// 인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가하고 변경된 length 값을 반환한다. let result = arr.push(3, 4); console.log(result); // 4
shift 메소드는 원본 배열에서 첫번째 요소를 제거하고 제거한 요소를 반환한다. 원본 배열이 빈 배열이면 undefined를 반환한다. shift 메소드는 원본 배열을 직접 변경한다.
1 2 3 4 5 6 7 8
const arr = [1, 2];
// 원본 배열에서 첫번째 요소를 제거하고 제거한 요소를 반환한다. let result = arr.shift(); console.log(result); // 1
// shift 메소드는 원본 배열을 직접 변경한다. console.log(arr); // [2]
Array.prototype.concat
concat 메소드는 인수로 전달된 값들(배열 또는 값)을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환한다. 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가한다. 원본 배열은 변경되지 않는다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18
const arr1 = [1, 2]; const arr2 = [3, 4];
// 배열 arr2를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환 // 인수로 전달한 값이 배열인 경우, 배열을 해체하여 새로운 배열의 요소로 추가한다. let result = arr1.concat(arr2); console.log(result); // [1, 2, 3, 4]
// 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환 result = arr1.concat(3); console.log(result); // [1, 2, 3]
// 배열 arr2와 숫자를 원본 배열 arr1의 마지막 요소로 추가한 새로운 배열을 반환 result = arr1.concat(arr2, 5); console.log(result); // [1, 2, 3, 4, 5]
// 원본 배열은 변경되지 않는다. console.log(arr1); // [1, 2]
concat은 원본 배열을 직접 변경하지 않고, 반드시 반환값을 변수에 할당해야한다. 반면에 push, unshift는 원본 배열을 직접 변경하며, 반드시 원본 배열을 변수에 할당해야 한다.
인수로 전달받은 값이 배열인 경우, push와 unshift 메소드는 배열을 그대로 원본 배열의 마지막/첫번째 요소로 추가하지만 concat 메소드는 인수로 전달받은 배열을 해체하여 새로운 배열의 마지막 요소로 추가한다.
// 중첩 배열을 평탄화하기 위한 깊이 값을 2로 지정하여 2단계 깊이까지 평탄화한다. console.log([1, [2, [3, [4]]]].flat(2)); // [1, 2, 3, [4]] // 2번 평탄화한 것과 동일하다. console.log([1, [2, [3, [4]]]].flat().flat()); // [1, 2, 3, [4]]
// 중첩 배열을 평탄화하기 위한 깊이 값을 Infinity로 지정하여 끝까지 평탄화한다. console.log([1, [2, [3, [4]]]].flat(Infinity)); // [1, 2, 3, 4]
배열 고차함수(HOF)
자바스크립트에서 함수는 일급 객체이므로 함수를 값처럼 인수로 전달하거나 반환할 수 있고, 이처럼 함수를 인수로 전달받거나 함수를 반환하는 함수를 고차 함수라 한다.
외부 상태의 변경, 가변데이터를 피하고 불변성을 지향하는 함수형 프로그래밍 기반
조건문, 반복문을 제거하여 상태 변경을 피하고자 한다.
순수 함수를 통해 부수 효과를 최대한 억제한다.
공통점: 자신을 호출한 배열의 요소를 순회하며 인수로 전달받은 콜백 함수 반복 호출
차이점
forEach
undefined 반환
map
콜백 함수의 반환값으로 구성된 새로운 배열 반환
filter
콜백 함수의 반환값이 true인 요소로 구성된 새로운 배열 반환
reduce
콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환
콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. 원본 배열은 변경되지 않는다.
1 2 3 4 5 6 7
const numbers = [1, 2, 3, 4, 5];
// filter 메서드는 numbers 배열의 모든 요소를 순회하면서 콜백 함수를 반복 호출한다. // 그리고 콜백 함수의 반환값이 true인 요소로만 구성된 새로운 배열을 반환한다. // 다음의 경우 numbers 배열에서 홀수인 요소만을 필터링한다(1은 true로 평가된다). const odds = numbers.filter((item) => item % 2); console.log(odds); // [1, 3, 5]
Array.prototype.reduce
자신을 호출한 배열을 모든 요소를 순회하며 인수로 전달받은 콜백 함수를 반복 호출한다. 그리고 콜백 함수의 반환값을 다음 순회 시에 콜백 함수의 첫 번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과값을 만들어 반환한다. 원본 배열은 변경되지 않는다.
Array.prototype.some
콜백 함수의 반환값이 단 한 번이라도 참이면 true, 모두 거짓이면 false를 반환한다. 즉, 배열의 요소 중에 콜백 함수를 통해 정의한 조건을 만족하는 요소가 1개 이상 존재하는지 확인하여 그 결과를 불리언 타입으로 반환한다. 단, some 메서드를 호출한 배열이 빈 배열인 경우 언제나 false를 반환한다.
1 2 3 4 5 6 7 8 9 10 11
// 배열의 요소 중에 10보다 큰 요소가 1개 이상 존재하는지 확인 [5, 10, 15].some((item) => item > 10); // -> true
// 배열의 요소 중에 0보다 작은 요소가 1개 이상 존재하는지 확인 [5, 10, 15].some((item) => item < 0); // -> false
// 배열의 요소 중에 'banana'가 1개 이상 존재하는지 확인 ['apple', 'banana', 'mango'].some((item) => item === 'banana'); // -> true
// some 메서드를 호출한 배열이 빈 배열인 경우 언제나 false를 반환한다. [].some((item) => item > 3); // -> false
Array.prototype.every
콜백 함수의 반환값이 모두 참이면 true, 단 한 번이라도 거짓이면 false를 반환한다. 즉, 배열의 모든 요소가 콜백 함수를 통해 정의한 조건을 모두 만족하는지 확인하여 그 결과를 불리언 타입으로 반환한다. 단, every 메서드를 호출한 배열이 빈 배열인 경우 언제나 true를 반환힌다.
1 2 3 4 5 6 7 8
// 배열의 모든 요소가 3보다 큰지 확인 [5, 10, 15].every((item) => item > 3); // -> true
// 배열의 모든 요소가 10보다 큰지 확인 [5, 10, 15].every((item) => item > 10); // -> false
// every 메서드를 호출한 배열이 빈 배열인 경우 언제나 true를 반환한다. [].every((item) => item > 3); // -> true
Array.prototype.find
반환값이 true인 첫 번째 요소를 반환한다. 콜백 함수의 반환값이 true인 요소가 존재하지 않는다면 undefined를 반환한다.
// 인스턴스의 프로퍼티 참조 console.log(me.name); // Lee // 프로토타입 메소드 호출 me.sayHi(); // Hi! My name is Lee // 정적 메소드 호출 Person.sayHello(); // Hello!
클래스 호이스팅
클래스 정의 이전에 참조할 수 없다.
클래스 선언문도 변수 선언, 함수 정의와 마찬가지로 호이스팅이 발생한다. 단, 클래스는 let, const 키워드로 선언한 변수처럼 호이스팅된다. 따라서 클래스 선언문 이전에 일시적 사각지대(Temporal Dead Zone; TDZ)에 빠지기 때문에 호이스팅이 발생하지 않는 것처럼 동작한다.
인스턴스 생성
클래스는 함수로 평가되므로 생성자 함수이며 new 연산자와 함께 호출되어 인스턴스를 생성한다. new 연산자를 절대 생략하면 안된다.
1 2 3 4 5 6
classPerson{}
// 인스턴스 생성 const me = new Person();
console.log(me); // Person {}
constructor
클래스는 인스턴스를 생성하기 위한 생성자 함수이며, constructor는 인스턴스를 생성하고 초기화하기 위한 특수한 메소드이다. 클래스 내에 한 개만 존재해야 하며, 생략도 가능하다 생략하여도 디폴트 constructor가 암묵적으로 정의된다.constructor는 이름을 변경할 수 없다. constructor 내부의 this는 클래스가 생성할 인스턴스를 가리킨다.
1 2 3 4 5 6 7
classPerson{ // 생성자 constructor(name) { // 인스턴스 생성 및 초기화 this.name = name; } }
constructor 내에서는 인스턴스의 생성과 동시에 인스턴스 프로퍼티 추가를 통해 인스턴스의 초기화를 실행한다. 따라서 인스턴스를 초기화하려면 constructor를 생략해서는 안된다. 또한 별도의 반환문을 갖지 않아야 한다. 생성자 함수와 마찬가지로 암묵적으로 this를 반환하기 때문이다.
// 명시적으로 원시 값을 반환하면 원시 타입의 반환은 무시되고 암묵적으로 this가 반환된다. return100; } }
const me = new Person('Lee'); console.log(me); // Person { name: "Lee" }
프로토타입 메소드
생성자 함수는 프로토타입 메소드를 생성하고자 할 때 명시적으로 프로토타입 메소드를 추가해야 한다. 클래스 몸체에서 정의한 메소드는 생성자 함수에 의한 객체 생성 방식과는 다르게 클래스의 prototype 프로퍼티에 메소드를 추가하지 않아도 기본적으로 프로토타입 메소드가 된다.
1 2 3 4 5 6 7 8 9 10
//생성자함수의 프로토타입 메소드 Person.prototype.sayHi = function () { console.log(`Hi! My name is ${this.name}`); };
//클래스의 프로토타입 메소드 sayHi() { console.log(`Hi! My name is ${this.name}`); } }
정적 메소드
정적 메소드는 인스턴스를 생성하지 않아도 호출할 수 있는 메소드를 말하는데, 생성자 함수의 경우 명시적으로 메소드를 추가해야 한다. 하지만 class에서는 메소드에 static 키워드를 붙이면 정적 메소드(클래스 메소드)가 된다. 정적 메소드는 클래스 자신의 메소드가 되며, 인스턴스를 생성하지 않아도 호출할 수 있다. 또한 인스턴스의 프로토타입 체인 상에 존재하지 않으므로 인스턴스로 호출할 수 없다.
1 2 3 4 5 6 7 8 9 10
// 생성자 함수의 정적 메소드 Person.sayHi = function () { console.log('Hi!'); };
정적 메소드와 프로토타입 메소드는 소속해 있는 프로토타입 체인이 다르기 때문에 정적 메소드는 클래스로 호출, 프로토타입 메소드는 인스턴스로 호출한다.
정적 메소드는 인스턴스 프로퍼티를 참조할 수 없지만 프로토타입 메소드는 인스턴스 프로퍼티를 참조할 수 있다.
정적 메소드와 프로토타입 메소드는 내부의 this바인딩이 다르다. this를 사용하지 않는 메소드는 정적 메소드, 인스턴스 프로퍼티를 참조할 필요가 있어 this를 사용해야 한다면 프로토타입 메소드로 정의한다.
정적 메소드의 내부는 클래스를 가리킨다.
프로토타입 메소드의 내부는 메소드를 호출한 객체, 즉 메소드 이름 앞의 마침표(.) 연산자 앞에 기술한 객체에 바인딩된다.
클래스에서 정의한 메소드의 특징
function 키워드를 생략한 메소드 축약 표현을 사용한다.
객체 리터럴과는 다르게 클래스에 메소드를 정의할 때는 콤마가 필요 없다.
암묵적으로 strict 모드로 실행된다.
for…in 문이나 Object.keys 메소드 등으로 열거할 수 없다. 즉, 프로퍼티의 열거 가능 여부를 나타내며 불리언 값을 갖는 프로퍼티 어트리뷰트 [[Enumerable]]의 값이 false이다.
내부 메소드 [[Construct]]를 갖지 않는 non-constructor이다. 따라서 new 연산자와 함께 호출할 수 없다.
클래스 필드 정의 제안
클래스 필드(필드 또는 멤버)는 클래스 기반 객체지향 언어에서 클래스가 생성할 인스턴스의 프로퍼티를 가리키는 용어이다. 자바스크립트는 인스턴스 프로퍼티를 선언하고 초기화하려면 반드시 생성자 함수 몸체 또는 클래스의 constructor 내부에서 this에 프로퍼티를 추가해야 한다. 인스턴스 프로퍼티를 참조할 때도 this를 사용해서 참조한다. 또한 클래스 몸체에는 메소만 선언할 수 있으므로 클래스 필드를 선언하면 에러가 발생한다. 클래스 필드에 초기값을 할당하지 않으면 undefined가 된다. 만약 외부의 초기값으로 클래스 필드를 초기화해야 한다면 constructor에서 초기화한다.
constructor 내부에서 this를 통해 정의한 인스턴스 프로퍼티는 인스턴스를 통해 클래스 외부에서 언제나 참조할 수 있다. 즉, 언제나 public이다.
const v = new Video("a"); //{} //Video {title: "a"} // 생성자 함수는 전역을 참조하는 것이 아니라 new가 생성할 빈 객체를 참조한다.
1 2 3 4 5 6 7 8 9 10 11 12
const video = { title: "a", tags: ["a", "b", "c"], showTags() { this.tags.forEach(function(tag) { // to get the current object and then get the tags property console.log(this.title, tag); }, this); } };
표준 빌트인 객체: ECMAScript 사양에 정의된 객체이며 자바스크립트 실행 환경(브라우저 또는 Node.js 환경)과 관계없이 언제나 사용할 수 있다. 표준 빌트인 객체는 전역 객체의 프로퍼티로서 제공된다. 따라서 별도의 선언없이 전역 변수처럼 언제나 참조할 수 있다.
호스트 객체: ECMAScript 사양에 정의되어 있지 않지만 자바스크립트 실행 환경(브라우저 환경 또는 Node.js 환경)에서 추가적으로 제공하는 객체
사용자 정의 객체: 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체
표준 빌트인 객체
40여개의 표준 빌트인 객체가 있는데 Math, Reflect, JSON을 제외한 표준 빌트인 객체는 모두 인스턴스를 생성할 수 있는 생성자 함수 객체이다. 생성자 함수 객체인 표준 빌트인 객체는 프로토타입 메소드와 정적 메소드를 제공하고 생성자 함수 객체가 아닌 표준 빌트인 객체는 정적 메소드만을 제공한다.
1 2 3 4 5 6
// String 생성자 함수에 의한 String 객체 생성 const strObj = newString("Lee"); console.log(typeof strObj); // object console.log(strObj); // String {"Lee"}
생성자 함수인 표준 빌트인 객체가 생성한 인스턴스의 프로토타입은 표준 빌트인 객체의 prototype 프로퍼티에 바인딩된 객체이다. 예를 들어 표준 빌트인 객체인 String을 생성자 함수로서 호출하여 생성한 String 인스턴스의 프로토타입은 String.prototype이다.
원시값과 래퍼 객체
1 2 3 4 5
const str = "hello";
// 원시 타입인 문자열이 프로퍼티와 메소드를 갖고 있다. console.log(str.length); // 5 console.log(str.toUpperCase()); // HELLO
원시값은 객체가 아니므로 프로퍼티나 메소드를 가질 수 없지만 위의 예시에서는 원시값인 문자열이 마치 객체처럼 동작한다. 문자열, 숫자, 불리언 값에 대해서는 객체처럼 마침표 표기법이나 대괄호 표기법으로 접근하면 일시적으로 임시 객체가 생성되는데 이를 래퍼객체라 한다. 단, 메소드로 접근하여 호출이 끝나면 다시 원시값으로 돌아간다.
전역객체
코드가 실행되기 이전 단계에 자바스크립트 엔진에 의해 어떤 객체보다도 먼저 생성되는 특수한 객체이며 어떤 객체에도 속하지 않은 최상위 객체. 브라우저 상에서는 window, Node.js 환경에서는 global을 말한다.
개발자가 의도적으로 생성할 수 없고, 전역 객체의 프로퍼티를 참조할 때 window나 global은 생략 가능.
var는 전역 객체의 프로퍼티이지만 let,const 키워드로 선언한 전역 변수는 전역 객체의 프로퍼티가 아니다.
암묵적 전역
1 2 3 4 5 6 7 8 9
var x = 10; // 전역 변수
functionfoo() { y = 20; // 선언하지 않은 식별자에 값을 할당 } foo();
// 선언하지 않은 식별자 y를 전역에서 참조할 수 있다. console.log(x + y); // 30
위의 경우 자바스크립트 엔진은 y = 20을 window.y = 20으로 해석하여 전역 객체에 프로퍼티를 동적 생성한다. 결국 y는 전역 객체의 프로퍼티가 되어 마치 전역 변수처럼 동작한다. 이를 암묵적 전역이라 한다.
변수 선언: 변수를 생성하는 것. 자바스크립트 엔진은 선언-초기화의 2단계에 걸쳐 변수 선언을 수행한다.
선언 단계: 변수 이름을 등록하여 자바스크립트 엔진에 변수의 존재를 알린다.
초기화 단계: 값을 저장하기 위한 메모리 공간을 확보하고 암묵적으로 undefined를 할당.
1 2
console.log(score); //undefined var score; //변수 선언문
보통 자바스크립트 코드는 한 줄씩 순차적으로 실행되기 때문에 console.log(score);가 먼저 실행된 후 순차적으로 코드가 실행된다. 그런데 console.log(score);가 실행되는 시점에는 변수 선언이 아직 실행되지 않았기 때문에 식별자를 찾아서 값을 참조하려고 했는데 찾을 수 없는 typeError가 발생해야 한다. 그런데 코드를 실행해보면 typeError 대신 undefined라는 값을 출력한다.
자바스크립트 엔진은 런타임 이전에 모든 선언문(변수 선언문, 함수 선언문 등)을 소스 코드에서 찾아내서 먼저 실행한다. 따라서 선언문이 어느 위치에 있던지 상관없이 런타임 이전에 먼저 실행된다. 그렇기 때문에 변수 선언 이전에 값을 참조할 수 있다. 이렇게 변수 선언문이 코드의 선두로 끌어올려진 것 처럼 동작하는 것이 변수 호이스팅이다.
함수 호이스팅
함수 선언문: 함수 선언문 이전에 호출가능 - 함수 호이스팅
함수 표현식: 함수 선언문 이전에 호출불가 - 변수 호이스팅
함수 호이스팅 모든 선언문은 런타임 이전에 실행되기 때문에 함수 선언문도 런타임 이전에 실행된다. 함수는 런타임 이전에 함수 객체를 생성하고 함수 객체와 동일한 식별자에 할당을 완료한다. 따라서 함수 선언문 이전에 값을 참조하거나 호출할 수 있다.
변수 호이스팅 함수 표현식은 변수 할당문의 값이 함수 리터럴인 문이다. 따라서 변수 선언문과 변수 할당문의 축약 표현과 동일하게 동작한다. 따라서 함수 표현식을 표현식 이전에 호출하면 typeError, 참조하면 undefined가 발생한다. 변수 할당문의 값은 할당문이 실행되는 런타임에 평가되기 때문에 런타임 때 비로소 평가되어 함수 객체가 된다.
var와 let의 차이점 var와 let 모두 런타임 이전에 암묵적으로 선언단계가 실행된다. 그런데 var는 런타임 이전에 선언을 하고 undefined라는 값으로 초기화하는 단계까지 진행된다. 따라서 런타임 이전에 값을 호출하면 undefined라는 값이 출력되는 것이다. 그러나 let은 런타임 이전에 선언 단계만 실행된다. 초기화는 런타임 때 변수 선언문을 만났을 때 이루어지기 때문에 스코프의 시작 지점부터 변수 선언문을 만나 초기화가 이루어지는 단계까지는 변수에 접근하려고 해도 참조 에러가 발생하게 되는 것이다. 이를 일시적 사각지대라고 한다.