객체리터럴
객체를 문자 그대로 표현할 수 있다.
키와 값이 똑같으면 한 번만 써주면 된다.
const objectName = {
a: 1,
b:’bb’
};
바로 위에 만든 objectName객체를 객체안에 넣고싶을 때 바로 밑에처럼 쓰면 됨
const outsideObject = {
objectName:objectName
};
**es5까지는 이렇게 밖에 할 수가 없었음
근데 key와 value값이 같을 경우 코드 조금이라도 덜 쓰기 위해 아래와 같이 쓴다.
const es6OutsideObject = {
objectName
};
만약에 키랑 값이 똑같으면 이렇게 하나만 적어주면 된다함!
객체리터럴 정리
ES6 버전에서 객체를 표현하는
방식에 변화
1. 변수명과 객체 프로퍼티 같은 경우 중복 표현 생략 (?)
2. 객체 메서드 함수 표현식 function 키워드 생략
3. 오브제트 프로퍼티 명 안에 연산 가능
**이게 function 키워드로 예전 함수를 만드는 방식임
**예전 방식
const objectMethods = {
method1: function () {
console.log(‘this is method’);
}
}
** 반드시 함수를 호출할 때는 소괄호를 눌러줘야한다.
objectMethods.method1();
**es6 방식, function 키워드 필요 x
const es6objectMethods = {
method1 () {
console.log(‘this is method es6’);
}
}
es6objectMethods.method1();
오브제트 프로퍼티 명 안에 연산 가능 근데 그 대신 꺽쇠를 써줘야함
예를 들어 arr array 0번째 인덱스 값을 property로 넣으면 이렇게 할 수 있다.
const arr = [‘a’, ‘b’, ‘c’];
const objectWithOperation = {
[arr[0]]: ‘This is key name’;
}
이렇게도 연산 백틱
[`${1+3+‘ha’}`]: ‘this is 4ha’
매일 쓰는 문법이라고 함
옵셔널 체이닝(?.)
undefined, null 에서는 어떤 프로퍼티를 참조할 수 없음 (TypeError)
이 에러를 방지하기 위해 만들어진 es6 문법이 옵셔널 체이닝
undefined 에서 참조하려고 하면 이 에러창이 뜸
cannot read properties of undefined
예전에는 오류 나는 걸 방지하려고 if문을 썼었다.
예시
const weekdays = {
mon: {
open: 10,
close: 10,
}
tue: {
open:9,
close:9,
},
};
if (weekdays.wed) console.log(weekdays.wed);
백엔드에서 값이 수천 개 들어올수도 있고 어떤 값인지도 모르는데 일일이 if문을 쓰기 거의 불가능이라고 본다함
왜 제일 마지막 객체에 쉼표를 붙이는거야? 이 자바스크립트 코드에서?
예를 들어, 나중에 객체에 새로운 속성을 추가하거나 이전 속성을 제거할 때, 마지막 속성에 쉼표가 있는 경우 수정이 간편해집니다. 쉼표가 없는 경우, 마지막 항목의 쉼표를 추가하거나 제거하는 과정에서 발생할 수 있는 실수를 방지할 수 있습니다.
옵셔널체이닝 하는 방법은 아주 간단하다. 물음표만 쓰면 된다.
console.log(weekdays.wed?.open);
weekdays.wed가 있으면 open 프로퍼티 값을 출력해라는 뜻이다.
그러면 없어도 error가 안나고 그냥 undefined가 출력된다.
값이 null인 경우도 옵셔널 체이닝 사용하면 된다. 그러면 null은 property가 없으므로 에러나는데 그냥 undefined로 맞춰준다.
const thisisNull = null;
console.log(thisisNull?.a);
Method 정의안하고 출력하려고 하면
Not a function이렇게 오류창 나옴
메소드가 없는 경우에 물음표 두개를 써서 오른쪽으로 넘어갈 수 있게 써준다.
objectMethods.method2?(). ?? console.log(‘no method’);
Map
ES6에서 추가된 key-value 집합
Key는 중복해서 들어갈 수 없다.
이터러블 (iterable) = 순회가 가능한 구조
Map 만드는 방법
const thisIsMap = new Map();
자바스크립트안에는 Map이라는 클래스가 있고 Map이라는 Constructor가 있어서 그 생성자를 가져와서 새로운 객체를 만들어준거임
Map에 값을 추가하려면 set메소드 쓰면 된다.
근데 key값 value값 동시에 줘야함
thisIsMap.set(1. ‘This is Map’);
키값으로 어떤 값이든 된다. true도 된다.
thisIsMap.set(true, ‘this is boolean);
key값으로 value를 호출하고싶다.
console.log(thisIsMap.get(1));
키값으로 불러올 때 없는 값으로 불러오면 undefined
Map은 object랑 비슷하지만 iterable 특성이 있다.
element 하나하나를 루프로 for문을 돌린다.
for (const element of thisIsMap) {
console.log(element);
}
set으로 추가한거 삭제하고 싶을 때
thisIsMap.delete(1);
1이 key값임
Set
순회가 가능하고 값이 중복해서 들어갈 수 없음
이터러블
const thisIsSet = new Set();
자바스크립트 개발자들이 미리 Set constructor다 만들었다. 그냥 쓰기만 하면 됨
Set 어떤값 다 넣을수 있고 add method 쓰면 됨
const thisIsSet = new Set();
thisIsSet.add(‘pizza’);
thisIsSet.add(true);
똑같은 값 넣을려히도 변화가 없다.
has로 있는지 없는지 확인가능
console.log(thisIsMap.has(‘pizza’));
