Codeit/JavaScript

객체와 프로퍼티

효땡 2024. 8. 6. 09:07

객체 (Object)

- 객체 안에 객체 사용 가능

- 변수에 담겨서 이름을 만듦

{
  blue: '뽀로로',
  orange: '에디',
  pink: '루피',
  green: '크롱'
}

 

프로퍼티

- 키와 값의 한 쌍

- 키: Property Name / 값: Property Value

 

Property Name 주의사항

1. 첫 번째 글자는 반드시 문자, 언더바(_), 달러기호($) 중 하나로 시작

2. 띄어쓰기 금지

3. 하이픈(-) 금지

 

객체에서 데이터 접근하기

let codeit = {
  name: '코드잇',
  bornYear: 2017,
  'is Very Nice': true,
  worstCourse: null,
  bestCourse: {
    title: '자바스크립트 프로그래밍 기초',
    language: 'JavaScript'
  }
};

 

점 표기법 (objectName.propertyName)

console.log(codeit.bornYear); // 2017

console.log(codeit.bestCourse.title); // 자바스크립트 프로그래밍 기초

 

대괄호 표기법 (objectName['propertyName'])

console.log(codeit['is Very Nice']); // true

let propertyName = 'name';
console.log(codeit['propertyName']); // 코드잇

console.log(codeit.bestCourse['title']); // 자바스크립트 프로그래밍 기초

console.log(codeit.bestCourse(['teacher']); // undefined

 

 

실습

이제 막 코딩을 배우기 시작한 시원이는 프로그래밍을 할 때 영어의 중요성을 새삼 느껴 다시금 영어 공부를 하기 시작했습니다.

그런데 문득 영어공부도 하고 코딩공부도 할 겸 자바스크립트로 영어 단어장을 만들어 보려는 아이디어가 떠올랐습니다.

아래는 오늘 시원이가 외워야 할 영어 단어들인데요. 여러분들이 시원이가 되어서 오늘 외워야 할 영어단어 객체를 완성해보세요.

 

외워야 할 단어들

[function] = 함수

[variable] = 변수

[constant] = 상수

[local] = 지역의

[global] = 전반적인

 

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

console.log(myVoca);
console.log(myVoca.local);
console.log(myVoca.constant);
console.log(myVoca.function);

 

실습 결과

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