자바스크립트 11

[JavaScript] 그림으로 이해하는 자바스크립트 Array

Array 선언 const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"] 길이 얻기 (length) const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"] console.log(animal.length) // 7 Element 얻기 ([idx])const animal = ["ant", "beer", "cat", "dog", "eagle", "fox", "giraffe"] console.log(animal[3]) // "dog" Index 얻기 (indexOf)만약 배열안에 찾는 값이 없다면 -1을 반환.const animal = ["ant", "beer", "c..

JavaScript // 개념 // ES6 // 심볼(Symbol)

업데이트 :: 2018.01.25 심볼(Symbol)심볼을 이용한 private심볼과 객체조사(열거) (object-inspection)심볼 registry심볼과 IE심볼(Symbol)심볼은 어떤 값과도 다릅니다.심볼은 항상 유일, 다른 어떤 심볼과도 일치하지 않습니다. (객체와 유사합니다.)var mySymbol = Symbol(); obj[mySymbol] = "ok!"; console.log(obj[mySymbol]); // ok! const RED = Symbol("The color of a sunset!") const ORANGE = Symbol("The color of a sunset!") console.log(RED === ORANGE) // false (모든 심볼은 유일한 값을 가집니다.)..

JavaScript // 개념 // 가비지컬렉션(Garbage Collection)

업데이트 :: 2018.02.03 메모리의 생명 주기메모리 할당가비지 컬렉션참조-세기 가비지 콜렉션 (Reference-counting)객체-참조 가비지 콜렉션순환 참조마크스위프 알고리즘GC 단점JS 메모리 누수1. 전역 변수 (window 객체)2. 잊혀진 타이머 혹은 콜백함수3. 클로저4. DOM을 벗어난 요소 참조메모리의 생명 주기Allocate memory => Use Memory => Release Memory메모리 할당 :: 프로그램이 사용할 수 이도록 운영체제가 메모리를 할당하는 단계저수준의 언어는 이를 개발자가 명시적으로 처리해줍니다.고수준의 언어는 개발자가 이를 신경쓰지 않아도 됩니다.메모리 사용 :: 할당된 메모리를 실제로 프로그램이 사용하는 단계개발자가 필요에 따라 읽기와 쓰기 작업을..

JavaScript // 개념 // 함수(Function)

업데이트 :: 2018.01.24 callapplybindbind 주의점func.lengthfunc.nameargumentscall함수 내부의 this를 매개변수로 설정해줄 수 있습니다.fun.call(this, [arg1], [arg2], [...]) 우리는 함수 내부의 this를 우리가 직접 설정해줄 수 있습니다.call 메서드는 모든 함수에서 사용할 수 있으며, this를 특정값으로 지정할 수 있습니다.const bruce = { name : "Bruce" }; const madeline = { name : "Madeline" }; // 이 함수는 어떤 객체도 연결되지 않았지만 this를 사용합니다. function greet() { return `Hello, I'm ${this.name}` } g..

JavaScript // 개념 // 오브젝트(Object)

업데이트 :: 2018.03.18 01. Object02. Object Native 메소드 (property)getOwnPropertyDescriptordefinePropertygetOwnPropertyNamesgetOwnPropertySymbolsassigniskeys & values & entriespreventExtensions & isExtensibleseal & isSealedfreeze & isFrozen03. Object Native 메소드 (prototype)getPrototypeOfsetPrototypeOfcreate_defineGetter_ & _defineSetter__lookupGetter_ & _lookupSetter_01. Object자바스크립트는 native로 Object라는 ..

JavaScript // 개념 // 프로토타입(Prototype)

업데이트 :: 2018.03.13 프로토타입어디에 사용하나요 ?생성원리Contructor(생성자) 자격 부여Prototype Object 생성 및 연결Prototype Object & Prototype LinkPrototype Object 자세히Prototype Link ( = __proto__) 자세히Prototype ChainPrototype & Class프로토타입JS는 객체기반언어로, 클래스가 없습니다.대신 프로토타입(Prototype) 이라는 것이 존재합니다.JS가 프로토타입 기반 언어라고 불리는 이유입니다.참고로 최근의 ECMA6 표준에서는 Class 문법이 추가되었으나, JS가 클래스기반으로 바뀌었다는 것은 아닙니다. JS를 클래스로 작성하더라도 생성된 객체는 여전히 프로토타입기반입니다.어디에..

JavaScript // 개념 // 프로퍼티(Property)

업데이트 :: 2018.03.16 프로퍼티(Property)속성값 이해하기valueget & setenumerable (열거 할 수 있는)wriatable (쓸 수 있는)configurable (구성할 수 있는)Property 속성설정하기definePropertygetOwnPropertyDescriptorget&set의 getOwnPropertyDescriptor클래스 메소드는 Prototype프로퍼티(Property)'Property' 는 속성 이란 뜻으로, JS에서는 객체 내부의 속성을 의미합니다.// 객체 생성 var ob = {a: 1}; // property 접근하기 ob.a; // => 1 // property 수정하기 ob.a = 0; ob.a; // => 0; // property 추가하기..

JavaScript // 개념 // 호이스팅(Hoisting)

업데이트 :: 2018.01.05 선언과 정의변수 호이스팅함수 호이스팅선언과 정의호이스팅은 선언과 정의의 개념에 밀접한 연관이 있습니다.일부 언어는 선언(declaration) 정의(definition)를 명확히 구분합니다.선언 :: 변수를 선언한다는 것은 식별자를 주어서 그 존재를 알리는 것정의 :: 변수를 정의한다는 것은 선언과 함께 값도 부여하는 것자바스크립트에서는 모든 변수를 동시에 값이 주어지므로 두 용어를 구분하지 않습니다. 명시적으로 정하지 않으면 undefined가 암시적으로 적용됩니다.var a; // 선언 var b = 'b'; // 선언 + 정의 let c; // 선언 let d = 'd'; // 선언 + 정의 // 함수의 선언이 이루어진 예입니다. function funcA() { ..

javaScript // 개념 // 클로저(Closure)

업데이트 :: 2018.01.25 클로저 ( Closure )클로저의 스코프체인클로저 예제예제 JS예제 jQuery클로저 규칙기억한다 => 외부 Scope 참조는 계속됩니다.기억한다 =>외부 Scope 참조, 값을 저장하는게 아닙니다.클로저 예상버그클로저 ( Closure )사람들은 보통 클로저를 다음과 같이 말합니다.자유 변수를 기억하는 함수스코프를 기억하는 함수환경(lexical environment)를 기억하는 함수클로저는 외부함수(내부함수 감싸고 있는)내 스코프 변수에 접근할 수 있는 또한, 그것을 기억하고 있는 내부 함수를 말합니다.말이 어려우니 예제가 도움이 될 것입니다.클로저의 스코프체인클로저는 3가지 스코프 체인 (scope chain)을 가집니다.클로저는 자신에 대한 접근 (자신의 블록내..