JavaScript 기초 : 객체 1. 객체와 프로퍼티

1. 객체(Object)와 프로퍼티(Property)

 

여러 가지 값을 한 번에 저장하고 싶다면 객체를 사용하면 된다.

자바스크립트의 모든 것은 다 객체다!!

 

객체는 중괄호 { } 로 감싸고 

{ } 안쪽은 

여러 가지 다양한 값들을 쉼표( , )로  구분한다. 

 

객체에는 다양한 값이 들어갈 수 있기 때문에

각 값들을 좀 더 명확히 하기 위해 

: 콜론과 함께 값의 이름을 부여한다. 

 

key : vlaue 이렇게 구성하는데

key와 value 한 쌍을 객체의 속성(Property)라고 부른다. 

 

key 는 값의 이름(property name)

value는 값이다. (property value)

즉

property name : property value 

로 객체가 구성된다.

 

// key : value 한상을 속성(property)라고 한다.
{
  key: value,
  key: value,
  key: value,
}

 

property name은 문자열 타입을 가지고 있다.

따옴표를 생략하더라도 자바스크립트가 형변환을 해주기 때문에 따옴표를 생략하고 써주면 된다.

따옴표를 생략할 때는 아래의 3가지 규칙을 지켜야한다. 

 

TIP. 프로퍼티 네임을 쓸 때 꼭 지켜야 하는 규칙! 

1. 첫 글자는 반드시 문자, 밑줄, 달러 기호 중 하나로 시작한다.

2. 띄어쓰기 금지

3. 하이픈(-) 금지!

 

하지만

따옴표로 감싸주면 띄어쓰기과 하이픈을 쓸 수 있다. 

 

property value(프로퍼티 값)는 어떠한 자료형도 다 들어갈 수 있다. 

문자열, 숫자, 불린, null, 객체 까지 다 들어갈 수 있다.

//property value에 또 객체를 넣을 수도 있다. 
{
  brandName: 'YJ', //문자열
  bornYear: 2020, //숫자
  isVeryNice: true, //불린
  worstCourse: null, //null
  bestCorse: {                        //심지어 또다른 객체까지 
    title: '웹 서비스 런칭하기',
    language: 'JavaScript, Python',
  }
}

 

 

1-2. 객체 안 프로퍼티 값 불러오는 방법 : 점 표기법, 대괄호 표기법

 

객체도 결국은 값이기 때문에 객체를 다루기 위해서는 변수에 할당하면서 이름을 만들어 주어야 한다. 

 

여러 개의 프로퍼티들을 joSW라는 변수에 담아보자. 

let joSW = {  };

중괄호 안에 프로퍼티들을 넣으면 된다. 

//객체 표기 하는 방법 
let joSW = {
  brandName: 'YJ', //문자열
  bornYear: 2020, //숫자
  isVeryNice: true, //불린
  worstCourse: null, //null
  bestCorse: { 
    title: '웹 서비스 런칭하기',
    language: 'JavaScript, Python',
  }
};

//점 표기법(ObjectName.propertyName)
console.log(joSW.bornYear);

 

 

그럼 joSW변수에 있는 다른 변수를 콘솔에 출력해보자.

 

첫 번째 방법은 점 표기법이다. 

console.log(joSW.bornYear) 처럼 '점'으로 불러오는 것이다. 

 

하지만 점 표기법도 문제가 있다. 

아래 코드 처럼 프로퍼티 네임이 따옴표로 묶여 있는 경우! 

console.log(joSW.born Year); 를 실행하면 에러가 난다!!!

//점 표기법의 문제점
let joSW = {
  brandName: 'YJ', //문자열
  'born Year': 2020, //숫자   //'born Year'처음 프로퍼티 네임을 따옴표로 묶어주는 경우!
  isVeryNice: true, //불린
  worstCourse: null, //null
  bestCorse: {                        
    title: '웹 서비스 런칭하기',
    language: 'JavaScript, Python',
  }
};

//점 표기법(ObjectName.propertyName) 
console.log(joSW.born Year); //Error가 난다. 

프로퍼티 네임은 born Year 이렇게 띄어쓰기가 되어 있어서

joSW.born Year 라고 해주면

born과 Year를 따로 따로 인식해서 에러가 난다.

 

 

 

두 번째 방법은 대괄호 표기법이다.

 

console.log(joSW['born Year']); 이렇게 대괄호 안에 따옴표 안에 프로퍼티네임을 써주는 것이다. 

//객체 표기 하는 방법 2번째 대괄호 사용하기
let joSW = {
  brandName: 'YJ', //문자열
  'born Year': 2020, //숫자
  isVeryNice: true, //불린
  worstCourse: null, //null
  bestCorse: {                       
    title: '웹 서비스 런칭하기',
    language: 'JavaScript, Python',
  }
};

//대괄호 표기법(objectName['propertyName']) 대괄호 안에 따옴표 안에 프로퍼티네임 쓰기
console.log(joSW['born Year']);
console.log(joSW['bestCorse']);

//변수에 담긴 값도 활용 가능!
let propertyName = 'brandName';
console.log(joSW[propertyName]);

console.log의 결과 3가지가 출력되었다. 

이처럼

객체 내부에 있는 값에 접근 하는 방법은

점 표기법과 대괄호 표기법이 있다. 

 

 

 

 

 

1-3. 객체 안의 객체로 들어가보자!

 

 

객체 안의 객체에 접근하는 방법은 2가지가 있다. 

객체에 들어가는 것과 마찬가지로 

점 표기법과 대괄호 표기법이다.

 

기본적으로

프로퍼티 네임을 연결해서 적어준다고 생각하면 된다.

 

점 표기법과 대괄호 표기법을 활용해서 객체 안의 객체를 불러와보자!

//객체 표기 하는 방법 
let joSW = {
  brandName: 'YJ', //문자열
  'born Year': 2020, //숫자
  isVeryNice: true, //불린
  worstCourse: null, //null
  bestCorse: {                       
    title: '웹 서비스 런칭하기',
    'Which language': 'JavaScript, Python',
  }
};

//점 표기법 사용
console.log(joSW.bestCorse.title);

//대괄호 표기법(objectName['propertyName'])
console.log(joSW.bestCorse['Which language'])

console 결과 2가지 출력 모습

 

점표기법이나 대괄호 표기법 모두 

프로퍼티의 네임을 연결해서 써주었다. 

 

점 표기법과 대괄호 표기법을 유용하게 잘 쓸 줄 알아야한다!!!

 

 

 

 

1-4. 객체 프로퍼티 수정

 

프로퍼티의 수정, 추가, 삭제하는 방법을 예시로 살펴보자!

//프로퍼티 수정, 추가 
let joSW = {
  brandName: 'YJ', //문자열
  'born Year': 2020, //숫자
  isVeryNice: true, //불린
  worstCourse: null, //null
  bestCorse: {                       
    title: '웹 서비스 런칭하기',
    'Which language': 'JavaScript, Python',
  }
};

//수정하는 방법
console.log(joSW.brandName);
joSW.brandName = 'JYJ';                 //수정
console.log(joSW.brandName);

//추가하는 방법
console.log(joSW.ceo);
joSW.ceo = '조윤주';                  //추가
console.log(joSW.ceo);

//삭제하는 방법
console.log(joSW.worstCourse);
delete joSW.worstCourse;                   //삭제
console.log(joSW.worstCourse);

즉

수정은 joSW.brandName = 'JYJ'

추가는 joSW.ceo = '조윤주'

삭제는 delet joSW.worstCourse;

 

삭제의 경우 프로퍼티 전체를 삭제해 주는 것을 말한다. 

 

 

 

 

1-5. 객체 프로퍼티 존재 여부 확인

 

객체 안에 이런 이름의 프로퍼티가 있나요? 확인하고 싶다면?

 

프로퍼티 존재 여부를 확인해보자!

//객체 표기 하는 방법 
let joSW = {
  brandName: 'YJ', //문자열
  'born Year': 2020, //숫자
  isVeryNice: true, //불린
  worstCourse: null, //null
  bestCorse: {                       
    title: '웹 서비스 런칭하기',
    'Which language': 'JavaScript, Python',
  }
};

console.log(joSW.brandName !== undefined); //프로퍼티 존재 여부 확인

//'propertyName' in object로도 프로퍼티 존재 여부 확인이 가능
console.log('brandName' in joSW);

굳이 in을 쓰는 이유는 무엇일까?

프로퍼티를 확인할 때 좀 더 안전하게 하기 위해서다!

 

 

???안전하다는 것은 무엇을 의미할까????

 

만약 프로퍼티 값이 undefiend라면 undefiend랑 비교해도 true가 나올 것이다. 

따라서 in 연산자를 활용해서 정확하게 확인하는 것이 좋다!!

 

아하~! 

 

 

그럼 예시로 영어 단어장을 만들어보자!

let myVoca = {
  function: '함수',
  variable: '변수',
  constant: '상수',
  local: '지역의',
  global: '전반적인'
}

// 이미 외운 단어 2개를 삭제
delete myVoca.function;
delete myVoca.constant;

// 오늘 외울 단어 2개를 추가
myVoca.extend = '확장하다';
myVoca['default value'] = '기본값';

// 3. default value의 뜻을 출력
console.log(myVoca);
console.log(myVoca['default value']);

콘솔 창을 보면 

2개의 단어는 삭제가 되었고, 2개의 단어는 추가가 된 것이 보인다. 

그리고 'default value'라는 단어의 뜻 '기본값'도 잘 출력이 되었다. 

 

 

자바스크립트 언어는 

객체를 빼면 시체다. 

 

객체에 좀 더 친숙해지는 시간이 필요할 듯 하다~! 

 

 

다음 글에서는 객체와 더불어 메소드에 대해 정리해봐야겠다!