Hi

전개 연산자배열이나 객체를 ... 연산자와 함께 객체 리터럴, 배열 리터럴에서 사용하면 분해된 값으로 전달합니다.let obj1 = { name:"박문수", age:29 }; let obj2 = { ...obj1 }; let obj3 = { ...obj1, email:"mspark@gmail.com" }; console.log(obj2); console.log(obj3); console.log(obj1 == obj2); //false let arr1 = [ 100, 200, 300 ]; let arr2 = [ "hello", ...arr1, "world"]; console.log(arr2);기존 객체의 속성이나 배열의 요소들을 포함하여 새로운 객체, 배열을 생성하고자 할 때 사용합니다.

클래스정적 메서드(Static Method), 인스턴스 메서드(Instance Method), 생성자(Constructor)를 모두 잘 지원하고 있습니다.class Person { constructor(name, tel, address) { this.name = name; this.tel = tel; this.address = address; if (Person.count) { Person.count++; } else { Person.count = 1; } } static getPersonCount() { return Person.count; } toString() { return `name=${this.name}, tel=${this.tel}, address=${this.address}`; } } va..

모듈독립성을 가진 재사용 가능한 코드 블록여러 개의 코드 블록을 각각의 파일로 분리한 후 필요한 모듈들을 조합해 애플리케이션을 개발할 수 있습니다.변수, 함수, 객체, 클래스 등을 export할 수 있습니다.let var1 = 1000; function add(a,b) { return a+b; } export { var1, add };import { add, var1 as v } from './utils/utility1'; console.log(add(4,5)); console.log(v); 만일 export하는 값이 단일 값, 단일 객체, 단일 함수, 단일 클래스라면 default 키워드를 이용해 export한 후 단일 값으로 import할 수 있습니다.let calc = { add(x,y) { ret..

apply문맥을 넘어서서 this를 연결하려면 bind, apply, call 등의 함수 수준의 메서드를 이용해야 합니다.function Person(name, yearCount) { this.name = name; this.age = 0; var incrAge = function () { this.age++; } for (var i=1; i

babel 이란 javascript를 인터넷 익스플로러 다양한 브라우저 환경에서 실행되도록 하는 컴파일러라고 볼 수 있다.babel은 javascript compiler 다. 옛날 버전도 호환시켜주는npm install babel-cli -g를 하고프로젝트 root에 src 와 dist 폴더를 만든다.npm install babel-preset-env --save 를 하고Project root에 .babelrc를 만들고{ "presets": [ "env" ] }를 입력한다.babel ./src/babel.example.js -o ./out.js 를 하면 babel 컴파일링 된 파일을 만들어 준다.package.json에"scripts" : { "start": "node ./bin/www", "build"..

slice()일부 요소들을 복사하여 새로운 배열을 만들어 줍니다.첫 번째 parameter : 복사할 요소의 시작 위치 두 번째 parameter : 복사할 요소의 끝위치인데, 끝위치가 포함은 안됨 var users2 = users.slice(1, 3); // index 1 , 2 삭제

첫 번째 파라미터 : 인덱스 값으로 배열의 몇 번째 요소부터 처리할 것인지를 지정 두 번째 파라미터 : 삭제할 요소의 개수 세 번째 파라미터 : 추가할 요소 users.splice(1, 0, {name: '애프터스쿨', age: 25}); // splice()로 요소를 인덱스 1에 추가한 후' users.splice(2, 1); // splice()로 인덱스 2의 요소를 1개 삭제한 후

var Users = [{name: '소녀시대', age: 20}, ....]; Users.forEach(function(item, index) {console.log('배열 요소 #' + index + ' : %s', item.name);});

CommonJs : 자바스크립트를 웹브라우저에서만 쓰는게 아니라, 서버나 일반 pc프로그램 에서도 쓸 수 있도록 하는 자발적인 워킹그룹. 모듈화를 하는 데 표준을 정의 하였다.

모듈 패턴이란, 클로저를 이용한 객체 지향적 프로그래밍이 아닌가?또한 객체 리터럴 형식으로 구성되어 있는 것이지 않을까,, http://webclub.tistory.com/5

네임스페이스 패턴이란, 객체 안에다 모든걸 때려박는 것. 그러면 그 네임스페이스 안에서 전역객체로써 충돌이 되지 않게 하는 것이다. http://webclub.tistory.com/311

https://github.com/processing/p5.js/wiki/Positioning-your-canvas

자바스크립트에서의 함수형 프로그래밍배열의 각 원소 총합 구하기function reduce(func, arr, memo) { var len = arr.length; var i = 0; var accum = memo; for(; i

함수형 프로그래밍의 개념함수의 조합으로 작업을 수행함을 의미 중요한 것은 이 작업이 이루어 지는 동안 작업에 필요한 데이터와 상태는 변하지 않는다는 점 순수 함수(Pure function) : 외부에 아무런 영향을 미치지 않는 함수 고계 함수(Higher-order function) 함수를 또 하나의 값으로 간주하여 함수의 인자 혹은 반환값으로 사용할 수 있는 함수 내부 데이터 및 상태는 그대로 둔 채, 제어할 함수를 변경 및 조합함으로써 원하는 결과를 얻어내는 것이 중요한 특성 -> 높은 수준의 모듈화가 가능하다는 점 순수 함수의 조건을 충족하는 함수 구현으로 모듈 집약적인 프로그래밍이 가능하다.

상속객체 프로토타입 체인을 이용하여 상속을 구현해낼 수 있다. 클래스 기반 전통적인 상속 방식을 흉내 클래스 개념 없이 객체의 프로토타입으로 상속을 구현하는 방식(프로토타입을 이용한 상속 -> 객체 리터럴을 중심으로 철저히 프로토타입을 이용하여 상속을 구현해낸다.)프로토타입을 이용한 상속부모 객체의 프로퍼티에 접근할 수 있고, 자신만의 프로퍼티를 만들 수도 있다.function create_object(o) { function F() {} F.prototype = o; return new F(); } var person = { name: "zzoon", getName: function() { return this.name; }, setName: function(arg) { this.name = arg; ..

클래스, 생성자, 메서드자바스크립트는 거의 모든 것이 객체이고, 특히 함수 객체로 많은 것을 구현해낸다. 클래스, 생성자, 메서드도 모두 함수로 구현이 가능하다.function Person(arg) { this.name = arg; this.getName = function() { return this.name; }; this.setName = function(value) { this.name = value; } } var me = new Person("zzoon"); console.log(me.getName()); // (출력값) zzoon me.setName("iamhjoo"); console.log(me.getName()); // (출력값) iamhjoo클래스 및 생성자의 역할을 하는 함수가 있고,..

객체지향 언어로서, 클래스 기반의 언어와 프로토타입 기반의 언어의 차이클래스 기반 언어 : 클래스로 객체의 기본적인 형태와 기능을 정의하고, 생성자로 인스턴스를 만들어서 사용할 수 있다. 클래스에 정의된 메서드로 여러 가지 기능을 수행할 수 있다. ex) Java, C++ 정확성, 안전성, 예측성 등의 관점에서 클래스 기반 언어는 프로토타입 기반의 언어보다 좀 더 나은 결과를 보장한다. 프로토타입 기반의 언어 : 객체의 자료구조, 메서드 등을 동적으로 바꿀 수 있다. 프로토타입 기반의 언어는 동적으로 자유롭게 객체의 구조와 동작 방식을 바꿀 수 있다는 장점이 있다. Javascript는 프로토타입 기반의 언어!

클로저클로저의 개념외부 함수의 컨텍스트가 반환되더라도 변수객체는 반환되는 내부 함수의 스코프 체인에 그대로 남아있어야만 접근할 수 있다. 이것이 바로 -> 클로저 : 이미 생명 주기가 끝난 외부 함수의 변수를 참조하는 함수 ex) outerFunc에서 선언된 x와 같은 변수를 자유 변수(Free variable)라고 한다. closure라는 이름은 함수가 자유 변수에 대해 닫혀있다(closed, bound)는 의미. -> 자유 변수에 엮여있는 함수 (우리말로 표현하자면) - 자바스크립트로 클로저를 구현하는 전형적인 패턴 -function outerFunc() { var x = 1; return function() {

string에는 여러가지 함수가 있다. join() : string 배열을 연결해서 하나의 string으로 만들기 split() : string 쪼개서 string 배열로 만들기 includes() : string에 어떤 글자가 있는지 없는지, true or false

http://blog.naver.com/PostView.nhn?blogId=sjpotato&logNo=40150731304&redirect=Dlog&widgetTypeCall=true

스코프 체인자바스크립트에서는 for(){}, if{}와 같은 구문은 유효 범위가 없다. 오직 함수만이 유효 범위의 한 단위가 된다. 이 유효 범위를 나타내는 스코프가 [[scope]] 프로퍼티로각 함수 객체 내에서 연결 리스트 형식으로 관리 되는데, 이를 '스코프 체인' 이라고 한다. 각 실행 컨텍스트의 변수 객체가 구성 요소인 리스트와 같다. 각각의 함수는 [[scope]] 프로퍼티로 자신이 생성된 실행 컨텍스트의 스코프 체인을 참조한다. 함수가 실행되는 순간 실행 컨텍스트가 만들어지고, 이 실행 컨텍스트는 실행된 함수의 [[ scope]] 프로퍼티를 기반으로 새로운 스코프 체인을 만든다 전역 실행 컨텍스트의 스코프 체인이 변수 객체의 스코프 체인은 자기 자신만을 가진다. 변수 객체의 [[scope]]..

실행 컨텍스트 생성 과정function execute(param1, param2) { var a = 1, b = 2; function func() { return a + b; } return param1 + param2 + func(); } execute(3, 4);활성 객체 생성실행 컨텍스트가 생성되면 자바스크립트 엔진은 해당 컨텍스트에서 실행에 필요한 여러가지 정보를 담을 객체를 생성하는데, 이를 "활성 객체"라고 한다. 활성 객체 : 앞으로 사용하게 될 매개변수나 사용자가 정의한 변수 및 객체를 저장하고, 새로 만들어진 컨텍스트로 접근 가능하게 되어있다. 엔진 내부에서 접근할 수 있다는 것이지 사용자가 접근할 수 있는건 X arguments 객체 생성활성 객체는 arguments 프로퍼티로 이 ar..

실행 컨텍스트 개념콜 스택(Call Stack) : 함수를 호출할 때 해당 함수의 호출 정보(ex C언어 - 함수의 호출정보 등으로 함수 내 지역변수 혹은 인자값 등)가 차곡차곡 쌓여있는 스택 실행 컨텍스트는 콜 스택에 들어가는 실행 정보 하나와 비슷하다. "실행 가능한 자바스크립트 코드 블록이 실행되는 환경" 실행 컨텍스트가 형성되는 경우 - 전역 코드, eval() 함수로 실행되는 코드, 대부분 프로그래머는 함수로 실행 컨텍스트를 만든다 현재 실행되는 컨텍스트에서 이 컨텍스트와 관련 없는 실행 코드가 실행되면, 새로운 컨텍스트가 생성되어 스택에 들어가고 제어권이 그 컨텍스트로 이동한다. ex)console.log("This is global context"); function ExContext1() ..

프로토타입 체이닝프로토타입의 두 가지 의미자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원 OOP 상속에 근간이 되는 프로토타입과 프로토타입 체이닝. (자바스크립트는 클래스 개념이 없다) '프로토타입' 객체 : 생성된 객체의 부모 객체 자바스크립트의 모든 객체는 자신의 부모인 프로토타입 객체르 가리키는 참조 링크 형태의 숨겨진 프로퍼티가 있다. 이러한 링크를 암묵적 프로토타입 링크라 부른다. == [[Prototype]] 링크 함수 객체의 prototype 프로퍼티와 객체의 숨은 프로퍼티인 [[Prototype]] 링크를 구분해야 한다. // Person 생성자 함수 function Person(name) { this.name = name; } // foo 객체 생성 var foo = new P..

이벤트 발생 객체와 이벤트 객체이벤트 객체를 사용하면 '누가, 언제, 어디서, 무엇을, 어떻게, 왜'를 정의할 수 있습니다. 이벤트를 '누가' 발생시켰을까?-> 이벤트 발생 객체 ex)window.onload = function() { document.getElementById('header').onclick = function() { this.style.color = 'orange'; this.style.backgroundColor = 'red'; }; }; '누가'와 관련된 정보 이외의 정보는 '이벤트 객체' 안에 들어 있습니다. ex)window.onload = function() { document.getElementById('header').onclick = function(e) { // 이벤트..

이벤트 개념 잡기이벤트 : 키보드를 이용해 버튼을 입력하거나 마우스 클리과 같이 다른 것에 영향을 미치는 것 이벤트 관련 용어 정리이벤트를 연결한다 : window 객체의 onload 속성에 함수 자료형을 할당하는 것window.onload = function() {};load를 '이벤트 이름' 또는 '이벤트 타입' 이라고 함. onload를 '이벤트 속성' 이라고 함. 이벤트 속성에 할당한 함수를 '이벤트 리스너' 또는 '이벤트 핸들러'라고 합니다. ex)window.onload = function() { // 변수를 선언합니다. var header = document.getElementById('header'); // 이벤트를 연결합니다. function whenClick() { alert('CLIC..

var text = $(".test").html().split('

프로토타입자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. (객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티를 마치 자신의 것처럼 쓸 수 있는 것 같은 특징) 부모 객체를 프로토타입 객체(짧게는 프로토타입) 라고 부른다.var foo = { name: 'foo', age: 30 }; console.log(foo.toString()); // foo의 프로토타입에서 toString() 메서드를 가지고 옴 console.dir(foo); 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]]라는 숨겨진 프로퍼티를 가진다.toString() valueOf() hasOwnProperty() ... Object.prototype 객체 ㅅ ㅣ ㅣ (상속)name: 'foo', ..

참조 타입의 특성객체는 자바스크립트에서 참조타입객체의 모든 연산이 실제 값이 아닌 참조값으로 처리.var objA = { val : 40 }; var objB = objA; console.log(objA.val); // 40 console.log(objB.val); // 40 objB.val = 50; console.log(objA.val); // 50 console.log(objB.val); // 50 객체 비교동등 연산자 (==)를 사용하여 두 객체를 비교할 때도 객체의 프로퍼티 값이 아닌 참조값을 비교한다.var a = 100; var b = 100; var objA = { value: 100 }; var objB = { value: 100 }; var objC = objB; console.log(..

자바스크립트 참조 타입(객체 타입)기본 타입을 제외한 모든 값은 객체다.배열, 함수, 정규표현식 모두 결국 자바스크립트 객체로 표현자바스크립트에서 객체는 단순히 '이름(key):값(value)' 형태의 프로퍼티들을 저장하는 컨테이너, 해시라는 자료구조와 상당히 유사.참조타입인 객체는 여러개의 프로퍼티드릉ㄹ 포함. 객체의 프로퍼티는 기본 타입의 값을 포함하거나, 다른 객체를 가리킬 수도 있다.프로퍼티를 메소드라 부른다.객체 생성 기존 객체지향 언어에서의 객체 개념과는 약간 다르다. 클래스라는 개념이 없고, 별도의 생성방식.Object() 생성자 함수 이용 내장 Object() 생성자 함수 // Object()를 이용해서 foo 빈 객체 생성 var foo = new Object(); // foo 객체 프로..