방법2의 접근법은 키 안이 완벽한 상태여야 사용가능 띄어쓰기가 있으면 키 자체가 불완전해서 사용불가 띄어쓰기는 [ ] 대괄호 접근방법 사용
var objTest = {
'k$ey':'value1',
'k_ey':'value2',
'k ey':'value3',
};
console.log(objTest['k$ey']); // 객$체명
console.log(objTest['k_ey']); // 객_체명
console.log(objTest['k ey']); // 객 체명
console.log(objTest.k$ey);
console.log(objTest.k_ey);
//console.log(objTest.k ey); // 에러
// 키에 특수문자 대괄호로 감싸줘야함
// 키로써 모든게 완벽할 때 .쓸 수있지만, 띄어쓰기는 키 자체가 불완전하기 때문에 에러
// 띄어쓰기 쓸려면 []로 속성에 접근해야함
객체의 메소드 속성
function test2() {
var satoori = { // 중괄호{ } : JS의 객체
area1:'전라도', // area1:'전라도'을 필드라고 볼 수 있음
area2:'경상도',
song: function(act){ // 함수. song은 함수를 가지고 있기 때문에 메소드 역할을 함
var area2 = '강원도';
console.log(this.area1 + '와 ' + this.area2 + '는 ' + act); // 객체 안의 area1 ,area2, 매개변수로 받아온 act 출력
} // this를 붙이기 싫으면 변수 선언을 이 안에서 해줘야함.
}; // this가 있어야 객체 안에있는 속성을 찾음.
// this를 붙이면 경상도, 안붙이면 강원도
satoori.song('사이가 좋다'); // area1 is not defined 에러
// 객체를 변수satoori에 넣었고, 이 변수를 호출 했는데 에러발생
// why?
// 객체 안에서 내 속성을 호출할 때는 반드시 앞에 this.가 들어가있어야함
// 객체 내에서 쓰면 내 속성을 호출하는거기 때문에
// 여기에서는 객체 안에서 쓰면 외부에 있는 내 속성을 호출할 때 쓰는 것
// this를 안붙이고 쓸려면 function(act)안에 area1,2가 존재해야한다
// this가 있어야 객체 안에 속성을 찾음 -> 객체 안 함수의 내에서 함수 밖이자 객체 안의 속성값을 쓸려면 this를 붙여야한다
// this 있으면 함수 외부(객체의 속성)
// this 없으면 함수 내부
객체와 반복문
객체의 속성을 살펴볼때는 단순 for문으로는 불가능하고 for in문 사용해야함 ‘배열’을 가지고 사용할 때, 앞에 있는 변수(i)에 담기는 값은 배열의 인덱스가 담김 ’객체’를 가지고 사용할 때, 앞에 있는 변수(i)에 담기는 값은 객체의 키가 담기게 됨.
function test3() {
var movie = {
title:'신비한 동물들과 덤블도어의 비밀',
release: '2022-04-13',
director: '데이빗 예이츠',
mainActor: ['에디 레드메인','주드 로','매즈 미켈슨','댄 포글러','앨리슨 수돌'],
screening : true
};
// for in문에서 배열을 가지고 사용할 때, 앞에 있는 변수(i)에 담기는 값은 배열의 인덱스가 담김
// for in문에서 객체를 가지고 사용할 때, 앞에 있는 변수(i)에 담기는 값은 객체의 키가 담기게 됨
for(var i in movie) {
console.log(i); // 객체의 key값들이 찍힘. title release director mainActor screening
console.log(i + " : " + movie[i]); // i = 키값 + movie[i] = 밸류값
}
// 비어있는 객체
// {}
}
객체 속성 추가 및 제거
처음 객체 생성 이후 속성을 추가하거나 제거하는 것을 '동적으로 속성을 추가/제거한다'라고 함
1)객체 속성 추가
// 설명
student.name //스튜턴드의 네임을 가져오는 코드
student.name = '강건강'; //스튜턴드의 네임을 가져온 것에 강건강을 집어넣은 것
//속성도 만들어주고 값도 집어넣는 것
방법1
.으로 객체 안 속성 접근하는 방법
// 객체 속성 추가 방법1 : .으로 객체 안 속성 접근하는 방법
student.name = '강건강'; // {name:강건강} // key=name value='강건강'
// student.name 코드는 원래는 스튜던트에있는 name을 가져오는거였는데,
// = 으로 값을 대입하고 있으니
// student라는 객체의 name 이라는 속성에
// 강건강을 집어넣음.
// 이런식으로 값도 넣을 수 있다는것임.
student.hobby = '운동'; // {hobby:운동}
방법2
대괄호[]로 객체 안 속성 접근하는 방법
function test4() {
var student = {}; // 비어있는객체
// 객체 속성 추가 방법2 : 대괄호[]로 객체 안 속성 접근하는 방법
student['strength'] = '100m 달리기'; // 객체{} 안에
student['dream'] = '체육관 관장'; // 키값 'strength'와 밸류값 100m 달리기'를 추가
}
// 객체 속성 추가 완료 및 확인
console.log(student); // {name: '강건강', hobby: '운동', strength: '100m 달리기', dream: '체육관 관장'}
후에 공부할 것 : hoisting & prototype이게 왜 일어났는지 이 상황을 이해하려면 prototype(콘솔에서 나오는 그 프로토타입)과 hoising 공부해야함js를 깊게 공부하고 싶다면 hoising,prototype 공부 // 몰라도 js 사용가능hoisting : 선언과 할당을 나눠서 하는 것분리한거에 따라서 undefined가 뜰 수 있는데 hoising 때문
나중에 그 값들을 채워넣는 것. 분리해서 하는걸 hoising이라고 함
선언하고 할당을 분리시키는 것
프로토타입은 많이 어려워서 먼저 공부할거면 hoising만 추천
위에 삭제하기 전 console.log 호출했을 때, hobby가 삭제된채로 출력된게 왜 그렇게 적용이 된건지
