객체
객체의 존재이유
비슷한 코드들의 정리
비슷한 데이터들의 정리
- 키에 값 대입한 것들
- 함수
방법
하나의 변수에 다양한 정보 저장하는 방식으로
객체의 구문
키워드(?)변수명= {
키:값, //속성property
키:값, //속성property
doThisThing(){...},
doThatthing(){...}
} ;
- 변수에, curly bracket으로 묶은 영역을 대입한다고 생각하기 (
키와값의 쌍들을 저장해 놓은) - 변수의
키에값을 할당(??)할 때:로 씀 - 속성들 사이 구분자는
, {}끝나고;필수
예시
const product1 = {
productName: "에스더 수납형 침대"
price: 400000,
imgURL: "http//...jpg"
//doSomething(){};
//함수 넣어도 좋고(?), 위처럼 키&값 쌍만 써놓고 나머진 백엔드에게 데이터 바꾸는 것 요구해도 됨
}객체 생성 방법
1. {}에 담기 (객체 리터럴 이용-object literal)
const obj1 = {};
let obj = {
name: "kiki"
getName: function(){
//...;
}
};
//접근법
obj.getName();
특이사항: 객체 리터럴로 객체 만들고, 뒤늦게 프로퍼티 추가하는 것이 js상에서 가능하긴 하지만,
다른 언어에선 불가능한, 꽤 위험한 일!
(class 템플릿 재사용할 때도 이렇게 되려나? 안해봐서 모르겠음)
2. class 템플릿 재사용 (new라는 키워드) (생성자 함수 이용-object constructor)
const obj2 = new Object();
function Person(name) {
this.name = name;
this.showName = function () {
//...;
};
}
//접근법
let person = new Person("Kiki");
person.showName();
객체 접근법
1. dot notation
활용 상황
일반적인 경우 다
예시
const james = {
name: "제임스",
age: 29
}
const age = james.age;
console.log(age);2. bracket notation
활용 상황
주된 상황은,
정확히 어떤 키가 필요한지 모를 때,
정확한 키가 런타임에서 결정될 때,
실시간으로 원하는 키의 값을 받아오고 싶을 때,
즉 변수를 사용하는 경우에 주로 쓴다 (???)
예시
//굳이 bracket notation 안 써도 되는 상황
const james = {
name: "제임스",
age: 29
}
const job = james["age"]; //이럴 경우 key 언급할 때 ""필수!!
console.log(age);
//bracket notation 써야 하는 상황 //이게 런타임에서 키가 결정되는 경우라 볼 수 있나?몰라 //예시 막 지어봤는데 이상한 것 같음... 냉장고 예시가 객체에 적절?
const firstRefrigerator = {
boxStorage: ['whole onion', 'whole pumpkin'],
plateStorage: ['vegetable soup', 'seaweed soup', 'cooked rib'],
};
let pickedOne = "boxStorage";
console.log(firstRefrigerator[pickedOne][0]); //박스스토리지 안에 있는 통양파 꺼내기 정상작동
const firstRefrigerator = {
boxStorage: ['whole onion', 'whole pumpkin'],
plateStorage: ['vegetable soup', 'seaweed soup', 'cooked rib'],
};
let pickedOne = "boxStorage"[0];
console.log(firstRefrigerator[pickedOne]); //박스스토리지 안에 있는 통양파 꺼내기 정상작동X
//변수에 담을 때에, 키를 ""로 담아야 한다는 것도 안 와닿고,
//""가 있으면 어떻게 배열인덱스를 붙여야할지도 모르겠음
객체의 데이터타입
reference type 혹은 object type?? (primitive과 대비)
배열
배열의 존재이유
모르겠음. 자료 정리? (자료구조?)
방법
하나의 변수에 다양한 정보 나열한 것 저장(?)하는 방식으로
(변수에 대입 꼭 해야 함?)
배열의 구문
키워드(?)변수명= [데이터,데이터,데이터] ;
예시
const receivedAnswer = ["나중에 입력할게요!💁🏻", 01012345678, 01023456789]
const arrayWithObjectElements = [{name: "Yooyoo", age: 7}, {name: "Jiji", age: 9}, {name: "Kiki", age: 5}]
//배열의 요소로 객체 갖는 경우!!
//근데 궁금한 점, 변수에 객체 대입하기도 하잖아. 그럼 이 변수를 곧장 쓰면 안 되나?
실제 활용 상황
배열은 단순히 string타입, number 타입의 데이터를 순서있게 담아놓을 뿐 아니라,
객체타입의 데이터를 순서 있게 담아놓는 것으로도 활용된다
ex. 쇼핑몰에서 이미지+상품명 객체들이 나열된 목록
배열과 객체
배열의 요소로 객체가 쓰이는 경우가 많다고 했다.
1) 배열의 요소로 객체가 쓰이는 경우
구문
const
변수이름= [{key:value,key:value,key:value,key:value} , {key:value,key:value,key:value,key:value}]
const
객체이름1= {key:value,key:value,key:value,key:value}
const객체이름2= {key:value,key:value,key:value,key:value}
const inventory = [객체이름1, 객체이름2]
예시
//
const inventory1 = [{name: 'apples', quantity: 2}, {name: 'bananas', quantity: 0}, {name: 'cherries', quantity: 5}];
// 배열의 요소인 객체를, 변수에 담기
const seaweed = {
productName: "만전김",
brandName: "갓구운 곱창돌김",
rawMaterials: {
main: "돌김",
oil: {
major:"옥배유",
minor:"참기름"
}
seasoning : "정제소금"
}
const greentea = {
productName: "제주향기 현미녹차",
brandName: "다농원",
rawMaterials: {
main: "말린 녹차잎"
}
}
const addedToCart = [seaweed, greentea] //순서있는게적합하니 자료형 배열인거 바람직 //오차즈케만들고싶은사람의 쇼핑카트목록을 생각하며 쓴 코드
//
배열에서 객체 찾기
array.find()
property중 하나를 이용해서 배열에서 객체 찾기
배열 안에 든 객체에 접근하기
객체가, 이름이 붙어 있지 않은 anonymous라고 접근 불가한 것 아니다
-> 배열의 내부에서 요소에게는 따로 이름을 붙일 수 없긴 하다 (물론, 배열 외부에서 변수 선언하고 / 그 변수를 배열의 요소로 쓸 수는 있음 global scope??? )
-> 과거 나의 추측) 객체의 이름은, 접근할 때에 dot notation혹은 bracket notation을 사용할 때 늘상 사용되기에, 객체에 접근하려면 객체가 anonymous면 안될거란 생각을 했었다.
-> 정답) 배열 내의 객체는, 어차피 배열의 한 요소일 뿐이기에, 배열에 접근하는 일반적 방법(index 통해 접근)을 사용한다. 고로 이름 없는 것이 문제되지 않는다.
for문 이용 (????) (이거 무슨 맥락인지 머릿속에서 아직 분류 못함)
/** 문제
08. findAdultName
배열에서 성인을 찾아 그 이름을 반환하는 함수를 만들어주세요.
함수는 인자로 객체가 요소인 배열을 받습니다.
배열의 요소는 각 사람에 대한 객체이며 아래는 배열의 예시입니다.
배열 예시 : [
{ name: 'tom', age: 10, gender: 'male' },
{ name: 'sera', age: 30, gender: 'female' },
]
함수의 반환값 : 'sera'
배열에는 성인이 없거나 오직 한 명만 있습니다.
배열에 성인이 없다면 false를 반환해주세요.
19세까지는 미성년자, 20세부터는 성인으로 가정합니다.
* @param {*[]} people - array of people
*/
//모범답안
function findAdultName(people){
for(let i=0; i<people.length; i++){
if(people[i].age > 19) return people[i].name
}
}
//내 풀이
function findAdultName(people){
let i= //이러고 인덱스를 어떠한 방법으로 선택해야 하나 고민했음
if (people[i].age>19){
return people[i].name;
} else {
return null;
}
나는 왜 for문을 떠올리지 못했을까?
배열의 각 요소를 검사한다고 할 때, "반복하여 하는 행동"이니까 반복문을 쓰는 게 자연스럽다
반복문 없이 풀이하려 하니까, index를 변수로 잡고, 그 변수를 하나씩 키우는 함수를 정의하려 했다
(i도 변수고, i++가 거기에 가하는 행위니까, 결국 같은 개념이긴 함)
-> 그런데 내 풀이는 작동이 안 됨. 왜지?
-> i라는 변수를 선언 안 해서 그런가?
-> 그런데 for문에서도 i가 어디의 무엇인지 말해주진 않잖아. 0을 할당해주는 건 그게 인덱스임을 말해주는 것까진 못할텐데?
-> for문이 그거까지 해준다는 걸로 약속..?한건가
2) 데이터타입 배열 vs. 객체 중 선택
고려사항
index로순서를 정하는 것이 더 적절한가? yes) 배열key로 값에 대한설명을 덧붙여야 더 적절한가? : yes) 객체
