Shorthand property names

• JavaScript의 Object는 항상 Key와 value로 구성되어 있습니다.
• 만약 value에 변수명을 사용할 예정인데, key와 이름이 같은 경우 축약하여, 아래와 같이 작성할 수 있습니다.

// 일반적인 경우
const obj1 = {
	name: 'Lee',
	age: 25,
};

const name = "Lee";
const age = 25;

// key, value명이 동일한 경우 축약하여 사용가능
const obj2 = {
	name, // name: name,
	age, // age: age,

};

Destructuring Assignment

• Object의 key, value 요소에 접근하기 위해 중괄호(Array는 대괄호) 를 사용하는 방법입니다.
• Object 요소를 꺼낼 때는 {}를, Array 요소를 꺼낼 때는 []를 이용하는 것을 기본으로 합니다.

const obj1 = {
	name: 'Lee',
	age: 25,
};

// 일반적인 경우
const g_name = obj1.name;
const g_age = obj1.age;

// Destructuring Assignment :{}
const {name, age} = obj1;
console.log(name, age);

// 변수명을 변경하여 작성도 가능함
const {name: name2, age: age2} = obj1;
console.log(name2, age2);

const arr1 = ['1','2'];

// 일반적인 경우
const v0 = arr1[0];
const v1 = arr1[1];

// Destructuring Assignment : []
const [d0, d1] = arr1;
console.log(d0, d1);

Spread Syntax (연산자)

• Object 요소를 복사하기 위해 ‘…’ 키워드를 사용하는 방법입니다.
• Object를 가리키는 변수는, Object가 들어있는 메모리 주소를 가리킵니다.
  • 복사된 요소는 주소값만 복사해서 오는 것이기 때문에, 실제로 동일한 Object를 가리키게 됩니다.
• Object 요소를 꺼낼 때는 {}를, Array 요소를 꺼낼 때는 []를 이용하는 것을 기본으로 합니다.
  • Object 복사의 경우, key값이 같은 경우 뒤에오는 요소가 앞의 요소를 덮어씌우므로 주의해야 합니다.

const obj1 = {key: '1'};
const obj2 = {key: '2'};
const arr = [obj1, obj2];

// 배열 요소만 그대로 가져옴
const copyArr = [...arr];
const copyArr2 = [...arr, {key : '3'}];
 
// [ { key: '1' }, { key: '2' } ]
console.log(copyArr); 
// [ { key: '1' }, { key: '2' }, { key: '3' } ]
console.log(copyArr2);

// 원본 값이 바뀌면?
obj1.key= 10;

// 모두 영향
// [ { key: 10 }, { key: '2' } ]
console.log(copyArr);

// [ { key: 10 }, { key: '2' }, { key: '3' } ]
console.log(copyArr2);

const obj1 = {key: '1'};
const obj2 = {key2: '2', key3: '3'};

// Object의 Spread Syntax
const obj3 = {...obj1, ...obj2}

// { key: '1', key2: '2', key3: '3' }
console.log(obj3);

const obj4 = {key: '1'};
const obj5 = {key: '2', key: '3'};
const obj6 = {...obj4, ...obj5}

// 덮어쓰기 발생: { key: '3' }
console.log(obj6);

Default Parameters

• 타 언어에서 본 방법과 유사합니다.
• 함수로 전달될 인자의 Default값을 설정합니다.
  • 인자가 전달되지 않은 경우의 Default값을 사용 가능합니다.
  • 인자가 전달된 경우, 전달된 인자를 사용합니다.