코드스테이츠 3주차 셋째날
새 모니터와 새 출발한 첫 날 🎵
화면이 커지니까 눈이 정~말 편하다
선물 받은 모니터라 더 더 열심히 공부해야겠다는 마음이 든다
페어 님과 함께 한 이틀(...동안의 배열과 객체...)
많이 배울 수 있던 소중한 시간이었다
인내심을 가지고 나를 기다려주시고
친절하고 자상하게 알려주셔서 감사하고 죄송했다
나도 쓰임있는 사람이 되어야지
오늘 있었던 스페셜 레처까지 동기부여 제대로다
취업할 거야! 보다는
실력을 우선 키우자. 라고 뼈저리게 느꼈다
그러면 취업길은 알아서(?) 열릴 것이니라...
1. 오늘 공부한 것은
✅ 객체 (Object)
: key와 값(value)의 집합체
데이터에 의미를 부여할 수 있다
참조형 데이터 타입
key는 문자열이며 value로 어느 것이든 가질 수 있다.
object 생성자에 주어진 값이 null 또는 undefined면 빈 객체를 생성하여 반환한다.
자바스크립트에서는 객체의 값을 추가 선언하거나 재할당이 가능하다.
배열 또한 객체이다!
✔️객체 선언 방식 2가지
let object1 = new object(); //object constructor 객체 생성자 방식
object1.key = value;
let obj = new object({1:2})
let object2 = {}; // object literal 객체 리터럴 방식1. dot notation
let object = {key: [1, 2], name: 'young'};
object.key;
>[1,2]
object.name;
>'young'
객체에 property를 추가할 때 :
key 값을 직접 정해두고 작성하는, literal notation에서 사용
2. bracket notation
let object = {key: [1, 2], name: 'young'};
object['key']; //문자열!
>[1, 2]
object['name'];
>'young'
객체에 property를 추가할 때 :
key 값을 runtime에서 알 수 있는, 동적일 때 사용한다 (ex 변수)
key 값을 표현식을 통해 지정하는 computed property name
:deleteoperatorobject의property를 제거한다
key를 입력하면 해당되는value까지 모두 삭제!
delete object.key
:inoperatorobject안에key가 있는지 여부(trueorfalse)를 반환한다.
let velog = {young : 39}
'young' in velog //---> key는 반드시 string 타입
> true
: 반복문!! (이라는 게 헷갈렸다)for...in
모든key들을 받아오고 싶을 때 사용한다
for (let 지역변수 key in object) {
console.log(key) // 지역변수가 object를 탐색하는 동안 반복할 일
}
---> object의 key들이 순서대로 출력된다
: 역시 반복문for...of
배열, 문자열과 같은iterable object에서 사용 가능하다
for (let 지역변수 item of iterable ) {
statement //
}object를 iterable로 바꿔주는 method Object.entries(name)을 사용하면 object에서 for..of 사용 가능하다
let fruits = {
'apple':1,
'mango':3,
'tomato':5
}
💡for (const item of Object.entries(fruits)) {
console.log(item);
}
// 키와 값을 배열로 반환
> Array ["apple", 1]
> Array ["mango", 3]
> Array ["tomato", 5]
💡for (const [key, value] of Object.entries(fruits)) {
console.log(`${key}: ${value}`);
}
// 변수를 2개 지정하면 각각으로 받아와서 문자열로 반환
> "apple: 1"
> "mango: 3"
> "tomato: 5"2. 추가적으로 공부한 것
property value shorthand
: 프로퍼티 값 단축 구문
객체의 key와 value가 변수의 이름과 동일할 때 사용할 수 있다
https://ko.javascript.info/object#ref-205
function makeUser(name, age) {
return {
name, // name: name 과 같음
age, // age: age 와 같음
// ...
};
}
makeUser('young', 10);
>{name: 'young', age: 10}//💡property value shorthand
const color = {apple : 'red', mango : 'yellow', tomato : 'green'};
const size = {apple : 'small', mango : 'medium', tomato : 'large'};
const taste = {apple : 'delicious', mango : 'good', tomato : 'sweet'}
const price = new Fruits(1000, 5000, 300);
console.log(price);
>>Fruits {apple: 1000, mango: 5000, tomato: 300}
//💡constructor function
function Fruits(apple, mango, tomato) {
// this = {}; ---> 함수를 new 라는 키워드와 함께 사용하면 this가 객체를 생성하는 것으로 쓰인다
this.apple = apple;
this.mango = mango;
this.tomato = tomato;
// ---> return this;
}반복문에서의 break / continue
break: 반복문 종료
continue: 해당 값은 건너뛰고, 다음 값으로 continue한다
this
: 함수를 호출한 방법에 의해 쓰임이 결정된다.
전역 실행에서 쓰일시 전역 객체window를 참조한다.
mutable method / immutable method
---> 일부러 암기하기 보다, 체득하는 쪽으로 공부해보자
https://doesitmutate.xyz/
객체 복사
Object.assign
💡 Object.assign(Target, Source);
---> source를 target에 덮어쓰기 한다
const first = {
day : 'thu',
month : 11,
date : 2
};
const one = {
day: 1,
month: 1,
};
1️⃣const fione = Object.assign(first, one);
console.log(fione);
> Object { day: 1, month: 1, date: 2 }
2️⃣const second = Object.assign({}, first); // 빈 객체에 객체 first를 복사해 넣는다
console.log(second);
>{day: 'thu', month: 11, date: 2}3. 더 공부할 것
-
this또한 더 공부해 볼 것!! -
엄격모드, 비엄격모드?
-
next() -
iterable object= 반복 가능한 객체
https://ko.javascript.info/iterable
4. 기억하자
key 이름에 띄어쓰기가 있으면 따옴표로 묶는다
마지막 property는 쉼표로 끝나도 된다 (모든 property가 비슷한 형태가 되어서 접근이 편리해진다)
<let object = {
'today is' : 7, // ---> bracket notation으로 접근해야 한다
good : 'day', // ---> tailing(hanging) comma
};
Method는 소괄호()와 함께 사용한다!
중괄호, 대괄호 아니고 소괄호!!
코드는 readable하게...
문제 풀고 시간 남으면 간결하게 수정해보자
요소를 추가하면 length가 return 되고
요소를 삭제하면 삭제한 요소를 return 한다
어제보다 오늘 더 성장한 나를 응원하기 🍀
