기술면접_JavaScript_11_13
## 프론트엔드 개발자 입문(비동기처리) | Callback,Promise,Async,Await ### Contents 1...
프론트엔드 개발자 입문 | Object
Contents
- Literals and properties
- Computed properties
- in operator
- for..in/for..of
- Cloning
- 드림코딩 유투브 채널의 JavaScript 기초강의 내용을 바탕으로 정리하는 포스팅입니다.
- 영상에서 언급되지 않은 내용이 포함되어 있음
-
Tutorial Video_07
Literals and properties
- Object는 Key와 Value로 이루어져 있으며 생성방법에는 object literal과 object constructor이 있음
- key: 접근 가능한 프로퍼티(ex.name)
- value: 프로퍼티가 가지고 있는 값(ex.ellie)
- key: 접근 가능한 프로퍼티(ex.name)
//object literal
const obj1 = {};
//object constructor (class를 사용하며 생성하는 방법)
const obj2 = new Object();
//etc.
const ellie = { name: 'ellie', age: 4};
//JavaScript는 동적언어로 object정의 후 property를 추가 및 삭제할 수 있음 (비권장)
ellie.hasJob = true;
delete ellie.hasJob;
Computed properties
- Object안 변수 접근에는 아래 두 가지 방법이 있음
//1. dot을 사용하는 방법
console.log(ellie.name)
//2. Computed properties
console.log(ellie['name'])
//사용하는 경우
const ellie = { name: 'ellie', age: 4};
function printValue(obj, key) {
//printValue : object에 있는 key에 상응하는 value출력
console.log(obj.key); //1번 방법
console.log(obj[key]); //2번 방법
}
printValue(ellie, 'name')
//1번 방법 사용 시 undefined출력 (key는 사용자가 runtime에 입력하는 것으로 현재 미정)
//2번 방법 사용 시 ellie출력 (computed properties사용 시, key값을 현재 모르더라도 값 출력가능)
//*대부분의 경우, dot방법을 사용하는 것이 적절
in operator
Property existence check (key in obj)
const ellie = { name: 'ellie', age: 4};
console.log('name' in ellie);
for..in/for..of
//for..in
//오브젝트가 가진 모든 key들이 블럭을 돌 때마다 key변수에 할당되며 출력
const ellie = { name: 'ellie', age: 4, hasJob: true};
for (key in ellie) {
console.log(key)
}
//for..of
//배열이 가진 모든 값들이 블럭을 돌 때마다 value에 할당되며 출력
//기존 for(let i =0; i < array.length; i++>) 방식대비 효율적
const array = [1,2,3,4,5]
for (value of array){
console.log()
}
Cloning
Object를 고유하게 복제해야 하는 경우 사용
//아래와 같이 복제 시, user2는 새로운 메모리 영역을 할당받기는 하지만 user1이 참조하는 ref(single item메모리 영역 주소)를 동일하게 참조하여 user2에서 값을 변경할 경우, user1에서도 값이 변경됨
const user1 = {name: 'ellie', age: '20'}
const user2 = user;
user2.name = 'coder';
//user1의 property를 가진 고유한 user3를 만들고자 할 때에는 아래 두 가지 방법으로 작성할 수 있음
//1번 방법
const user3 = {};
for (key in user1){
user3[key] = user1[key];
}
//2번 방법
const user4 = {};
Object.assign(user4, user);