객체 (Object)
JavaScript는 객체 기반의 스크립트 언어 = JS를 이루는 모든 것이 객체
= 원시타입을 제외한 나머지값(함수, 배열, 정규표현식)
JS는 속성(Key)과 값(Value)으로 구성된 프로퍼티들의 집합
프로퍼티 (Property)
객체 안에 들어있는 속성:값(Key:Value)
객체에 대한 상태 정보를 표현
메소드 (Method)
프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라고 칭함.
메소드는 객체에 제한되어 있는 함수를 의미함.
1. 객체 리터럴
var emptyObject = { };
가장 일반적인 자바스크립트의 객체 생성 방식
중괄호 ({ })를 사용하여 객체를 생성
-{} 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가된 객체 생성 가능 ( 아무것도 없으면 빈 객체 생성 )
-key값에 - (타이픈) 이 들어갈 경우 '' 또는 "" 로 감싸주어야 함
ver emptyObject = { };
>
ver person = {
name: 'Lee',
gender: 'male',
'say-Hello': function () {
console.log('Hi! My name is' + this.name);
}
};
>>> console.log(typeof emptyObject); // object
>>> console.log(person); // {name: "Lee", gender: "male", sayHello: f}2. Object 생성자 함수
var person = new Object();
'new 연산자'와 'Object 생성자 함수'를 호출하여 빈 객체 생성 가능
빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성
생성자 함수란 new 키워드와 함께 객체를 생성하고 초기화하는 함수
생성자 함수를 통해서 생성된 객체를 인스턴스라고 칭함
ver person = new Object();
person.name = 'Lee';
person.gender = 'male';
person.sayHello = function () {
console.log('Hi! My name is ' + this.name);
};
>>> console.log(typeof person); // object
>>> console.log(person); // {name: "Lee", gender: "male", sayHello: f}
>>> person.sayHello(); // Hi! My name is Lee3. 생성자 함수
var person1 = new Person('Lee', 'male');
var person2 = new Person('Kim', 'female');
동일한 프로퍼티를 가진 객체를 여러 번 생성하기 위해 일종의 템플릿처럼 사용하여 코드의 중복을 최소화하기 위한 방법
// 생성자 함수
function person(name, gender) {
person.name = name;
person.gender = gender;
person.sayHello = function () {
console.log('Hi! My name is ' + this.name);
// 인스턴스 생성
var person1 = new person('Lee', 'male'); // person1 : object
var person2 = new person('Kim', 'female'); // person2 : object
>
>>> console.log('person1'); // person {name: "Lee", gender: "male", sayHello: f}this의 이해
자신이 속한 객체 또는 자신이 생성한 인스턴스를 가리키는 자기 참조 변수
함수 내에 선언된 변수가 외부에서 참조되기 위해서는 this 키워드를 사용하여 public으로 선언해야 함.
function person(name, gender) {
var married = true;
this.name = name;
this.gender = gender;
this.sayHello = function() {
console.log('Hi! My name is' + this.name);
};
}
>>> console.log(person.gender); // 'male'
>>> console.log(person.married); // undefined객체 프로퍼티 접근 방법 - 값 읽기
객체.프로퍼티키
객체['프로-퍼티키']
ex) person.name
프로퍼티의 key/value에 - (타이픈) 가 있으면 " " 로 감싸줘야 함 ( 객체.프로퍼티키 X )
객체 프로퍼티 접근 방법 - 값 갱신
객체.프로퍼티키 = '변경할 값'
객체['프로퍼티키'] = '변경할 값'
ex) person.name = "kim"
객체 프로퍼티 접근 방법 - 프로퍼티 동적 생성
객체.프로퍼티키 = '프로퍼티 값'
객체['프로퍼티키'] = "프로퍼티 값"
ex) person.age = "20"
객체 프로퍼티 접근 방법 - 값 삭제
delete 객체.프로퍼티키
delete 객체['프로퍼티키']
ex) delete person.gender
객체 초기화 방법
let person = {};
객체 리터럴 방식으로 선언하여 초기화
Pass-by-reference (얕은 복사)
객체 리터럴 타입으로 선언
Object type을 객체 또는 참조 타입이라고 하며 이는 객체의 모든 연산이 실제 값이 아닌 참조 값으로 처리됨을 의미함
동일한 객체를 참조하는 두 객체는 공통된 프로퍼티 값을 참조함 ( = 공간을 공유 )
var a = { val : 10 }; // 리터럴 타입 var b = { val : 10 }; // 리터럴 타입 >> console.log(a.val, b.val) // 10 10 >> console.log( a === b ) // false (다른 객체) var c = b; // 동일한 객체 참조 (공간 공유) c.val = 20; >> console.log(a.val, b.val, c.val) // 10 20 20 >> console.log( b === c ) // true
Pass-by-value (깊은 복사)
원시 타입으로 선언
객체가 가진 값(value)이 전달됨 ( 값이 복사 )
원시 타입은 값이 한 번 정해지면 전달에 의해 값이 변경되지 않음
var a = 1; // 원시 타입 var b = a; // 원시 타입 console.log(a, b); // 1 1 console.log(a === b); // true a = 10; console.log(a, b); // 10 1 console.log(a === b); // false
