객체 리터럴 ( 객체, 프로퍼티, 메서드 )

5o_hyun·2021년 12월 6일
0
post-thumbnail

객체란?

자바스크립트의 기본 타입( data type )은 객체( object )이다.

object

객체란 프로퍼티의 집합이며,
프로퍼티는 키( key )값( value )으로 구성된다.
프로퍼티 값( value )이 함수일경우 일반 함수와 구분하기 위해 메서드( method )라고 부른다.

객체 프로퍼티 접근방법

1. dot notation ( 마침표 표기법 )

마침표 프로퍼티 접근 연산자 ( . ) 를 사용

2. bracket notation ( 대괄호 표기법 )

대괄호 프로퍼티 접근 연산자 [ ... ] 를 사용
문자열로 ' ' 넣어야 함

// dot notation
console.log(foo.a);
// 알아서 문자열로 바꿔들어감

// bracket notation
console.log(foo['a']);
// 문자열로 넣어야 함

프로퍼티

객체는 프로퍼티의 집합이고, 프로퍼티는 키( key )와 값( value )으로 구성된다.

1. 프로퍼티의 특징

1 ) 가급적 식별자 네이밍 규칙을 준수하는 프로퍼티 키를 사용할것을 권장한다.

var person = {
  firstName : 'Kim',
  lastName : 'sohyun'
  'last-name' : 'nayoung'
}

프로퍼티 키로 사용한 firstName은 식별자 네이밍 규칙을 준수한다. 따라서 따옴표를 생략한다.
last-name 은 특수문자가 들어가 있으므로 식별자 네이밍 규칙을 준수하지않는다. 따라서 따옴표를 붙인다.


2 ) 이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 먼저 선언한 프로퍼티를 덮어쓴다.

var foo = {
  name = 'Lee',
  name = 'Kim'
}

console.log(foo); // Kim

3 ) 객체에 존재하지 않는 프로퍼티에 접근하면 undefined를 반환한다.

var foo = {
  name = 'lee'
}

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

4 ) var , function 같은 예약어를 프로퍼티 키로 선언해도 되지만 권장하지않는다.

var foo = {
  var : '',
  function : ''
}

console.log(foo); // var : '' , function : ''

2. 프로퍼티 값 갱신 ( 변수 재할당 )

이미 존재하는 프로퍼티에 값을 할당하면 프로퍼티 값이 갱신된다.

var person = {
  name : 'kim'
}

person.name = 'lee';

console.log(person); // name : 'kim'

3. 프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당해, 프로퍼티가 동적으로 생성되는 것
( undefined라고 생각하고 값을 넣어주는 것이라고 생각하면 편하다. )

var person = {
  name : 'kim'
}

person.age = '26'; // undefined라고 생각하고 값을 넣어줌 

console.log(person); // name : 'kim' , age : '26'

4. 프로퍼티 축약 , 메서드 축약

더욱 간편하고 표현력 있는 객체리터럴의 확장기능

// 프로퍼티 축약

var x = 1 , y = 2;

var obj = {              var obj = {
  x : x ,           =      x ,
  y : 3                    y : 3
}                        }
/*
x : x 는, x 표현식과 같다.
   ==> 변수 이름과 프로퍼티 키가 동일할 때 생략 할 수 있다.  
*/

console.log(obj); // x : 1 , y : 3


// 메서드 축약
var obj = {                             var obj = {
  name : 'lee',                           name : 'lee',
  sayHi : function(){               =     sayHi(){
    console.log('hi! '+this.name);           console.log('hi! '+this.name);
}                                       }
 
console.log(obj); // hi! lee

5. 프로퍼티 삭제

delete 연산자는 객체의 프로퍼티를 삭제한다.
실무에서는 잘 사용하지 않는다.

var person = {
  name : 'kim'
  age : '26'
}

delete person.age;

console.log(person); // name : 'kim'
profile
학생 점심 좀 차려

0개의 댓글