[Javascript] 객체(Object)와 배열(Array)

객체 (Object)

• 중괄호( { } )로 묶어서 표현

var zero = {
  firstName: 'Zero',
  lastName: 'Cho'
};

 

속성 (Property)

• 객체의 속성은 Java의 Map처럼 Key와 Value로 이루어짐
  • Key(속성의 이름) → firstName, lastName
  • Value(속성의 값) → Zero, Cho
• Key는 문자열 또는 심볼만 가능하며, 따옴표('')로 감싸주지 않아도 됨
  단, Key 값에 공백(띄어쓰기)가 들어간 경우에는 따옴표로 감싸주어야 함
• Value 값은 문자열, 정수, 객체, 함수 무엇이든 상관 없음

var wrap = { 'ex ample': 'wrap' };

 

속성 접근 방법

• 위의 zero 변수(객체) 안의 속성에 접근하기 위해서는 온점( . ) 또는 대괄호( [ ] ) 를 사용하여 다음과 같이 접근 가능
• 단, Key가 유효한 JavaScript 식별자(Identifier)일 경우에만 온점 표기법이 사용 가능
  • 유효한 JavaScript 식별자의 조건
    • 알파벳, 숫자, _(언더스코어), $만 포함
    • 숫자로 시작 불가
    • 공백(띄어쓰기)이나 특수 문자를 포함하지 않음
    • 예약어 사용 불가

zero.firstName; // 'Zero'
zero['firstName']; // 'Zero'
zero.lastName; // 'Cho'
zero['lastName']; // 'Cho'

• 실제로는 온점을 사용한다고 하지만, 반드시 대괄호를 사용해야 하는 경우가 존재
• 바로 위의 wrap 객체의 경우 Key의 값에 공백이 있어 따옴표를 사용하였는데, 이러한 경우 온점은 불가하고 대괄호를 사용하여 다음과 같이 표현해야 함
  ※ 대괄호 안에 따옴표를 사용해야 하는 것에 주의

// 반드시 대괄호 표기법을 사용해야 하는 경우
// - Key에 공백이 포함된 경우
wrap['ex ample']; // 'wrap'
// wrap.ex ample; // SyntaxError
// wrap[ex ample]; // ReferenceError: ex is not defined

 

다양한 객체 활용

• 객체의 속성 변경
  • 객체명.속성값 = 변경할값;

zero.lastName = 'Lee';
zero; // { firstName: 'Zero', lastName: 'Lee' }

• 객체 안의 객체를 넣는 복잡한 구조도 구현 가능
  • 만약 중첩된 객체가 없는 경우 해당 속성에 접근하면 undefined 반환
    → 이 때 속성 내부로 더 깊게 접근하려고 하면 에러가 발생

var zero = {
  body: {
    height: 173,
    weight: 66
  }
};
console.log(zero.body.height); // 173
console.log(zero.body.age); // undefined
// console.log(zero.body.age.value); // TypeError: Cannot read properties of undefined

• zero 객체의 속성인 body의 Value가 또 다시 객체
• 온점을 사용해서 점점 더 안으로 들어가는 트리구조

 

• 객체의 속성 삭제
  • delete 삭제할속성

delete zero.body.height;
zero.body; // { weight: 66 }

• 다음과 같은 방법으로 객체 생성도 가능

var zero = new Object();
zero.firstName = 'Zero';
zero.lastName = 'Cho';
zero.body = new Object();
zero.body.height = 173;
zero.body.weight = 66;

---

배열(Array)

• 대괄호 ( [ ] )로 묶어서 표현

var array = [];
var array2 = [1, "Hello", [1,2,3], { hi: 1 }];

• 배열 안의 값들을 요소(item)이라고 하며, 요소는 객체처럼 무엇이든지 가능 (문자열, 정수, 배열, 객체, 함수)
• 다른 언어와 달리 자바스크립트의 배열은 동적으로 사이즈가 변경되기 때문에 배열의 길이를 정의할 필요가 없음

요소의 접근

• 배열의 요소는 0번부터 순차적으로 인덱스가 주어져 배열[index]로 접근 가능

var zero = ['Zero', 'Cho'];
zero[0]; // 'Zero'
zero[1]; // 'Cho'

배열 요소 추가 및 삭제

var array = [1, 2, 3];
array.push(4); // 배열에 요소 추가
console.log(array); // [1, 2, 3, 4]

array.pop(); // 배열에서 마지막 요소 제거
console.log(array); // [1, 2, 3]

var array = [1, 2, 3, 4, 5];

// 2번 인덱스의 요소 제거
array.splice(2, 1);

console.log(array); // [1, 2, 4, 5]

---

참고 자료

https://www.zerocho.com/category/JavaScript/post/572c6f759a5f1c4db2481ee3

(JavaScript) 객체(Object)와 배열(Array)