코어 자바스크립트 (객체:기본)

Vorhandenheit ·2021년 6월 15일
0

JS.코어

목록 보기
1/29
post-thumbnail
post-custom-banner

객체

여덟가지 자료형 중에 7개는 오직 하나의 데이터만 담을 수 있어 '원시형'이라 부르는데 객체형은 원시형과 달리 여러 데이터를 같이 담을 수 있음

  • {..} 중괄호를 이용해서 만들 수 있음
    - key : value 형태로 구성된 프로퍼티를 넣을 수 있는데
    • key에는 문자형
    • value에는 자료형이 허용

객체를 만드는 방법

let user = new Object(); // 객체 생성자 문법
let user = {}; // 객체 리터럴 문법 

1.리터럴과 프로퍼티

  • 중괄호 {...} 안에는 '키:값' 구성된 프로퍼티가 들어감
let user = {     //객체 리터럴 문법
  name : 'John', // 왼쪽에는 키 key , 오른쪽에는 값 value
  age : 30
}
  • 점 표기법
user.name	// John
user.key	// 30

프로퍼티 값 읽는 것도 가능

  • delete 연산자
delete user.age;

delete 연산자를 통해 프로퍼티 삭제할 수도 있음

  • 따옴표
"like birds": true 

여러 단어를 조합해 이름붙일 경우 따옴표를 사용해야함

  • 마지막 프로퍼티 끝은 쉼표로 끝날 수 있음
let user = {
	name: "john",
    age: 30,
}

trailing , hanging 쉼표라고 부름
이렇게 하면 프로퍼티를 추가, 삭제, 이동하는게 쉬워짐

2.대괄호 표기법

여러 단어를 조합해 프로퍼티 키를 만든 경우는, 위에서 말했던 .점 표기법을 사용해도 프로퍼티 값을 읽을 수 없음
대신 이 대괄호 표기법을 사용할 수 있음

let user = {};
user.["likes birds"] = true

let key = "name";
user[key]

변수 key 사용자 입력값 변경 등에 따라 값이 변경될 수 있음, 결과를 확인하기 위해 점 표기법은 불가능, 대괄호 표기법을 사용해야함

3. 계산된 프로퍼티

객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러쌓여있는 경우, 계산된 프로퍼티 라고 부름, (computed property)

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
	[fruit]: 5,
};

[fruit]는 프로퍼티 이름을 변수 fruit에서 가져오겠다는 걸 의미

let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {};

bag[fruit] =5;
let fruit = 'apple';
let bag = {
	[fruit + 'computers']: 5 // bag.applecomputer = 5
}

-대괄호 표기법은 프로퍼티 이름과 값의 제약을 없애주기 때문에 점 표기보다 좋지만, 작성하기 번거롭다는 단점
-프로퍼티 이름이 확정된 상황이고, 점표기법을 사용하다 복잡한 상황이 발생했을 때 대괄호 표기법으로 바꾸는 경우가 많음

3.단축 프로퍼티

프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 종종 있음

function makeUser(name, age) {
	return {
     name: name;
      age: age;
    }
}
let user = makeUser("John", 30);

위 예시의 프로퍼티들은 이름과 값이 변수의 이름과 동일
이럴 때 프로퍼티 값 단축 구문을 사용할 수 있음 (property value shorthand)

let user = {
	name,
  	age,
}

4.프로퍼티 이름의 제약사항

  • 변수 이름에는 for, let, return 같은 예약어를 사용하면 안됨
    객체 프로퍼티에는 이런 제약이 없음
let obj = {
	for: 1
  	let: 2
  	return: 3
}
  • 또 문자형이나 심볼형에 속하지 않은 값은 문자열로 자동 형 변환
let obj = {
	0: "test" // "0":"test"
}

5.'in'연산자로 프로퍼티 존재 여부 확인하기

  • 존재하지 않는 프로퍼티에 접근하려 해도 에러가 발생하지않고 'undefined'를 반환
let user = {};
user.noSuchProperty === undefined ; // true
  • undefined 외에도 연산자 in을 사용하면 프로퍼티 존재 여부 확인가능
"key" in obj

in 왼쪽에는 반드시 프로퍼티 이름이 와야함, 프로퍼티 이름은 보통 "" 감싼 문자열

6. 'for...in'반복문

객체의 모든 키를 순회할 수 있음, 앞에 for(;;)반복문 과는 완전히 다름!

for (key in object) {
	//각 프로퍼티 키를 이용하여 본문을 실행
}
let user = {
	name: "John",
  	age: 30,
  	isAdmin: true
}

for (let key in user) {
	alert(key);			//name, age, isAdmin
	alert(user[key]);	//John, 30, true
}

반복 변수 let key를 했다는 점에 주목!

7.객체 정렬 방식

객체에서 정수 프로퍼티는 자동으로 정렬, 그외에 프로퍼티는 객체에 추가한 순서 그대로 정렬
정수 프로퍼티: 변형 없이 정수에서 왔다 갔다 할 수 있는 문자열을 의미

let codes = {
	"49": "독일":
  	"41": "스위스":
  	"44": "영국":
};

순서 그대로 출력하고 싶다면, 숫자 앞에 +를 붙여야됨

과제

  • 객체야 안녕
let user = {
	name = John,
  	surname = Smith,
}
user.name. = Pete
delete user.name
  • 객체가 비어있는지 확인하기
function isEmpty(obj) {
	for (let key in obj) {
    	return false;
    }
 return true;
}
  • 변하지 않는 객체?
const user = {
	name = "John"
}
user.name = "Pete"

변함

  • 프로퍼티 합계 구하기
let salaries = {
	John: 100,
  	Ann: 160,
  	Pete: 130,
}
function sum(obj) {
  let sum = 0
	for (key in salaries) {
    	sum += key[salaries]
    }
  return sum
}
  • 프로퍼티 값 두 배로 부풀리기
let menu = {
	width: 200,
  	heigth: 300,
  	title: "My menu",
};

multyplyNumeric(menu);

menu = {
	width: 400,
  	height: 600,
  	title: "My menu"
};
function multypyNumeric(obj) {
	for (key in obj) {
    	if (typoeof obj[key] == 'number') {
        	obj[key] *= 2;
        }
    }
}

typeof : 프로퍼티 값이 숫자인지 확인 할 수 있음

profile
읽고 기록하고 고민하고 사용하고 개발하자!
post-custom-banner

0개의 댓글