🙋 목표: 자바스크립트 기초를 공부하고 부족한 부분을 채우자.
1. Object 다시 공부하기
🙌 객체는 다른 데이터 타입(텍스트, 숫자, 배열 등등...)처럼 변수에 저장 할 수 있다. {} 만 사용하면 된다. 그래서 {} 과 같이 생긴 모양의 객체를 object literal(객체 리터럴)이라고 부른다.
hello 라는 변수에 빈 객체를 할당하면
const hello = {};기본적으로 객체는 순서가 없는 데이터의 모음이다. 그럼 반대로 순서가 있는 데이터는 무엇일까? 배열인 것이다.
객체는 key와 value로 이루어져 있는데, 어떤 키로 프로퍼티에 어떤 값이 저장되어 있는지 알 수 있다. 키의 값에는 텍스트, 숫자뿐만 아니라 함수, 객체도 넣을 수 있다.
const difficult = {
'my name': 'boong',
color: 'silver',
키: '한글인 키는 따옴표가 없어도 되는군!!',
'!키': '느낌표 있는 키는 따옴표가 필요하군',
$special: '$는 없어도 되는군'
};객체의 키에는 스페이스, 한글, 특수문자 등이 들어갈 수 있다.
변수를 선언할 때는 할 수 없었던 표현이라는 것을 알 수 있다.
2. 프로퍼티 접근
프로퍼티는 접근이 가능하다. 어떤 식으로 접근하는지 코드로 공부해 보자🚀
let difficult = {
33: '숫자 형식도 되네',
'my name': '스페이스 포함 가능',
color: 'silver',
키: '한글인 키는 따옴표가 없어도 되는군!!',
'!키': '느낌표 있는 키는 따옴표가 필요하군',
$special: '$는 없어도 되는군'
};- 접근 할 때
console.log(difficult['color']);
console.log(difficult["!키"])
//등등...맥락정리) 숫자, 특수문자, 띄어쓰기가 들어간 키는 [대괄호] 로 접근, 나머지 키는 닷(.) 으로 접근
3. 변수로 프로퍼티 접근하기
let difficult = {
33: '숫자 형식도 되네',
'my name': '스페이스 포함 가능',
color: 'silver',
키: '한글인 키는 따옴표가 없어도 되는군!!',
'!키': '느낌표 있는 키는 따옴표가 필요하군',
$special: '$는 없어도 되는군'
};
const name = '키';
console.log(difficult[name]); //한글인 키는 따옴표가 없어도 되는군!!
console.log(difficult.name); //undefined🙌이런식으로 접근이 가능하다. 결과값은 한글인 키는 따옴표가 없어도 되는군!!
🚨하지만 닷(.) 으로 접근한다는 뜻은 실제 키(key) 이름을 쓸 때를 말한다.
4. 프로퍼티 할당
difficult[name] = '값 바꾼다';
console.log(difficult[name]);
difficult.color = '색깔';
console.log(difficult.color);
console.log('생성전: ' + difficult.new);
difficult.new = '새로 추가된 프로퍼티';
console.log('생성후: ' + difficult.new);객체에 이미 키가 존재하는데 다시 한 번 할당하면 값이 교체(수정)된다.
이전에 없던 키로 접근하면, 새로운 프로퍼티가 추가된다.
아직 없던 키에 접근하면 프로퍼티를 추가할 준비는 되어있지만, 값이 없다.
5. 객체의 특별한 점
객체를 공부할 때 특별한 점이 있다.
객체를 const 로 선언했을 때 이상한 현상? 이라고는 할 수 없지만 확인해보자.
const a = 1;
a = 2;const 로 선언된 변수는 값이 고정되어 있기 때문에 업데이트를 할 수가 없었다.
그런데 const 로 선언된 변수에 객체를 다시 할당하면 오류가 생기지만, 그 객체에 프로퍼티를 추가하거나 수정하는 것은 가능하다.
- 🚨이렇게 하면 안된다, 오류가 뜬다.
const mutableObj = {
name: '객체'
};
mutableObj = {
name: '수정'
}변수 mutableObj 자체에 객체를 재 할당하는 것은 불가능하다.
실행해보면 자바스크립트 오류가 난다.
- 🧯이렇게 하면 된다, 하지만 이해를 하고 넘어가자.
const mutableObj = {
name: '객체'
};
mutableObj = {
name: '수정'
}
mutableObj.name = '수정'; //{name: "수정"}
mutableObj.type = 'Object 타입'; //{name: "수정", type: "Object 타입"}그렇지만 위처럼 프로퍼티에 접근해서 내용을 수정하거나, 프로퍼티를 추가하는 것은 에러가 나지 않는다.
6. 메소드(Method)
객체에 저장된 값이 함수인 것을 메소드라고 부른다.
console.log();결국 console.log() 도 console 이라는 객체의 log() 라는 메소드이다. 자바스크립트 어디에나 가능한 global 객체인 것이다.
메소드를 정의하는 방법은 다음과 같다.
let methodObj = {
do: function() {
console.log('메서드 정의는 이렇게');
}
}호출하는 방법은
methodObj.do(); //메서드 정의는 이렇게7. 중첩 객체(Nested Object)
실무에서 사용되는 객체는 거의 중첩되어 있다고 한다. 프로퍼티 값이 객체일 수도 있고, 프로퍼티 값인 배열의 요소가 객체일 수도 있다.
let nestedObj = {
type: {
year: '2019',
'comment-type': [{
name: 'simple'
}]
}
}'simple'을 출력하려면 어떻게 해야할까
console.log(nestedObj.type["comment-type"][0].name) //simple어렵지 않다, 연습을 많이 해 보자✍️
8. 객체는 reference로 저장된다.
☀︎이 파트는 굉장히 중요하다고 한다. 객체는 reference로 저장된다. 무슨 말일까? 납득은 간다.
객체를 변수에 저장하면 객체 자체가 저장되는 것이 아니다. 그럼 어딜까? reference다.
다시말해서, 변수는 객체를 가르키고 있는 것이 아니라 reference를 가르키고 있는 것이다.
const a = '안녕';
const b = '안녕';
console.log(a === b);반대로, 문자형은 변수에 저장하면 문자형 자체가 저장이 된다. 그래서 비교연산자를 이용하면 true 로 나오는 것을 확인할 수 있는 것이다.
- 그런데 아래의 객체는 생긴 모양이 아예 똑같은데 false 라고 출력된다. 왜 일까?
const hiObj = {
name: '안녕'
};
const helloObj = {
name: '안녕'
};
console.log('객체비교 =>', hiObj === helloObj);그 이유는 객체는 변수에 저장할 때, 객체 자체를 그대로 저장하는 것이 아니기 때문이다. 객체가 담긴 어느 메모리의 reference를 저장하기 때문 (결국 메모리 주소: abcd-1234 와 같은 곳에 저장이 된다)
그래서 객체를 담은 변수를 비교하면 서로 같지 않다고 나온다. 그러나 객체 내부의 프로퍼티 값이 텍스트일 경우에는 비교연산자로 판별이 가능하다.
- 새로운 예시
const mutableObj = {
name: '객체'
};
mutableObj = {
name: '수정'
}
mutableObj.name = '수정 됩니다!';우리가 const 로 선언된 변수는 절대 값이 변하면 안된다. 그래서 mutableObj 에 새로운 객체를 할당하면 오류가 난다. 왜냐면 메모리 주소가 고정되있기 때문이다.
하지만 mutableObj.name 으로 프로퍼티에 접근해서 수정하는 것은 가능하다. 왜냐면 우리가 가르키고 있는 메모리 주소는 여전하기 때문이다.✍️
9. Assignment
getAnswer 함수를 구현하자.
-
getAnswer함수는 아래의 객체에서 '샐러드' 라는 값을 출력한다.let myProfile = { name: '김개발', address: { email: 'geabal@gmail.com', home: '위워크' }, 'my favorite': { food: [{ name: '샐러드', price: 3500 }, { name: '삼겹살', price: 15000 }], hobby: ['축구'] } }function getAnswer() { return myProfile["my favorite"].food[0].name }
