1. INTRO
금일 수업은 객체와 배열을 다루는 방법을 배울 수 있었습니다. 수업이 진행될 수록 새로운 문법이 계속 나오고 있어 어려움이 느껴지기 시작했지만 코드를 반복해서 보다보면 익숙해지지 않을까 제 자신을 기대해보겠습니다!
2. 단축 속성명 (shorthand property names)
속성 이름과 속성값을 갖고 있는 변수 이름이 동일한 경우 => 속성 이름을 생략
속성 이름과 함수(메서드)이름이 동일한 경우 => function 키워드와 함께 속성 이름을 생략
- 매개변수를 객체로반환하는 함수를 정의하는 경우
function returnObject(age, name) {
return { age: age, name: name };
}
function returnObject2(age, name) {
return { age, name };
}
console.log(returnObject2(20, "홍길동")); // {age: 20, name: "홍길동"}
- 로그를 출력할 때
// 변수가 가지고 있는 값을 로그로 출력 => 변수 이름과 함께 출력되어야 내용 파악이 용이
console.log({age, name}); // {age: 20, name: "홍길동"}3. 계산된 속성명 (computed property names)
변수를 이용해서 객체 속성의 키를 만드는 방법
- 속성 이름(Key)와 속성 값(Value)를 전달받아 객체를 반환하는 함수를 정의
function returnObject(key, value) {
return { [key]: value };
}
- 속성 이름이 일련번호 형태를 가지는 객체를 반환하는 함수
function returnObject2(key, value, no) {
return { [key+no]: value };
}
4. 전개 연산자 (spread operator)
배열이나 객체에서 전개 연산자를 활용하면 루프문을 돌리지 않고 값을 변경하거나 입력할 수 있다.
사용 예 1 - 배열의 값을 복사
객체와 배열을 복사할 때 참조가 복사되는 문제를 해결 -> 주소가 아닌 값을 복사하는 것이 필요
let arr6 = [ ...arr5 ];사용 예 2 - 객체의 값 복사
// 객체 값이 복사
let obj3 = { age: 23, name: '홍길동' };
let obj4 = { ...obj3 };사용 예 3 - 객체를 복사하는 과정에서 새로운 속성을 추가하거나 속성의 값을 변경하는 경우
let obj2 = { ...obj1, name: '고길동' };
let obj3 = { ...obj1, email: "go@test.com" };사용 예 4 - 배열 또는 객체를 결합할 때
결합 시 배열은 같은 값이 와도 중복될 수 있는데, 객체는 key 값이 중복되면 뒤의 내용으로 덮어씌워진다.
// 두 배열을 결합
const arr1 = [ 1, 2, 3 ];
const arr2 = [ 3, 4, 5 ];
const arr3 = [ ...arr1, ...arr2 ]; // [ 1, 2, 3, 3, 4, 5 ]
const arr4 = [ ...arr2, ...arr1 ]; // [ 3, 4, 5, 1, 2, 3 ]
// 두 객체를 결합
const obj1 = { a: 1, b: 2, c: 3 };
const obj2 = { c: 33, d: 4, e: 5 };
const obj3 = { ...obj1, ...obj2 }; // { a: 1, b: 2, c: 33, d: 4, e: 5 }
const obj4 = { ...obj2, ...obj1 }; // { c: 3, d: 4, e: 5, a: 1, b: 2 }사용 예 5 - 배열 요소를 함수의 개별 인수로 전달할 때
console.log(sum(...numbers));
console.log(Math.max(10, 20, 30));
console.log(Math.max(...numbers));5. Rest Parameters
함수의 인수를 배열로 수집하는 방법으로, 함수가 전달받은 가변 인수를 처리할 때 사용한다.
function sum(...args) {
console.log(args);
let result = 0;
for (let i = 0; i < args.length; i++) {
result += args[i];
}
console.log(result);
}
sum(10, 20); // 30
sum(10, 20, 30); // 60
sum(10, 20, 30, 40); // 1006. 배열 비구조화(array destructuring)
배열 데이터(요소)를 변수에 나눠서 할당
const arr = [ 1, 2, 3, 4, 5 ];
// c, d, e, f 변수에 arr 배열에 첫번째 인덱스의 값부터 차례로 할당
let [ c, d, e, f ] = arr;
console.log({ c, d, e, f }); // { c: 1, d: 2, e: 3, f: 4 }- 두 변수의 값을 교환
비구조화 = 배열
[x, y] = [y, x];
console.log({x, y}); // {x: 20, y: 10}- 배열의 크기보다 변수의 갯수가 많은 경우
const arr = [1, 2];
const [a, b, c] = arr;
console.log({a, b, c}); // { a: 1, b: 2, c: undefined }
// 기본값 설정이 가능
const [d, e = 20, f = 30] = arr;
console.log({d, e, f}); // { d: 1, e: 2, f: 30 }
- 배열의 일부 값을 변수에 할당 할 경우 => 할당하지 않을 자리는 비워둔다.
const arr = [ 1, 2, 3, 4, 5 ];
let [x, , y, , z] = arr;
console.log({ x, y, z }); // { x: 1, y: 3, z: 5 }- 배열의 값을 할당하고 남은 나머지를 새로운 배열로 만드는 경우
arr 배열의 첫번째 값을 first 변수에 넣고, 나머지 값을 rest 이름의 배열에 추가한다. 이때, 배열은 순서가 있다는 걸 유의한다.
arr = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
const [first, ...rest] = arr;
console.log(first); // 1
console.log(rest); // [2, 3, 4, 5, 6, 7, 8, 9, 10]7. 객체 비구조화 (object destructuring)
객체를 비구조화 할 때는 객체의 속성명(key)가 중요하다.
- obj1 객체를 age 와 name 이라는 단축 속성 적용된 변수에 할당
const obj1 = { age: 21, name: "홍길동" };
let { age, name } = obj1; // 객체 비구조화 할당
console.log({ age, name }); // { age: 21, name: '홍길동' } <= 단축 속성명을 이용해서 변수가 가지고 있는 값을 출력- obj1 객체가 가지고 있지 않은 이름을 이용 : undefined 발생
let { newAge, newName } = obj1;
console.log({ newAge, newName }); // {newAge: undefined, newName: undefined}- obj1 객체가 가지고 있는 값을 가져와서 새로운 이름으로 사용
let { age: newAge, name: newName } = obj1;
console.log({ newAge, newName }); // { newAge: 21, newName: '홍길동' }
// 단, 객체 존재하지 않는 요소를 변수에 할당하려고 하면 undefined가 할당됨
let { age: newAge, name: newName, email } = obj1;
console.log({ newAge, newName, email }); // { newAge: 21, newName: '홍길동', email: undefined }
// 객체 존재하지 않는 변수의 기본값 설정
let { age: newAge, name: newName, email = "default"} = obj1;
console.log({ newAge, newName, email }); // { newAge: 21, newName: '홍길동', email: 'default' }- obj1 객체의 age 속성의 값을 hongAge 변수에 할당하고, 나머지 값을 rest 이름의 객체에 할당
const obj1 = { age: 21, name: "홍길동", email: "hong@test.com" };
const { age: hongAge, ...rest } = obj1;
console.log(hongAge); // 21
console.log(rest); // { name: "홍길동", email: "hong@test.com" }8. Array 메서드
map()
하나의 집합을 다른 형태의 집합으로 바꾼다. 형태는 바뀌었지만 모집합과 결과 집합의 갯수는 동일하다. source.map(plusTwo)과 같이 표현할 수 있다.
// source 배열의 값을 두 배수한 결과 배열(twoTimes)을 만들어서 출력
// 방법1. for문을 이용한 방법
{
const twoTimes = [];
for (let i = 0; i < source.length; i++) {
// twoTimes.push(source[i] * 2);
twoTimes[i] = source[i] * 2;
}
console.log(twoTimes); // [2, 8, 18, 32]
}
// 방법2. map() 메서드를 이용
{
const twoTimes = source.map(value => value * 2);
console.log(twoTimes); // [2, 8, 18, 32]
}
{
const func = value => value * 2;
const twoTimes = source.map(func);
console.log(twoTimes); // [2, 8, 18, 32]
}
{
const func = function(value) { return value * 2; };
const twoTimes = source.map(func);
console.log(twoTimes); // [2, 8, 18, 32]
}
{
const twoTimes = source.map(function(value) {
return value * 2;
});
console.log(twoTimes); // [2, 8, 18, 32]
}
{
function func(value) {
return value * 2;
}
const twoTimes = source.map(func);
console.log(twoTimes); // [2, 8, 18, 32]
}
// 여러 맵 함수를 연결해서 사용
{
const twoTimes = v => v * 2;
const tenTimes = v => v * 10;
const plusTwo = v => v + 2;
const result = source.map(plusTwo).map(twoTimes).map(tenTimes);
console.log(result); // [ 220, 460, 920, 1840 ]
result = source.map(twoTimes).map(tenTimes).map(plusTwo);
console.log(result); // [ 22, 42, 82, 162 ]
}filter()
조건을 만족하는 것만 추출한다. 결과는 전체 집합일 수도, 없을 수도 있다.
const words = [ 'spring', 'summer', 'fall', 'winter', 'destruction', 'creation', 'rebirth' ];
// 길이가 여섯 글자 이상인 단어만 추출
{
const newWords = [];
for (let i = 0; i < words.length; i++) {
if (words[i].length >= 6) {
newWords.push(words[i]);
}
}
console.log(newWords);
}
{
const newWords = words.filter(w => w.length >= 6);
console.log(newWords);
}
{
function func(w) {
return w.length >= 6;
}
const newWords = words.filter(func);
console.log(newWords);
}
{
const func = function(w) {
return w.length >= 6;
};
const newWords = words.filter(func);
console.log(newWords);
}
{
const newWords = words.filter(function(w) {
return w.length >= 6;
});map 과 filter 를 모두 사용한 예시
// 짝수만 추출해서 10배수한 결과를 출력
console.log(numbers.filter(n => n % 2 === 0).map(n => n * 10));
const even = numbers.filter(n => n % 2 === 0);
const evenTenTimes = even.map(n => n * 10);
console.log(evenTenTimes); // [ 40, 60, 140 ]reduce()
결과 집합이 하나로 요약돼야 한다.
const numbers = [ 1, 2, 3, 4, 5 ];
// 배열 요소들의 합계
{
let sum = 0;
for (let i = 0; i < numbers.length; i++) {
sum += numbers[i];
}
console.log(sum); // 15
}
{
let sum = numbers.reduce((acc, cur) => acc + cur, 0);
console.log(sum); // 15
}
{ // initvalue를 설정한 경우
let sum = numbers.reduce((acc, cur) => {
const result = acc + cur;
console.log(acc, cur, result)
return result;
}, 0);
console.log(sum); // 15
}
{ // initValue를 생략한 경우
let sum = numbers.reduce((acc, cur) => {
const result = acc + cur;
console.log(acc, cur, result)
return result;
});
console.log(sum); // 15
}map, filter, reduce 를 모두 사용한 예시
//numbers 배열의 각 항목의 값에 **13을 곱한 결과** 중 **짝수**의 **합**
sum = numbers
.map(n => n * 13)
.filter(n => n % 2 === 0)
.reduce((acc, cur) => acc + cur, 0);
console.log(sum);OUTRO
오늘은 js 실습도 진행하고, 모르는 문법이 많이 나와서 완전 집중해서 수업을 들었습니다. 특히 전개연산자와 비구조화 개념을 합쳐서 사용할 때 머리가 아파지기 시작.. ㅎㅎ 그래도 잘 알고 있으면 코드를 엄청 효율적으로 짤 수 있을 것 같아요. 우선프로젝트할 때에 필요한 내용을 빠르게 떠올리며 활용할 수 있도록 준비해야겠습니다. 감사합니다:)
[참고 문헌]
지니니