const obj1 = { name: 'song', age: 25 };
이런 식으로 만들 수도 있다
이 방법을 object literal 이라고 하며
const obj2 = new Object();
클래스를 이용하여 new 키워드로 생성하는 방법도 있다
이 방법을 object constructor 이라고 한다.
자바스크립트에서는 클래스가 없어도 괄호 를 사용하여 오브젝트를 생성할 수 있다.
자바스크립트에서는 이미 아래와 같이 name과 age를 정의했음에도 불구하고 또 다른 프로퍼티를 생성할 수 있다
const song = { name: 'song', age: 25 };
song.hasjob = true;
이렇게 동적으로 생성하게 되면 유지 보수가 힘들다
그러므로 가능하면 이것을 피해서 코딩할 것 !
추가로 프로퍼티의 삭제도 가능하다
delete song.hasjob;
짚고 넘어가야 할 부분은
Object는 key와 value의 집합체이다
여기서 key는 object로 접근할 수 있는 변수, 즉 프로퍼티와
그 프로퍼티가 가지고 있는 값인 value로 이루어져 있다
지금까지 오브젝트 안의 프로퍼티에 접근하는 방법은
console.log(song.name);
위와 같이 . 으로 접근하는 방법이 있었는데
또 다른 방법이 존재한다
console.log(song['name']);
오브젝트 안에 name 이라는 변수의 이름을 string 형태로 접근이 가능하다
( 꼭 'name' 과같이 따옴표 사이에 존재해야 한다 )
이렇게 두 가지로 접근이 가능하다 !
아래와 같은 방법을 Computed properties 라고 한다
이 방법을 쓰는 경우는
function printValue(obj, key) {
console.log(obj.key);
}
printValue(song, 'name');
위와 같이 obj.key 라는 것은 song 오브젝트에 key라는 값이 있냐고 물은 것이나 다름없다 그래서 결과값은 undefined
여기서 song 오브젝트의 key를 불렀을 때 name이 호출하는 방법은
Computed properties 를 사용하면 된다
function printValue(obj, key) {
console.log(obj[key]);
}
printValue(song, 'name');
위와 같이 [] 안에 key를 호출하면 song 오브젝트 안에 name을 호출하게 되어서 정상적인 값인 song이 출력된다
동적으로 키에 관련된 value 를 받아와야 할 때 유용하게 쓸 수 있다.
const person1 = { name: 'bob', age: 2 };
const person2 = { name: 'steve', age: 3 };
const person3 = { name: 'dave', age: 4 };
위와 같이 person이라는 오브젝트를 3가지 만들어 놓았다
여기서 4번째 person을 만들려고 할 때 또 위와 같이 번거롭게 이름과 나이를 일일이 작성해야 한다
이를 더 편하게 하기 위하여 함수를 사용한다
function makePerson(name, age) {
return {
name: name,
age: age,
};
}
const person4 = makePerson('song', 25);
위와 같이 makePerson이라는 함수를 생성하고 매개변수로 name 과 age를 받아
프로퍼티로서 오브젝트에 포함되게 한다
여기서 자바스크립트에서는 Property value shorthand 라는 기능이 있어서 아래와 같이 사용한다
function makePerson(name, age) {
return {
name,
age,
};
}
key와 value의 이름이 동일하다면 name : name 과같이 할당을 생략할 수 있다
위와 같이 해준다면 정상적으로 오브젝트가 생성이 된다 !
위에서 살펴본 makePerson 이라는 함수는 클래스와 비슷한 개념이라고 보면 된다
그래서 클래스가 존재하지 않던 자바스크립트에서는 위에서 알아본 방식으로 오브젝트를 생성하곤 했다
이제 제대로 살펴보자
function Person(name, age) {
this.name = name;
this.age = age;
}
위와 같이 오브젝트를 생성하는 함수의 경우 이름이 대문자로 시작한다 'Person'
그리고 return 을 사용하지 않고 this 를 사용하여 value를 key에 할당한다
결국 this에 새로운 프로퍼티를 넣고 this 를 return 해주는 함수이다
이를 Constructor function 이라고 한다
in operator 는 해당하는 오브젝트 안에 key가 있는지 확인하는 것이다
console.log('name' in song);
name이라는 key가 song이라는 오브젝트 안에 존재하는지 확인하는 것
결과는 true 또는 false가 출력된다
for .. in 은 프로젝트를 할 때 아주 유용하게 쓰인다
for (key in song) {
console.log(key);
}
위와 같이 for .. in 을 사용하면 for 문안에서 song에 있는 값이 key에 배열로 할당되어 출력하면
song 오브젝트에 존재하는 모든 key가 출력된다
모든 키들을 받아와서 쓸 때 for .. in 을 사용하면 좋다
다음은 for .. of
const array = [1, 2, 3, 4, 5];
for (let i = 0; i < array.length; i++) {
console.log(array[i]);
}
보통 위와 같이 array 라는 배열의 값을 for 문을 이용하여 array의 값을 출력하지만
이렇게 사용하면 코드가 길어져 좋지 않다
for (value of array) {
console.log(value);
}
위와 같이 for .. of를 사용하게 되면 array에 있는 값이 value에 할당되면서 순차적으로 출력이 된다
기능은 같지만 더욱 편리한 기능이다
cloning에 대해 예시를 통해 알아보자
const user = { name: 'song', age: '25' };
const user2 = user;
위와 같이 user라는 오브젝트를 생성하고 user2에 user 오브젝트를 넣어주었다
이 경우에는 user2가 user가 가리키는 값을 동일하게 가리킨다는 말이 된다
그럼 user2에 value를 다른 값으로 변경한다면 어떻게 되는지 알아보자
user2.name = 'coder';
console.log(user);
위와 같이 user2의 name 을 coder로 변경해 주고
user 객체를 출력하면
{name: "coder", age: "25"}
위와 같이 name이 coder로 바뀌어 있는 것을 확인할 수 있다