일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
- CS스터디
- 숫자구하기
- es6
- 네트워크해킹
- 컴퓨터 논리와 구조
- 자바스크립트표준
- 이진검색
- 데이터분석
- ES차이
- 비전공자개발정리
- es3
- 트위터해킹
- API요청
- 아마존해킹
- 프로세서 속도와 심장 박동수
- 컴퓨터과학
- ECMA설명
- 알고리즘 문제 풀이
- 빗썸데이터
- 아키네이처
- 1일 1로그 100일 완성 IT지식
- 공개API
- 한국디도스
- 퀵정렬
- HDD와 SSD의 차이
- 줌서비스
- 브라우저 작동원리
- 주식스팸
- ES5
- es6문법
- Today
- Total
개발일지
JS. 객체 간단소개와 궁금했는데 못 찾았던 것들! 본문
객체
객체는 중괄호{...}를 이용해 만들 수 있습니다. 중괄호 안에는 'key' : 'value' 쌍으로 구성된 프로퍼티를 여러개 넣을 수 있는데, 키엔 문자형, 벨류엔 모든 자료형이 허용됩니다.
예시로 서랍장을 설명하는데 복잡한 서랍장안에서 이름표를 보고 원하는 파일을 쉽게 찾을 수 있듯이, 객체에선 키를 이용해 프로퍼티를 쉽게 찾을 수 있습니다. 추가 삭제도 마찬가지.
중괄호 {..}를 이용해 객체를 선언하는 것을 '객체 리터럴' 이라고 부릅니다. 객체 선언할 때는 주로 이 방법을 많이 사용하죠
let user = { // 객체
name: "John", // 키: "name", 값: "John"
age: 30 // 키: "age", 값: 30
};
매달리는 쉼표 (trailing, hanging)
let user = {
name: "John",
age: 30,
}
알고리즘과 강의를 들으면서 왜 끝에 쉼표를 붙이지 했는데 이유가 여기 나와있었다.. 이렇게 끝에 쉼표를 붙이면 모든 프로퍼티가 유사한 형태를 보이기 때문에 프로퍼티를 추가,삭제,이동하는게 쉬워지기 때문!,. 쓰는게 컴퓨터상 좋다.
단축 프로퍼티
리덕스 함수에서도 볼 수 있었던 건데 같은 키,벨류가 같다면 그 같은 값을 한 번만 쓰면 된다.
function makeUser(name, age) {
return {
name, // name: name 과 같음
age, // age: age 와 같음
// ...
};
}
ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
let user = {
name, // name: name 과 같음
age: 30
};
‘in’ 연산자로 프로퍼티 존재 여부 확인하기
여기서 undefined랑 비교해도 충분한데 왜 in 연산자가 있는거지? 라는 의문이 들 수 있는데
대부분의 경우, 일치 연산자를 사용해서 프로퍼티 존재 여부를 알아내는 방법(" === undefined" ) 은 꽤 잘 동작합니다. 그런데 가끔은 이 방법이 실패하고 이럴 때 in을 사용하면 프로퍼티 존재 여부를 제대로 판별할 수 있습니다.
let obj = {
test: undefined
};
alert( obj.test ); // 값이 `undefined`이므로, 얼럿 창엔 undefined가 출력됩니다. 그런데 프로퍼티 test는 존재합니다.
alert( "test" in obj ); // `in`을 사용하면 프로퍼티 유무를 제대로 확인할 수 있습니다(true가 출력됨).
객체 정렬 방식
근데 객체를 보면 프로퍼티엔 순서가 있을까?? 생각하지만 당연히 있다면 순서는 들어간 값 순서 아닐까? 그리고 매번 알고리즘을 할때는 항상 정렬을 해줘야 그런지 자동 정렬은 전혀 없다고 생각했다.
let codes = {
"49": "독일",
"41": "스위스",
"44": "영국",
// ..,
"1": "미국"
};
for (let code in codes) {
alert(code); // 1, 41, 44, 49
}
근데 아니었다. 정수 프로퍼티는 자동으로 정렬되고, 그 외의 프로퍼티는 객체에 추가한 순서 그대로 정렬된다.
정수프로퍼티는??
// 함수 Math.trunc는 소수점 아래를 버리고 숫자의 정수부만 반환합니다.
alert( String(Math.trunc(Number("49"))) ); // '49'가 출력됩니다. 기존에 입력한 값과 같으므로 정수 프로퍼티입니다.
alert( String(Math.trunc(Number("+49"))) ); // '49'가 출력됩니다. 기존에 입력한 값(+49)과 다르므로 정수 프로퍼티가 아닙니다.
alert( String(Math.trunc(Number("1.2"))) ); // '1'이 출력됩니다. 기존에 입력한 값(1.2)과 다르므로 정수 프로퍼티가 아닙니다.
여기서 더 충격적인 + 기능
나라 번호가 정수로 취급되지 않도록 속임수를 쓸 수 있는데, 각 나라 번호 앞에 "+"를 붙여준다.
그러면 원하는대로 독일 나라 번호가 가장 먼저 출력되는 것을 확인할 수 있습니다.
추가된 순서대로 나온다!! 정수 자동정렬 안시킬려면 이걸로 딱!
let codes = {
"+49": "독일",
"+41": "스위스",
"+44": "영국",
// ..,
"+1": "미국"
};
for (let code in codes) {
alert( +code ); // 49, 41, 44, 1
}
proto??
이와같이 객체 프로퍼티 키에 쓸 수 있는 문자열엔 제약이 없지만,
역사적인 이유 때문에 특별 대우를 받는 이름이 하나 있습니다. 바로, __proto__입니다.
let obj = {};
obj.__proto__ = 5; // 숫자를 할당합니다.
alert(obj.__proto__); // [object Object] - 숫자를 할당했지만 값은 객체가 되었습니다. 의도한대로 동작하지 않네요.
원시값 5를 할당했는데 무시된 것을 확인할 수 있습니다.
__proto__의 본질은 프로토타입 상속에서, 이 문제를 어떻게 해결할 수 있을지에 대해선 프로토타입 메서드와 __proto__가 없는 객체에서 자세히 다룰 예정입니다.
https://ko.javascript.info/object
객체
ko.javascript.info
'책) 코어 자바스크립트' 카테고리의 다른 글
옵셔널 체이닝 '?.'이 필요한 이유?? (0) | 2022.06.21 |
---|---|
메서드와 this~ is method 설명 밑줄 (0) | 2022.06.17 |
가비지 컬렉션??? JS의 휴지통?! (0) | 2022.06.15 |
객체가 뭔가요오~ 이건 복사되는데 저건 안돼요! (0) | 2022.06.14 |
데이터 타입 불변성?? 불변객체 const (0) | 2022.06.11 |