JS | Object (객체)

김보훈·2021년 8월 28일

목록 보기

11/16

1. 객체

객체 는 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합이다.

let person {
  
  //프로퍼티
  name //(key) : "bohun" //(value);
  age : 20;
  
  //메소드
  hobby : function(exercise) {
    console.log(`My hobby is ${exercise}`)
  } 
}

프로퍼티 : 키와 값으로 구성된 것을 프로퍼티 라고하며 데이터를 의미하는 역할을 한다.
메소드 : 프로퍼티의 값으로 함수로 올 때 메소드 라고하며 데이터의 동작의 역할을 한다.

2. 객체 생성 방법

const obj1 = {} //리터럴 생성 방식
const obj2 = new Object() //constructor 생성 방식

리터럴 : 변수를 할당함과 동시에 값을 지정해주는 표기법을 말하며 그 값을 {} 로 넣어주어 객체를 생성할 수 있다.
constructor : new 생성자를 이용하여 객체를 만드는 것을 constructor 생성 방식이라고 한다.

3. 생성자 함수

const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 5 };
const person3 = { name: 'loren', age: 33 };

--------------------------------------------->

const person4 = new Person('jov', 20); //함수 호출

function Person(name, age) {
  this.name = name;
  this.age = age;
}
console.log(person4);

person1 , person2 , person3 처럼 객체의 키와 값들을 일일히 기입하여 생성하기는 힘들다.

그래서 class 의 constructor 를 만들어 생성자 함수를 생성해주고 new 연산자를 이용하여 객체를 만들어 주어 매개변수를 통해 쉽게 관리 할 수 있도록 한다.

3-1. 생성자 함수 주의점 및 특징

생성자 함수 이름은 일반적으로 대문자로 시작한다.
프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스(instance)를 가리킨다.
this에 바인딩 되어 있는 프로퍼티와 메소드는 외부에서 참조 가능하다.
생성자 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다.

4. 프로퍼티 값

4-1. 프로퍼티 값 접근

프로퍼티 값 에 접근하는 방법은 마침표 (.) 와 대괄호 ([]) 이 있다.

console.log(person.name)
console.log(person.['name'])

대괄호 ([]) 로 접근하게 될 경우 대괄호 내에 들어가는 프로퍼티 이름은 반드시 문자열이 되어야한다.

객체에 존재하지 않거나 대괄호 내에 들어가는 프로퍼티 이름이 문자열이 아니라면 undefined 를 반환한다.

마침표 (.) : 마침표를 사용해야하는 경우는 코딩하는 그 순간 해당하는 값을 받아오고 싶을 때 사용

대괄호 ([]) : 대괄호로 사용해야하는 경우는 정확하게 어떤 키가 필요한지 모를 때 사용한다 (런타임 환경에서 사용된다.)

4-2. 프로퍼티 값 갱신

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

const person = {
  name: 'bohun',
  age: 27,
};

person['name'] = 'kimbohun';
console.log(person['name']); //kimbohun

4-3. for..in , for..of

for..in 문은 객체에 포함된 모든 프로퍼티에 대해 루프를 돌며 키를 순회하기 위한 문법이다.

const person = {
  name: 'bohun',
  age: 27,
};

for (key in person) {
  console.log(key); //name , age
}

for..in 예시 1

const user = { name: 'bohun', age: 20 };
const user2 = user;
console.log(user); //{name: "bohun", age: 20}

//old way
const user3 = {};
for (key in user) {
  user3[key] = user[key];
  //key        //value     //for in 으로 인하여 user에 있는 키 들을 가져온 후 값으로 user에 있는 key 에 대한 값을 가져오겠다.
}

console.log(user3); //{name: "bohun", age: 20}

for..in 예시 2

 Object.assign
 Object.assign(user4, user);
 console.log(user4); //{name: "bohun", age: 20}

for..in 예시 3

const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
console.log(mixed.color); //blue
console.log(mixed.size); //big

// .assign 함수는 객체를 매개변수에 할당하고 할당된 매변수를 병합하는 함수이다.
// .assign 메소드는 객체가 뒤로 갈수록 동일한 프로퍼티가 있다면 값을 계속 덮어 씌운다.

for..of 문은 객체의 프로퍼티를 돌면서 배열의 요소들을 각각 실행 시키기 위해 사용한다.

const array = [1, 2, 3, 4];

for (value of array) {
  console.log(value); 1 2 3 4 
}

5. 참조에 의한 전달

// Pass-by-reference
var foo = {
  val: 10
}

var bar = foo;
console.log(foo.val, bar.val); // 10 10
console.log(foo === bar);      // true

bar.val = 20;
console.log(foo.val, bar.val); // 20 20
console.log(foo === bar);      // true

변수 (var foo) 의 객체의 참조값을 다른 변수(var bar) 에 할당했을 때 참조값 자체를 전달하게 된다.

이 때 두 변수는 같은 reference 를 갖게 되어 다른 변수(var bar) 에도 값을 할당하면 변수 (var foo) 에도 갱신이 되는 모습을 볼 수 있다.

var foo = { val: 10 };
var bar = { val: 10 };

console.log(foo.val, bar.val); // 10 10
console.log(foo === bar);      // false

var baz = bar;

console.log(baz.val, bar.val); // 10 10
console.log(baz === bar);      // true

내용은 같지만 서로 다른 변수에 객체를 생성하면 서로 다른 reference 를 갖게 되어 서로 다른 객체가 된다.

6. 값에 의한 전달

// Pass-by-value
var a = 1;
var b = a;

console.log(a, b);    // 1  1
console.log(a === b); // true

a = 10;
console.log(a, b);    // 1  10
console.log(a === b); // false