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']); //kimbohun4-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원시 타입은 값으로 전달되는데 값이 한번 정해지면 변경할 수 없다.
위 코드에서 var b = a; 에 할당을 하고나서 a = 10 이라고 재할당 하고 확인을 해본 결과 원래 var a = 1; 의 값은 변하지 않고 var b = a; 만 10으로 바뀐 것을 볼 수 있다.
