자바스크립트 객체, 구조분해할당

1. 자바스크립트 객체의 형태

{key: value}
  property

자바스크립트의 객체는 태그와 같은 역할을 하는 key와 거기에 실질적인 값이 들어있는 value로 구성되어있다.

이러한 key + value의 값을 합쳐서 property라고 한다.

 

<예시>

const user = {
id: 1,
name: "hihi"
}

user라는 이름을 가진 객체이다.

id와 name이 key값이고, 1과 hihi가 각각의 키에 들어있는 value이다.

 

🤔 객체의 key값으로 가능한 4가지 형태

1️⃣  그냥 써주기

{
id: 1
}

위의 코드에서 id가 key값이다. 이런 것처럼 키값을 그냥 써주면 된다.

 

 

2️⃣ "" (쌍따옴표) 안에 써주기

{
"my name": "hihi"
}

위의 코드에서는 my name이 key값이다. 

보통은 ""(쌍따옴표)를 생략하고 써주는데, 스페이스바와 같이 이름에 변수에 들어갈수 없는 값을 넣고 싶으면 ""(쌍따옴표)를 사용한다.

 

🔫 3️⃣ [변수명] (대괄호안에 변수명) 쓰기 🔫

const a = 'age'

{
[a]: 3
}

 변수명을 선언하고(a), 객체안에서 key값으로 변수명을 사용하고 싶으면 대괄호 안에 넣어서 쓰면 된다.

1. 변수 이름을 선언하고

2. 객체안에서 [대괄호]를 이용해서 값을 넣는다

 

a='age'=라고 선언을 했기때문에 [a]:3 ➡️ age: 3 이 된다.

 

console.log(user.age) 또는 console.log(user[a])를 통해서 값을 사용할 수 있다.

 

4️⃣ 함수명 (함수를 객체의 value로 사용할때)

const user = {
getLastNameWithFunction: function {
console.log("hihi")
}
}

key값으로 함수명을 적어주고 value값으로 함수를 넣는다.

실행하고 싶으면 user.getLastNameWithFunction();을 입력하면 된다.

 

function 키워드를 쓰면 번거롭기 때문에 자바스크립트는 아래와 같은 기능을 제공한다. 

 

                                                            ⬇️

 

✅ ① function키워드 생략 / 바로 함수명() {} 으로 적는다. (생략해도 위의 코드와 완전히 동일하게 동작)

getLastName() {
console.log("hihi")
}

✅ ② 화살표함수 사용 함수명(): => {}

 

⛔️ ①, ② 의 this의 범위는 차이가 있다 ⛔️
①의 this : 호출한 놈의 name = this.name: hihi
②의 this : 상위스코프의 this

 

 

2. 객체 구조분해할당

 

객체안의 키값을 뽑아서 각각 사용하고 싶을때, 간결한 코드를 위해서 구조분해할당이라는 것을 할  수 있다.

 

아래와 같은 user라는 이름의 객체가 있다고 생각해보자.

const user = {
id:1,
name:'hihiha2',
age:2,
habit:'coding'
};

이런 객체를 각각의 값을 꺼내서 변수에다가 저장을 하고 싶다.

그러면 아래와 같은 방법으로 각각을 변수에 담아줄 수 있다.

const id = user.id;
const name = user.name;
const age = user.age;
const habit = user.habit;

🤔 문제점: 코드가 길어서 비효율적이다. 

 

이럴때 구조분해할당을 이용하여 코드를 한줄로 적을 수 있다.

1️⃣ const {중괄호} = 객체명

const {} = user;

2️⃣ {key이름 넣기}

{중괄호}안에 각각의 키값을 적어준다.

const { id, name, age, habit} = user;
                    key값들

이렇게 적어주면 위에 적은것과 같이 각각을 변수에 담아준 것과 같은 결과가 된다.

 

 

 

📚 영상을 보고 공부하고 일일이 정리한 내용입니다. ✍️

 

참고자료

자바스크립트 객체 정리하기 1편 (자바스크립트 객체, 구조분해할당)