Java Script
-
클로저(Closer)Java Script/기본 개념 정리 2020. 8. 8. 17:10
클로저 내부함수가 외부함수의 맥락(context)(변수 등)에 접근할 수 있는 것 호이스팅을 방지할 때 주로 이용한다. 독립적인 (자유) 변수 , 환경이 기억한다. 세 가지 스코프 체인 클로저 자신에 대한 접근(블럭 내 정의된 함수) 외부 함수의 변수에 대한 접근 전역 변수에 대한 접근 외부 함수의 변수에 대한 접근 클로저를 활용한 커링 함수 function adder (x) { return function (y) { return x + y; } }; 클로저 모듈 패턴 var counter = (function() { var privateCounter = 0; function changeBy(val) { privateCounter += val; } return { increment: function() ..
-
Object와 InstanceJava Script/기본 개념 정리 2020. 8. 8. 17:03
객체 object 자바스크립트의 기본 타입 프로퍼티와 메소드등 프로퍼티를 가질 수 있음. 아래 예시에서 OriginObject가 바로 객체. 껍데기라고 이해하면 됨 껍데기를 완성하는 구성요소는 프로퍼티와 메소드 인스턴스 instance 객체와 유사하지만, 객체는 일반적인 의미인 반면에 인스턴스는 현재 생성된 바로 그 객체를 의미한다. Object를 사용해서 Object를 생성하면 Object가 반환됨. 이때 반환된 Object를 인스턴스라고 함 // 생성자 함수를 사용 function OriginObject() { this.name = 'javascript' var obj = new OriginObject(); obj.name = 'jQuery'; console.log(obj..
-
Javascript Class(클래스), Prototype(프로토타입), Property(프로퍼티)Java Script/기본 개념 정리 2020. 8. 8. 16:14
Class(클래스) 자바스크립트에서 클래스란 생성자 함수를 의미함 함수가 특정 기능을 하는 구문(알고리즘, 로직)을 묶을 때 사용하는 문법이라면, 클래스는 이렇게 만들어진 수많은 변수와 함수 중 연관 있는 변수와 함수만을 선별해 포장하는 기술 즉, 연관있는 변수와 함수를 하나로 묶을 때 사용 객체 단위로 코드 그룹화 및 코드 재사용성을 사용하기 위함 일반 함수는 기능 단위의 코드 그룹화 ~> 기능 단위의 중복 코드 제거 및 재사용 Class는 자바의 Class와 같이 동작하는 것이 아니라, prototype을 이용한 기존의 방법을 유지하면서 문법만 지원하는 것(ES6 부터) 따라서, 기본적으로 Prototype에 대한 이해가 선행돼야함. 상속 프로토타입(prototype)을 통한 상속과 super()를 ..
-
JS 표준 입력 방법 (node.js readline), 비동기(Async & Await)패턴Java Script/기본 개념 정리 2020. 7. 27. 22:49
표준 입력 readline 모듈 이용 const readline = require('readline'); const rl = readline.createInterface({ input: process.stdin, output: process.stdout }); // 한 번 입력 rl.question(">>문자를 입력해주세요 : ", (line) => { rl.close(); console.log(line); // 입력 값 찍어보기 }); // 여러번 입력 rl.on("line", (line) => { if(line === "quit") rl.close(); console.log(line); }); rl.on('close', () =>{ process.exit(); }); question 한 번 입력, 파..
-
자바스크립트 구성요소 ~ 함수는 값을 반환한다Java Script/MDN 정리 2020. 7. 26. 19:06
반환 값이란 let myText = 'The weather is cold' let newString = myText.replace('cold', 'warm') console.log(newString) // Should print "The weather is warm" // the replace() string function takes a string, // replaces one substring with another, and returns // a new string with the replacement made replace() 메소드의 작동 원리 'cold' substring을 찾는다. 해당 substring을 'warm'으..
-
자바스크립트 구성요소 ~ 함수 만들기Java Script/MDN 정리 2020. 7. 25. 00:09
Active learning: Let's build a function 본격적으로 시작하기 앞서, 기본적인 함수를 만들어봅시다.. function-start.html 파일을 연습하고있는 컴퓨터에 복사하여 저장합니다. HTML 구조는 매우 간단합니다. — body 태그에는 한 개의 버튼이 있습니다. 그리고 style 태그에 메시지 박스를 위한 CSS 블럭이 있습니다. 그리고 비어있는 `` 엘리먼트에 연습할 자바스크립트 코드를 앞으로 쓰겠씁니다.. 다음으로 아래의 코드를 script 엘리먼트에 써봅시다. function displayMessage() { } 마지막으로 아래의 코드를 중괄호 안에 작성합니다. const html = document.querySelector('html'); cons..
-
자바스크립트 구성요소 ~ 함수-재사용 가능한 블록Java Script/MDN 정리 2020. 7. 24. 23:19
함수 vs 메소드 메소드(Methods) Built-in browser functions String의 replace, split, Math의 pow, random , Array의 join 등과 같은 빌트인 함수들 Object 안에 정의된 functions 함수(functions) 일반적으로 생각하는 function 사용자 정의 함수 예시 function draw() { ctx.clearRect(0,0,WIDTH,HEIGHT); for (var i = 0; i < 100; i++) { ctx.beginPath(); ctx.fillStyle = 'rgba(255,0,0,0.5)'; ctx.arc(random(WIDTH), random(HEIGHT), random(50), 0, 2 * Math..
-
자바스크립트 구성요소 ~ 반복문Java Script/MDN 정리 2020. 7. 24. 00:56
나를 계속 붙잡아라 counter 특정 값으로 초기화 된다. 루프의 시작점 exit condition loop가 멈추는 기준이 되는 종료 조건 iterator 끝나는 조건에 도달할 때까지 일반적으로 counter를 각각의 연속된 루프에서 조금씩 증가시킨다. ( 연산을 진행함 => 감소, 곱셈, 나눗셈 등 가능) 수도 코드loop(food = 0; foodNeeded = 10) { if (food = foodNeeded) { exit loop; // We have enough food; let's go home } else { food += 2; // Spend an hour collecting 2 more food // loop will then run again } } 루프의 표준 for (in..