본문 바로가기
SMALL

JavaScript135

Javascript) 생성자함수 - prototype, __proto__, 속성비교 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 생성자함수 - prototype - javascript는 prototype 기반의 상속 모델을 가진 객체 지향 언어 - 생성자 함수 호출로 생성된 객체는 prototype과 연결된 prototype 체인을 가짐 (prototype 객체를 부모로 삼음) - prototype체인의 최상위에는 Object.prototype이 존재 HTML 코드 생성자함수 - prototype Javascript 코드 const test3 = () => { console.log(Duck); // 생성자함수 console.log(Duck.prototype) // prototype }; function Duck(fi.. 2022. 5. 26.
Javascript) 객체 배열-생성자 함수 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 객체 배열 - 생성자 함수 - 관례상 대문자로 시작하는 이름을 가짐 - new 연산자를 통해 호출되고, 객체를 생성 - this 용법 5) 생성자 함수 안의 this는 현재 객체를 가리킴 - 화살표 함수는 생성자 함수로 사용 불가 HTML 코드 객체배열 - 생성자 함수 Javascript 코드 const test2 = () => { const pets = []; pets.push(new Pet('뚱이', '시추', 8, 15, 'brown')); pets.push(new Pet('둘리', '말티즈', 6, 5, 'white')); pets.push(new Pet('사랑이', '코카스파니엘'.. 2022. 5. 26.
Javascript) 객체 배열-리터럴(call()) 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 객체 배열 - 리터럴 HTML 코드 객체배열 - 리터럴 Javascript 코드 const test1 = () => { const pets = []; pets.push({ name : '뚱이', breed : '시추', weight : 8, age : 15, color : ['brown'], bark() { return this.weight > 10 ? '왈왈' : '멍멍' } }); pets.push({ name : '둘리', breed : '말티푸', weight : 3, age : 4, color : ['brown'], bark() { return this.weight > 10 ? '.. 2022. 5. 25.
Javascript) 구조분해할당 -객체 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 구조분해할당 (Destructuring Assignment) - 비구조할당 - 배열/객체 요소를 손쉽게 변수에 옮겨담는 문법 객체 구조분해할당 - 기본 - 객체의 요소 (속성값)를 변수에 쉽게 옮겨담는 문법 HTML 코드 기본 Javascript 코드 구조분해할당을 사용하지 않을 때 const test5 = () => { const obj = { a : 1, b : '안녕', c : true }; const a = obj.a; const b = obj.b; const c = obj.c; console.log(a, b, c); }; 구조분해할당을 사용하지 않으면, 속성명으로 값을 가져와 변수.. 2022. 5. 25.
Javascript) 구조분해할당-배열 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 구조분해할당 (Destructuring Assignment) - 비구조할당 - 배열/객체 요소를 손쉽게 변수에 옮겨담는 문법 배열 구조분해할당 - 기본 HTML 코드 기본 Javascript 코드 구조분해할당을 사용하지 않을 때 const test1 = () => { const arr = [1, 2, 3]; const a = arr[0]; const b = arr[1]; const c = arr[2]; console.log(a, b, c); } 구조분해할당을 사용하지 않고 배열의 요소를 변수에 담을 때는 위처럼 각각 인덱스를 참조하여 값을 가져와 대입하였습니다. 구조분해할당 사용 시 con.. 2022. 5. 25.
Javascript) 단축 속성 문법 안녕하세요, 코린이의 코딩 학습기 채니 입니다. 개인 포스팅용으로 내용에 오류 및 잘못된 정보가 있을 수 있습니다. 단축속성문법 (ES6) - 속성명 : 속성값 - 속성으로 변수를 전달하면, 자동으로 변수명 : 값으로 처리 HTML 코드 단축속성문법 Javascript 코드 const test5 = () => { const name = '홍길동'; const lang = 'Javascript'; const dev = {name, lang}; console.log(dev); } 속성으로 변수를 전달하였더니 자동으로 변수명 : 값으로 처리된 것을 확인할 수 있습니다. 일반 객체 생성 문법과 혼용하여 사용할 수도 있습니다. const test5 = () => { const name = '홍길동'; const .. 2022. 5. 25.
LIST