웹 애플리케이션의 클라이언트 사이드 자바스크립트는 브라우저에서 HTML, CSS와 함께 실행된다. 따라서 브라우저 환경을 고려할 때 더 효율적인 클라이언트 사이드 자바스크립트 프로그래밍이 가능하다. 브라우저가 HTML, CSS, JS로 작성된 텍스트 문서를 어떻게 파싱하여 브라우저에 렌더링하는지 알아보자. 파싱: 텍스트 문서의 문자열을 토큰으로 분해하고 토큰에 문법적 의미와 구조를 반영하여 트리 구조의 자료구조인 파스 트리를 생성한다. 렌더링: 렌더링은 HTML, CSS, JS로 작성된 문서를 파싱하여 브라우저에 시각적으로 출력하는 것을 말한다. 1. 요청과 응답 브라우저의 핵심 기능은 필요한 리소스를 서버에 요청하고 서버로부터 응답받아 브라우저에 시작적으로 렌더링하는 것 브라우저에 주소창에 URL을 입..

1. Set Set 객체는 중복되지 않는 유일한 값들의 집합이다. Set 객체는 배열과 유사하지만 다음과 같은 차이가 있다. 동일한 값을 포함할 수 없다. 요소 순서에 의미가 없다. 인덱스로 요소에 접근할 수 없다. 1-1 Set 객체의 생성 Set 생성자 함수로 생성 const set = new Set(); console.log(set); // Set(0) {} 배열에서 중복된 요소 제거 const uniq = array => array.filter((v, i, self) => self.indexOf(v) === i); console.log(uniq([2, 1, 2, 3, 4, 3, 4])); // [ 2, 1, 3, 4 ] // Set 이용 const uniq2 = array => [...new Se..

디스트럭처링 할당(구조 분해 할당)은 구조화된 배열과 같은 이터러블 또는 객체를 비구조화하여 1개 이상의 변수에 개별적으로 할당하는 것을 말한다. 1. 배열 디스트럭처링 할당 const arr = [1, 2, 3]; const [one, two, three] = arr; console.log(one, two, three); // 1 2 3 const [c, d] = [1]; console.log(c, d); // 1 undefined const [e, f] = [1, 2, 3]; console.log(e, f); // 1, 2 const [g, ,h] = [1, 2, 3]; console.log(g, h); // 1, 3 배열 디스트럭처링 할당을 위한 변수에 기본값을 설정할 수 있다. // 기본값 con..

스프레드 문법의 결과는 값이 아니다. 따라서 문법의 결과는 변수에 할당할 수 없다. const list = ...[1, 2, 3]; // SyntaxError: Unexpected token ... 1. 함수 호출문의 인수목록에서 사용하는 경우 const arr = [1, 2, 3]; const max = Math.max(arr); // NaN const max2 = Math.max(...arr); // 3 Rest 파라미터와 스프레드 문법의 차이점 // Rest 파라미터는 인수들의 목록을 배열로 전달받는다. function foo(...rest){ console.log(rest); // 1, 2, 3 -> [1, 2, 3] } // 스프레드 문법은 배열과 같은 이터러블을 펼쳐서 개별적인 값들의 목록을 ..

1. 심벌이란? ES6에서 도입된 7번째 데이터 타입으로 변경 불가능한 원시 타입의 값 2. 심벌 값의 생성 Symbol 함수를 호출하여 생성 const mySymbol = Symbol(); console.log(typeof mySymbol); // 확인할 수 없다. console.log(mySymbol); // Symbol() 생성된 심벌 값은 외부로 노출되지 않아 확인할 수 없으며, 다른 값과 절대 중복되지 않는 유일무이한 값이다. const mySymbol1 = Symbol('mySymbol'); const mySymbol2 = Symbol('mySymbol'); console.log(mySymbol1 === mySymbol2); // false 심벌 값도 객체처럼 접근하면 암묵적으로 래퍼 객체를 ..

1. String 생성자 함수 표준 빌트인 객체인 String 객체는 생성자 함수 객체다. String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 빈 문자열을 할당항 String 래퍼 객체를 생성한다. String 래퍼 객체는 유사 배열 객체다. const strObj = new String(); console.log(srtObj); // String {length: 0, [[PrimitiveValue]]: ""} 래퍼 객체: 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성되는 임시 객체(원시값은 객체가 아니므로 프로퍼티나 메서드를 가질수 없음) PrimitiveValue: 접근할 수 없는 프로퍼티 String 생성자 함수의 인수로 ..