[TIL] 객체(Object) 🙃

객체(object); 각 변수에 같은 종류, 다른 값을 입력하는 코드

배열과 객체를 비교한 코드블럭

// 입력할 데이터 예시
let username : 'a';
let useremail : 'a@gmail.com';
let usercity : 'seoul';

let user2name : 'b';
let user2email : 'b@gmail.com';
let user2city : 'busan';




// 배열로 표현
let user = ['a', 'a@gmail.com', 'seoul']
let user2 = ['b', 'b@gmail.com', 'busan']
// 각 인덱스가 어떤 정보인 지 알 수 없음.




// 객체로 표현; 키_name,email,city  값_'a','a@gmail.com','seoul'
let user = {
	name: 'a',
    email: 'a@gmail.com',
    city: 'seoul'
}

let user2 = {
	name: 'b',
    email: 'b@gmail.com',
    city: 'busan'
}

객체의 값을 사용하는 방법; Dot notation, Bracket notation

let user = {
	name: 'a',
    email: 'a@gmail.com',
    city: 'seoul'
}



// Dot natation
user.name; // 'a'
user.city; // 'seoul'



// Bracket natation
user['name']; // 'a'
user['city']; // 'seoul'

** user[name] 이런식으로 따옴표 없이 사용하면 값이 도출되지 않는다. '',  "", ``모두 사용가능. 만약 name으로 쓴다면 name이라는 변수에 키를 할당하면 사용할 수 있음.

코플릿 1_get Property

• 객체와 키를 입력받아 키에 해당하는 값을 리턴해야 합니다

• CHECK POINT

  • obj: 임의 속성을 갖는 객체
  • property: string 타입의 키

• 입출력 예시

const person = {
  name: 'Steve',
  age: 16,
};

let output = getProperty(person, 'name');
console.log(output); // --> 'Steve'

output = getProperty(person, 'age');
console.log(output); // --> 16

MY CODE(실패)

function getProperty(obj, property) {
let person = {
  name: 'Steve',
  age: 16,
};
 return obj[property];
}


// 입출력
let output = getProperty(person, 'name');
console.log(output); // Uncaught ReferenceError: person is not defined

** 변수로 선언한 person값이 정의되지 않았다는 오류 메시지
=> 이번에는 변수를 먼저 선언하고 함수 진행

let person = {
  name: 'Steve',
  age: 16,
};


function getProperty(obj, property) {
 return obj[property];
}

// 입출력
let output = getProperty(person, 'name');
console.log(output); // Steve

** 출력은 제대로 됐지만 스트링 값으로 출력 되지 않음.
=> 리턴값을 obj['property']로 수정

let person = {
  name: 'Steve',
  age: 16,
};


function getProperty(obj, property) {
 return obj['property'];
}


let output = getProperty(person, 'name');
console.log(output); // undefined

** 'property'로 객체를 불러오면 person의 키값(ex. name, age와 같은) 중에 property의 값을 찾아 반환하는 꼴이 되어버림. 변수 person의 키값으로 property가 존재하지 않아 undefined로 최종값이 출력.

결론

변수를 앞으로 빼고 실행한 함수의 리턴값이 정답. 내가 예상한 값은 'Steve'였는데, 그냥 Steve로 출력되어 오답으로 생각함. 그래서 앞의 예시도 똑같이 '' 없이 출력되는 지 콘솔창에 다시 시도함.

let name = 'steve'

let a = { content: '프리코스' };


a.content; // '프리코스'

a['content']; // '프리코스'

이때는 제대로 ''값이 출력됨. 뭐가 다른걸까?

Dot notation vs Bracket notation | 객체 수정

• Dot notation은 정적, Bracketn notation은 동적.

let person = {
  name: 'Steve',
  age: 16,
};



// Dot notation(1)
function getProperty(obj, property) {
 return obj.name;
}

let output = getProperty(person, 'name');
console.log(output); // Steve
// 항상 키 중 name 값만 출력 가능. 다른 키값은 출력 불가능(정적)



// Dot notation(2)
function getProperty(obj, property) {
 return obj.property;
}

let output = getProperty(person, 'name');
console.log(output); // undefined
// obj.property : person의 키 중 property의 값을 찾는 것. 




// Bracket notation
function getProperty(obj, property) {
 return obj[property];
}


// 입출력
let output = getProperty(person, 'name');
console.log(output); // Steve
let output = getProperty(person, 'age');
console.log(output); // 16
// 모든 키의 값을 불러올 수 있음.

• Dot notation Bracket notation 이용, 객체 내용 변경

let user = {
	name: 'a',
    email: 'a@gmail.com',
    city: 'seoul'
}

// 키 'hobby', 값 '독서' 추가
user['hobby'] = '독서'; // '독서'

user; // {
name: 'a', email: 'a@gmail.com', city: 'seoul', hobby: '독서'
}

// 키 'isPublic', 값 'true' 추가
user.isPublic = true;
true

user; // {
name: 'a', email: 'a@gmail.com', city: 'seoul', hobby: '독서', isPublic: true
}

// 키 email 삭제
delete user.email;
true

user; // {
name: 'a', city: 'seoul', hobby: '독서', isPublic: true
}

객체에서의 for in 문

상속된 열거 가능한 속성들을 포함하여 객체에서 문자열로 키가 지정된 모든 열거 가능한 속성에 대해 반복

const object = { 
a: 1, b: 2, c: 3 
};
// 키(property)_a, b, c    값_1, 2, 3

for (const property in object) { // 변수 object 안의 property(키)를 순회한다.
  console.log(`${property}: ${object[property]}`);
} // `${키}: ${변수[키]}`를 콘솔창에 출력한다.

// expected output:
// "a: 1"
// "b: 2"
// "c: 3"

_mdn 참조

tmi; 허리가 무지아픔. 최근에 책상 샀는데 모션 데스크로 살껄 후회중.. 그래도 아이패드가 있어서 다행이다🥲 어제는 머리가 팽팽 잘 돌아갔는데 오늘은 브레인포그처럼 계속 멍함. 코플릿 풀다가 과자먹었더니 좀 나음..ㅋㅋ