I'm a Fig, Not a Pig

목차 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..

목차 1. 함수 표현식 2. 함수 선언식 3. 함수 표현식과 함수 선언식의 차이점 4. 화살표 함수 / 화살표 함수와 함수 표현식의 차이점 1. 함수 표현식 (function expressions) - 함수 표현식: 함수 리터럴로 생성한 함수를 변수에 할당하는 방법 아래의 코드는 함수의 참조값이 example1라는 변수로 저장된 예시이다. 주의할 것은 example1은 함수의 이름이 아니라는 것이다. function은 익명함수이고 함수가 할당된 변수인 example1을 통해 호출할 수 있다. 또한 함수 표현식에 함수 이름을 지정하였다고 해도, 호출 방식에는 영향을 미치지 않는다. (호이스팅 되지 않음) 함수 표현식으로 함수를 선언할 때는 세미콜론을 붙인다. const example1 = function ..

조건부 삼항 연산자는 JavaScript에서 세 개의 피연산자를 취할 수 있는 유일한 연산자입니다. 맨 앞에 조건문 들어가고. 그 뒤로 물음표(?)와 조건이 참truthy이라면 실행할 식이 물음표 뒤로 들어갑니다. 바로 뒤로 콜론(:)이 들어가며 조건이 거짓falsy이라면 실행할 식이 마지막에 들어갑니다. 보통 if 명령문의 단축 형태로 쓰입니다. - MDN 예제 1. 간단한 예제 let age = 26; let beverage = (age >= 21) ? "Beer" : "Juice"; console.log(beverage); // "Beer" 2. null 값을 처리할 때도 사용된다. let greeting = person => { let name = person ? person.name : `str..

목차 1. 객체 기본 설명 2. 객체를 만드는 규칙 3. 객체 생성 방식 4. 프로퍼티/메서드 접근 방법 5. 객체의 특징 6. this 7. 객체는 reference로 저장된다. 1. 객체 기본 설명 객체는 이름과 값으로 구성된 프로퍼티의 집합입니다. 객체는 한쌍의 이름과 값은 ','로 구분되어야 하고 이름과 값은 ':'으로 분리됩니다. 따라서 문법은 아래와 같습니다. const obj = { ojb1: 객체1, ojb2: 객체2 }; 아래 객체를 구성하는 것은 문자열, 숫자, 함수 입니다. 차례로 3개의 아이템은(문자열 2개와 숫자1개) 객체의 프로퍼티(속성)이라고 부르며 끝의 함수는 메소드라고 합니다. ▷ 정리 - 프로퍼티(속성): 객체가 보유한 값 - 메서드: 객체가 보유한 함수 (둘 다 프로퍼티..

음식값이 50에서 300사이면 음식값의 15%로 팁을 지불하고 이외에는 음식값의 20%로 팁을 지불해야 한다. 이후 총액(total)인 음식값 + 팁을 구한다. 문제상황: total이 숫자가 아닌 NaN이 떴다. const bill = 275; const tip = function(bills){ if(bill>=50 && bill=50 && bill=50 && bill