티스토리 뷰
1. 오브젝트
function print(person){
console.log(person.name);
console.log(preson.age);
}
const ellie = { name: 'ellie', age: 4 };
print(ellie);
오브젝트를 만드는 법 2가지
const obj1 = {}
const obj2 = new Object();
{}를 이용해서 만드는 것을 object literal syntax이라고 하고
new를 이용해서 만드는 것을 object constructor syntax이라고 한다
자바스크립트는 미친 것이 뒤늦게 하나의 프로퍼티가 추가 가능함
function print(person){
console.log(person.name);
console.log(preson.age);
}
const ellie = { name: 'ellie', age: 4 };
print(ellie);
ellie.hasJob = true;
delete ellie.hasJob
이런 식으로 추가도 가능하고 삭제도 가능함
빠르게 만들기에는 좋지만
유지보수가 힘들어질 수 있으니 사용은 자제하는 게 좋음
오브젝트는 키와 밸류의 집합체이다. object = { key : value }
위 예시는 키는 name 벨류는 ellie인 것을 알 수 있다.
2. computed properties
dot (ooo.name)이라는 문법이 아닌
오브젝트 안에 있는 name을 string 형태로 접근이 가능하다 (string으로만 받아 올 수 있으니 주의)
console.log(ellie.name);
console.log(ellie['name']);
dot을 이용할 때는 코딩하는 그 순간, 대부분 코딩을 진행할때는 dot을 이용함
computed property를 이용할때는 내가 뭘 받을지 모를 때 사용한다. 동적인 프로그램 만들 때 사용
3. property value shorthand
const person1 = { name : '해강', age : 23 };
const person2 = { name : '해덕', age : 22 };
const person3 = { name : '해순', age : 21 };
const person4 = { name : '해주', age : 20 };
const person5 = makePerson('해미', 23) // case1,2
const person6 = new Person('해진', 30) // case3 new를 이용해서 선언함
function makePerson(name,age) { //case1
return {
name : name.
age : age,
};
}
function makePerson(name,age) { //case2 이런식으로 이름이 동일하면 생략가능
return {
name.
age,
};
}
function Person(name,age) { //case3 함수 이름을 대문자로 작성해야됨
//this = {} 생략가능
this.name = name;
this.age =age;
// return this 생략가능
}
4. constructor function
function Person(name,age) { //case3 함수 이름을 대문자로 작성해야됨
//this = {} 생략가능
this.name = name;
this.age =age;
// return this 생략가능
}
위에서 쓴 게 constructor function임
5. in operator
해당 안에 키가 있는지 없는지 확인하는 것 (in을 이용하여 확인함)
엘리 안에 이름이 있는지 확인하는 코드
'true' or 'false'를 출력함
정의하지 않은 키를 사용하면 undefined를 출력함
console.log('name' in ellie);
6. for ..in vs for.. of
- for ( key in obj ) : 객체 안에 키가 전부 for을 통해 돌아감
- for ( value of iterable ) : 안에 모든 값을 출력함
const array = [1, 2, 4, 5];
for(value of array){
console.log(value);
}
배열 안에 모든 값이 출력됨 (1, 2, 4, 5)
7. cloning
Object.assign()을 이용하는데 여기 Object를 보면 우리의 모든 객체는 저 Object를 상속한다
복사하는 방법은 위에 user라는 객체가 name과 age를 가지고 있다고 하면
cost user4 = {};
Object.assign( user4, user);
console.log(user4);
이렇게 하게 되면 둘의 키와 네임이 더해진다. 근데 user4는 빈 객체이므로
채워지게 되어 복사가 된다
const fruit1 = { color: 'red' };
const fruit2 = { color: 'blue', size: 'big' };
const mixed = Object.assign({}, fruit1, fruit2);
이렇게 하면 뒤에 있는 거로 최신화되어 덮어 쓰인다 따라서 mixed는 blue big을 프로퍼티로 갖게 된다.
'웹프로그래밍 > js' 카테고리의 다른 글
유용한 10가지 배열 함수들. Array APIs 총정리(드림코딩 by 엘리님 유튜브 강의) (0) | 2022.03.10 |
---|---|
배열 제대로 알고 쓰자, 자바스크립트 배열 개념과 APIs 총정리(드림코딩 by 엘리님 유튜브 강의) (0) | 2022.03.10 |
arrow function 은 무엇인가? 함수의 선언과 표현(드림코딩 by 엘리님 유튜브 강의) (0) | 2022.03.09 |
코딩의 기본 operator, if, for loop 코드리뷰 팁(드림코딩 by 엘리님 유튜브 강의) (0) | 2022.03.08 |
데이터타입 let vs var, hoisting(드림코딩 by 엘리님 유튜브 강의) (0) | 2022.03.08 |
- Total
- Today
- Yesterday
- 1단 메뉴만들기
- 네이버 부스트코스
- 부동산
- 다단레이아웃
- 웹프로그래밍
- htmlcss 매뉴만들기
- 레이아웃제작
- 레이아웃작성
- 부동산스터디
- 메뉴만들기
- 2단레이아웃
- CSS
- float효과삭제
- 고정 레이아웃 제작
- 고정레이아웃제작
- 웹 코딩
- 고정레이아웃
- HTML
- 경매공부
- 홈페이지 메뉴 만들기
- 프론트공부
- 프로모션 페이지 제작
- 부스트보스
- 부동산경매
- 경매
- 1단 메뉴 제작
- 이해강
- 1단레이아웃제작
- 고정 레이아웃
- float효과제거하기
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 | 31 |