key : value 방식으로 저장하고 읽어오는 데이터는
key를 참조하여 value를 가져올 수 있다.
점 표기법, 대괄호 표기법을 사용한다.
계산된 프로퍼티
- 객체를 만들 때 객체 리터럴 안의 프로퍼티 키가 대괄호로 둘러싸여 있는 경우 이를 계산된 프로퍼티(computed property)라고 부른다.
let fruit = prompt("어떤 과일을 구매하시겠습니까?", "apple");
let bag = {
[fruit] : 5 // 변수 fruit에서 프로퍼티 이름을 동적으로 받아 옵니다.
};
alert(bag.apple); // fruit에 "apple"이 할당되었다면, 5가 출력됩니다.- [fruit]은 프로퍼티 이름을 변수
fruit에서 가져오겠다는 의미이다. - 사용자 프롬프트에 apple을 입력했다면 bag엔 {apple : 5} 가 할당된다.
단축 프로퍼티
- 실무에서 프로퍼티 값을 기존 변수에서 받아와 사용하는 경우가 있다.
function makeUser(name, age){
return{
name : name,
age : age,
}
}
let user = makeUser("SWP", 33);
alert(user.name);- 프로퍼티들은 이름과 값이 변수의 이름과 동일
- 프로퍼티 값 단축 구문을 사용하면 코드를 짧게 줄일 수 있다.
function makeUser(name, age){
return{
name,
age,
}
}
let user = makeUser("SWP", 33);
alert(user.name);'in' 연산자로 프로퍼티 존재 여부 확인
- 자바스크립트 객체는 다른 언어와 달리 존재하지 않는 프로퍼티에 접근해도 에러가 발생되지 않고,
undefined를 반환한다.
let user = {};
alert(user.noSuchProperty === undefined);
// 반환되는 값 true는 프로퍼티가 '존재하지 않음'을 의미한다.undefined와 비교하는 것 이외에도 연산자 in을 사용하면 프로퍼티 존재 여부를 확인할 수 있다.
"key" in object let user = {name : "SWP", age : 33};
alert("age" in user); // user.age가 존재하므로 true가 출력된다.
alert("year" in user); // user.year는 존재하지 않기 때문에 false가 출력된다.in왼쪽에는 반드시 프로퍼티 이름이 와야한다.
undefined인 value가 존재하는 경우와, 아무값도 존재하지 않는 경우가 헷갈릴 수 있다.
참조에 의한 객체 복사
객체 기본
- 객체의 동작 방식
- 변수에는 객체가 저장되어 있는 메모리 주소인 객체에 대한 참조값이 저장된다.
- 객체는 메모리 내 어딘가에 저장되고 변수 user엔 객체를 참조할 수 있는 값이 저장된다.
let user = {
name : "John"
};C에서 배웠던 call by value와 call by reference를 떠올리면 이해하기 쉽다.
let user = { name : "John" };
let admin = user; // 참조값을 복사함user가 가진 참조값(주소값)을 admin도 가지게 되고,
user와 admin 둘 다 name을 참조할 수 있다.
admin.name = "춘식";
alert(user.name);복사된 admin의 참조값에 의해서 '춘식'이로 변경하고
원본 user의 참조값으로 변경된 사항을 확인해보면,
'John'이 이닌 '춘식'이 출력된다.
화살표 함수 기본
자바스크립트 기본
ES6에 적용된 문법 중 하나
- 화살표 함수 : 함수 표현식보다 단순하고 간결한 문법으로 함수를 제작한다.
let func = (arg1, arg2, ... , argN) => expression- func는 화살표 우측의 표현식(expression)을 평가하고 평가 결과를 반환한다.
let sum = function(a, b){
...
return a + b;
}↓ ↓ ↓ 아래의 화살표 함수로 축약할 수 있다.
let sum = (a, b) => {
...
return a + b
}↓ ↓ ↓ 함수의 정의가 단순한 경우,
let sum = (a, b) => a + b;
alert(sum(1, 2)); // 3(a,b) => a+b;는 실행되는 순간 표현식a+b를 평가하고, 그 결과를 반환한다.
인수(argument)가 한 개인 경우 괄호를 생략할 수 있다.
const dbl = num => num * 2;인수가 없는 경우
const nothing = () => alert("없음");화살표 함수 :
1. function 키워드를 제거하고,
2. 함수의 이름을 변수처럼 사용할 수 있다. (대입)
let age = prompt("나이를 입력하세요 : ", 20); // 20 : 디폴트값
let welcome = (age < 19)?
function(){ alert("미성년자는 구매할 수 없습니다."); } :
function(){ alert("성인입니다."); }↓ ↓ ↓ 화살표 함수로 바꾸어보자.
let welcome = (age < 19)?
() => { alert("미성년자는 구매할 수 없습니다.") } :
() => { alert("성인입니다..") }
한 줄, 한 줄