목록JavaScript (10)
pgg-dev
자바스크립트에는 객체지향 언어에서 빠질 수 없는 Class 개념이 없다. 대신 자바스크립트는 프로토타입 기반의 객체지향 프로그래밍을 지원한다. 클래스가 없으니 상속 기능도 없기 때문에 보통 프로토타입 기반으로 상속 흉내 내어 구현하여 사용한다. es6에서 class문법이 추가되었지만 자바스크립트가 클래스 기반으로 바뀐 것은 아니다. 1 function Person(){} 함수를 정의하면 위 그림과 같이 생성 된 함수와 함수의 prototype Object가 생성된다. Person 함수는 prototype 속성을 통해 자신의 프로토타입 객체를 참조하고, 프로토타입 객체는 constructor 속성을 이용하여 자신을 생성한 함수인 Person 함수를 참조하는 구조를 가진다. 프로토타입 객..
클로저란 내부 함수가 외부 함수의 지역변수에 접근할 수 있는 것이다. 1 2 3 4 5 6 7 8 function outter(){ var title = 'coding everybody'; function inner(){ alert(title); } inner(); } outter(); 내부함수 inner에서 외부함수인 outter의 지역변수 title에 접근하여 경고창이 출력된다. 1 2 3 4 5 6 7 8 function outter(){ var title = 'coding everybody'; return function(){ console.log(title); } } var inner = outter(); inner(); //coding everybody 외부함수의 호출이 끝나도 내부함수가 외부..
DOM(Document Object Model) : 문서 객체 모델 객체로 문서 구조를 표현하는 방법으로 XML 이나 HTML 로 작성한다. 웹 브라우저는 DOM을 활용하여 객체에 자바스크립트와 CSS를 적용한다. 이 객체 모델은 문서 내의 모든 요소를 정의하고, 각각의 요소에 접근하는 방법을 제공한다. DOM은 트리 형태라서 특정 node를 찾거나 수정하거나, 제거하거나 원하는 곳에 삽입할 수 있다. ex) 내가 작성한 코드가 브라우저에 의해 파싱되면 DOM이 된다. DOM은 W3C의 표준 객체 모델이며, 다음과 같이 계층 구조로 표현. 자바스크립트는 이러한 객체 모델을 이용하여 다음과 같은 작업을 할 수 있다. - 자바스크립트는 새로운 HTML 요소나 속성 추가할 수 있다. - 자바스크립트는 존재하는..
1 2 3 4 5 6 7 8 9 10 11 12 13 14 const ironMan = { name: "토니 스타크", actor: "로버트 다우니 주니어", alias: "아이언맨" }; function print(hero) { const { name, actor, alias } = hero; const text = `${alias}(${name}) 역할을 맡은 배우는 ${actor} 입니다.`; console.log(text); } print(ironMan); //아이언맨(토니 스타크) 역할을 맡은 배우는 로버트 다우니 주니어 입니다. ironMan 객체와 print 함수가 선언되어 있고 print 함수 호출 시에 파라미터 값으로 ironMan 객체를 넘겨주는 소스코드이다...