[JavaScript/자바스크립트] 객체 다루기

객체란?

객체(object)는 여러가지 형태의 값들을 하나로 모아두는 자료형이며, 자바스크립트에서 중요하게 다루는 개념이다.

객체 역시 변수로 선언되며, object 라는 고유한 타입을 가진다.

const obj = {
	key값: value값,
};

객체 내부 값들은 고유한 key값과 value 값을 가진다. 이러한 key와 value 한 쌍을  프로퍼티(property)라고 부른다.

최종적으로 이 프로퍼티들을 중괄호로 묶어 객체를 생성할 수 있다.

프로퍼티(property)

const user = {    //객체
    name: 'P1su', //key: name, vlaue: 'P1su'
    age: 25,      //key: age, value: 25
};

user라는 객체 안에는 총 2가지의 프로퍼티가 존재하는 상태이다. 

key는 property name 이라고도 불리며, 각 프로퍼티의 고유한 이름이다.

key값을 작성할 때에는 몇가지 규칙이 존재한다.

• 첫 글자는 문자, 밑줄, 달러 기호로 시작한다.
• 띄어쓰기는 하지 않는다.
• 하이폰 사용은 금지한다.
• 만약 띄어쓰기와 하이폰을 사용하고 싶다면, 따옴표로 감싸준다.

value는 각 key마다 하나의 값이 할당된다. 배열과 객체는 물론 함수를 포함해 모든 값들이 쓰일 수 있다. 

메소드(method)

메소드는 객체 내부에 작성된 함수이며 객체의 동작을 나타낸다.

const rect = {
    width: 40,
    height: 30,
    area: function(){
        return rect.width * rect.height;
    },
};
const triangle = {
    width: 40,
    height: 30,
    area: function(){
        return triangle.width * triangle.height / 2;
    },
};

console.log(rect.area()); // 1200
console.log(triangle.area()); // 600

똑같이 key값을 설정해준 후, value 부분에 함수를 선언하는 것과 동일하게 작성해주면 된다.

이렇게 메소드를 설정해주면 함수를 통하여 동작을 수행하는 것이 아닌 객체를 통해서 해당 동작을 수행하는 것이다. 

이는 객체의 동작과 역할을 더욱 명확히 보일 수 있다.

또, 객체를 통해서 메소드를 호출하는 것이기 때문에 네이밍이 겹쳐도 된다는 특징이 있다. 우리는 객체를 통해서 각 메소드를 구분할 수 있기 때문이다!

객체 접근법

총 2가지 방법으로 객체에 접근할 수 있다.

점 표기법

const user = {    
    name: 'P1su', 
    age: 25,      
};

console.log(user.name); //P1su
console.log(user.age); //25

객체의 변수명 뒤 점(.) 을 찍고, 뒤에 key값을 작성해준다.

대괄호 표기법

const user = {    
    name: 'P1su', 
    age: 25,      
};

console.log(user['name']); //'P1su'
console.log(user['age']); //25

마찬가지로 변수명 뒤 대괄호 안에 key값을 작성해준다. 이때 따옴표로 key를 감싸주어야 한다.

const user = {    
    name: 'P1su', 
    age: 25,     
    'fav color': 'gray',
    area: 'Goyang',
};
const myArea = 'area';

console.log(user['name']); //P1su
console.log(user['fav color']); //gray
console.log(user[myArea]); //Goyang

또, 다음과 같이 띄어쓰기가 포함된 key값이나 또 다른 변수를 key값으로 사용하고 싶은 경우 대괄호 표기법을 이용한다.

객체 다루기

값 추가 및 수정

const user = {    
    name: 'P1su', 
    age: 25,     
};

user.name = 'philsoo';
user.color = 'navy';

console.log(user.name); //philsoo
console.log(user.color); //navy

  추가하거나 수정하고 싶은 key 값으로 접근한 뒤 value 값을 할당해주면 된다.

삭제

const user = {    
    name: 'P1su', 
    age: 25,     
};

delete user.age;

console.log(user.age); //undefined

삭제하고 싶은 값에 접근한 뒤 delete를 앞에 작성해준다.

age를 key 값으로 지니고 있는 value는 삭제되었고, 존재하지 않는 프로퍼티에 대해 접근하면 undefined를 반환한다.

반복문

for..in 반복문을 통하여 key값을 다룰 수 있다.

const user = {    
    name: 'P1su', 
    age: 25,     
};

for(let key in user){
    console.log(key); //name과 age 차례로 출력
}

객체의 복사

const user2 = Object.assign({}, user));

assign 메소드를 사용하거나

function copy(obj){
    let temp = {};

    for(let key in obj){
        temp[key] = obj[key];
    }
    return temp;
}

for..in문을 통하여 복사를 해준다.

객체와 배열의 차이점

선언 방식에 있어서 객체를 중괄호를, 배열을 대괄호를 사용한다.

가장 큰 차이점을 바로 순서이다.

let myObject = {
  3: 3,
  name: 'p1su',
  1: 1,
  age: '25',
  2: 2,
};

for (let key in myObject) {
  console.log(key);
}

//출력
1
2
3
name
age

객체의 경우 숫자형으로  key값을 작성하면 자동으로 string으로 형변환이 되며, 정수형일 경우 자동으로 오름차순으로 정렬해준다. 나머지 프로퍼티들은 작성된 순서대로 정렬된다.

반대로 배열의 경우 작성 순서대로 배열 안 요소들이 출력된다. 

 

참고)

https://velog.io/@surim014/%EC%9B%B9%EC%9D%84-%EC%9B%80%EC%A7%81%EC%9D%B4%EB%8A%94-%EA%B7%BC%EC%9C%A1-JavaScript%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80-part-7-Object-35k01xmdfp#%EA%B0%9D%EC%B2%B4-key--value-%EC%88%98%EC%A0%95-%EB%B0%A9%EB%B2%95 

https://ko.javascript.info/object