I'm a Fig, Not a Pig

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

목차 1. Strict Mode란? 2. Strict Mode 장점 3. 사용방법 4. Strict Mode 에서 허용되지 않는 문법 1. Strict Mode 란? strict 모드는 ECMAScript 5부터 적용되는 키워드로 올바르지 않은 문법을 사전에 검출해 줍니다. 또한 안전한 코딩을 위한 하나의 가이드 라인입니다. 2. Strict Mode 장점 - 흔히 발생하는 코딩 실수를 잡아내서 예외를 발생 시킵니다. - 상대적으로 안전하지 않은 액션이 발생하는 것을 방지합니다. - 정확하게 고려되지 않은 기능들을 비활성화 시킵니다. 3. 사용방법 Strict Mode로 설정하는 방법은 간단합니다. 코드 앞쪽에 "use strict"을 추가하면 됩니다. 4. Strict Mode 에서 허용되지 않는 문법..

오늘은 class를 추가해주는 방식 중 하나인 classList에 대해 다룰 것 이다. 'click'이라는 이벤트를 실행할 때마다 폰트 컬러를 바꾸는 예제를 통해 classList의 사용 방법에 대해 알아보자. 우선 html, javascript 파일에 다음과 같은 코드를 작성했다. -html This works - js const title = document.querySelector("#title"); 이후 각각의 css, javascript 파일에 clicked 이라는 클래스를 추가했다. - css h1 { color: blue; } .clicked { color: green; } - js const CLICKED_CLASS = "clicked" 다음으로 클릭이라는 이벤트를 실행할 때마다 색이 바뀌..