I'm a Fig, Not a Pig

.entries() entries() 메서드는 배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다. -MDN 자바스크립트의 타입 중 객체는 배열처럼 하나가 아닌 여러 개의 값을 키, 밸류 형태로 가지고 있다. 만약 객체가 가진 모든 키와 값을 확인하길 원하는 경우라면 entries()를 사용하면 편리하다. entries()는 객체가 가지고 있는 모든 프로퍼티를 키와 값 쌍으로 배열 형태로 반환하여 주기 때문에 어떤 프로퍼티와 값으로 이루어졌는지 한 눈에 확인할 수 있다. 구문 Object.entries() // 모든 프로퍼티와 값을 배열로 반환함 예제 let a = ['a', 'b', 'c']; let iterator = a.entries(); for (let..

▷ 자바스크립트 타입 변환 (X to string) 숫자나 불리언을 문자열로 형변환 하는 방법은 3가지 정도입니다. 1. (숫자 or 불리언).toString() 2. String(숫자 or 불리언) 3. "" + (숫자 or 불리언) 1. 숫자를 문자열로 변환 (number to string) 1. (숫자).toString() : Object.prototype.toString 메서드를 활용하는 방법 (111).toString() // "111" (NaN).toString() // "NaN" (Infinity).toString() // "Infinity" 2. String(숫자) : String 생성자 함수를 new 없이 활용하는 방법 String(111) // "111" String(NaN) // "N..

목차 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)란? 함수가 실행..