[모딥다] JS (1) - 객체 리터럴
1. 객체란?
: JS는 객체 기반의 프로그래밍 언어며 거의 모든 겂이 객체다.
: 변경 불가능한 원시 값과 달리 객체는 변경 가능한 값이다.
: 객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.
: 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.
let person = {
name: "John" // 프로퍼티 키 : name , 프로퍼티 값 : "John"
age: 22,
}
: 참고로 프로퍼티 값은 JS에서 사용할 수 있는 모든 값이 될 수 있다.
: 프로퍼티 값이 함수인 경우 우리는 메서드라 부른다.
var counter = {
num = 0, // 프로퍼티
increase : function() { // 메서드
this.num++;
}
};
: 함수로 객체를 생성하기도 하며 함수 자체가 객체이기도 하다.
2. 객체 리터럴에 의한 객체 생성
: 객체지향 언어는 클래스를 사전에 정의하고 필요한 시점에 new 연산자와 함께 생성자(constructor)를 호출하여 인스턴스를 생성하는 방식으로 객체 생성함.
: 인스턴스 = 클래스에 의해 생성되어 메모리에 저장된 실체를 말함.
* 자바스크립트는 프로토타입 기반 객체 지향 언어임, 따라서 아래와 같이 객체 생성 가능
1) 객체 리터럴
: 중괄호 내에 0개 이상의 프로퍼티 정의함
var person = {
name: "Lee",
sayHello: function () {
console.log(`Hello My name is ${this.name}`);
}
};
2) Object 생성자 함수
var person = new Object();
person.name = "Lee";
person.sayHello = function () {
console.log(`Hello, My name is ${this.name}`);
};
person.sayHello(); // Hello, My name is Lee
3) 생성자 함수
function Person(name) {
this.name = name;
this.sayHello = function () {
console.log(`Hello, My name is ${this.name}`);
};
}
var person = new Person("Lee");
person.sayHello(); // Hello, My name is Lee
4) Object.create 메서드
var prototypePerson = {
sayHello: function () {
console.log(`Hello, My name is ${this.name}`);
}
};
var person = Object.create(prototypePerson);
person.name = "Lee";
person.sayHello(); // Hello, My name is Lee
5) 클래스(ES6)
class Person {
constructor(name) {
this.name = name;
}
sayHello() {
console.log(`Hello, My name is ${this.name}`);
}
}
const person = new Person("Lee");
person.sayHello(); // Hello, My name is Lee
3. 메서드
: 프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다.
var list = {
name : "Hello",
age : 20,
// 번호 불러오기
getNumber: function () {
return age + 1;
}
};
console.log(list.getNumber()); // 21
4. 프로퍼티 접근
1) 마침표 표기법 : 마침표 프로퍼티 접근 연산자(.)를 사용
2) 대괄효 표기법 : 대괄호 프로퍼티 접근 연산자([ ... ]) 사용
var pesron = {
name: "Hello"
};
// 마침표 표기법
console.log(person.name);
// 대괄호 표기법
console.log(person['name']); // 반드시 따옴표로 감싸야 한다.
5. 프로퍼티 동적 생성
var pesron = {
name: "Hello"
};
person.age = 20;
console.log(person); // { name: "Hello" , age: 20 };
6. 프로퍼티 삭제
: delete 연산자 사용
var pesron = {
name: "Hello"
};
person.age = 20;
console.log(person); // { name: "Hello" , age: 20 };
delete person.age;
console.log(person); // {name: "Hello"};
7. ES6에서 추가된 객체 리터럴 확장 기능
// 프로퍼티 값으로 변수 사용하는 경우 변수 이름과 프로퍼티 키가 동일한 이름일 때 프로퍼티 생략 가능
let x = 1, y =2;
// 프로퍼티 축약 가능
const obj = { x , y};
8. 원시 값과 객체 비교
: 원시 값 - 변경 불가능한 값 ( 숫자, 문자열, 불리언, null, undefined, 심벌 ,객체 타입) 즉, 읽기 전용 값
= 원시값은 변경 불가능한 값이기 때문에 값 변경 위해서는 새로운 메모리 공간을 확보하고 재할당한 값을 저장 후, 변수가 참조하던 메모리공간의 주소 변경함. 결론적으로 불변성이 성립함
: 객체 타입 - 변경 가능한 값
= 프로퍼티 수가 정해져 있지 않으며, 동적으로 추가 삭제 가능. 따라서 메모리 공간도 미리 정해둘 수 없음
: 객체는 프로퍼티 키를 인덱스로 사용하는 해시 테이블이라고 생각 가능
: 객체 지향과 달리 미리 클래스를 선언 하는 과정 없이 객체 생성 가능
: 객체를 할당한 변수가 기억하는 메모리 주소를 통해 메모리 공간에 접근 시 참조값에 접근 가능함
: 참조값이란 생성된 객체가 저장된 메모리 공간의 주소, 그 자체
9. 얕은 복사 vs 깊은 복사
: 얕은 복사 - 한 단계까지만 복사하는 것, 참조 값을 복사함
: 객체에 중접도 있는 객체까지 모두 복사하는 것을 말함 , 완전한 복사본을 만듦