[JS/Node] 객체

woobaeh·2021년 12월 28일
0
  • 배열과 객체의 구조를 이해하고 언제, 어떻게 사용하는지 이해할 수 있다.
  • 배열과 객체의 특징을 구분하여 사용할 수 있다. (순서를 가진다, 의미를 가진다)
  • 배열과 객체의 특징에 따라 실생활에서 언제 쓰는지 이해할 수 있다.
  • 객체 속성(property)의 추가, 조회, 변경, 삭제를 자유자재로 할 수 있다.
  • 객체 속성 조회법 두 가지, dot notation과 bracket notation의 차이를 이해한다.
  • dot notation을 이용한 객체 할당 방식을 능숙하게 다룰 수 있다. obj.a = "hello"
  • 객체 속성 삭제를 위한 delete 키워드를 사용할 수 있다.
  • 객체를 위한 for문 for ... in 문을 이해하고 다룰 수 있다.

객체라고 하는 것은 key/value pair를 저장할 수 있는 구조이다.


const person = {
  name : 'Damon woo',
   age : 28,
  'hobby' : ['Coding', 'running'],
  '한국 고향' : '부산'
};

속성(key) 값에는 기본적으로 따옴표를 사용하지 않아도 되지만
'한국 고향'에 들어간 공백과 같이 식별자에 허용되지 않은 문자가 들어간 경우에는 속성이름을 정의할 때 반드시 따옴표를 사용해야 합니다.
이 경우의 속성이름을 사용할 때는 반드시 Bracket notation을 사용해야 합니다.

  • e.g. person['한국 고향'] = '부산';

JavaScript 식별자는 문자,밑줄(-)혹은 달러 기호($)로 시작해야 하는 반면 이후는 숫자(0-9)일 수도 있습니다.

  • 객체에 저장된 내용 가져오기
var myName = person.name; 혹은 var myName = person['name']
var myAge = person.age;   혹은 var myAge = person['age']
console.log(myName); // 'Damon woo'
console.log(myAge);  // 28
  • 객체에 새로운 key/value 추가하기
person.age = 17; 혹은 person['age'] = 17;
console.log(myAge); // 13

- 객체 key/value 삭제하기

```js
delete.person.age;

console.log(person.age); // undefined (더 이상 존재하지 않는 key/value)
  • 객체 순회하기
const sample = {
  one: 1,
  two: 2,
  three: 3
};

for (let prop in sample) {
  console.log(prop);
  console.log(sample[prop]);
}

prop 변수에 in 연산자 뒤에 위치한 객체의 속성들이 하나씩 담깁니다.
첫 반복 때 prop 변수의 값은 'one', 두번째 'two' 세번째 'three'
sample[prop]을 이용하여 해당 키값의 value을 사용할수 있습니다.

  1. 개체의 key/value는 순서를 정의할 수 없습니다.
  2. for in loop의 순서는 임의로 정해집니다.
  3. for in 은 쉽게 객체의 속성을 (콘솔이나 다른 방법으로 출력)할 수 있기 때문에 실질적으로 디버깅을 위해 사용될 수 있습니다.
  4. 배열이 데이터의 저장에 있어서는 더 실용적이지만, 키-값 쌍이 선호되는 - 데이터의 경우(속성이 "key"역할을 함) 특정 값을 가진 키가 있는지 확인하려는 경우에 for...in을 사용할 수 있습니다.
const myself = 'Damon Woo';

function getAge () {
  return 28;
}

const property = 'value'
const person = {
  name: me,
  age: getAge(),
  [person] : 'value'
};

객체 리터럴을 이용해 속성을 지정할 때, 이미 정의된 변수나 함수를 value로 지정할 수도 있습니다.
대괄호를 사용해서 다른 변수에 저장된 문자열을 속성(key)의 이름으로 쓰는 것도 가능합니다.

const dog = {
  greet: fuction() {
  return '왈왈';
  }
};

person.greet(); // '왈왈';

객체의 속성값으로 함수를 지정 할 수 있습니다, 어떤 객체의 속성으로 접근해서 사용하는 함수를 method라고 부릅니다.

const arr = [ 1, 2, 3 ];

console.log(arr[2]);    // 3
console.log(arr.title); // undefined

arr.name = 'Velog';

console.log(arr.name); // 'Velog'
function foo (a, b) {
  return a * b;
}

console.log(foo.title); // undefined

foo.title = '곱하기';

console.log(foo.title); // '곱하기'

console.log(foo(1, 2)); // 6

예제처럼 배열이나 함수 또한 객체의 한 종류이기 떄문에, 속성을 추가할 수 있습니다
하지만 일반적으로 그런 경우는 없고 주로 기본적으로 제공된 속성과 메소드를 사용합니다.

참고문헌
Object - JavaScript - MDN Web Docs
바닐라코딩 사전 학습 가이드

profile
상생을 통하여 파이를 훨씬 크게 키울 수 있다. WIN - WIN

0개의 댓글

관련 채용 정보