-
10강 - 객체
1. 객체: 키와 값으로 구성된 프로퍼티들의 집합
- 객체 내 프로퍼티: 함수를 포함하여 모든 값을 사용 가능. 이때 함수는 메소드라 불림
- 데이터(프로퍼티)와 동작(메소드)를 모두 포함할 수 있어서 구조화에 유용하다.
- 프로토타입: 객체지향의 상속을 구현하기 위한것
1.1 프로퍼티
- 프로퍼티 키(이름)과 프로퍼티 값으로 구성됨
- 프로퍼티는 프로퍼티 키로 유일하게 식별 가능(식별자,identifier)
- 프로퍼티 키: 빈 문자열을 포함하는 모든 문자열 또는 symbol값,
- 의외의 값은 타입 변환되어 문자열이 된다.
- 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티만 적용된다.
- 프로퍼티 값: 모든 값
- 객체는 순서를 보장하지 않는다.
2. 객체 생성 방법
- 프로토타입 기반 객체 지향 언어로서 클래스라는 개념이 없고 별도 의 객체 생성 방법이 존재
2.1 객체 리터럴
- var object = {}; 중괄호를 이용해 객체 생성
2.2 Object 생성자 함수
- var person = new Object();
- new 연산자와 Object 생성자(constructor) 함수를 호출하여 빈 객체 생성 가능
- 파스칼케이스로 이름 만든다.
- 객체 리터럴이 더 간단해서 Object 생성자는 잘 안쓰인다.
2.3 생성자 함수
- function Person(name,gender) {}
- 같은 객체인데 프로퍼티 값만 다른 객체를 여러개 만들때 아주 유용하다.
- 생성자 함수 이름: 대문자로 시작
- this는 생성자 함수가 생성할 인스턴스를 가리킨다.
- this에 연결(바인딩)되어 있는 프로퍼티와 메소드는 public(외부에서 참조가능)이다.
- 생성자 함수 내에서 선언된 일반 변수는 private(외부에서 참조 불가능)이다. 생성자 함수 내에서만 자유롭게 접근 가능하다.
- 기존 함수 생성 방법과 동일한 방법으로 생성자 함수를 만들기 때문에, 기존 함수 또한 new 연산자를 붙여 호출하면 생성자 함수처럼 동작 가능해서, 생성자 함수와 일반 함수를 구분짓기 위해 생성자 함수는 대문자로 시작한다.
3. 객체 프로퍼티 접근
3.1 프로퍼티 키
- 문자열(빈 문자열 포함)을 지정하고 문자열이나 symbol값이 아니면 타입이 문자열로 변환되어 저장된다.
- first-name은 프로퍼티 키로 쓰려면 ''붙여야 한다. -가 연산자로 인식해서이다.
- 표현식을 프로퍼티 키로 쓰려면 []로 묶어야 한다.
- 예약어는 프로퍼티 키로 쓰면 안된다.
3.2 프로퍼티 값 읽기
- 마침표 표기법
- 유효한 자바스크립트 이름,예약어 아닐때
- 따옴표 붙이지 않고 쓴다.
- 대괄호 표기법
- 대괄호 내 프로퍼티 이름은 문자열이어야 한다.
- 프로퍼티 이름에 따옴표 안붙어있어도 붙여써야 한다.
3.3 프로퍼티 값은 갱신, 생성 가능
3.4 프로퍼티 삭제
- 프로퍼티만 삭제할 수 있다. 객체는 못 삭제한다.
- delete person.gender;
3.5 for-in 문
- 객체에 포함된 모든 프로퍼티에 대해 루프 수행 할 수 있다.
- for (var prop in person)에서 prop은 스트링 타입이라 person[prop]으로만 가능하다.
- 배열요소만을 순회하지 않아서 배열에는 사용하지 않는게 좋다.
- 배열은 for-of 문을 써서 배열요소만 순회한다.
4 Pass-by-reference
- object type을 객체 타입 또는 참조 타입이라 한다.
- 생성된 객체가 어디 있는지 주소를 저장하는 곳이 변수다.
- var foo = {val: 10}; var bar = {val: 10} 에서 내용은 같지만 서로 별개의 객체를 가지고 있어서 참조값 역시 서로 다르다.
5 Pass-by-value
- 원시타입, 값이 직접 복사되어 전달된다.
- var a = 1; var b = a; a = 10; 에서 b는 a=1값이 저장되고 그 후 a =10 이 있어도 주소가 아니라 값이 저장되기 때문에 b = 1 이다.
12강 - 함수
1. 함수 정의 방법
- 함수 선언문
- 함수 표현식
- Function 생성자 함수
1.1 함수 선언문
- function square(number) {}
- 함수명 생략 불가
- 함수명으로 호출시 자바스크립트 엔진이 var square = function square(number) {}으로 변경시켜줘서 함수명으로 호출가능하게 한다.
1.2 함수 표현식
- var square = function(number) {};
- 함수가 변수에 할당된 방식을 함수 표현식이라고 부른다. 이때 함수명이 없어도 되고 이를 익명함수라고 부른다.
- 함수 호출시 변수를 호출해야한다.(함수명은 외부코드에서 접근 불가)
- 함수는 일급객체라서 할당된 변수는 함수를 가리키는 참조값을 저장한다.(square는 function의 참조값을 저장중)
- 재귀적 호출을 위해 함수명을 붙이기도 한다.
1.3 Function 생성자 함수
- var square = new Function();
2.1 함수 호이스팅
- 함수 선언문으로 정의된 함수는 함수 선언 위치와 상관없이 함수를 호출 가능한데 이를 함수 호이스팅(hoisting)이라고 한다.
- 모든 선언let,const,var,function,function*,class을 호이스팅한다.
- 함수 선언,초기화,할당이 한번에 이뤄져서 위치가 상관이 없다.
2.2 변수 호이스팅
- 함수 표현식의 경우 함수 호이스팅이 아니라 변수 호이스팅이 발생한다.
- var res = square(50);
- var square = function(number) {}
- 에서 변수 호이스팅(변수 생성,초기화,할당이 분리되어 진행함) 발생
- 하지만 이게 단점이 아니라 함수 선언 전 호출을 못하게 막기 때문에 함수 표현식을 사용해야한다.
- First-class object (일급 객체)
- 무명의 리터럴로 생성 가능
- 함수의 매개변수로 전달 가능
- 리턴값으로 사용 가능
- 변수나 자료구조(배열,객체)에 저장 가능
4.1 매개변수(parameter,인자) vs 인수(argument)
- 매개변수는 함수내에서 변수랑 동일하게 메모리 차지하고 인수 전달 안하면 undefined로 초기화됨
4.2 Call-by-value
- 원시타입 인수는 call-by-value(값에의한 호출)로 동작한다.
- 함수에 인자값으로 원시타입 인수가 들어가면 값을 복사해서 들어가는거라서 함수 내에서 값이 바뀌었다고 해도 리턴한 원시타입값은 변경되지 않는다.
4.3 Call-by-reference
- 객체형(참조형) 인수는 Call-by-reference로 동작한다.
- 함수 매개변수로 넣을때 객체의 참조값(주소값)이 들어가기 때문에 함수 동작 완료하면 실제로 그 객체의 값이 변경된다.
5 반환값
- 여러 개 리턴하고 싶으면 배열을 이용
- return 생략하면 undefined 리턴됨
- return 만나면 함수 실행 중단 후 호출한 코드로 되돌아감
6 함수 객체의 프로퍼티
6.1 함수 객체가 가지는 arguments 프로퍼티
- 함수 호출 시 전달된 인수들의 정보를 담고 있는 iterable,array-like object(유사배열객체,length를가짐)이며 함수 내부에서 지역변수처럼 사용된다. 외부에서는 사용할 수 없다.
- 매개변수는 인수로 초기화된다.
- 매개변수 개수보다 인수를 적게 전달하면 전달안된 매개변수는 undefined로 초기화되고
- 더 많이 인수가 오면 초과한 인수는 무시된다.
6.2 caller 프로퍼티
6.3 length 프로퍼티
- 함수 정의시 작성된 매개변수의 개수 의미한다.
6.4 name 프로퍼티
6.5 proto 접근자 프로퍼티
- 모든 객체는 [[Prototype]]이라는 내부 슬롯이 있다.
- [[Prototype]]은 프로토타입 객체이다.
- 프로토타입 객체는 객체간 상속을 구현하기 위해 사용된다=다른 객체에 공유 프로퍼티를 제공하는 객체이다.
- 프로토타입 객체에 직접 접근할 수 없어서 proto 프로퍼티로 간접 접근하기 위해 사용한다.
- 모든 객체의 프로토타입 객체인 Object.prototype 객체의 프로퍼티다.
6.6 prototype 프로퍼티
- 함수 객체만 가지고 있는 프로퍼티다.
- 객체를 만드는 생성자 함수에서 인스턴스의 프로토타입 객체를 가리킨다.
7. 함수의 다양한 형태
7.1 즉시 실행 함수
- (function{}()): 괄호로 묶고 중괄호뒤에()붙이면 최초 한번만 호출되고 다시 호출 불가.
- 최초 한번 실행이 필요한 초기화 처리에 사용
- 동일한 이름의 변수나 함수가 같은 스코프에 있을 때 충돌 방지 목적으로 즉시실행함수에 넣기도 한다.
7.2 내부 함수
- 함수 내부에 정의된 함수
- 내부함수안에서는 외부함수의 변수에 접근 가능
- 외부함수안,내부함수밖에서 내부함수의 변수에 접근 불가
- 외부함수의 바깥에서 내부함수 호출 불가
7.3 재귀 함수
- 자기 자신을 호출하는 함수
- 스택오버플로우에 주의
- for,while문으로 구현 가능
7.4 콜백 함수