ksy

1. JSX 컴포넌트라는 유닛을 통해 html element의 유지관리를 할 수 있고 이 기능을 자바스크립트에 추가한것 let name = '김상연' const element = Hello, {name}; let name = '김상연' const element = Hello, {name}; 이처럼 JSX 안에서 표현식을 사용할수 있다. 여러줄로 나눠서 쓰려면 괄호로 묶어야 세미콜론 삽입을 피할 수 있다. 속성에 따옴표를 이용해 문자열 리터럴을 정의할 수 있습니다. const element = const element = 속성에 표현식 삽입도 가능 const element = const element = JSX 태그는 자식을 포함할 수 있음 const element = ( hello! ); const el..

기존 상속 prototype을 Object.create(부모 객체 prototype)을 사용해 속성과 메소드 가져오기 constructor을 자신의 constructor로 변경하기 부모객체.call(this.name); 을 통해 this 전달시켜주기 부모객체.prototype.메소드이름.apply(this)와 같은 형식으로 부모 매소드 사용가능 ES6 Class를 사용하면 class Person { constructor(name) { this.name = name; } eat() { console.log(this.name + " is eating."); } } class Student extends Person { constructor(name) {// super(name); // Property를 따로..

ES6 class가 나오기전 자바스크립트에서 opp를 사용하기위해 사용한 4가지 방법 1. Functional let Car = function(position){ let someInstance = {}; someInstance.position = position; someInstance.move = function(){ this.position++; } return someInstance } 모든 인스턴스가 각각 동일한 내용의 메소드를 가지고 있다(메모리 낭비) 2. Functional Shared let extend = function (to, from) { for (let key in from) { to[key] = from[key]; } }; let someMethods = {}; someMeth..

this는 함수 실행시 호출 방법에의해 결정되는 객체이다. Global 실행 환경에 따라 다르다 브라우저에서 window, node.js에서는 module.exports이다. Function 호출 실행 환경에 따라 다르다. 브라우저 에서는 window, node.js에서는 global이다. Method 호출 Method가 위치한 객체를 반환한다. new 키워드를 이용한 생성자 호출 새롭게 생성된 인스턴스 객체이다. call, apply, bind 셋 모두 첫번째 인자를 this로 바꿔준다.

자바스크립트는 class가 없음에도 불구하고 객체 지향 프로그래밍 언어이다. 그 이유는 prototype을 사용하여 상속을 구현하기 때문이다. 자바스크립트에서 함수는 객체의 포함된다. 이때문에 함수는 자신의 property와 method를 가질수 있는것이다. 이처럼 모든 함수는 생성될때 자신 객체와 또 다른 무언가를 만들어내는데 그것이 바로 prototype이다. prototype은 객체로 constructor와 __proto__를 가지고 있다. 또한 객체라는 특성을 이용해 새로운 property와 method를 추가할 수 있다. 위를 이해했다면 반 이상 온것이다. 사실 __proto__ 속성은 모든 객체가 가지는 속성이다. __proto__는 자신의 부모 함수의 prototype을 가리키는데 이를통해 ..

객체 지향 프로그래밍이란? property(속성)와 method(메소드)를 가진 객체와 그 객체간의 관계를 통해 프로그램을 만드는 작업방식이다. 객체 지향 프로그래밍의 특성 캡슐화 속성과 메소드를 object라는 하나의 캡슐로 묶어서 사용할 수 있다. 상속 부모 객체의 속성과 메소드를 물려 받음으로써 중복되는 코드 사용을 줄일 수 있다. 추상화 객체의 내부 함수의 형태를 몰라도 사용법만으로 객체를 사용할수 있다. 다형성 상속 받은 메소드로 객체마다 다양한 결과를 만들어 낼 수 있다.

Arrow function 기존의 함수 표현식을 사용할때 let add = function(x,y){ return x+y; } arrow function을 사용하여 간단하게 표현했을때 let add = (x,y) => { return x + y; } arrow function에 return줄만 존재한다면 return과 {}생략 가능 생략가능 let add = (x,y) => x + y; arrow function의 매개변수가 1개라면 소괄호 생략 가능 let get_arr_length = x => x.length; arrow function을 사용하여 간단한 익명함수 생성후 실행 (() => {console.log('hi')})() (정말 간단하고 사용하기 좋아보이지만 Arrow function은 thi..

함수의 매소드중 가장 중요한 세가지에 대해 알아보자 call, apply, bind 기본적으로 세 매소드 모두 함수에서 사용되어진 this를 바꿔주는 역활을 한다. 아래를 보자 function sayhi(name){ hi = '안녕하세요' console.log(`${name}님 ${this.hi}`); } obj = { hi: '방갑습니다.' } sayhi('하연'); sayhi.call(obj, '상연'); sayhi.apply(obj, ['중연']); bindhi = sayhi.bind(obj, '하연'); bindhi(); 하연님 안녕하세요 상연님 방갑습니다. 중연님 방갑습니다. 하연님 방갑습니다. 세 함수모두 첫번째 매개변수로 obj를 지정해 주었더니 obj의 hi(방갑습니다.)가 sayhi(안녕..

변수 선언문 var, let, const의 차이 var 중복 선언 가능 function scope 호이스팅 let 중복 선언 불가 block scope 같은 함수 안에서도 선언전 참조 불가 const 중복 선언 불가 block scope 같은 함수 안에서도 선언전 참조 불가 값 변경 불가