main-logo

Object 이해하기

Object의 기본적인 사용법

profile
강은영
2021년 09월 23일 · 0 분 소요

들어가며

생성자 함수 활용에 대해 알아보면서 Object의 기본적인 사용에 대해 정리하는 시간을 가졌습니다.

Object 생성

1. Object();

javascript 내장 함수를 이용하는 방법입니다.

// Object();

const obj = new Object();

obj.who = 'woman';
obj.when = 2021;
obj.what = 'studying';
obj.printAll = () => {
  return `${obj.when} ${obj.who} ${obj.what}`;
};



2. 객체 리터럴 {…}

중괄호({}) 안에서 key와 value가 콤마(,)로 나눠진 표현입니다.

객체 생성 후 바로 값을 할당하고(가독성),
코드의 공간을 덜 차치하여 인식이 명확하고(명확성),
함수 호출을 자제(기능 최적화) 등의 이유로 Object을 생성할 때 많이 사용하는 코드입니다.

// Object literal;

const obj = {
  who: 'woman',
  when: 2021,
  what: 'studying',
  // method를 화살표 함수로 정의하면 함수 내부의 this는 window 객체를 가리키기 때문에 축약형으로 사용
  printAll() {
    return `${this.when} ${this.who} ${this.what}`;
  },
};



3. 생성자 함수

함수와 연산자 ‘new’의 표현으로 Object 생성합니다. 여러 개의 반복적인 객체를 생성하기 위해 사용합니다.
네이밍의 기준이 있어 일반 함수는 소문자, 생성자 함수와 연산자 new는 대문자로 시작합니다.

// function() {...}

// 생성자 함수로 객체 정의
function User(who, when, what) {
  // this는 생성자 함수(자신)을 가리킴
  this.who = who;
  this.when = when;
  this.what = what;
  this.printAll = () => {
    return `${this.when} ${this.who} ${this.what}`;
  };
}

// 새로운 객체 생성
let user = new User('woman', 2021, 'studying');

console.log(user);
// {who: 'woman', when: 2021, what: 'studying', printAll: ƒ}
console.log(user.printAll());
// '2021 woman studying'



매개변수 값을 초기화(undefined) 할 수 있습니다.

let user = new User();

console.log(user);
// {who: undefined, when: undefined, what: undefined, printAll: ƒ}
console.log(user.printAll());
// 'undefined undefined undefined'



Object 값 접근/ 추가/ 업데이트

점(.) 혹은 대괄호 표기법([])을 사용하여 값에 접근/ 추가/ 업데이트 할 수 있습니다.

// 접근
console.log(obj.who);
// 'woman'
console.log(obj['what']);
// 'studying'
/console.log(obj.printAll()); // method는 소괄호까지 적용
// '2021 woman studying'

//  추가
obj.why = 'for a test',

// 업데이트
obj[who]= 'man';

console.log(obj);
// {who: 'man', when: 2021, what: 'studying', why: 'for a test', printAll: ƒ}



‘함수를 사용할 때 소괄호를 언제 (안) 붙이는 거야?‘라고 아직 헷갈린다면 ↓↓↓

위 코드에서 obj.printAll()을 호출할 때 소괄호를 붙였고 method가 이유가 되었습니다. 그러면 method를 알아봐야 하는데.. 복잡한 것만 더해지니 이러저러 한 내용은 배제하고 기본적인 요소로 이해를 돕고자 합니다.

함수의 return

const func1 = () => {
  const a = 1;
  const b = 2;
};

console.log(func1());
// undefined;

함수 func1를 호출하니 undefined가 출력되었습니다. return을 선언하지 않은 함수인데 말이죠. 이 말은 함수는 return을 선언하든 하지 않든 기본적으로 return undefined를 가지고 있다는 것을 의미합니다. 즉, 위의 코드는 아래 내용과 같습니다.

 

const func1 = () => {
  const a = 1;
  const b = 2;

  return undefined;
};

console.log(func1());
// undefined;



따라서 소괄호 유무는 값을 반환(Return)하는가 하지 않는가로 함수의 기능을 파악한 후 사용해야 합니다.

// 1. 값을 반환하는 함수
const func1 = () => {
  const a = 1;
  const b = 2;

  return a + b;
};

console.log(func1()); // 3;
// 2. DOM에 반환하는 함수

// HTML
<div class="word"></div>;

// javascript
const word = document.querySelector('.word');
const func2 = () => {
  const a = 1;
  const b = 2;

  word.innerHTML = a + b;
};
func2(); // DOM에 값을 반환(실행)

<div class="word">3</div>;

console.log(func2()); // undefined;
console.log(func2);
// () => {
//   const a = 1;
//   const b = 2;

//   word.innerHTML = a + b;
// };



Object 키와 값의 반환

객체의 키와 값을 반환할 수 있습니다.
문자열의 배열로 반환하기 때문에 Array method를 활용하여 키와 값을 가공할 수 있습니다.

 

Object.keys(),
Object.getOwnPropertyNames()

키를 배열로 반환합니다.

Object.keys(obj);
// 혹은
Object.getOwnPropertyNames(obj);
// (5) ['who', 'when', 'what', 'printAll', 'why']

Object.keys(obj).length; // 5
Object.keys(obj)[1]; // 'when'
Object.keys(obj).indexOf('how') < 0; // true

 

Object.values()

값을 배열로 반환합니다.

Object.valuse(obj);
// (5) ['man', 2021, 'studying', ƒ, 'for a test']

const valArray = Object.values(obj);
for (const value in valArray) {
  console.log(value, valArray[value]);
}

// 0 man
// 1 2021
// 2 studying
// 3 ƒ printAll() {
// 	 return `${this.when} ${this.who} ${this.what}`;
// }
// 4 for a test



마치며

자주 사용하고 있었지만 어렴풋이 알고 있는 내용을 이론적으로 정리할 수 있어 소소하게 보람되었습니다. 읽으시는 동안 이런 어렴풋함이 ‘아하!’의 확신의 느낌으로 바뀌는 내용이 있었으면 하는 바람입니다.

고맙습니다. - 끄읕 -

참고문서