차근차근 배우고 기록하는 곳

class vs object class object 연관있는 데이터들을 묶어 놓은 속성(field)과 행동(method)이 종합적으로 묶여있는 것 클래스를 이용해서 실제 데이터를 넣어서 만드는 것 붕어빵 틀 붕어빵 틀로 만드는 붕어빵 template instance of a class declare once created many times no data in data in Javascript classes introduced in ES6 syntactical sugar over prototype-based inheritance 1. Class declarations class Person { // constructor constructor (name, age) { // 속성(fields) this.na..

Function fundamental building block in the program subprogram can be used multiple times performs a task or calculates a value 1. Function declaration 함수의 기본 형태: function name(param1, param2) {body ... return;} 특징 one function === one thing // 하나의 함수에서는 하나의 기능만 수행하는 것이 좋음 naming: doSomething, command, verb // 함수 이름은 어떤 기능을 하는지 보기 쉽게 작성하는 것이 좋음 e.g. createCardAndPoint -> createCard, createPoint f..

Operator 1. String concatenation console.log('my' + 'cat'); // my cat console.log('1' + 2); // 12 console.log(`string literals: 1 + = ${1 + 2}`); // string literals: 1 + 2 = 3 console.log("ellie's \n \tbook"); // \n 줄바꿈, \t 탭 2. Numeric operators console.log(1 + 1); // add console.log(1 - 1); // substract console.log(1 / 1); // divide console.log(1 * 1); // multiply console.log(1 % 1); // remind..

Variable, rw(read/write 가능) let (Mutable data type, added in ES6) let globalName = 'global name'; // 글로벌 변수 { let name = SA; // name 이라는 변수에 값을 할당 console.log(name); name = 'hello'; console.log(name); } // {}는 블록 스코프 console.log(name); // 블록 스코프 안에서 선언했으므로 출력 불가 console.log(globalName); // global name 이 출력됨 var (don't ever use this!) 이전에 변수 선언을 했으나, ES6 부터는 사용하지 않음 블록 스코프를 철저히 무시함 { age = 4; var..

async vs defer defer 브라우저는 defer 속성이 있는 스크립트를 '백그라운드'에서 다운로드 함 따라서 defer 스크립트를 다운로드 하는 도중에도 HTML 파싱이 멈추지 않으며 defer 스크립트 실행은 페이지 구성이 끝날 때까지 지연됨 지연 스크립트는 페이지 생성을 막지 않음 지연 스크립트는 일반 스크립트와 마찬가지로 HTML에 추가된 순(상대순, 요소순)으로 실행됨 defer 속성은 에 src가 없으면 유효하지 않음 async async 속성이 붙은 스크립트는 페이지와 완전히 독립적으로 동작 defer 스크립트와 마찬가지로 백그라운드에서 다운로드 되므로, HTML 페이지는 async 스크립트 다운이 완료되길 기다리지 않고 페이지 내 콘텐츠를 처리, 출력함 다른 스크립트들은 async..

이터레이션 Iteration의 사전적 의미: 반복 for() 문의 반복 개념과 차이가 있음 const list = [10, 20]; for (let value of list){ log(value); }; const obj = list[Symbol.iterator](); log(obj.next()); log(obj.next()); log(obj.next()); [실행 결과] 10 20 {value: 10, done: false} {value: 20, done: false} {value: undefined, done: true} 이터레이션을 위한 프로토콜(Protocol: 통신 프로토콜, 규약)이 필요 데이터 송수신 프로토콜 정의 즉, 이터레이션은 프로토콜을 갖고 있으며 프로토콜에 따라 이터레이션 수행 프로..

Arrow Function Arrow 의 사전적 의미는 화살, 화살표 => (화살표 함수) 코드 형태 (param) => {함수 코드} const add = function(one, two){ return one + two; }; log(add(1, 2)); const total = (one, two) => { // function 키워드 대신에 화살표 => 사용 return one + two; }; log(total(1, 2)); [실행 결과] 3 3 function(){}의 축약 형태이지만 고려할 사항도 있음(this 참조가 다름) 함수 블록 사용 함수 블록과 return 작성 생략 const total = (one, two) => one + two; // 함수 블록 {}과 return을 생략한 형태..

let 변수 개요 let book = "책"; 블록 스코프를 가진 변수로, 변수가 선언된 블록이 스코프 스코프 적용 기준: 블록{}, 문, 표현식 블록{} 안과 밖의 스코프가 다름 변수 이름이 같아도 값이 대체되지 않음 let 변수 선언 Syntax let name1 [= value1] [, name2 [= value2]] name1, name2에 변수 이름 작성 식별자로 사용 []는 생략 가능을 나타냄 값을 할당하지 않아도 됨 let book; // 값을 할당하지 않고 변수만 선언할 수 있음 let one, two; // 콤마로 구분하여 다수를 선언할 수 있음 value1, value2에 초깃값 작성 표현식 작성 가능, 평가 결과 사용 let book = "책"; let one = 1, two = (1..

변수 구분 글로벌(전역) 변수의 기능, 목적 다른 js 파일에서 변숫값 공유 파일에서 공통 변수 개념으로 사용 의도는 좋으나 처리 속도가 떨어짐 로컬(지역) 변수의 기능, 목적 빠르게 식별자를 해결하기 위해 가까운 스코프의 변수를 사용하려는 것 글로벌 변수 오해 글로벌 변수는 글로벌 오브젝트의 로컬 변수이므로, var value = 100 처럼 var 키워드 사용이 정상 var 키워드를 작성하지 않으면 글로벌 변수로 간주하는데, 그럼 문제가 생김 // "user strict"; value = 100; // var 키워드를 사용하지 않고 글로벌 변수 value에 100을 할당 function point(){ value = 300; // point() 함수 안에서 value 변수에 300 할당 log("함수..

오브젝트, 인스턴스 Built-in 오브젝트 Function, Object, Array 등 오브젝트 Built-in 오브젝트로 생성한 오브젝트 function book(){코드} [1, 2], {key:value} 인스턴스 new 연산자로 생성한 오브젝트 new Book(); 프로퍼티, 함수 property key와 name 차이 property name: String property key: String과 Symbol ES6 스펙, 6.1.7 The Object Type 함수, 메소드 ES5: function, method ES6: function, method, static method Array.isArray() Array.prototype.forEach()