자바스크립트 기본 문법 정리

1. 기본문법

1.1. 자바스크립트 특징

1.1.1. 함수

자바스크립트 함수는 어휘적 유효범위를 가진 일급 객체입니다. 즉, 함수는 변수에 대입되거나 인수로 넘길 수도 있고, 반환 값으로 사용하거나 연산 등에 사용하는데 전혀 제약이 없는 객체입니다.

1.1.2. 느슨한 타입 체크

자바스크립트 컴파일러는 타입 오류를 찾을 수 없습니다. 복잡한 클래스 계층을 구성할 필요도가 없고, 타입 캐스팅을 신경 쓰지 않아도 됩니다.

1.1.3. Object Literal

콜론으로 구별되는 프로퍼티 이름/값 쌍들이 다시 쉼표로 분리된 목록을 사용할 수 있습니다. Json에 기초가 되며, 필요한 요소들을 열거하는 방법으로 객체를 만들 수 있습니다.

1.1.4. prototype에 의한 상속

클래스 기반 언어가 아니기 때문에 모든 객체에 내장된 prototype을 이용해 상속을 구현 합니다.

1.1.5. Global variable

최상위 레벨에 선언된 변수는 컴파일 시에 전역 변수로 취급되어 전역 객체(Global object)가 됩니다. 후술하겠지만, 성능에 좋지 않습니다.

1.1.6. 프로그램 실행 단계

파싱을 마치고 나면 해당 레벨의 var변수와 함께 변수가 정의됩니다. 아직 코드 블록은 실행되지 않습니다. 프로그램의 모든 var변수와 함수 변수는 그것과 연관된 variable scope 객체의 멤버로 추가됩니다. 자바스크립트에서는 변수명과 함수명을 별도로 구분해서 관리하지 않습니다. 동일한 이름의 변수 또는 함수를 정의하면 이전에 정의된 내용을 덮어쓰게 됩니다.

1.2. Convention

사용 목적

1. 공백과 탭을 섞어 쓰지 않는다.

2. {} ()등 영역 문자는 개행한다.

3. Minify 문제

4. Source map 사용

1.3. Primitive Data Type

1.3.1. 숫자

일반적인 의미의 숫자를 말합니다. 10진수를 기본으로 하는 64-bit (8-bytes) 로 되어 있습니다. 표기상으로는 정수(123), 실수(12.3), 8진수(0으로 시작하는 숫자, 0377), 16진수(0x로 시작하는 숫자, 0x22)등 다양하게 사용이 가능하지만, 내부적으로는 실수(floating-point value)로 해석됩니다.

1.3.2. Infinity

최대 숫자를 벗어나는 경우를 위해 Infinity 라는 값이 미리 정의되어 있습니다. 4칙연산에 의한 결과는 Infinity로 나옵니다. (단, 0 / Infinity = 0, Infinity * -1 = - Infinity) 숫자로 간주됩니다. (typeof Infinity -> “number”)

1.3.3. NaN(Not a number)

연산의 결과가 숫자인지 아닌지 나타내는 용도로 사용됩니다. 또한 NaN자체는 숫자로 간주됩니다. (typeof NaN “number”) 비교연산에서는 특이하게 동작하는데, 어떤 숫자와도 비교 연산을 할 수 없을 뿐더러 자신과도 비교연산이 되지 않습니다.( NaN == NaN, NaN == 1 모두 false가 나옵니다) 숫자 여부를 확인하기 위해 isNaN이라는 함수가 사용됩니다.

1.3.4. 문자

문자열 자료형은 자바스크립트 내의 텍스트를 나타내며, 문자열은 유니코드 문자의 나열로서 모든 문자열은 내부적으로 유니코드로 구성되어 있습니다. 보통 자바스크립트 문자열은 문자열 리터럴을 이용해 생성하는데, 작은따옴표(')나 큰따옴표(") 안에 텍스트가 들어 있으면 문자열이 될 수 있습니다. 다음과 같이 String 객체를 생성하여 사용할 수도 있습니다. var str1 = String("12345"); // 원시 문자열 var str2 = new String("Hello world."); // String 객체 var str3 = str2.valueOf();// valueOf 메서드를 이용해 String 객체를 그에 상응하는 원시 문자열로 변환

Substring 과 substr의 차이점

두 함수 모두 문자열중 일정부분을 발취하는 함수

1. tring.substring(start,end) : 문자열을 가져올 시작위치와 종료 위치

2.string.substr(start,length) : 문자열을 가져올 시작위치와 가져올 문자의 길이

특수 문자

 

특수문자에 관한 테이블입니다.

\n	커서를 다음줄로 이동합니다
\t	커서를 탭키를 누른만큼 이동합니다
\b	커서를 앞으로 한칸 이동합니다
\f	커서를 다음페이지로 이동합니다
\r	커서를 그줄의 처음으로 이동합니다
\\	\문자를 표시합니다
\'	' 문자를 표시합니다
\n	" 문자를 표시합니다

 

1.3.5. Boolean

자바스크립트 불린(boolean) 자료형에는 참(true)과 거짓(false)라는 두 개의 값밖에 없습니다. 보통 불린 값은 비교의 결과에 해당하며 자바스크립트의 제어 구조에 사용됩니다.

1. 숫자 연산에 사용되면 참은 숫자 1로, 거짓은 숫자 0으로 변환

2. 문자열 연산에 사용되면 참은 "true"라는 문자열로, 거짓은 "false"라는 문자열로 변환

1.3.6. undefined,null

undefined는 변수 선언 시 최초로 할당되며 ‘값이 할당돼지 않음’을 나타내기 위해 특별히 정의된 값입니다. 즉, 값이 할당되지 않은 변수, 할당되지 않은 함수 매개변수 그리고 할당되지 않은 객체의 멤버는 undefined로 초기화 됩니다. null은 ‘객체가 없음’을 나타내기 위한 특수 값입니다. 즉, 코드를 통해 명시적으로 할당해야 하는 값입니다.
-null은 자바스크립트의 키워드로 정의되어 있고, undefined는 루트객체(global object)에 속성으로 정의되어 있습니다. 그래서 다른 값으로 정의하거나 삭제할 수 있습니다.

1.4. 연산자

1.4.1. 증가, 감소(++,--)

++를 증가 연산자, --를 감소연사자 라고 합니다. 이를 이용해 아래와 같이 식을 축약할 수 있습니다.
year = year + 1 --> year++
year = year - 1 --> year--
이 연산의 정확한 동작은 연산자의 위치에 따라 달라지는데, 증가 연산자를 ++year 처럼 변수 앞에 사용한다면 변수 값을 먼저 증가시키고 증가된 값을 연산의 최종 값으로 반환합니다. 그리고 증가 연산자의 year++ 처럼 변수의 뒤에 사용된다면 증가하기 전의 값이 연산에 사용된 다음에 변수의 값을 증가합니다. 즉, 피 연산자 변수의 값을 증감시키기는 하지만 증감 적용은 연산자의 위치에 따라 달라집니다.

1.4.2. 비교

비교 연산자에는 ==(equal), ===(identical)이 있습니다.

비교연산자에 관한 테이블입니다.

==	타입이 서로 다른경우 같은 타입으로 변환한 후 값을 비교	1=='1' ==>true
===	타입을 변환하지 않고 타입과 값이 모두 같은 경우 true를 반환	1==='1' ==> false
!=	타입을 변환한 후 피연산자의 값이 같지 않으면 true를 반환	1 != '1' ==> false
!==	타입을 변환하지 않은 상태에서 값이 같지 않거나 타입이 다르면 true	1 !== '1' ==> true

-만약 객체를 비교할 경우 메모리의 참조값을 비교한다.

1.4.3. 논리

자바스크립트에서는 조건식을 평가한 결과값이 0 , “” , null , undefined, NaN 같은 값을 제외하고는 모두 참을 반환한다.

OR 연산자 (||)

연산자 ‘||’ 의 좌측 피 연산자를 평가해서 참으로 나오면 우측 피 연산자는 평가하지 않고 좌측 피 연산자의 최종 평가 값을 반환한다. 만약 좌측 피 연산자가 거짓으로 평가되면 우측 피 연산자의 최종 평가 값을 그대로 반환한다.

AND 연산자(&&)

양쪽의 피 연산자의 결과값이 참이 되는 경우에만 그 결과가 참으로 된다. OR 연산자와 반대로 좌측 피 연산자를 평가해서 거짓으로 나오면 우측 피 연산자는 평가하지 않고 좌측 피 연산자의 최종 평가 값을 반환한다

부정 연산자(!)

연산자 !는 피 연산자를 오른쪽에 하나만 갖습니다. 이 연산자는 오른쪽 피 연산자를 평가한 결과값의 반대 값을 반환합니다. 그래서 결과는 true/false 만 존재합니다.

1.5. 제어문

1.5.1. If

기초적인 제어문으로 if(조건식)의 조건식이 참을 반환하면 if절의 code block을 거짓이면 else절의 code block을 실행하게 됩니다.

Copy

If(조건식){
//if절 code block
} else{
//else절 code block
}

1.5.2. ? (조건문 간결식)

if문을 간결하게 표현 할 수 있습니다.
(조건식) ? 식1 : 식2
실행 문(식1,식2)은 콤마(,)를 통해 여러 문장을 배치할 수 있습니다.
예제)

Copy

var age = 10;
var age_test = (age > 10) ? (alert('10살이상'), 'big') : (alert('10살 이하'),'small');
alert(age_test);

1.5.3. Switch

너무 많은 else if 구문을 사용하고 있다면 switch를 이용해 줄일 수 있습니다.

Copy

Switch(변수){
  Case 조건1:
  //조건1 code  block
  Break;
  Case 조건2:
  //조건2 code  block
  Break;
  Case 조건3:
  //조건3 code  block
  Break;
  default:
  //그외 조건의 code block
  breal;
}

Swich옆의 변수 부분은 결과값을 반환하는 문장이 와도 됩니다. 그리고 원하는 특정 조건을 case문에 배치하여 실행하도록 합니다. 그리고 일치하는 조건이 없는 경우에는 default구문을 실행하며, default는 생략가능 합니다.

1.6. 반복문

1.6.1. For

Copy

For(변수 초기화;반복 여부 테스트;변수값 변화){
	//실행 code block
}

변수 초기화 부분이 1번만 실행된다는 것은 다른 언어와 같지만, 자바스크립트의 특성상 변수는 함수단위로 관리하기 때문에 for문 밖에서도 사용가능 합니다. 앞서 설명한 것과 같이 자바스크립트는 파싱 단계와 실행단계로 나뉘고, 변수는 파싱 단계에 정의됩니다.

1.6.2. For/in

Copy

For(변수 in 객체){
	//code block
}

‘변수’에는 var를 이용한 변수 선언이 가능하며, ‘객체’에는 개체 또는 배열이 올 수 있습니다.

1.6.3. While, do/while

일반적은 while, do/while문과 동일합니다.

Copy

일반적은 while, do/while문과 동일합니다.
While(조건식){
	//code block
}
Do{
	//code block
} While(조건식)

1.6.4. Try/catch/finally

프로그램의 예외가 발생하는 경우 try/catch 문을 사용해 예외를 처리할 수 있다.

Copy

Try{ 
//실행 코드
}Catch(err){ 
// 예외처리 코드
}Finally{
// try 블록에서 예외가 발생하든 발생하지 않든 항상 실행되는 코드
// try 구문에서 return 문이 사용되어도 무조건 실행
}

Catch문과 finally 문은 필요에 따라 사용해도 되고 안 해도 된다.

2. 함수(Function)

함수는 다음과 같은 역할이 가능 합니다.

- 호출 가능한 루틴으로서의 함수

- 값으로서의 함수

- 인자로 전달 가능

- 변수에 할당 가능

- 다른 함수의 반환 값으로 사용 가능

- 객체로서의 함수

2.1. 함수 모델링(Function modeling)

파싱 단계를 거치면 다음 그림과 같은 구조로 함수가 구성됩니다. 다만, 아래 사용된 ‘변수 스코프’, ‘실행 코드 블록’, ‘공개변수 영역’은 공식적인 용어는 아니고, 개념 설명을 위해 정의한 이름들입니다.

Copy

Function add(x, y){
	return x+y;
}

2.1.1. 변수 스코프

변수 스코프는 함수가 정의될 때 사용된 변수들이 정의된 영역을 말합니다. 위 예제 함수에서 x,y 두개의 변수는 함수내부에서는 접근할수 있습니다. 그래서 변수명 앞에 –를 표기하였습니다. Prototype은 함수 외부에서 접근 가능하기 때문에 +표기를 하였고, prototype 자체는 다른 객체를 가리키는 참조 변수 입니다. 기본적으로 우측의 프로토타입 객체를 가리키게 됩니다.

2.1.1. 실행코드 블록

흔히 알고 있는 함수의 실행 코드가 모여있는 영역입니다. 그리고 내부 용으로 정의된 변수를 이 영역에서만 사용가능 합니다.

2.1.2. 공개변수 영역

자바스크립트 객체의 멤버는 런타임에 추가,수정,삭제 될수 있습니다. 함수 또한 객체로서 멤버가 동적으로 추가될수 있는데, 이러한 멤버들은 내부 변수들과 다른 영역에 저장됩니다.

2.1.3. 프로토타입 객체

함수의 생성자를 가리키는 constructor변수가 정의되어 있고, 함수를 파싱하면서 자동으로 생성됩니다.

2.2. Function 선언

2.3. Function Object

함수는 다른 객체 처럼 아래 용도로 사용 가능합니다.

1. 변수에 할당

2. 함수 호출의 인자 또는 반환값

Copy

function add(x, y){ 
  /* 파싱단계에서 정의 */
  return x + y;
}
var add = function (x, y) { return x + y; } /* 런타임에 함수가 정의 */

Parameter

함수의 선언 또는 구현부에 있는 변수

Argument

함수를 호출할 때 주는 변수나 상수

Arguments Object

함수 호출시 Argument를 전달하는 배열 형태의 객체
-> ECMA Script 명세서에는 배열의 특징에 대한 구현을 강제하지 않음
length Property 를 통해 인자의 개수, arguments[i]를 통해 i번째 인자에 접근 가능
callee Property는 현재 실행되고 있는 함수를 가리킴

Optional Arguments

함수 Parameter보다 적은 Argument가 전달되는 경우, 지정되지 않고 남은 값은 undefined

2.4. Anonymous(unnamed) Function

익명함수(이름이 없는 함수)
다른 변수에 할당, 다른 함수에 인자로 전달 가능

2.5. Nested Function

함수는 다른 함수 안에 정의할 수 있음
Function문으로 정의 되는 함수는 함수의 최상위 레벨에만 정의 할 수 있음
If/while 같은 문장 블록 안에서 정의 할 수 없음
-> ECMA Script Spec으로는 불가능 하지만 실제 구현체에서는 허용하고 있음
함수 리터럴을 사용하는 경우 위치 제약 없음
외부에서는 내부 변수에 접근할 수 없지만, 내부 함수는 내부 변수 접근 가능

Copy

3. 변수 스코프

자바스크립트에서 변수를 관리하는 메커니즘의 특징적인 3가지 부분

1. 변수는 함수 단위로 관리한다.

2. 실행 시의 변수 검색은 렉시컬 영역을 기준으로 한다.

3. 실행 시의 변수 검색은 변수 스코프 체인을 이용한다.

3.1. 변수 관리

일반적인 프로그래밍 언어에서는 중괄호를 사용해 변수의 영역을 결정한다. 예를 들어 for문의 코드 블록내부에서 정의된 변수는 외부에서 접근할 수 없다. 하지만 자바스크립트에서는 함수를 이용해 변수 스코프를 정의한다. 이것은 함수 단위로 해당 함수가 사용하는 변수를 관리한다는 의미이다.

 

변수관리에 관한 테이블입니다.

var a=1; furnction f(){ if (true){ var c = 2 ;} return c; } f() -> 2반환	변수 C는 if 안에 선언되어 있지만 2를 리턴 한다. 변수 a는 전역변수로 선언 된다.
var a=1; furnction f(){ if (true){ c = 2 ;} return c } f() -> 2반환 Alert(c);	변수 C가 사용되었지만 if 문 안에 var 로 선언되어 있지 않기 때문에 c는 파싱 단계가 아니라 run 타임에 정의된다. 즉, 함수 내부에서 변수를 정의하더라도 Var가 없이 변수가 정의되면 런타임에 전역 스코프에 동적으로 변수를 정의된다. 따라서 f() 함수 외부코드에서도 사용할 수 있는 전역변수가 된다.

 

3.2. Scope chain

함수객체는 생성과정에서 함수구문 내에서 선언된 지역변수들을 Valiable Object 라는 객체에 저장한다. 그리고 전역객체(Global Object)의 Valiable Object 와 연결된다. 전역객체의 Valiable Object는 전역객체 자신이다. 이때 이 Valiable Object들에 대한 연결들을 Scope Chain 으로 관리하고 [[scope]]를 통해 Scope Chain을 참조하여 함수객체가 가지는 유효범위를 설정하게 되는 것이다.

Copy

var x = 1;
function foo() {
    var y = 10;
    return a+x;
}

3.3. Lexical

렉시컬(lexical)의 의미는 사전전으로는 "어휘"라는 의미이다. 자바스크립트에서는 프로그램이 구현된 "코드"와 관련돼 있음을 의미한다. 변수를 검색할 때 함수가 실행되는 환경을 근거로 판단하는 것이 아니라 함수를 정의한 코드의 문맥을 근거로 판단한다는 것이다.

Copy

var x = "global";
var func = function(){
alert("x: " + x);
var x = "local";
alert("x: " + x);
};
func();
alert(x);

x: undefined

Quiz : 마지막 alert(x); 의 값은?
Quiz : 처음 x 에 undefined 가 아닌 global이 나오게 하려면?

3.4. Closer

클로저라는 개념은 자바스크립에는 없는 class의 역할을 대신해 비공개 속성/메서드, 공개 속성/메서드를 구현할 수 있는 근거를 마련한다. 따라서 객체지향적인 특징인 캡슐화와 정보 은닉을 이해하려면 클로저를 반드시 이해해야 한다.

위 코드는 ①내부 함수가 익명함수로 되어 outer의 반환값으로 사용됐다. ②inner는 outer의 실행 환경에서 실행된다. ③inner에서 사용하는 변수 x는 outer의 변수 스코프에 있다. 이 프로그램이 실행되면 var f = outer()에 의해 파싱 단계에서는 outer의 내부에서 정의됐던 익명 함수가 실행 단계에서는 outer의 외부로 전달되어 실행된다. 실행 환경에 있는 f를 통해 outer가 반환한 익명함수가 호출되면 return ++x;에서 사용된 변수 x를 어디에서 검색할까? 원래 정의될 때 생성된 익명 함수의 변수 스코프 객체에서 검색할 까? 답은 런타임의 변수는 렉시컬 환경을 기준으로 정의된 변수 스코프 및 체인에서 검색한다는 것이다. 프로그램 실행 시 변수 검색은 해당 문장(return ++x)이 포함된 함수가 정의된 렉시컬 환경에서의 변수 스코프 체인을 기준으로 한다. 내부 함수에서 선언된 변수가 아니면서 내부 함수에서 사용하는 outer의 x같은 변수를 자유변수라고 한다. x가 메모리에서 제거되는 시기는 outer가 결정하지 못한다. 이런 자유 변수는 outer가 실행되고 있는 환경이 '닫는(close)' 역할을 한다. 즉 x의 경우는 변수 스코프가 outer가 실행되는 환경으로까지 확장된다. 외부환경에서 내부 함수에 대한 참조 f를 가지고 있는 이상 outer 함수는 '실행 중' 상태가 된다. 따라서 자유 변수 x 및 해당 변수 스코프 체인 관계는 메모리에서 계속 유지된다. 이처럼 outer 호출이 종료되더라도 outer의 지역 변수 및 변수 스코프 객체의 체인 관계를 유지할 수 있는 구조를 클로저라고 한다. 함수 호출이 종료되더라도 그 함수의 지역변수 및 지역변수 체인 관계를 유지할 수 있는 구조를 클로저라 한다.

4. 객체

4.1. 객체생성

Copy

4.1.1. New object를 이용한 생성

Object 생성자를 사용한 객체 생성

Copy

var mySon = new Object();

객체 생성 이후, 멤버 추가 가능

Copy

mySon.Name = "달봉이"
mySon.Age = 8;
mySon.IncreaseAge = function (i) {this.Age + i;}
x: local

4.1.2. 객체 리터럴

객체 리터럴을 사용해 객체 생성

Copy

객체의 구조 정의 및 생성 구문을 통합 -> 코드가 간결, 가독성 향상
내부 구현은 new Object를 수행 후, 멤버를 추가하는 것과 동일

4.1.3. 사용자 정의 객체

1. 일반 객체지향 언어와 비슷한 문법

class 키워드 대신 function 사용

Copy

2. new 키워드와 함께 사용되어 메모리에 인스턴스를 생성하는 역할

- 객체 생성에 사용되는 함수를 생성자 라고 함

- new와 함께 호출되는 생성자는 () 연산자 생략 가능  매개 변수는 undefined로 설정

3. this 키워드를 사용해 공개 속성을 정의

this로 정의된 멤버(인스턴스 멤버)는 인스턴스 별로 존재

4.2. 자바스크립트의 객체지향 언어적 특징

1. 객체(Object)

2. 클래스(Class)

3. 캡슐화(Encapsulation)

4. 자바스크립트의 모든 메소드/속성은 public, 그러나 private도 구현 가능

5. 집합(Aggregation, Composition)

6. 상속(Inheritance) : 자바스크립트는 클래스를 상속할 수 없으나, prototype을 이용해 객체 차원의 상속을 지원7. 다형성(Polymorphism)

5. 객체 멤버

5.1. 객체 멤버 관리

5.1.1. 멤버 구분

1. 생성자 멤버 (constructor member) : 함수 모델에서 공개 변수 스코프에 추가되는 멤버

2. 인스턴스 멤버(instance member) : 생성자 에서 this를 이용해 정의하는 멤버

3. 프로토타입 멤버(prototype member) : 프로토타입 객체에 정의 되는 멤버

4. 공개 멤버(public member) : 외부 환경에서 직접 읽기와 쓰기가 가능한 멤버

구분, 구현, 설명에 관한 테이블입니다.

구분	구현		설명
비공개 멤버	비공개 속성	var 변수	객체 내부에서 선언된 변수. 비공개 함수에서만 접근 가능
	비공개 메서드	function f(){…} var f = function(){…};	객체의 생성자에 인라인 방식으로 정의된, 이름이 있는 함수 또는 익명 함수. 생성자 내부 코드에서 호출 가능
인스턴스 멤버	인스턴스 속성	This.property = 값;	외부에서 인스턴스를 통해 접근 가능 Obj.property;
	인스턴스 메소드	This.method = function(){….}	외부에서 인스턴스를 통해 접근 가능 Obj.method()
프로토타입 멤버	프로토타입 속성	생성자.prototype.property = 값;	외부에서 생성자 또는 인스턴스를 통해 접근 가능  생성자.prototype.method(); Obj.method();
	프로토타입 메서드	생성자.prototype.method = function(){…};	외부에서 생성자 또는 인스턴스를 통해 접근 가능 생성자.prototype.method(); Obj.method();
생성자 멤버	생성자 속성	생성자.property = 값;	외부에서 생성자를 통해 접근 가능 생성자.property;
	생성자 메서드	생성자.method = function(){…}	외부에서 생성자를 통해 접근 가능 생성자.mehtod();

5.1.2. 연상 배열

객체 별로 자신에게 속한 멤버를 관리하는 내부적인 데이터 구조가 있다. 객체의 멤버(속성,메서드)는 (키,값)의 쌍으로 구성된 집합이다. 그리고 각 멤버는 정렬돼 있지 않다. 이러한 데이터를 관리하는데 가장 적합한 데이터 구조로 해시가 있다. 자바스크립트도 해시 구조의 일종인 연상 배열(associative array)라는 데이터 구조를 사용한다.

5.1.3. 멤버 추가, 제거, 대체

연상 배열의 또 다른 특징 중 하나는 동적으로 해당 요소를 추가하거나 제거할 수 있다는 것이다. 이런 특징을 근거로 프로그램이 실행되고 있는 런타임에도 객체의 멤버를 추가 하거나 제거할 수 있다.

Copy

var obj = new Object();
obj.propertyA =  new date();  //”propertyA” 속성 추가
delete obj.propertyB;            // “propertyB” 속성 제거

1. 속성을 추가할 때는 별다른 키워드를 사용하지 않고 위 코드 처럼 그 속성이 존재 하는 것 처럼 값을 설정하면 된다. propertyA라는 속성이 obj에 없으면 그 속성은 연상 배열 객체에 추가되고 이미 존재한다면 새로운 값이 할당된다.

2. 속성을 삭제 할 때는 delete라는 키워드를 사용한다. 제거된 속성은 해당 시점 이후 부터는 그 객체에서 사용할 수 없다.

3. 속성 뿐 아니라 메서드 멤버도 역시 추가.제거가 가능한데, 메서드의 경우는 기존에 정의된 메서드의 행동을 다른 로직으로 대체할 수도 있다.

5.1.4. 리플렉션

변수의 데이터를 검색해서 최종 결과값을 얻는 과정은 모두 런타임에 일어난다. 이렇다 보니 mySon 을 생성한 타입에 대한정보가 사전에 필요한 것은 아니다. 예를 들어 Person이라는 타입이 정의돼 있고 Person이 어떤 멤버를 가지고 있고 그 멤버는 어떤 구조로 돼 있는지 등에 대한 정보가 자바스크립트 엔진에게는 필요하지 않다. mySon 이 어떤 타입으로 생성 됐든 현재 코드를 실행 하는 데는 아무런 문제가 없다. 그러나 프로그래밍을 하다 보면 런타임이라도 변수가 가지고 있는 값이 어떤 타입인지에 대한 정보가 필요할 때도 있다. 이처럼 현재 객체를 기반으로 타입을 추적하는 과정을 리플렉션(reflection)이라고 한다.

5.2. Prototype, constructor, Instance

위와 같은 예제에서 각각의 참조는 다음과 같다.

생성자 객체, 프로토타입 객체 그리고 인스턴스는 구분되어야 한다. 생성자 , 프로토타입 객체는 함수를 정의하면 함께 정의되는 객체이고 인스턴스는 생성을 해서 얻게 되는 객체이다.
생성자, 프로토타입 객체, 인스턴스는 구분돼야 한다.

5.2.1. Prototype

생성자의 프로토타입 객체에 접근해 멤버를 추가하거나 삭제하려면 반드시 생성자의 prototype 속성을 이용해야 한다. 프로토타입 객체는 생성자별로 하나만 정의 되므로 프로토타입 객체에 접근하는 데 생성자를 이용하고 있다. 인스턴스에서 직접 프로토타입 객체에 접근하는 방법은 없다. 중요한 것은 인스턴스를 통해서 생성자별로 정의되는 프로토타입 멤버에 접근할 수 있다는 것이다.

5.2.2. Constructor

함수를 정의하면 프로토타입 객체가 정의되고 그 객체의 멤버로 constructor가 있다고 했다. Constructor 속성은 프로토타입 객체를 생성했던 함수에 대한 참조를 나타낸다. 이 프로토타입 객체의 constructor 속성은 상속을 통해 인스턴스에서 다음과 같이 접근할 수 있다.
-> 인스턴스.constructor
Person 예제의 경우 mySon.constructor값은 Person을 가리키므로 다음 표현은 참이 된다. mySon.constructor == Person -> true 반환
mySon.constructor == Person.prototype.constructor -> true 반환
mySon.constructor == Person -> true 반환

Constructor속성은 단순히 함수명을 나타내는 것이 아니라 함수 객체에 대한 참조이다. Constructor 프로토타입 속성이 생성자 자체를 가리키는 참조이므로 이 값을 통해 함수를 호출 할 수도 있고 객체를 생성할 수도 있다.
//constructor 속성을 통해 객체를 생성
var myGrandSon = new mySon.constructor(“석봉이”); //constructor 는 생성자 객체를 가리키는 참조 값
myGrandSon.name; //”석봉이” 출력

5.3. 멤버 접근

일반적인 객체 지향 언어에서는 멤버에 대한 접근을 제어하기 위해 public, private 같은 한정자를 제공한다. 그러나 자바스크립트는 이와 관련된 특별한 키워드를 제공하지 않는다. 자바스크립에서는 공개 속성은 “값을 직접 가지고 있는 변수”와 같다. 따라서 객체의 내부 상태를 속성을 통해 그대로 노출하는 것이다. 자바스크립에서 이러한 접근 제어를 하기 위해서는 개발자가 직접 구현해야 한다.

5.3.1. 비공개 멤버 구현

객체의 상태 값으로는 내부의 지역 변수를 사용하고 외부의 접근 메서드로는 공개 메서드를 사용하되, 공개 메서드는 지역변수에 접근하는 내부 함수를 정의해서 사용한다는 것이다. 즉, 상태 값과 공개된 외부 메서드 사이에 내부 함수가 존재 하는 구조가 된다.

Copy

5.3.2. 클로져 인스턴스

비공개 멤버를 가진 객체를 생성하는데 클로저를 사용한다.

Copy

outer()를 호출해서 생성된 객체를 o1에 할당한다. public01을 호출해서 값을 1 증가시면 public02 를 호출될 때 이전에 증가된 값이 유지되어 두번째 호출의 시작값이 된다. Outer함수 호출이 종료 되도 내부 변수 스코프 객체는 그대로 유지되는 클로저의 속성을 그대로 이용하고 있다.
다시 한번 outer()를 호출해서 새로운 인스턴스를 o2에 할당한 후 public01, public02를 호출해서 결과를 보면 내수 변수 _x가 새롭게 초기화 됐다는 사실로 앞의 클로저와는 다른 닫힌 환경을 가진 새로운 인스턴스가 생성됐음을 알 수 있다.
클로저를 호출할 때마다 새로운 클로저 인스턴스가 생성된다. 새로운 클로저 인스턴스는 내부 상태가 초기화된 새로운 닫힌 환경을 가진다.

6. 상속

6.1. 함수와 객체

이 문서의 Object, Function 은 자바스크립트의 내장 객체 Object, Function을 의미 이와 구분하기 위해 함수/생성자/객체로 어휘를 구분함.

6.1.1. 객체 생성과정

1. Object 인스턴스 생성

- 자바스크립트의 최상위 객체는 Object

2. 생성된 Object 인스턴스를 this에 할당

3. 생성자 내부의 코드 실행

- 인스턴스 멤버 정의 및 초기화

4. 인스턴스에 생성자의 프로토 타입 객체 참조 속성 __proto__ 추가

5. this가 가리키는 인스턴스 반환

Copy

6.1.2. this

1. 공유 함수의 this

- 생성자 내부 : 최초 생성자를 통해 만들어진 인스턴스

- 객체의 메서드 : 해당 함수를 호출하는 객체 == “.”의 좌측에 오는 객체

2. 프로토타입 메서드의 this

- 생성자.prototype.메서드 : 생성자의 prototype 객체

- 인스턴스.메서드 : 호출된 인스턴스

3. this의 루트 객체 참조

- 객체를 지정하지 않고 사용하는 경우 루트 객체를 의미

-> 생성자를 일반 함수로 호출하는 경우 this가 루트 객체에 영향을 줌

4. this 변경

- call, apply 를 사용해 호출되는 함수 내부의 this는 call, apply에 제공된 값을 사용

6.2. 자바스크립트 상속

6.2.1. 프로토타입 멤버 상속

- 생성자는 prototype 멤버로 프로토타입 객체를 참조

- 인스턴스 생성시 __proto__ 멤버로 프로토타입 객체를 참조

- 인스턴스는 해당 생성자의 프로토타입 멤버를 상속

6.2.2. 프로토타입 체인

인스턴스의 멤버를 결정하는 과정

- 변수 스코프 체인 처럼 프로토타입의 체인을 따라 멤버를 검색

- 모든 객체의 최상위 부모는 Object이므로, 프로토타입의 체인은 Object에 연결

->Object의 멤버를 상속 받음

6.2.3. Object 멤버

Object생성자에 정의된 멤버 가운데 중요한 것은 바로 모든 생성자가 가지고 있는 prototype속성이다. Object.prototype  Object 프로토타입 객체를 반환한다.
생성자에는 메서드 멤버도 정의될 수 있는데, 자세한 대용은 다음 링크를 참고한다.
https://developer.mozilla.org/en/Javascript/Reference/Global_Objects/Object

Object 멤버에 관한 테이블입니다.

obj.constructor	Object 객체 obj의 생성자에 대한 참조
obj.hasOwnProperty(“멤버명”)	obj의 인스턴스 멤버 확인, 지정 멤버를 가지고 있지 않거나 상속받은 경우 false
obj.isPrototypeOf(obj1)	obj가 obj1의 프로토타입 이면 true
obj.toString()	현재의 인스턴스를 대표하는 문자열 반환 Object의 인스턴스인 경우, “[object Object]”반환
obj.valueOf()	obj가 Number, String, Boolean 객체면 해당 원시값을, 원시값이 없으면 [object Object] 반환

6.3. 리플렉션

런타임에 객체의 값 타입과 멤버의 구조를 밝히는 작업