Front-End: Web/JavaScript (85) 썸네일형 리스트형 [코딩애플] js part 2-6. class를 복사하는 extends / super 객체지향5. class를 복사하는 extends / super 부모와 유사한 class를 하나 더 만들고 싶다면? ➡️ extends (class 상속) class 부모 { ... } class 하나 만들기 class 할아버지{ constructor(name){ this.성 = 'Kim'; this.이름 = name; } } var 할아버지1 = new 할아버지('만덕'); // 할아버지1 == 할아버지 {성: 'Kim', 이름: '만덕'} 이거랑 유사한 class를 만들고 싶다면(할아버지의 속성들 그대로 물려받아서) class 아버지 extends 할아버지 { constructor (){ this.나이 = 50; } } var 아버지1 = new 아버지(); // Uncaught ReferenceErr.. [코딩애플] js part 2-5. ES6 방식으로 안쉽게 구현하는 상속기능(Class) 객체지향 4. ES6 방식으로 안쉽게 구현하는 상속기능(Class) 클래스(Class) class 부모 { constructor(){ this.name = 'Kim'; } } ES6에서 constructor를 만드는 방법이다(신문법). var 자식 = new 부모(); console.log(자식); // 부모 {name: 'Kim'} 함수를 추가하기 constructor에 추가하던지 (보임) class 부모 { constructor(){ this.name = 'Kim'; this.sayHi = function(){ console.log('Hello'); } } } 밑에 쓰던가 (안보이는데 부모의 유전자(prototype)에 있음) 모든 자식들이 사용할 수 있도록 내장함수가 됨. 관리가 편함(기능 수정, .. [코딩애플] js part 2-4. 상속기능을 구현하는 다른 방법 상속기능을 구현하는 다른 방법 이전에 배웠던 prototype function 기계(){} 는 옛날 문법이다. 사람들은 이제 prototype없이 ES5, ES6 방법으로 상속 기능을 사용한다. 객체지향 3. ES5 방식으로 쉽게 구현하는 상속기능 ES5: Object.create(물려받을 부모 object) constructor는 아니다. Object.create(프로토타입object); 부모가 가진 name, age를 그대로 물려받은 자식 object를 만들고 싶다면? constructor 함수를 만들거나 **Object.create()**를 사용한다. var 부모 = {name: 'Kim', age: 50}; var 자식 = Object.create(부모); console.log(자식); // {}.. [코딩애플] js part 2-3. Object 생성기계인 constructor를 만들어 써보자 객체지향1. Object 생성기계인 constructor를 만들어 써보자 constructor 문법의 용도 1. Object를 마구 복사하고 싶을 때 사용(별로 쓸데없음) 비슷한 object를 여러개 만들 때, 오브젝트 복사를 도와준다. var 학생1 = { name: 'Kim', age: 15 } var 학생2 = { name: 'Kim', age: 15 } var 학생3 = { name: 'Kim', age: 15 } ... 비슷한 학생 object를 여러개 만들려면, **contstructor라는 object 생성 기계**를 만들자. constructor는 function 키워드를 빌려서 만든다. 함수와 다르다는 걸 보여주기 위해 관습적으로 첫글자를 대문자로 쓴다. function Student().. [코딩애플] js part 2-2. 이상한 Reference data type과 더 이상한 예제 3개 이상한 Reference data type과 더 이상한 예제 3개 Primitive data type 그냥 문자와 숫자 변수에 값이 그대로 저장됨 Reference data type var 변수 = 1234; var 어레이 = [1,2,3]; // 변수에 [1,2,3]이 저장된 게 아니라, reference가 저장됨 Array, Object는 변수에 값이 저장이 안된다. 변수에 **reference**가 저장된다. [1,2,3]이 저쪽에 있어요(화살표) 를 저장함 종류 Array Object Reference data type 다루기 예시 1: 복사 Primitive data type var 이름1 = '김'; var 이름2 = 이름1; console.log(이름1); // 김 console.log(이름.. [코딩애플] js part 2-1. 자바스크립트 함수 업그레이드하기 (default parameter/arguments) ES6부터 함수가 많이 업그레이드 됐다. 알아보자! 1. 파라미터 2개가 들어가는 함수인데 1개만 써도 에러가 안남 엄격한 언어는 에러가 나는데, 자바스크립트는 장점이자 단점으로 에러가 안남 function 더하기(a, b) { console.log(a + b); } 더하기(1,2); // 3 더하기(1); // 1 (에러가 안남) 2. 함수의 default 파라미터 b 자리에 아무것도 안넣을 경우에 넣어주세요~ 하는 defaultValue 예제를 살펴보자. function 더하기(a, b = 10) { console.log(a + b); } 더하기(1); // 11 (b자리에 파라미터를 안넣었을 때만 발동) 더하기(1,2); // 3 수학 연산도 넣을 수 있다. function 더하기(a, b = 2 .. [코딩애플] js part 1-7. Spread Operator (...)와 apply / call 모든 괄호를 없애주는 Spread Operator (...) 자바스크립트에서 펼쳐서 늘어놓고 싶을 때 사용하는 연산자. 대괄호를 다 제거해준다! (뭔가를 늘어놓고 싶을 때) var 어레이 = ['hello', 'world']; console.log(어레이); // ["hello","world"] console.log(...어레이); // hello world 문자에 붙이면 펼쳐준다! 문자도 array처럼 인덱싱이 가능하다. 그래서 문자에도 대괄호를 제거해주고 펼쳐준다고 생각하면 된다. var 문자 = 'hello'; console.log(문자); // 'hello' console.log(...문자); // h e l l o ('h''e''l''l''o') // 문자 인덱싱 console.log(문자[0].. [코딩애플] js part 1-6. 자바스크립트가 문자 다루는 신기한 방법 - Template literals (strings) Template Literals 문자를 다르게 제작할 수 있는 방법이다. backtick / backquote (백틱) var 문자 = `손흥민`; 엔터키 가능 var 문자 = `손 흥민`; 중간중간 변수 넣기 쉬움 var 변수 = '손흥민'; var 문자 = `안녕하세요 저는 ${변수}`; // (예전방식) '문자' + 변수 특히 HTML 작성시 유용함 var 템플릿 = `${변수}`; ⭐tagged literal (backquote 문자열 + 함수) 함수 뒤에 (소괄호) 대신 ``을 붙여도 함수가 실행된다. var 변수 '손흥민'; var 문자 = `안녕하세요 ${변수}입니다`; function 함수(){ return 10; } console.log(함수`안녕하세요 ${변수}입니다`); // 10 되.. 이전 1 2 3 4 5 6 7 ··· 11 다음