I'm a Fig, Not a Pig

목차 1. 배열(array)에서의 구조 분해 할당 2. 객체(object)에서의 구조 분해 할당 구조 분해 할당 문법은 배열 혹은 객체에서 각각 값(value)이나 프로퍼티(property) 를 분해하여 손쉽게 별도의 변수에 담을 수 있도록 해준다. 1. 배열(array)에서의 구조 분해 할당 구조 분해 할당은 할당받을 변수를 왼쪽에, 분해할 대상을 오른쪽에 해서 대입하는 형식으로 작성하면 된다. const [i, ,j] = [2, 4, [5, 6]]; console.log(i,j); // 2 [5, 6] 아래와 같이 미리 저장해 둔 배열로부터 구조 분해 할당하는 형태도 가능다. const nested = [2, 4, [5, 6]]; const [i, ,j] = nested; console.log(i,j..

목차 1. 단축평가 2. 옵셔널 체이닝 연산자 3.nullish 병합 연산자 '??' 1. 단축평가 단축 평가란 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것이다. 단축 평가의 논리곱과 논리합 연산자는 논리 연산의 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환한다. 1. 논리곱(&&) 연산자 논리곱(&&) 연산자는 두개의 피연산자가 모두 true 로 평가될 때 true 를 반환한다. 논리곱 연산자는 좌항에서 우항으로 평가가 진행된다. ( false가 우선 나와버리면 AND 뒤에 나오는 연산은 생략 ) 2. 논리합(||) 연산자 논리합(||) 연산자는 두개의 피연산자 중 하나만 true 로 평가되어도 true 를 반환한다. 논리합 연산자 또한 좌항에서 우항으..

Set - Set 객체는중복을 허용하지 않는 값들의 집합입니다. - Set 객체의 특징 동일한 값을 중복하여 포함할 수 없음 요소 순서에 의미가 없음 인덱스로 요소에 접근할 수 없음 * 여러개의 값들을 나열할 수 있는 것은 Array, 중복을 제거한 집합은 Set 임. 또한 조회에 있어서 Set이 Array에 비해 훨씬 빠름. 1.set객체의 생성 - set객체는 set 생성자 함수로 생성합니다. - 인수를 전달하지 않으면 빈 set객체가 생성됩니다. - set 생성자 함수는 이터러블을 인수로 받아 set객체를 생성합니다. - 이때 이터러블의 중복된 값은 아래의 예시처럼 set객체에 요소로 저장되지 않습니다. const set = new Set(); console.log(set); // Set(0) {}..

목차 1. 배열에서의 Spread Operator 2. 객체에서의 Spread Operator 3. Destructuring 4. 함수에서의 Spread Operator 스프레드 연산자는 ES6에서 추가된 문법이다. 점 세개가 연달아 있는 '...'로 표시되며 특정 객체 또는 배열의 값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다. 1. 배열에서의 스프레드 연산자 - 배열병합 ES6의 Spread 연산자를 사용하면 배열병합이 가능하다. let arr1 = [1,2,3]; let arr2 = [4,5,6]; let arr = [...arr1, ...arr2]; console.log(arr); // [ 1, 2, 3, 4, 5, 6 ] - 배열복사 ES6의 Spread 연산자를 사용하면 다음과 같이 새..

목차 1. 배열 디스트럭처링 (Array destructuring) 2. 객체 디스트럭처링 (Object destructuring) 디스트럭처링이란 구조화된 배열 또는 객체를 Destructuring(비구조화, 파괴)하여 개별적인 변수에 할당하는 것이다. 배열 또는 객체 리터럴에서 필요한 값만을 추출하여 변수에 할당하거나 변환할 때 유용하다. 1. 배열 디스트럭처링 (Array destructuring) ES6의 배열 디스트럭처링은 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 이때 추출/할당 기준은 배열의 인덱스이다. // ES6 Destructuring const arr = [1, 2, 3]; // 배열의 인덱스를 기준으로 배열로부터 요소를 추출하여 변수에 할당 // 변수 one, t..

오늘은 Object.assign에 대해 다뤄보겠습니다. Object.assign는 객체를 병합하는 메서드인데요, 병합 이외에도 다양한 조작이 가능하기 때문에 예제를 통해 Object.assign에 대해 알아보겠습니다. 먼저 표현식은 다음과 같습니다. Object.assign(target, ...sources) object.assign 메서드의 첫 번째 인자는 타겟입니다. 두 번째 인자부터 마지막 인자까지는 소스 오브젝트입니다. 소스 오브젝트는 타겟 오브젝트에 병합되며 리턴값으로 타겟오브젝트를 반환합니다. 예제 예제를 통해 알아보겠습니다. const jessica2 = { firstName: 'Jessica', lastName: 'Williams', age: 27, family: [ 'Alice', 'Bo..

목차 1. 호이스팅이란? 2. 호이스팅의 대상 3. 함수선언문과 함수표현식에서의 호이스팅 4. 함수표현식에서의 호이스팅 5. 호이스팅 우선순위 1. 호이스팅(Hoisting)이란? 호이스팅(Hoisting) : 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 말합니다. 자바스크립트 Parser가 함수 실행 전 해당 함수를 한 번 훑은뒤 함수가 실행되기 전에 함수 안에 필요한 변수값들을 모두 모아서 유효 범위의 최상단에 선언합니다. 이후 함수 안에 존재하는 변수/함수선언에 대한 정보를 기억하고 있다가 실행시킵니다. 유효 범위: 함수 블록 {} 안에서 유효 즉, 함수 내에서 아래쪽에 존재하는 내용 중 필요한 값들을 끌어올리는 것 입니다. 실제로 코드가 끌어올려지는 건 ..

var x = 'global'; function foo () { var x = 'function scope'; console.log(x); } foo(); // ? console.log(x); // ? 위 예제는 이름이 같은 변수 x가 중복 선언되었습니다. 전역에서 변수 x를 참조할 때, 그리고 함수 foo 내부에서 변수 x를 참조할 때 이름이 중복된 2개의 변수 중 어떤 변수를 참조해야 할까요? 자바스크립트는 어떻게 변수를 식별하는 것일까요? 위 예제에서 전역에 선언된 변수 x는 어디에든 참조할 수 있습니다. 하지만 함수 foo 내에서 선언된 변수 x는 함수 foo 내부에서만 참조할 수 있고 함수 외부에서는 참조할 수 없습니다. 이러한 규칙을 스코프라고 합니다. 1. 스코프(scope)란? 함수가 실행..

1. interpreter vs compiler컴파일 언어와 인터프리터 언어의 가장 큰 차이점은 컴파일 유무이다.둘의 차이를 알려면 우선 컴파일이 어떤건지 알아야 한다.- 컴파일이란?인간이 알아듣기 쉬운 프로그래밍 언어인 High Level Language(고수준언어)를 기계가 알아들을 수 있는 0과 1로 이루어진 기계 언어인 Low Level Language(저수준언어)로 변환시키는 것 이다.- 그렇다면 고수준언어, 저수준언어는 무엇일까?1. 저수준언어0과 1로만 이루어져 있는, 컴퓨터가 이해하기 쉬운 언어를 뜻한다.2. 고수준 언어사람이 이해하기 쉬운 언어를 말한다. print,if,while 등의 문법 같이 인간이 사용하는 언어들로 이루어져 있다. 공식적인 분류법은 아니고 자연스럽게 사람들이 부르기..

목차 1. 자바스크립트 엔진 2. 엔진 동작 원리 3. 런타임 4. 콜 스택, 메모리 힙의 데이터 저장 구조 1. 자바스크립트 엔진 자바스크립트 엔진: 자바스크립트 코드를 실행하는 프로그램 또는 인터프리터(해석기). 대체적으로 웹 브라우저에서 사용된다. ex. V8 Engine: 구글 크롬 혹은 Node.JS에서 작동하는 자바스크립트 엔진이다. V8 이 외에도 각각의 브라우저마다 다른 자바스크립트 엔진이 존재한다. 엔진에 의한 인터프리터 방식이기 때문에 별도의 컴파일 과정이 필요없다. ( 웹브라우저에서 즉시 해석되어 실행됨 = 런타임 ) 2. 자바스크립트 엔진 동작 원리 모든 자바스크립트 엔진에는 Call Stack 과 Memory Heap의 영역이 존재한다. 엔진의 주요 구성요소 ▶ Memory Hea..