I'm a Fig, Not a Pig

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

목차 1. 화살표 함수란? 2. 기본문법 3. this 4. 화살표 함수의 this 바인딩 5. 화살표 함수를 쓰면 안되는 경우 1. 화살표 함수란? 화살표 함수는 ES6 에서 새로 등장한 함수 선언 방법이다. function 키워드를 사용해서 함수를 만든 것 보다 간단히 함수를 표현할 수 있다. // 일반 함수(함수 표현식) const sum = function(x, y) { return x + y; } sum(3, 4); //7 // 함수 선언식: function 키워드로 단독으로 함수를 선언한 것 // function sum(x,y) { // return x + y; // } 또한 화살표 함수는 익명 함수이다. // 화살표 함수 const sum = (x, y) => x + y; sum(3, 4);..

목차 1. append() 2. appendChild() 3. append() vs appendChild() 4. prepend() appen()과 appendChild()는 모두 부모 노드에 자식 노드를 추가하는 메서드이다. 1. append() const parent = document.createElement('div'); const child = document.createElement('p'); child.append('텍스트1','텍스트2'); // undefined parent.append(child); // undefined console.log(parent) // "텍스트 1" "텍스트 2" 우선 append 메소드를 살펴보면, 노드 객체뿐만 아니라 문자열 또한 추가할 수 있다. 또한 한..

목차 1. for 문 2. for...in 문 3. for...of 문 4. forEach문 1. for 문 반복문은 같은 명령문은 여러번 반복하는 구문이다. 대표적으로 for문이 있다. for (let i = 0; i < 5; ++i) { console.log(i + "번째 출력"); } // output: // 0번째 출력 // 1번째 출력 // 2번째 출력 // 3번째 출력 // 4번째 출력 for 문의 구조는 아래와 같다. let i = 0; → 초기화 (1) i < 5; → 조건식 (2) console.. → 실행문 (3) ++i → 증감문 (4) for 문의 초기화 부분에서 선언된 변수는 for문 외부에서 접근이 불가하다. 만약 접근하고 싶다면 외부에서 먼저 선언하면 된된다. let i; fo..

목차 1. querySelectorAll 2. 예제 1. querySelectorAll querySelectorAll()은 특정 CSS 선택자를 가진 모든 요소를 배열로 가져오는 메서드이다. querySelector()가 한 개의 요소를 반환했다면 querySelectorAll()은 주어진 CSS 선택자와 일치하는 모든 요소를 반환한다. 사용방법은 querySelector() 와 동일하며 HTML 요소가 아닌 nodeList 형태로 값을 반환한다. 따라서 인덱스를 통해 조작이 가능하고 반복문을 이용해 작성해야 한다. - 구문 document.querySelector(selectors); 2. 예제 1) 아래 코드는 클래스 값이 abc인 모든 요소를 가져온다. document.querySelectorAll..