Front end

Front end/JavaScript

🔖 객체지향3. prototype의 특징

1. prototype은 constructor 함수에만 생성된다. 위 사진처럼 우리가 일반적으로 만드는 array나 object에는 prototype이 없다. 그럼 일반 object 같은걸 상속하고 싶으면 어떻게 하는가?? - constructor 함수를 만들기 - Object.create() 사용 - class 사용 2. 내 부모 유전자를 찾고 싶다면 __proto__를 출력해보면 된다. 부모로부터 생성된 자식 object들은 __proto__라는 속성이 있다. 이걸 출력해보면 부모의 prototype이 출력된다. 그래서 __proto__는 부모의 prototype과 같은 의미이다. function Student(){ this.name = '강동욱'; this.age = 15; } var 학생1 = n..

Front end/JavaScript

🔖 객체지향2. prototype

function Student(이름) { this.name = 이름; this.age = 15; this.sayHi = function() { console.log('안녕하세요 ' + this.name + '입니다.') } } let 학생1 = new Student('강동욱'); let 학생2 = new Student('손흥민'); // ▲ Student가 가지고 있는 name, age, sayHi 속성들을 물려받음 // ▲ 이러한 과정을 전문용어로 상속이라고한다. ▲ 위 코드는 객체지향 용어로 상속(inheritance)이라고 한다. Student라는 constructor가 가진 name, age, sayHi 속성들을 그대로 물려받아서 오브젝트를 하나 뽑아주는걸 상속이라고 부른다. 그래서 상속해주는 것..

Front end/JavaScript

🔖 객체지향1. constructor(생성자 함수 짧게 줄여서 생성자)

🌈 constructor 문법의 용도 - object를 마구 복사(Deep copy)하고 싶을때 사용해라. - 비슷한 object 여러개 만들 때 유용하다. 비슷한 학생 object를 여러개 만들려면? - constructor 라는 object 생성 기계를 만들어라. function Student (이름) { this.name = 이름; // this는 새로생성되는 object를 뜻함(instance) this.age = 17; this.sayHi = function() { console.log('안녕하세요 ' + this.name + '입니다'); } } // ▲ 위 코드 전체를 constructor라고 함 var 학생1 = new Student('강동욱'); // ▲ Student가 가지고 있는 na..

Front end/JavaScript

🔖Reference data type

1. Primitive data type 그냥 문자와 숫자는 : 변수에 값이 그대로 저장됨 Primitive data type 다루기 : 복사 var 이름1 = '강동욱'; var 이름2 = 이름1; 이름1 = '손흥민'; console.log(이름1) // 손흥민 console.log(이름2) // 강동욱 2. Reference data type Array, Object는 : 변수에 reference가 저장됨 reference에는 메모리주소(화살표)가 들어있다. Reference data type 다루기 : 복사 var 이름1 = { name: '강동욱' }; var 이름2 = 이름1; 이름1.name = '손흥민'; console.log(이름1) // 손흥민 console.log(이름2) // 손흥민..

Front end/JavaScript

🔖 Rest 파라미터

argumnets의 단점 - 쓰고싶지 않은 인수를 다 받아옴. function 함수 (a, b, c) { for(var i = 0; i < arguments.length; i++) { console.log(arguments[i]); } } 함수('쓰고싶지않은인수', 2, 3, 4); // ▼ 출력 // '쓰고싶지않은인수' // 2 // 3 // 4 Rest 파라미터 - 자리에 오는 모든 파라미터를 [ ]에 보관해줌 function 함수2 (a, b, ...rest) { console.log(rest); } 함수2(1,2,3,4,5,6,7); // ▼ 출력 // [3, 4, 5, 6, 7] arguments와 rest 파라미터의 차이점 arguments: 모든 인수를 [ ]에 담아준다. rest 파라미터:..

Front end/JavaScript

🔖 자바스크립트 함수 (default parameter/arguments)

함수의 default 파라미터 // b자리에 아무것도 안넣을 경우 10을 넣어주세요~ function add( a, b = 10 ) { console.log( a + b ); } add(1) // 11 add(1, 2); // 3 default 파라미터는 b자리에 인수를 안넣었을 때만 발동 default 파라미터에는 수학 연산자, 다른 파라미터와 연산, 심지어 함수입력도 올 수있음 연습문제 1. function 함수(a = 5, b = a * 2 ){ console.log(a + b); return 10 } 함수(3); // ▼ 출력 // 9 연습문제 2. function 함수(a = 5, b = a * 2 ){ console.log(a + b); } 함수(undefined, undefined); // ..

Front end/JavaScript

🔖 스프레드 연산자(Spread operator)

…spread operator 뭔가 내용물을 빼고 싶을 때 쓰면 된다. 1. Array에 붙이면 대괄호를 제거해준다. var arr = ['hello', 'world']; console.log(...arr); // hello world 2. 문자열에 붙이면 펼쳐준다. var str = 'hello'; console.log(...str); // h e l l o ...spread operaotr 어디다가 쓰면 좋을까? 1. 배열 합치기 / 얕은 복사 var a = [1, 2, 3]; var b = [4, 5]; var c = [...a]; console.log(c) // [1, 2, 3] var d = [...a, ...b]; console.log(d) // [1, 2, 3, 4, 5] 얕은 복사 할 때 ..

Front end/JavaScript

🔖 객체

const a = 'age'; const dongwook = { id: 'dddda321', name: '동욱', "full name": '강동욱', [a] : 26, getNameFunction : function () { console.log('펑션 동욱입니다.'); }, getName() { console.log('동욱입니다!!!'); console.log('function this :', this); console.log(this.name); }, getNameArrowFunction : () => { console.log('애로우 펑션 동욱입니당당당당~~'); console.log('arrow function this :', this); console.log(this.name); } } cons..

Front end/JavaScript

🔖 객체,배열 구조분해

const dongwook = { id: 'dddda321', name: '강동욱', age: '26', habit: 'coding', }; // const id = dongwook.id; // const name = dongwook.name; // const age = dongwook.age; // const habit = dongwook.habit; const { ID, habit } = dongwook; console.log(ID, habit); // undefined "coding" // 객체를 구조분해 할때 반드시 객체의 키값으로 해야한다 !!!!! const arr1 = ['dongwook98', '동욱', 26]; // const dongwookId = arr1[0]; // const don..

Front end/JavaScript

🔖 블록, 함수 스코프, 클로저 문제

for(let i=0; i { showBall(winBalls[i], $result) }, (i+1) * 1000); } 다음 코드는 내가 로또 생성기를 만들다 쓴 코드이다. 변수 winBalls는 당첨숫자 6개를 저장한 배열 데이터이고 showBall 함수는 아래와 같이 화면에 당첨숫자가 나오게 해주는 코드이다. 앞에서 작성한 반복문을 잠깐 let에서 var로 바꿔보았다. for(var i=0; i { showBall(winBalls[i], $result) }, (i+1) * 1000); } 단순히 var로 바꿨을 뿐인데 결과가 완전히 달라진다. winball[i]와 i를 콘솔로 출력하면 모두 undefined, 6으로 나온다. for(var i=0; i { console.log(winBalls[i],..

욱둥
'Front end' 카테고리의 글 목록 (4 Page)