Javascript 기본기 정리하고 넘어가기 - 2

July 27th 2018

Javascript 기본기 정리하고 넘어가기 - 2

4. Objects & Properties Javacript에서 Object는 여러 종류의 정보를 담기에 좋은 수단입니다. 배열이 데이터를 인덱스로 식별한다면, Object는 임의의 문자인 key와 value로 데이터를 관리할 수 있습니다. key와 value pair를 가리겨 property라고 합니다.

key 값을 이용해 property의 value값에 접근할 수 있다.
반복문과 객체의 key 값을 함께 이용해, 객체 내 데이터를 열거할 수도 있다.
객체의 Property는 ‘key’와 ‘value’이루어지고, 이 value 값으로는 또다른 객체 및 함수도 가질 수 있다. 이때 이 함수는 메소드라고 부른다.

새로운 Object를 생성하는 방법은 아래와 같이 두 가지 방법이 있습니다. 첫 번째 방법이 더 직관적이기 때문에 첫 번째 방법 사용을 추천 드립니다.

var kim = {};
kim['name'] = 'Chan';
kim['lastName'] = 'Kim';
console.log(kim); // => {name: "Chan", lastName: "Kim"}

var kim = new Object();
kim.name = 'Chan';
kim.lastName = 'Kim';
console.log(kim); // => {name: "Chan", lastName: "Kim"}

위의 Object를 Obect literal 방식으로 작성하면 좀 더 쉽고 보기 편하게 객체를 만들 수 있습니다. 이 경우 자바스크립트 내재된 기능으로 key 값의 quotation 마크는 생략 가능합니다. (특수 문자를 사용할 경우는 제외)

var kim = {
  name: 'Chan',
  lastName: 'Kim',
  age: 20
};
console.log(kim); // => {name: "Chan", lastName: "Kim", age: 20}

Object의 value값에 접근하는 방법

var kim = {
  name: 'Chan',
  lastName: 'Kim',
  age: 20
};
console.log(kim.name); // => 'Chan'
console.log(kim['name']); // => 'Chan'
console.log(kim[name]); // => undefined

위와같이 dot notation과 braket notation을 이용해 객체의 value 값에 접근할 수 있습니다. 주의할 점은 마지막 코드와 같이 braket notation안에 [ name ] 이라고 quotation 마크 없이 기입을 하면, javascript interpreter는 'name'이라는 string 값 대신, name이라는 변수의 값을 찾게 됩니다. 위의 경우는 name이라는 변수가 지정되지 않았고, undefined가 반환됩니다.

NOTE!! Stringfied Keys 객체의 key값으로는 string외에 number나 다른 특수 문자를 사용할 수도 있습니다. 특이한 점은, bracket을 이용해 객체의 key 값을 할당하거나 접근할 때, bracket안의 key값의 type이 자동적으로 string으로 변한다는 것입니다.

var obj = {};
obj['x'] = 7;
obj[0] = 8;
obj['1'] = 9;

console.log(obj[0]); // => 8
console.log(obj['0']); // => 8

console.log(obj[1]); // => 9
console.log(obj['1']); // => 9

만약 number로 key값을 지정한 후, for in loop를 통해 key값을 다시 불러오면 해당 key 값은 number일까요 string일까요?

var obj = {};
obj['x'] = 7;
obj[0] = 8;
obj['1'] = 9;

for (var k in obj) {
  console.log(typeof k); // => string, string, string
}

답은 string입니다. braket안의 key 값은 type에 상관없이 string으로 저장됩니다.

Handmade with .