전체 글 (44) 썸네일형 리스트형 자바스크립트(JavaScript) - 클래스 글에 오류가 있을 수 있으니 있다면 알려주시기 바랍니다.! ES6에서 추가된 클래스를 알아보겠습니다. 객체를 만들 때는 생성자 함수를 통해 객체를 생성하고 프로토타입을 이용하여 메서드를 만들었습니다. 생성자 함수를 사용하면서 함수와 혼동되어서 조금 불편했었습니다. 클래스는 명확하게 표현하여 객체를 파악하고 간단하게 객체를 만들 수 있습니다. 클래스도 함수와 마찬가지로 선언문과 표현식 2개를 사용할 수 있습니다. 클래스의 표현 첫 번째로 클래스 선언문입니다. class A { constructor(n) { this.n = n; } show() { console.log("값: "+ this.n); } } let a = new A(10); a.show(); 두 번째로 클래스 표현식입니다. let B = cla.. 자바스크립트(JavaScript) - 상속 상속은 기존에 있던 프로퍼티와 메소드를 자식이 되는 객체에게 물려주는 것입니다. 자바스크립트에서 객체에 상속을 해야 한다면 프로토타입을 사용해서 프로퍼티와 메소드를 상속하기도 합니다. 프로토타입을 이용해서 상속을 하는 것이 아닌 객체 상속을 알아보도록 하겠습니다. 객체 상속 객체에 있는 프로퍼티와 메소드를 다른 객체에 상속시키려면 call(), apply() 메소드를 사용하여 상속을 시킬 수 있습니다. function a(name, list) { this.name = name; this.show = function() { console.log(name); }; } a.prototype.ab = function () { console.log(this.name); }; function b() { a.call.. 자바스크립트(JavaScript) - 프로토타입(Prototype) 글에 오류가 있을 수도 있으니 알려주시면 감사하겠습니다. 프로토타입(prototype) 객체 자바스크립트에서 프로토타입 객체는 중요한 객체라고 할 수 있습니다. 자바스크립트는 프로토타입 기반 언어이기 때문입니다. 프로토타입 객체를 통해 메소드와 속성을 상속받을 수 있습니다. ES6에서는 좀 더 쉽게 상속을 할 수 있는 클래스가 있습니다. 자바스크립트의 프로토타입 객체는 다른 객체에 프로퍼티를 공유하는 객체입니다. 함수 객체에는 prototype 프로퍼티와 [[Prototype]] 프로퍼티를 가지고 있습니다. 일반 객체에는 [[Prototype]] 프로퍼티만 가지고 있습니다. [[Prototype]]은 자바스크립트의 내부 슬릇이라는 내부 프로퍼티이며 직접적으로 접근이 불가능합니다. 하지만 요즘 브라우저에서.. 자바스크립트(JavaScript) - 이터레이터(Iterator), 이터러블(Iterable), 제너레이터(Generator) 글에 오류가 있을 수도 있으니 알려주시면 감사하겠습니다. ES6부터 추가된 이터레이터와 제너레이터는 반복적인 처리를 할 때 사용되는 기능입니다. 이터레이터(Iterator) 이터레이터는 반복 처리가 가능한 객체를 뜻합니다. 이터레이터는 내부적으로 next() 메서드를 가지며 next() 메서드는 IteratorResult객체 value와 done이라는 프로퍼티를 가진 객체를 반환해야 합니다. // 사용자 정의 function a() { var index = 0; var data = [1,2,3,4]; return { next() { if (index < data.length) { return { value:data[index++], done:false }; } else { return { value:un.. 자바스크립트(JavaScript) - 화살표 함수 화살표 함수는 ES6부터 새로 생긴 표현식입니다. 화살표 함수는 익명 함수를 좀 더 간단히 쓰는 표현식입니다. 표현식 화살표 함수의 표현식은 아래와 같습니다. var a = (x) => { return x; }; var a = (x1, x2) => { return x1 + x2; }; 여기서 인수가 하나만 있다면 괄호를 지우고 사용이 가능합니다. var a = x => { return x; }; 리턴 값만 있다면 return과 {} 중괄호를 지우고 사용이 가능합니다. var a = x => x; 인수의 기본값, 나머지 매개변수를 설정하여 사용도 가능합니다. // 기본값 매개변수 var a = (x1=1, x2=2, x3) => { return x1 + x2 + x3; }; a(undefined,undef.. 자바스크립트(JavaScript) - 클로저(Closure) 자바스크립트에는 클로저라는 기능이 존재합니다. 클로저는 Execution Context를 알아야 이해가 되니 참고하시기 바랍니다. https://bearcomputer.tistory.com/28 클로저는 무엇인가? 아래에 코드를 먼저 확인해보겠습니다. function ab() { var count = 0; return function() { return count++; } } var a = ab(); console.log(a()); // -> 0 console.log(a()); // -> 1 console.log(a()); // -> 2 리턴하는 함수가 ab 함수에 있는 count변수를 사용하고 있습니다. 이것이 클로저라는 구조를 가지고 있기 때문에 가능한 일입니다. 클로저는 함수내부에 선언된 내부 함수.. 자바스크립트(JavaScript) - Execution Context(실행 문맥)과 코드 실행 및 내부 동작 원리 ECMAScript2015(ES6)을 중점으로 다루고 있습니다. 참고하시기 바랍니다. 글에 오류가 있을 수도 있으니 알려주시면 감사하겠습니다. 실행 문맥(Execution Context) 실행 문맥은 실행이 가능한 코드들이 평가 또는 실행되고 관리되는 영역이며 코드에 대한 정보들이 저장되어있다. 여기서 평가는 코드가 전역 변수인지 지역 변수인지 변수의 값이 무엇인지 범위는 어디까지인지 코드를 상황에 맞게 파악하는 것이라고 보면 될 것 같다. Execution Context(실행 문맥)가 가지고 있는 구성요소(ES5.1) 렉시컬 환경(LexicalEnvironment) 변수 환경(VariableEnvironment) 디스 바인딩(ThisBinding) LexicalEnvironment은 자바스크립트 코드를.. 자바스크립트(JavaScript) - 템플릿 리터럴(Template literals) ES6에서 새로 생긴 문자열 표현 방법입니다. 기존 문자열 표현에서 여러 줄을 표현하려면 이스케이프 시퀀스를 쓰고 문자열에 변수에 있는 값을 사용하려면 변수를 사용하고 + 를 사용해 문자열을 연결해주어야 했습니다. 새로 생긴 템플릿 리터럴을 사용하면 간편하게 표현할 수 있습니다. var bear = "bear"; var text = `곰은 ${bear} 이다.`; console.log(text); // -> 곰은 bear 이다. 이제는 + 를 쓰지 않고 ${ }를 통해서 변수나 함수를 호출하여 값을 받을 수 있습니다. ${ }를 플레이스 홀더라고 부릅니다. 템플릿 리터럴을 사용하려면 ` `(백틱) 물결표 키를 누르면 나타나는 백틱을 사용해야 합니다. 기존에는 여러 줄을 표현할 때 사용했던 \n를 쓰지 않.. 이전 1 2 3 4 5 6 다음