JS 기초 : 객체와 비구조화 할당

객체

• 객체에는 여러 종류의 값을 넣을 수 있다. 변수와 문자열뿐 아니라 함수도 넣을 수 있다. 기본 구조는 아래와 같다.

const 객체명={
  키 명: "값", 
  "키 명": 값,
  키 명: function 함수명 (파라미터 목록){
      함수 실행문;
  }
};

• 여러 개의 값을 선언할 때 구분을 위해 꼭 쉼표를 사용해야한다.
• 키 값으로는 문자열, 숫자, 함수 등이 올 수 있다.
• 키 값에는 띄어쓰기가 있으면 안되는데 띄어쓰기를 사용하고자 한다면 " 키 명 " 다음과 같이 따옴표로 묶어주면 된다.
• 객체 안에 함수를 넣을 때 function 다음에 함수명을 작성하지 않아도 된다.
• 함수를 화살표 함수로 작성하면 함수 내 this를 인식하지 못한다는 것을 주의해야한다.

예제

const dog = {
  name: '바둑이',
  age : 9,
  sound: '멍멍',
  say: function say() {
    console.log(this.sound);
  }
};
console.log(dog.name);
console.log(dog.age);
dog.say();

출력결과는 다음과 같다.

바둑이
9
멍멍

퀴즈 제작하고 풀어보기

다음은 아래 코드를 리뷰한 것이다. 이 중 틀린 것을 고르시오

const fastcampus={
Address = "서울시 강남구 강남대로 364 미왕빌딩 15층"
Number = "02-501-9396"
E-mail address ="[email protected]"
};

A: 이 코드는 fastcampus객체에 대해 작성한 코드야 

B: Address와 Number 키에 대한 구분이 없어. Address의 값 뒤에  ;를 붙여야돼

C: E-mail address처럼 키 값에 공백이 있으면 안돼. 'E-mail address '라고 작성해야해

D: 키와 값 사이에는 = 이 아니라 : 를 사용해야해

정답 및 해설

정답: B
해설: 객체를 작성할 시 주의 해야할 부분들에 대한 문제입니다. 객체의 키 값을 구분하기 위한 기호는 , (쉼표)입니다

비구조화 할당

const userA = {
  name: "홍길동",
  age: "9"
};
function printUser(user) {
  const text = `${user.name}의 나이는 ${user.age}입니다.`;
  console.log(text);
}

printUser(userA);

위의 코드의 text선언 부분을 보면 객체의 값에 접근할 때 마다 매번 user. 을 작성한 것을 볼 수 있다. 비구조화 할당 문법을 사용하면 해당 줄을 아래와 같이 작성할 수 있다.

const { name, age } = userA;
const text = `${name}의 나이는 ${age}입니다.`;

아래의 코드가 비구조화 할당 문법으로 작성한 것으로 객체에서 값들을 추출해서 새로운 상수로 선언해 주는 것이다.

const { name, age } = userA;

또한, 아래와 같이 printUser함수의 파라미터 부분에서도 비구조화 할당을 할 수 있다.

function printUser({ alias, name, actor })