[dream coding] 8강 객체 TIL

sohyun·2022년 6월 27일

object생성자함수 객체 객체리터럴 객체생성 동적생성 메소드 생성자함수 프로퍼티 프로퍼티 값 프로퍼티 삭제 프로퍼티 키

드림코딩 강의 정리

목록 보기

6/20

객체란

자바스크립트를 이루고 있는 '모든 것'
키(key) : 값(value)로 구성된 프로퍼티들의 집합
프로퍼티 : 객체의 데이터
메소드란 : 객체의 데이터를 참조하고 조작하는 동작
객체지향의 상속을 구현하기 위해 '프로토타입'이라고 불리는 객체의 프로퍼티와 메소드를 상속받는다.
이 프로토타입은 타 언어와 구별되는 중요한 개념이다.
원시타입을 제외한 나머지값(함수,배열,정규표현식 ..) 모두 객체임

💡프로퍼티

프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열, 숫자, symbol값
프로퍼티 값 : 모든 값

💡메소드

프로퍼티의 값이 함수일 경우
일반함수와 구분하기 위해 메소드라 부름

let apple = {
  name: 'apple',
  'hello-bye': '✋',
  0: 1,
  ['hello-bye1']: '✋',
};

객체 생성 방법

💡객체 리터럴

{ key : value }
중괄호 내에 1개 이상의 프로퍼티를 기술하면 해당 프로퍼티가 추가됨.
중괄호 내에 아무것도 기술하지 않으면 빈 객체가 생성됨

💡Object 생성자 함수

new Object();
new연산자 + Object생성자 함수를 호출하여 빈 객체를 생성하고 이 후에 프로퍼티 또는 메소드를 추가하여 객체를 완성한다.
생성자 함수란 new키워드와 함께 객체를 생성하고 초기화하는 함수를 말한다.
인스턴스란 생성자 함수를 통해 생성된 객체
일반 함수와 생성자 함수를 구분하기 위해 파스칼 케이스 사용(단어의 첫 시작을 다 대문자로 표기)
사실 객체 리터럴 방식이 결국 빌트인 함수인 Object 생성자 함수를 축약한 표현이므로 일부로 Object 생성자 함수를 사용해 객체를 생성해야 할 일은 거의 없다.

💡생성자 함수

템플릿처럼 사용하여 프로퍼티의 키는 동일하고 값만 다른 객체 여러개를 간편하게 생성 가능
생성자 함수 이름은 일반적으로 대문자로 시작
프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(= 템플릿으로 찍어낼 객체)
this에 연결되어 있는 프로퍼티와 메소드는 public하다 (= 외부 참조 가능)
생성자 함수 내에 선언된 일반 변수는 private하다. (= 외부 참조 불가능)
사실 일반 함수에 new 연산자를 붙여 호출하면 생성자 함수처럼 동작 가능하지만
일반적으로 생성자 함수명은 첫문자를 대문자로 기술하여 혼란을 방지해야한다.

// 생성자 함수
function Person(name, gender) {
  var married = true;         // private
  this.name = name;           // public
  this.gender = gender;       // public
  this.sayHello = function(){ // public
    console.log('Hi! My name is ' + this.name);
  };
}


// 인스턴스의 생성
var person = new Person('Lee', 'male');

console.log(typeof person); // object
console.log(person); // Person { name: 'Lee', gender: 'male', sayHello: [Function] }

console.log(person.gender);  // 'male'
console.log(person.married); // undefined

person1.sayHello();

객체 프로퍼티 접근

💡프로퍼티 키

일반적으로 문자열을 지정함, 홑따옴표 or 쌍따옴표
숫자나 심볼 값
문자열 타입의 값으로 수렴하는 표현식

var person = {
 //✅ 프로퍼티 키 문법
  'first-name': 'Ung-mo',
  
  first_name:'Ung-mo',
  
  ['first-name']: 'Ung-mo',
  
  [first-name]: 'Ung-mo',	//표현식 평가를 위해 first와 name의 식별자를 찾는다.
  
  'last-name': 'Lee',
  
  gender: 'male',
  
  1: 10,
  
  function: 1 				// OK. 하지만 예약어는 사용하지 말아야 한다.
  
  💩
   //'-'연산자가 있는 표현식
   first-name: 'Ung-mo', 	// SyntaxError: Unexpected token -
};

💡프로퍼티 값 읽기

마침표( . ) 표기법
- 유효한 식별자인 경우에만 가능
- 유효한 변수 식별자의 경우 공백이 없어야 함
- 숫자로 시작하지 않아야 함
- $와 _를 제외한 특수문자가 없어야 함
대괄호 ( [ ] ) 표기법
- 점 표기법의 한계를 극복하는 장점
- 변수,공백 사용 가능
- 문자열 혹은 문자열을 참조하는 변수
- 숫자로 시작 가능

💡프로퍼티 값 갱신

객체가 소유하고 있는 프로퍼티에 새로운 값을 할당하면 갱신된다.

let person = {
  'first-name': 'Ung-mo',
};

person['first-name'] = 'Kim';
console.log(person['first-name'] ); // 'Kim'

💡프로퍼티 동적 생성

객체가 소유하고 있지 않은 키에 값을 할당하여 프로퍼티를 추가한다.

let person = {
  'first-name': 'Ung-mo',
};

person.age = 20;
console.log(person.age); // 20

💡프로퍼티 삭제

delete연산자 사용하여 삭제한다.
피연산자는 프로퍼티 키를 사용한다.

var person = {
  'first-name': 'Ung-mo',
  gender: 'male',
};

delete person.gender;
console.log(person.gender); // undefined

delete person;
console.log(person); // Object {first-name: 'Ung-mo'}

💡for-in 프로퍼티 순회하기

for-in문을 사용하여 객체(배열 포함)에 포함된 모든 프로퍼티에 대해 루프를 수행한다.
하지만 배열에는 사용하지 않는 것이 좋다.
순서를 보장하지 않기 때문
그래서 배열은 for-of를 사용

var person = {
  'first-name': 'Ung-mo',
  'last-name': 'Lee',
  gender: 'male'
};

// prop에 객체의 프로퍼티 이름이 반환된다. 단, 순서는 보장되지 않는다.
for (var prop in person) {
  console.log(prop + ': ' + person[prop]);
}

/*
first-name: Ung-mo
last-name: Lee
gender: male
*/

var array = ['one', 'two'];

// index에 배열의 경우 인덱스가 반환된다
for (var index in array) {
  console.log(index + ': ' + array[index]);
}

/*
0: one
1: two
*/