[JavaScript] 객체, 함수, 스코프, 프로토타입

객체 : 하나의 개체를 표현하기 위해 복수의 요소 정보를 보유 (자체가 하나의 개체)

- 프로퍼티 + 메소드로 구성

- 프로퍼티 : 객체(개체)의 상태나 특성을 나타내는 정보

ex) 입력폼을 나타내는 Form객체에서 폼의이름, 폼에 포함된 텍스트박스나 선택박스 등의 요소, 폼에 의한 송신장소 등이 프로퍼티

- 메소드 : 객체(개체)를 조작하기 위한 기능

ex) Form객체에서 폼의 정보를 서버에 송신하기, 폼의 내용을 지우기 등의 기능

 

자바스크립트의 객체 : 숫자,문자열,boolean,null,undefined같은 기본타입을 제외하고 모두 객체

객체 만드는 방법
1. Object() 생성자 함수 이용
- 빈 객체를 만들어 나중에 프로퍼티와 메소드를 추가함
var foo = new Object();

2. 객체 리터럴 방식 이용
- { } 이용하여 생성, { } 안에 프로퍼티:프로퍼티값 의 형태로 표기
var foo = {
    name:'foo'
    age:30
};

3. 생성자(constructor)함수 이용
- 함수에 new연산자를 붙여서 호출. 함수는 객체를 초기화 하는 역할 수행
- 함수 이름의 첫문자를 대문자로 표기
var Person = function(name) {
    this.name = name;
};

var foo = new Person('foo');

 

-내장형 객체 (Built-in Object) : js에 미리 내장되어 있는 객체. js가 동작하는 모든 환경에서 이용 가능하며 특별한 선언이나 정의를 하지않고 바로 이용 가능

예) Array, Date, String, Number, Error, RegExp

- 브라우저 객체 : 특정의 환경(브라우저 상)에서만 동작하는 것

 

- 정적프로퍼티/메소드 : 예외적으로 객체를 생성하지 않고 바로 이용이 가능한 프로퍼티/메소드

---

기본 데이터를 취급하기 위한 객체

1. String 객체

- 문자열 형의 값을 취급하기 위한 객체. 문자열의 유출이나 가공,검색 등을 행하기 위한 기능 제공

var str = '안녕하세요!';

 

2. Number 객체

- 수치형의 값을 취급하기 위한 객체

var num = 123;

 

3. Math 객체

- 수학 연산의 기능을 제공

 

4. Array 객체

- 배열형의 값을취급하기 위한 객체. 배열에 대한 요소의 추가,삭제,결합,정렬 등을 행하기 위한 기능을 제공

var ary = ['사토', '다카에', '나가타'];

var ary1 = ['Sato', 'Takae', 'Osada', 'Hio', 'Saitoh'];
var ary2 = ['Yabuki', 'Aoki', 'Moriyama', 'Yamada'];

console.log(ary1.concat(ary2)); // ary2를 ary1에 연결
// Sato,Takae,Osada,Hio,Saitoh,Yabuki,Aoki,Moriyama,Yamada

console.log(ary1.join('／')); // 배열내의 요소를 '/'로 연결
// Sato／Takae／Osada／Hio／Saitoh

console.log(ary1.slice(1)); // 가장 처음 요소를 빼냄
// [ 'Takae', 'Osada', 'Hio', 'Saitoh' ]

console.log(ary1.pop()); // 배열 끝의 요소를 취득하여 삭제
// Saitoh (삭제한요소)
console.log(ary1); // 삭제한 후의 배열
// [ 'Sato', 'Takae', 'Osada', 'Hio' ]

console.log(ary1.push('Kondo')); // 배열 끝에 요소추가
// 5 (추가 후의 요소 수)
console.log(ary1);
// [ 'Sato', 'Takae', 'Osada', 'Hio', 'Kondo' ]

console.log(ary1.shift()); // 배열 선두의 요소를 취득하여 삭제
// Sato (삭제한요소)
console.log(ary1);
// [ 'Takae', 'Osada', 'Hio', 'Kondo' ]

console.log(ary1.unshift('Ozawa', 'Kuge')); // 배열 선두에 지정요소 추가
// 6 (추가 후의 요소 수)
console.log(ary1);
// [ 'Ozawa', 'Kuge', 'Takae', 'Osada', 'Hio', 'Kondo' ]

console.log(ary1.reverse()); // 역순으로 정렬
// [ 'Kondo', 'Hio', 'Osada', 'Takae', 'Kuge', 'Ozawa' ]

console.log(ary1.sort()); // 오름차순으로 정렬(알파벳순)
// [ 'Hio', 'Kondo', 'Kuge', 'Osada', 'Ozawa', 'Takae' ]

console.log(ary1.length); // 배열의 사이즈
// 6

console.log(ary1.toString()); // 문자열로 치환
// Hio,Kondo,Kuge,Osada,Ozawa,Takae

---

Date 객체 : 날짜,시각 데이터 조작

- 반드시 생성자 사용. 문자열이나 배열등과 같이 리터럴 표현이 존재하지 않음

var d = new Date(); 
// 디폴트의 Date 객체 생성
// Date 객체는 디폴트로 생성되는 시점의 시스템 날짜와 시각을 세트

var d = new Date(‘2010/12/04’);
// 날짜 문자열 값을 이용하여 Date 객체를 생성

var d = new Date(2010,11, 4, 23, 55, 30, 500);
// 년월일/시분초/밀리초
// 시분초, 밀리초는 생략가능
// 월 지정이 1~12가 아니라 0~11임 주의할것

var d = new Date(1217862000000);
// 1970/01/01 00:00:00부터의 경과 밀리초(타임스탬프값)로 지정하는 방법

---

Object 객체 : 모든 객체의 모형

- 모든 객체의 공통적인 성질/기능을 제공

- 모든 객체의 기본 객체. 모든 객체의 프로토타입 객체

 

주요 멤버

1. toString/valueOf 메소드

toString 메소드 : 객체의 문자열 표현을 취득

valueOf 메소드 : 객체의 기본형 표현을 취득. 문자열 이외의 값이 반환되는 것을 기대하며 사용됨

 

2. constructor 프로퍼티 : 인스턴스화에서 사용되는 생성자(읽기 전용)

- 참조형(객체형)의 변수를 식별

- 인스턴스의 생성에 사용된 생성자(Function 객체)를 반환

- instanceof 와 동일한 기능제공

typeof 연산자 : 기본형을 식별하는 것만이 가능. Object, Array, Date 객체에 대해 사용. 'object'로 반환

 

익명 객체 : (Object 객체 생성) 객체 공통의 프로퍼티/메소드 이외에 어떠한 데이터도 갖고 있지 않는 빈 객체. 차후에 데이터(프로퍼티)를 추가

장점

- 한정된 장소에서 일시적으로 데이터를 사용할 경우

- 작은 규모의 구조 데이터를 주고받을 경우

- 함수로 복수의 값을 돌려주고 싶은 경우

- 간단하게 코드를 기술할 수 있다

var obj = new Object();
obj.name = “토그지로”;
obj.birth = new Date(2005, 7, 15);
obj.old = 5

---

함수(function) : 반복해서 사용하는 코드를 하나로 정리하기

- 주어진 입력(파라미터)에 근거해 어떠한 처리를 실시하여 그 결과를 돌려주는 구조

 

사용자 정의 함수 정의

1. Function 명령으로 정의하기

function 함수명([인수 1[, 인수2[, ... ]]) {
    함수 안에서 실행되는 임의의 명령(군)
    [return 반환값;]
    }

인수

- 함수의 동작을 결정하기 위한 파라미터

- 호출원으로부터 지정된 값을 받아들이기 위한 변수를 콤마 단락으로 지정

- 함수 내부에서만 참조

 

반환값

- 함수가 처리를 한 결과

- 함수의 말미에 return 명령을 기술해 지정

 

함수 호출

함수명([인수, ...]);

function triangle(base, height) {
    return base * height / 2;
    }
    console.log('삼각형의 면적：' + triangle(5,2));
// 삼각형의 면적 : 5

 

2. 함수 리터럴로 정의하기

-  function(...){...}로 이름없는 함수를 정의한 다음 변수에 대입. 익명함수

var triangle = function(base, height) {
    return base * height / 2;
    };
    console.log('삼각형의 면적：' + triangle(5,2));
// 삼각형의 면적 : 5

---

함수정의의 네가지 주의점

 

1. return명령의 중간에 개행하지 말것 : return명령 중간에 라인 바꾸지 말것

2. 함수는 데이터형의 일종임. 함수는 객체임 함수 리터럴로 정의된 변수는 값의 수정이 가능함

3. function 명령은 정적인 구조 선언

4. 함수 리터럴 정의문은 실행시에 판단됨. 호출원의 코드보다 먼저 기술해야 함

---

글로벌 스코프(변수) : 스크립트 전체에서 참조

- 글로벌 스코프를 갖는 변수

- 함수의 바깥에서 선언한 변수

 

로컬 스코프(변수) : 정의된 함수 안에서만 참조

- 로컬 스코프를 갖는 변수

- 함수의 안에서 선언한 변수

- 함수의 선두에 선언해야 한다

 

var를 사용하지 않은 변수는 모두 글로벌 변수가 된다.

변수 선언시 모두 var를 사용해야 한다

var scope = 'Global Variable'; // 글로벌
function getValue() {
	var scope = 'Local Variable'; // 로컬
	return scope;
}
console.log(getValue()); // Local Variable
console.log(scope); // Global Variable

 

인수의 스코프

- 인수는 기본적으로 로컬변수이다

기본형(call by value)
var value = 10;
function decrementValue(value) {
    value--;
    return value;
}
console.log(decrementValue(100)); // 99
console.log(value); // 10

 

참조형(call by reference)
var value = [1, 2, 4, 8, 16];
function deleteElement(value) {
    value.pop(); // 마지막 요소를 삭제
    return value;
}
console.log(deleteElement(value)); // 1,2,4,8
console.log(value); // 1,2,4,8

동일 어드레스를 참조하기 때문 로컬변수의 변경을 글로벌 변수에도 반영됨

 

블록레벨의 스코프는 없음

 

함수 리터럴에서 사용한 변수는 로컬변수를 사용

---

고계함수 (high-order function)

- 함수를 인수,반환값으로 취급하는 함수

- 큰 범위의 기능만을 정의하고 상세한 기능은 사용자가 결정할 수 있음

// 고계 함수 arrayWalk를 정의
function arrayWalk(data, f) {
            for (var key in data) {
                f(key, data[key]);
            }
}

var result= 0; // 결과값을 격납하기 위한 글로벌 변수
function sumElement(key, value) { // 배열을 처리하기 위한 사용자정의 함수
            result += value; // 주어진 배열 요소로 변수 result를 가산
}

var ary = [1, 2, 4, 8, 16];
arrayWalk(ary, sumElement);
console.log('합계：' + result); //31

 

일회용 함수 : 고계함수의 인수함수

- 현재 장소에만 사용되는 일회용 함수

- 일회용 함수는 익명함수로 정의 (코드의 간략화, 함수이름의 중복피하기)

---

Call 객체

- 함수 호출이 있을 때마다 내부적으로 자동 생성되는 객체

- 함수 내에서 정의된 로컬 변수를 관리하기 위한 편의적인 객체

 

스코프 체인

- Call객체를 생성 순서대로 연결한 리스트

 

변수 스코프

- 스코프 체인의 선두에 위치하는 객체부터 순서대로 프로퍼티를 검색하여 일치하는 프로퍼티가 처음 발견되는 곳에서의 값을 채택함

---

클로저(Closuuer)

- 로컬 변수를 참조하고 있는 함수내의 함수

- 호출 함수가 종료되어도 클로저 함수가 참조하는 변수는 계속 유지됨

- 통상적인 로컬 변수

---

javascript의 객체지향 특징

 

1. 프로토타입(protorype) 기반으로 객체 유지 - 클래스 지원 가능함

프로토타입 : 어떤 객체의 원본이 되는 객체

 

2. 생성자 함수로 초기화

생성자(constructor) : new연산자에 의해서 객체를 생성하는 함수객체. 객체를 생성할 때 객체의 초기화 처리를 기술하기 위한 특수한 메소드. 생성자의 이름은 대문자로 시작하며 생성자가 아닌 함수와 구별된다.

var Member = function(firstName, lastName){
        this.firstName = firstName;
        this.lastName = lastName;
        this.getName = function(){
                    return this.lastName + ' ' + this.firstName;
        }
};
var mem = new Member('요시히로', '야마다＇);
console.log(mem.getName()); // 야마다 요시히로

- this :생성자에 의해서 생성되는 객체. 변수를 지정함으로써 인스턴스의 프로퍼티 설정 가능

- 프로퍼티에 함수 객체(함수 리터럴)를 설정

 

3. 동적으로 메소드 추가

var Member = function(firstName, lastName){
        this.firstName = firstName;
        this.lastName = lastName;
};
var mem = new Member('요시히로', '야마다');
mem.getName = function(){
        return this.lastName + ' ' + this.firstName;
}
console.log(mem.getName()); // 야마다 요시히로

객체 생성 후 나중에 메소드 추가 가능함. 위는 객체 생성 후 getName 메소드 추가

var Member = function(firstName, lastName){
        this.firstName = firstName;
        this.lastName = lastName;
};
var mem = new Member('요시히로', '야마다');
mem.getName = function(){
        return this.lastName + ' ' + this.firstName;
}
console.log(mem.getName()); // 야마다 요시히로

var mem2 = new Member('나미', '가케다니');
console.log(mem2.getName()); // 에러!!

-프로퍼티or메소드의 추가는 해당 객체에만 추가됨

mem2에는 해당 메소드가 추가 안됨

---

프로토타입 객체 (prototype object)

프로토타입 : 자바스크립트의 모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있음

_proto_ 프로퍼티

- ECMAScript 명세 : 모든 객체는 자신의 프로토타입을 가리키는 [[Prototype]]라는 숨겨진 프로퍼티를 가진다

- 크롬 : _proto_ / 부모 객체를 가리키는 프로퍼티

 

function object : 함수도 객체임. 함수 객체만의 고유 프로퍼티가 있음

 

portotype 프로퍼티

- [[prototype]](_proto_) 와는 다른 프로퍼티임

_proto_ : 객체 입장에서 자신의 부모 역할을 하는 프로토타입 객체를 가리킴

prototype : 이 함수가 생성자로 사용될 때 이 함수를 통해 생성된 객체의 부모 역할을 하는 프로토타입 객체를 가리킴

 

메소드는 프로토타입 객체에 추가한다

생성자 함수에 메소드 정의

- 메소드의 수에 비례하여 메모리를 소비함

- 생성자는 객체를 생성할 때 마다 각 메소드를 위한 메모리를 확보함

- 모든 속성의 추가와 삭제는 객체단위로 이루어진다

var Member = function(firstName, lastName){
        this.firstName = firstName;
        this.lastName = lastName;
};
Member.prototype.getName = function(){
        return this.lastName + ' ' + this.firstName;
};
var mem = new Member('요시히로', '야마다');
console.log(mem.getName()); // 야마다 요시히로

 

프로토타입 객체에 메소드 추가

- 생성자의 prototype 객체에 대하여 암묵적인 참조를 함

- prototype 객체에 추가된 메소드를 사용할 수 있음

 

프로토타입 객체를 사용하는 이점

1. 메모리 사용량 절감

- 프로토타입 객체의 내용은 객체로부터 암묵적으로 참조만 될 뿐 객체에 복사되는 것은 아님

2. 프로퍼티의 추가나 변경을 객체가 실시간으로 인식

 

프로퍼티의 설정

- 프로토타입 객체의 사용 > 값을 참조할 때 뿐

- 객체에 대한 값의 설정은 해당 객체에 대하여 이루어짐

- 프로퍼티의 선언 : 생성자

- 메소드의 선언 : 프로토타입

var Member = function(){ };
Member.prototype.sex = '남자';

var mem1 = new Member();
var mem2 = new Member();
console.log(mem1.sex + '|' + mem2.sex); // 남자 | 남자
mem2.sex = '여자';
console.log(mem1.sex + '|' + mem2.sex); // 남자 | 여자

 

프로퍼티의 삭제

- 프로퍼티의 삭제는 객체 단위로 이루어짐

var Member = function(){ };

Member.prototype.sex = '남자';

var mem1 = new Member();
var mem2 = new Member();
console.log(mem1.sex + '|' + mem2.sex); // 남자 | 남자
mem2.sex = '여자';
console.log(mem1.sex + '|' + mem2.sex); // 남자 | 여자
delete mem1.sex
delete mem2.sex
console.log(mem1.sex + '|' + mem2.sex); // 남자 | 남자

---

상속 : 베이스가 되는 객체(클래스)의 기능을 계승하여 새로운 클래스를 정의하는 기능

 

프로토타입 체인

- prototype 프로퍼티에 객체를 설정

- 암묵적인 참조를 이용하여 상속관계를 가질 수 있음

var Animal = function() {}

Animal.prototype = {
            walk : function() {console.log('종종'); }
};

var Dog = function() {};
Dog.prototype = new Animal(); // 중요

Dog.prototype.bark = function() {console.log('멍멍'); }

var d = new Dog();
d.walk(); // 종종
d.bark(); // 멍멍

 

상속 관계는 동적으로 변경 가능

프로토타입 체인

- 생성자 프로토타입은 동적으로 변경 가능함

- 변경 후에 생성된 객체는 변경된 프로토타입 체인을 만듬

- 변경 전에 생성된 객체는 생성될 때 프로토타입 체인을 유지

var Animal = function() {}

Animal.prototype = {
    walk : function() {console.log('종종...'); }
};

var SuperAnimal = function() {}
SuperAnimal.prototype = {
    walk : function() {console.log('다다다닷！'); }
};

var Dog = function() {};
Dog.prototype = new Animal(); // Animal 객체를 계승
var d1 = new Dog(); 
d1.walk(); // 종종... 

Dog.prototype = new SuperAnimal(); // SuperAnimal 객체를 계승
var d2 = new Dog(); 
d2.walk(); // 다다다닷! 
d1.walk(); // 종종... <여기에 뭐가 들어가는지 아는것이 중요