Learn/Javascript (20) 썸네일형 리스트형 프로토타입 프로토타입 자바스크립트는 프로토타입 기반 언어. 프로토타입은 원형객체를 의미. 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있다. 그리고 이것은 마치 객체 지향의 상속 개념과 같이 부모 객체의 프로퍼티 또는 메소드를 상속받아 사용할 수 있게 한다. 이러한 부모 객체를 Prototype(프로토타입) 객체 Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용한다. function Car (brand, name, color){ this.brand = brand; this.name = name; this.color = color; } Car.prototype.drive = function() { console.log(this.name +.. 객체 지향 프로그래밍 객체 지향 프로그래밍 (Object-Oriented Programming, OOP) 컴퓨터 프로그래밍의 패러다임 중 하나이다. 객체지향 프로그래밍은 실세계에 존재하고 인지하고 있는 객체(Object)를 소프트웨어의 세계에서 표현하기 위해 객체의 핵심적인 개념 또는 기능만을 추출하는 추상화(abstraction)를 통해 모델링하려는 프로그래밍 패러다임을 말한다. 다시 말해, 우리가 주변의 실세계에서 사물을 인지하는 방식을 프로그래밍에 접목하려는 사상을 의미한다. 캡슐화 (encapsulation) 데이터의 번들링(bundling) : 데이터(속성)와 기능(메서드)을 따로 정의하는 것이 아닌, 하나의 객체 안에 넣어서 묶는 것 데이터(속성)와 기능(메서드)들이 느슨하게 결합 : 코드가 상징하는 실제 모습과 .. 클래스와 인스턴스 객체지향 프로그래밍 하나의 모델이 되는 예제(객체)를 만들고 그 예제를 가지고 여러개의 객체를 만드는 프로그래밍 패턴 클래스 하나의 모델 즉, 예제(객체)를 클래스로 지정 인스턴스 클래스를 바탕으로 한 객체 ES5와 ES6 문법 비교 ES5 function Car (brand, name, color){ this.brand = brand; this.name = name; this.color = color; } Car.prototype.drive = function() { console.log(this.name + '가 운전을 시작합니다'); } let avante = new Car('hyundai','avante','black'); avante.color; // 'black' avante.drive(); .. DOM 정리 DOM(Document Object Model) HTML 요소를 Object(JavaScript Object)처럼 조작(Manipulation)할 수 있는 Model 여러 뛰어난 웹 개발자들이 모여 HTML을 분석하여 HTML의 아주 작은 부분까지 접근할 수 있는 구조를 만들었습니다. 이렇게 만들어진 구조를 DOM이라 한다 DOM은 아래 그림과 같은 트리 구조를 이루며, 부모 자식 관계를 가진다. CRUD CRUD(Create, Read, Update and Delete) CRUD를 먼저 이해하는 것이 새로운 언어를 가장 빠르게 학습하는 방법 1. C : Create document.createElement('div') createElement 메서드를 이용하여 요소를 만듭니다. 아래 그림과 같이 이때 .. 과제를 통해 새롭게 배운 것들 Object.assign() Object.assign() 메서드는 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 대상 객체에 붙여넣습니다. 그 후 대상 객체를 반환합니다. Object.assign(target, ...sources) target 목표 객체. 출처 객체의 속성을 복사해 반영한 후 반환할 객체입니다. sources 출처 객체. 목표 객체에 반영하고자 하는 속성들을 갖고 있는 객체들입니다. Ex. const obj = { a: 1 }; const copy = Object.assign({}, obj); console.log(copy); // { a: 1 } 새롭운 객체가 만들어 진다 주의사항 Object.assign()은 속성의 값을 복사하기 때문에, 깊은 복사를 수행하려면 다른 방법을 사.. 클로저 정리 클로저(clouser) 함수와 함수가 선언된 어휘적 환경의 조합 = 어려운 말이지만 함수를 감싸고 있는 모든 단어 라고 생각하자! 클로저 함수 = "함수를 리턴하는 함수". 즉, 함수와 함수가 선언된 형태 어휘적 환경에 대해서는, 자바스크립트 작동 명세서(ECMAScript Specification)에서 자세히 확인할 수 있지만, 여기서는 조금 단순하게 "변수 및 함수 선언의 형태"로 이해하고 넘어가면 좋겠습니다. 클로저는 리턴하는 함수에 의해 스코프(변수의 접근 범위)가 구분됩니다. 클로저의 핵심은 스코프를 이용해서, 변수의 접근 범위를 닫는(closure; 폐쇄) 데에 있습니다. 따라서, 함수를 리턴하는 것만큼이나, 변수가 선언된 곳이 중요 첫 번째 특징은, 클로저 함수는 "함수를 리턴하는 함수" 라.. 스코프 정리 스코프 변수에는 접근할 수 있는 범위가 존재 변수가 안쪽인지 바깥쪽인지가 중요 이 범위가 바로 스코프 1.바깥쪽 스코프에서 선언한 변수는 안쪽 스코프에서 사용 가능합니다. 반면에, 안쪽에서 선언한 변수는 바깥쪽 스코프에서는 사용할 수 없습니다. 2. 스코프는 중첩이 가능하다. 스코프의 종류 1.블록 스코프 : 중괄호 {} 로 줄러싼 범위 = > 네모를 친다고 생각! 2.함수 스코프 : function 키워드를 사용하는 범위 3.var 키워드는 for 문이 만들어낸 블록 스코프를 무시 var 키워드로 정의한 변수는 블록 스코프를 무시하고, 함수 스코프만 따릅니다. 그러나, 모든 블록 스코프를 무시하는 건 아닙니다. 화살표 함수의 블록 스코프는 무시하지 않습니다. 보통 코드를 작성할 때 블록은 들여쓰기가 적.. 원시 자료형과 참조 자료형 정리 학습 목표 원시 자료형(primitive data type)과 참조 자료형(reference data type)의 구분이 왜 필요한지에 대해서 영상을 보고 이해할 수 있다. 원시 자료형과 참조 자료형의 차이를 이해하고, 각자 맞는 상황에서 사용할 수 있다. 원시 자료형이 할당될 때는 변수에 값(value) 자체가 담기고, 참조 자료형이 할당될 때는 보관함의 주소(reference)가 담긴다는 개념을 코드로 설명할 수 있다. 참조 자료형은 기존에 고정된 크기의 보관함이 아니라, 동적으로 크기가 변하는 특별한 보관함을 사용한다는 것을 이해할 수 있다. 원시 자료형 하나에 데이터 용량이 제한된 하나의 원시 자료형 밖에 담을 수밖에 없기 때문에 원시 자료형이라 불림 변수에는 데이터의 크기와는 관계없이 하나의 데.. 이전 1 2 3 다음
