개발계발/Javascript 6

자바스크립트 prototype(프로토타입)

자바스크립트는 객체지향 언어입니다. 그러나 클래스가 없는 프로토타입 기반의 객체지향 언어입니다. 클래스가 없는 대신 자바스크립트 객체(array, object, 함수)의 특정 속성은 부모 클래스 역할을 하는 객체를 참조하는데, 그 객체가 프로토타입입니다. 프로토타입 객체를 사용해 상속의 개념인 부모 객체의 속성 접근이나 메서드 호출이 가능합니다. 프로토타입의 원리와 특징을 함수 객체위주로 살펴보도록 하겠습니다. 프로토타입 객체가 생성되면 프로토타입 객체도 함께 생성됩니다. 함수 객체의 경우 함수의 prototype 속성이 함수와 함께 생성된 프로토타입 객체를 참조합니다. 반면에 생성자 함수로 정의된 객체는 __proto__ 속성을 갖습니다. __proto__ 속성도 프로토타입 객체를 참조합니다. 자세한 ..

JavaScript 클로저

해당 포스팅은 책 내용을 공부하며 정리한 것입니다. 1. 클로저 이해 2. 클로저 활용 3. 클로저 주의사항 1. 클로저 이해 클로저는 함수 안에 있는 함수이다. 함수 안에 있어서 외부 함수, 내부 함수(클로저)라고 구분해서 부른다. 클로저의 특징은 외부 함수의 변수를 참조한다는 점이다. 예제를 한 번 살펴보자. function outerFunc(){ var x = 10; var innerFunc = function() {console.log(x);} return innerFunc; var inner = outerFunc(); inner() //result //10 예제에서 innerFunc() 함수가 클로저이다. inner 변수 객체를 생성한 뒤, inner()를 실행하면 outerFunc()이 끝나고..

[JavaScript]실행 컨텍스트

*해당 포스팅은 책 내용을 공부하며 정리한 것입니다. 1. 실행 컨텍스트 특정 프로그램(크롬,엑셀...)을 실행하면 프로세스도 같이 실행되듯이 코드를 실행하면 실행 컨텍스트도 같이 실행된다. 코드 진행과 컨텍스트는 불가분의 관계이며, 컨텍스트에는드 실행 순서 등 실행에 필요한 메타 정보를 담고 있다. 컨텍스트 단위는 전역 코드에 대한 컨텍스트, 함수에 대한 컨텍스트, eval() 함수로 실행되는 코드로 나뉜다. 여기서는 전역 코드에 대한 컨텍스트, 함수에 대한 컨텍스트로 살펴 보겠다. console.log("This is global context"); function ExContext1(){ console.log("This is ExContext1"); } fucntion ExContext2(){ Ex..

Javascript 객체 지향[2] - class 상속/super/object 상속/__proto__ vs prototype

2019/06/29 - [공부/JS] - Javascript 객체 지향[1] - this/constructor/prototype Javascript 객체 지향[1] - this/constructor/prototype 자바스크립트는 객체지향 스크립트 언어이다. 객체지향을 내 기준에서 간단하게 설명하면 자주 사용하는 걸 구조화해놓는 것이다. 그러면 필요할 때마다 만들지 않아도 되고 이미 만들어진 걸 가져다 쓰기만 하면.. myphiloprogramming.tistory.com 1. class 상속 클래스를 생성할 때 다른 클래스를 상속 받을 수 있는데, 새로 만들어지는 클래스가 자식 클래스, 상속하는 클래스가 부모 클래스가 된다. 자바스크립트에서 상속은 extends를 쓴다. class Person{ con..

Javascript 객체 지향[1] - this/constructor/prototype

자바스크립트는 객체지향 스크립트 언어이다. 객체지향을 내 기준에서 간단하게 설명하면 자주 사용하는 걸 구조화해놓는 것이다. 그러면 필요할 때마다 만들지 않아도 되고 이미 만들어진 걸 가져다 쓰기만 하면 된다. 여기서 미리 만들어 놓는다는 개념이 자바스크립트에서는 함수,클래스가 된다. 자바스크립트가 객체지향 언어인 만큼 객체 관련 기능들을 제공한다. 이번에는 this, constructor, prototype을 알아본다. *생활 코딩 javascript 객체지향 내용을 공부하며 정리한 것입니다. 1.this - 자신을 가리키는 특수한 키워드로 오브젝트, 클래스 안에서 선언한 변수 및 함수를 자기 안에서 호출할 때 사용한다. var fisrt = 5; var second = 10; var kim = { na..

JavaScript immutability

변수는 자유롭게 선언 가능하고 값도 변경할 수 있기 때문에 활용도가 높다. 하지만 변하면 안 되는 값이 변경 가능한 상태라면 신뢰성 문제가 생길 수 있다. 이런 때에는 변경 불가능한, 불변(immutability)의 변수를 만들어 볼 수 있다. 여기서는 변수를 불변하도록 변경하는 것과 그 특징을 알아본다. *생활 코딩 javascript immutability 내용을 공부하며 정리한 것입니다. 1. var vs const - var로 변수 선언 시 변수 값 변경이 가능하지만 const로 변수 선언 시, 값 변경이 불가능하다. var a=1; a=2; console.log(a); //2 위 코드처럼 a의 값을 1로 주고나서 2로 변경하면 a의 값은 최종적으로 2라는 것을 확인할 수 있다. 즉, 변수의 값 ..