[JavaScript]자바스크립트 기초문법3 - [객체(objact)]

in JavaScript on Basic


이번 포스트는 [객체(objact)]에 관한 내용입니다.

1️⃣ 객체 사용법

  • 자바스크립트는 “거의 모든 것”이 객체로 이루어진 언어라고 말할 수 있을 정도로 객체의 비중이 큰 언어입니다.
  • 자바스크립트에서의 객체는 key: 값(value)의 형태의 “프로퍼티(property)”들의 집합입니다.

(1) 객체 선언

  • key(property Name)의 첫 번째 글자는 반드시 ‘문자’,  ‘밑줄(_)’,  ‘달러기호($)’중 하나로 시작해야 합니다.
  • 또한 중간에 ‘띄어쓰기’,  ‘하이픈(-)’을 사용할 수 없지만 '',""로 key를 감싸준다면 사용이 가능해집니다. (첫 번째 글자가 ‘문자’,  ‘밑줄(_)’,  ‘달러기호($)’가 아닌경우에도 가능해집니다.)
  • 또한 객체안에 객체를 선언할 수 있습니다.
let myInfo = {
  'my-name': 'kirim',
  "my city": "seoul",
  my_age: 28,
  $myhobby: 'running',
  isman: true,
  money: null,
  body: {
    height: 175,
    weight: 75
  }
};

(2) 객체 프로퍼티 출력

  • 기본적으로 객체(object)명 뒤에 .로 구분하여 key를 적으면 value를 불러올 수 있습니다.
  • .대신 []로도 key값을 불러올 수 있습니다. 대괄호 안에 문자를 항상 ''나""로 감싸 주어야 합니다.
  • 또한 key가 '',""로 감싸진 형태라면 .의 방법을 사용할 수 없습니다.
console.log(myInfo["my-name"])  // ' ', " "을 이용한 key는 '[]'를 이용
console.log(myInfo['my city'])
console.log(myInfo.my_age)
console.log(myInfo.$myhobby)
console.log(myInfo.isman)
console.log(myInfo['isman'])  // []안에는 '', ""로 감싸줄 것
console.log(myInfo.money)
console.log(myInfo.body)
console.log(myInfo.body.height)
console.log(myInfo.body.weight)
/*-------출력-------*/
kirim
seoul
28
running
true
true
null
{ height: 175, weight: 75 }
175
75

(3) 객체 프로퍼티 삭제

  • delete를 이용하여 객체를 삭제할 수 있습니다.
let myDic = {
  apple: "사과",
  orange: "오랜지",
  banana: "바나나"
};

console.log(myDic);
delete myDic.orange;
console.log(myDic);
/*-------출력-------*/
{ apple: '사과', orange: '오랜지', banana: '바나나' }
{ apple: '사과', banana: '바나나' }

(4) 객체 프로퍼티 생성

  • 단순하게 원하는 key에 value를 대입하면 됩니다.
let myDic = {
  apple: "사과",
  orange: "오랜지",
  banana: "바나나"
};

console.log(myDic.strawberry);
myDic.strawberry = "딸기";
console.log(myDic.strawberry);
console.log(myDic);
/*-------출력-------*/
undefined</ br> 딸기</ br> { apple: '사과', orange: '오랜지', banana: '바나나', strawberry: '딸기' }</ br>

(5) 객체 프로퍼티 존재여부 확인법


1. 단순비교 방식

  • !== undefined로 단순히 비교하는 방식입니다.
  • 하지만 key값이 우연히 undefined값으로 정의될 경우, key는 존재하지만 상황에 따라서 정의가 안된경우와 구분이 안되기 때문에 비추천 방식입니다.
let myDic = {
  apple: "사과",
  orange: "오랜지",
  banana: "바나나"
  peach: undefined
};

console.log(myDic.peach !== undefined);
/*-------출력-------*/
false


2. ‘찾을key’ in ‘객체’

let myDic = {
  apple: "사과",
  orange: "오랜지",
  banana: "바나나"
  peach: undefined
};

console.log('peach' in myDic);
/*-------출력-------*/
true



2️⃣ 객체 메소드(method)

  • 객체에 포함된 값이 함수인 것 을 메소드라고 합니다.
  • console.log도 개체 메소드라고 할 수 있습니다.

(1) 메소드 생성

let myCal = {
  add: function (a, b){
    return (a + b);
  },
  minus: function (a, b){
    return (a - b);
  }
};

let A = myCal.add(3, 4);
let B = myCal.minus(3, 4);
console.log(A);
console.log(B);
/*-------출력-------*/
7
-1

(2) 메소드 사용이유

  • 사실 메소드대신 직접 함수를 구현해서 사용해도 됩니다.
  • 하지만 매번 함수를 구현할 때마다 중복되지않게 작명하는 것이 힘들고 어떤함수가 있는지 알기가 힘듭니다.
  • 객체의 메소드는 “좀 더 객체에 집중하여 함수의 동작을 구현할 수 있습니다.”
  • 결론적으로 “어떤 객체의 고유한 동작으로써 함수에 의미를 부여”할 수 있게 됩니다.

< 메소드 사용 간단예시 >

let rectAngle = {
  getArea: function (height, width){
    return height * width;
  }
}

let triAngle = {
  getArea: function (height, width){  // 다른 객체끼린 메소드 중복가능
    return height * width / 2;
  }
}

let Arect = rectAngle.getArea(3, 4);
let Atri = triAngle.getArea(3, 4);
console.log(Arect);
console.log(Atri);
/*-------출력-------*/
12
6



3️⃣ for in 반복문

  • in을 사용하면 객체의 프로퍼티를 자동으로 받아올 수 있습니다.

(1) for in 기본사용

  • for in을 사용하면 객체의 key값을 문자형으로 불러옵니다.
  • 그렇기 때문에 .를 이용하여 변수를 받게되면 undefined가 출력됩니다.
  • []를 이용하여 변수를 받아야 원하는 value를 출력할 수 있습니다.
let myFavoriteFruit = {
  banana: "바나나",
  strawberry: "딸기",
  peach: "복숭아"
}

for (let fruit in myFavoriteFruit)  // key 출력
{
  console.log(fruit);
}
console.log();
for (let fruit in myFavoriteFruit)  // undefined 출력
{
  console.log(myFavoriteFruit.fruit);
}
console.log();
for (let fruit in myFavoriteFruit)  // value 출력
{
  console.log(myFavoriteFruit[fruit]);
}
/*-------출력-------*/
banana
strawberry
peach

undefined
undefined
undefined

바나나
딸기
복숭아

(2) 정수형 key

  • 문자형 key는 선언한 순서대로 for반복문에 불려왔습니다.
  • 하지만 정수형 key의 경우 작은 숫자부터 불려옵니다.
  • "정수", '정수'로 문자형으로 만든 정수형까지도 말입니다.
  • 이런식의 정수형 key를 사용할 경우 실수할 가능성이 큽니다.
  • 그렇기 때문에 되도록이면 정수형 프로퍼티사용을 자제하는 것이 좋습니다.
let myDic = {
  3: "three",
  banana: "바나나",
  '2': "two",
  strawberry: "딸기",
  peach: "복숭아",
  "4": "four",
  1: "one",
}

for (let word in myDic)
{
  console.log(word);
}
console.log()
for (let word in myDic)
{
  console.log(myDic[word]);
}
/*-------출력-------*/
1
2
3
4
banana
strawberry
peach

one
two
three
four
바나나
딸기
복숭아



< 자바스크립트[JavaScript] 기초문법 포스트 목차 >

1.  자바스크립트 기초문법1 [변수선언, 기본출력, 기본 규칙]
2.  자바스크립트 기초문법2 [자료형, 연산자, 함수선언, 반복문, 조건문]
>> 자바스크립트 기초문법3 [객체(objact)]
4.  자바스크립트 기초문법4 [배열(array)]
5.  자바스크립트 기초문법5 [(지수,n진법)표기법, 숫자형 메소드, Math객체]



© 2021.02. by kirim

Powered by kkrim