개발의변화

자바스크립트는 거의 "모든 것"이 객체 19.1 객체지향 프로그래밍 객체의 상태를 나타내는 데이터와 상태 데이터를 조작할 수 있는 동작을 하나의 논리적인 단위로 묶는ㄷㅏ. 객체의 상태 데이터를 프로퍼티,동작을 메서드 추상화: 사물이나 표상을 어떤 성질,공통성,본질에 착안하여 그것을 추출하여 파악하는 것 상속: 어떤 객체의 프로퍼티나 메ㅎ서드를 다른 객체가 상속받는 것 다형성: 어떤 객체의 속성이나 기능이 상황에 따라 여러가지 형태를 가질 수 있는 성질 캡슐화: 서로 연관있는 속성과 기능들을 하나의 캡슐로 만들어 데이터를 외부로부터 보호하는 것 19.2 상속과 프로토타입 // 생성자 함수 function Circle(radius) { this.radius = radius; this.getArea = fun..

일급객체: 무명의 리터럴로 생성(런타임에 생성) 변수나 자료구조(객체,배열)에 저장 함수의 매개변수에 전달가능 함수의 반환값으로 사용할 수 있다. 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 보통 함수에 매개변수로 넘기기, 수정하기, 변수에 대입하기와 같은 연산을 지원할 때 일급 객체라고 한다 // 1. 함수는 무명의 리터럴로 생성할 수 있다. // 2. 함수는 변수에 저장할 수 있다. // 런타임(할당 단계)에 함수 리터럴이 평가되어 함수 객체가 생성되고 변수에 할당된다. const increase = function (num) { return ++num; }; const decrease = function (num) { return --num; }; // 2. 함수는 ..

8.1 리액트 컴포넌트 타입 리액트 애플리케이션을 타입스크립트 작성할 때 @types/react 패키지에 정의된 리액트 타입 사용 interface Component extends ComponentLifecycle {} class Component { /* ... 생략 */ } class PureComponent extends Component {} P,S는 props와 상태를 의미 props와 state를 제네릭으로 받는 걸 알고 잇음 interface WelcompeProps { name: string; } class Welcome extends React.Component { } 함수 컴포넌트 방식 // 함수 선언을 사용한 방식 function Welcome(props: WelcomeProps): ..

var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기화문이 없는 변수 선언문은 무시된다. var y; console.log(x); // 100 console.log(y); // 1 함수 레벨 스코프 var 키워드는 오로지 함수의 코드 블록만을 지역 스코프로 인정 var x = 1; var y = 1; // var 키워드로 선언된 변수는 같은 스코프 내에서 중복 선언을 허용한다. // 초기화문이 있는 변수 선언문은 자바스크립트 엔진에 의해 var 키워드가 없는 것처럼 동작한다. var x = 100; // 초기..

function foo() { var x = 'local'; console.log(x); // local return x; } foo(); console.log(x); // ReferenceError: x is not defined 지역 변수 x는 foo함수가 호출되기 이전까지는 생성되지 않는다. 지역 변수의 생명 주기는 함수의 생명주기와 일치 (함수가 호출된 후 실행이 종료되면 지역변수도 소멸된다) var x = 'global'; function foo() { console.log(x); // ① var x = 'local'; } foo(); console.log(x); // global 호이스팅은 스코트를 단위로 동작 전역 변수의 생명 주기 var 키워드로 ..

function add(x, y) { // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. // 즉, 매개변수의 스코프(유효범위)는 함수 몸체 내부다. console.log(x, y); // 2 5 return x + y; } add(2, 5); // 매개변수는 함수 몸체 내부에서만 참조할 수 있다. console.log(x, y); // ReferenceError: x is not defined 함수의 매개변수는 함수 몸체 내부에서만 참조할 수 있고 함수 몸체 외부에서는 참조할 수 없다. 즉 매개변수를 참조할 수 있는 유효범위, 매개변수의 스코프가 함수 몸체 내부로 한정 var var1 = 1; // 코드의 가장 바깥 영역에서 선언한 변수 if (true) { var var2 = 2; // 코드 블록..

함수: 일련의 과정을 재사용하여 효율적인 프로그래밍 구현 함수 정의 function 이름명(매개변수){return 반환값} 함수 호출 이름명(인수) 함수는 객체 타입의 값 -> 숫자 값을 숫자 리터럴로 생성하고 객체를 객체 리터럴처럼 함수 리터럴 생성 가능 // 변수에 함수 리터럴을 할당 var f = function add(x, y) { return x + y; }; 함수 이름은 식별자 네이밍 규칙 준수, 이름이 있는 함수: 기명 함수, 이름이 없는 함수: 무명 함수 함수 선언문 vs 함수 표현식 // 함수 선언문 function add(x, y) { return x + y; } // 함수 참조 // console.dir은 console.log와는 달리 함수 객체의 프로퍼티까지 출력한다. // 단, N..

객체는 변경 가능한 값! 객체를 변수에 할당하면 변수에는 참조 값이 저장된다. 값에 의한 전달: 원시 값을 갖는 변수를 다른 변수에 할당하면 원본의 원시 값이 복사되어 전달 참조에 의한 전달: 객체를 가리키는 변수를 다른 변수에 할당하면 원본의 참조 값이 복사되어 전달 11.1 원시 값 원시값이 변경 불가능 한 것은 변수가 아니라 값에 대한 진술이다. 값을 할당하면 새로운 메모리 주소에 재할당하고 계속해서 메모리 공간의 주소가 변경되어지는 것을 불변성이라고 한다. 재할당 이외에 원시 값인 변수 값을 변경할 수 있는 방법은 없다. 11.1,2 문자열과 불변성 유사 배열 객체: 배열처럼 인덱스로 프로퍼티 값에 접근 할 수 있고 length 프로퍼티를 갖는 객체를 말한다. 문자열은 마치 배열처럼 인덱스를 통해..