프로그래밍/개발 언어30 프로토타입과 클래스 프로토타입(prototype) - 자바스크립트에서 기본 데이터 타입을 제외한 모든 것이 객체 - 프로토타입 객체를 이용하여 객체를 만듦 - 객체 안에 '__proto__' 속성이 원형을 의미하는 프로토타입 객체를 참조하는 숨겨진 링크가 있음 - 이 링크를 프로토타입이라고 정의 // 예시 코드 class Human { constructor(name, age) { this.name = name; this.age = age; } sleep() { return this.name; } } let kimcoding = new Human('이코딩', 30); __proto__ 객체가 만들어지기 위해 사용된 원형인 프로토타입 객체를 참조하는 링크를 보유 클래스, 인스턴스, 프로토타입의 관계 클래스(청사진)+constr.. 2022. 5. 25. 클래스와 인스턴스 객체지향프로그래밍: 데이터와 기능을 한곳에 묶에서 처리 - 하나의 청사진(blueprint)를 만들고 -> class 클래스에 속성과 메소드를 정의하고, 인스턴스에서 사용 // ES5 문법 function Car(brand, name, color) { this.brand = brand; this.name = name; this.color = color; } //ES6 클래스 작성 문법 class Car{ constructor(brand, name, color) { this.brand = brand; this.name = name; this.color = color; } } - 청사진을 바탕으로 객체(object)를 만드는 -> instance 인스턴스를 만들 때 new키워드 사용 let avante = .. 2022. 5. 25. 고차함수 코플릿 고차함수 이론 - 일급객체: 변수에 할당 가능 다른 함수의 전달인자로 전달 가능 다른 함수의 결과로서 리턴 가능 (함수를 리턴하는 함수를 커링함수라고 함) javascript에서 함수는 일급객체 - 배열 내장 메서드(객체 안의 함수) map: 배열의 각 요소에 콜백 함수를 적용시켰을 때, 새로운 배열을 리턴 filter: 배열의 각 요소에 콜백 함수를 적용시켰을 때, true를 리턴하는 요소들만 모은 새로운 배열을 리턴 reduce: 배열의 각 요소를 콜백 함수에 맞게 하나로 응축시킨 값을 리턴 기타 등등 문제풀이 일반적인 함수 리턴 function returnFunction() { // TODO: 여기에 코드를 작성합니다. return function () { return'Hello HoF!'; } }.. 2022. 5. 24. 반복문 - 정의: 같거나 비슷한 코드를 여러 번 실행시켜야 할 경우에 쓰이는 구문 - 예시 let sum = 1; sum = sum + 2; sum = sum + 3; sum = sum + 4; console.log(sum); 반복할 조건을 코드로 작성 let sum = 1; //sum과 숫자(n)의 합을 sum에 대입 //숫자는 2부터 시작 //숫자가 4가 될 때까지 반복 //숫자는 1씩 증가 - for 구문 반복할 조건을 초기화(let n = 2;), 조건식(n 2022. 5. 18. 문자열 - '+'연산자를 쓸 수 있음 string타입과 다른 타입 사이에 +연산자를 쓰면, string 형식으로 변환 - length : 문자열 전체 길이의 변환 - string 메소드 str.indexof(searchValue) 문자열이 있는지 리턴함 찾고자 하는 문자열이 없으면 '-1'을 return lastindexOf는 문자열 뒤에서 부터 찾음 str.split(seperator) 분리기준에 따라 문자열 자름 str.substring(start, end) 시작 index, 끝 index 시작과 끝 index사이의 문자열 str.toLowerCase() / str.toUpperCase() 소문자 만들기 / 대문자 만들기 2022. 5. 18. 조건문 - 조건문은 어떠한 조건을 판별하는 기준을 만드는 것 - 조건문에는 반드시 비교연산자가 필요 - 다양한 비교 연산자 > //초과 = //이상 2022. 5. 18. Unit11-[JS/브라우저] DOM DOM이란 DOM: Document Object Model HTML요소를 object처럼 조작할 수 있는 모델 html에 javascript를 적용하기 위해서는 DOM구조를 조회할 때에는 console.dir이 유용 console.dir은 console.log와 달리 DOM을 객체의 모습으로 출력 DIV와 DOM의 관계도 body가 가장 상위에 있고, 아래의 여러 구성요소가 부모-자식 관계를 가지고 있음 이러한 자료구조를 컴퓨터 공학에서는 '트리구조'라고 말함 DOM의 CRUD creat : 엘리먼트를 만들고 read : 조회하고 update : 갱신하고 delete : 삭제하는 예) - div element를 변수 tweeDiv에 할당하기 const tweeDiv = document.creatEleme.. 2022. 5. 17. JavaScript 문법정리 expect 테스트하는 값과 기대값을 비교하기 위해 expect 함수 사용 더 공부할 링크다양한 matcher 확인 Expect / Should - Chai 대표 예제 it('Matcher .equal 의 사용법을 학습합니다.', function () { let expectedValue = 2; // TODO // .equal은 두 값이 타입까지 엄격하게 같은지 검사(strict equality, ===)합니다. expect(1 + 1).to.equal(expectedValue); }); it('Matcher .equal의 사용법을 학습합니다.', function () { let actualValue = (1 + 1).toString(); expect(actualValue).to.equal('2'); /.. 2022. 5. 16. 원시 자료형과 참조 자료형 원시 자료형: 숫자(number), 문자형(string), 불린(boolean), undefined, null 원시 자료형은 '하나'의 정보,데이터를 담고 있음(value) 데이터 저장소(메모리)의 용량이 제한되어 변수 하나에 데이터 용량이 제한된 하나의 원시 자료형만 가능했었음 변수에는 데이터의 크기와는 관계없이 하나의 데이터만 담을 수 있음 const num1 = 123; const num2 = 123456789; 원시 자료형은 값 자체에 대한 변경이 불가능(immutable)하지만, 변수에 다른 데이터를 할당할 수 있음 "hello world!" "hello codestates!" // "hello world!" 와 "hello codestates!"는 모두 변경할 수 없는 고정된 값입니다. let.. 2022. 5. 12. 이전 1 2 3 4 다음
