달리기반🏃 | 실습 2일차 복습하기

^ 주말알바 끝나고 스터디하는 나 제법 멋져요(자의식과잉)

달리기반 실습 2번째 문제는 좀 어려웠다.
다들 후라락 풀고 가는데 나는 얕은복사, 깊은복사를 이해하고 풀기 막막했고 (풀고나니까 간단함;;) 배열메소드를 코드카타 하면서 좀 익숙해졌다고 생각했는데 아니라는걸 깨달았다.😥
튜터님이 해주신 해설세션 보면서 내가 쓴 답과 비교해봤고 복습하면서 제대로 알고 새로운것도 정리하고 넘어가려고 TIL 주제로 정해따!

얕은 복사, 깊은 복사 예제

01. 얕은 복사

// 예시
const arr1 = [1, 2, 3];
const arr2 = arr1;
arr2[0] = 10;
console.log(arr1);
console.log(arr1 === arr2);

위 코드를 참고해서 푸는 문제였다.

const obj1 = { a: 1, b: 2, c: 3 };
/* 문제 1-1) obj1을 얕은 복사하는 코드로 작성해주세요 */
const obj2 = obj1 

/* 문제 1-2) obj2에 d를 추가하는 코드를 작성해주세요. d는 4의 값을 가집니다. */
obj2.d = 4;

/* 문제 1-3) 해당값 obj1, obj2의 값을 출력해주세요 */
console.log(obj1); // { a: 1, b: 2, c: 3, d: 4 }
console.log(obj2); // { a: 1, b: 2, c: 3, d: 4 }

👩🏻‍💻 바로 할당해버리면 얕은복사가 되고 할당한 객체에는 참조하는 '주소'가 들어있다.
얕은복사를 한 후 속성값을 바꿔버리면 동일한 주소를 참조하기 때문에 원본 속성도 바뀌게 된다.

02. 깊은 복사

// 예시
function deepCopy(o) {
    var result = {};
    if (typeof o === "object" && o !== null)
        for (i in o) result[i] = deepCopy(o[i]);
    else result = o;
    return result;
}

깊은복사를 하는 방식은 예시코드 말고 2가지가 더 있다.

var arr2 = deepCopy(arr1);
var arr2 = JSON.parse(JSON.stringify(arr1));
var arr2 = structuredClone(arr1);

• 첫번째는 예시코드를 가져와서 사용한거라 동일
• 두번째는 JSON을 활용한 방식
• 세번째는 structuredClone 사용

세가지 중에서 상황과 편의에 따라 사용하면 된다.
이번에는 마지막 structuredClone을 사용해서 풀어보았다.

/* 문제 2-1) arr2의 0번째 객체에 c라는 속성을 추가하고 값을 3으로 할당해주세요 */
arr2[0].c = 3;

/* arr1을 출력해주세요 */ [{a:1}, {b:2}] 
/* arr2를 출력해주세요 */ [{a:1, c: 3}, {b:2}]

👩🏻‍💻 처음에 2-1 문제를 풀 때 답을 arr2[0] = {c=3}; 로 적어서 출력값이 [{ c: 3 }, { b: 2 }] 로 나와버렸다.
이해가 되지 않아서 문제를 꼼꼼하게 다시 읽어보았더니 이해가 되었다.
내가 쓴 코드는 arr2의 첫번째 인덱스 속성을 아예 바꿔버리는 코드이고,
답안은 arr2[0].c로 속성만! 추가한 다음 그 값이 3을 가지도록 만들어주었기 때문에 내가 쓴 답이 틀리게 나온 것이다.

03. 얕은, 깊은 복사

const student = {
    name: "yuno",
    age: "30",
    skill: ["javascript"],
    address: {
        city: "seoul"
    }
};

// 3-1) 얕은 복사를 수행하여 shallowCopy를 만들어주세요.
const shallowCopy = student;

// 3-2) 깊은 복사를 수행하여 deepCopy를 만들어주세요.
// const deepCopy = JSON.parse(JSON.stringify(student))
const deepCopy = structuredClone(student);

// 3-3) 얕은 복사 객체와 원본 객체를 비교하여 출력해주세요
console.log("1. 원본 객체(student)와 얕은 복사 객체가 같을까요?", true);
console.log(student === shallowCopy);


// 3-4) 얕은 복사 객체의 address와 원본 객체의 address를 비교하여 출력해주세요.
console.log("2. 원본 객체의 address와 얕은 복사 객체의 address가 같을까요?", true);
console.log(student.address === shallowCopy.address);

// 3-5) 깊은 복사 객체와 원본 객체를 비교하여 출력해주세요.
console.log("3. 원본 객체(student)와 깊은 복사 객체가 같을까요?", false);
console.log(student === deepCopy);

// 3-6) 깊은 복사 객체의 address와 원본 객체의 address를 비교하여 출력해주세요.
console.log("4. 원본 객체의 address와 깊은 복사 객체의 address가 같을까요?", false);
console.log(student.address === deepCopy.address);

👩🏻‍💻 3번은 얕은복사와 깊은복사를 모두 다루는 문제였다.
얕은복사를 할 경우 1depth까지만 복사하기 때문에 중첩된객체의 속성까지 접근해서 작업하려면 깊은복사를 해줘야한다.

// 3-7) 얕은 복사한 객체에 배열요소 변경 javascript -> js으로 변경해주세요 
shallowCopy.skill[0] = "js";
// 깊은 복사 객체의 주소 속성을 변경하세요 (예: city를 "busan"으로 변경)
deepCopy.address.city = "busan"

👩🏻‍💻 객체 주소의 속성을 변경하려면 깊은복사를 사용해야하므로 deepCopy로 사용해서 속성을 변경하고, skill의 경우는 1depth에 있는 객체이므로 얕은복사로 바로 속성 값을 변경해주었다.

결과확인

//
1. 원본 객체(student): {
  name: 'yuno',
  age: '30',
  skill: [ 'js' ],
  address: { city: 'seoul' }
}
///
2. 얕은 복사된 객체(shallowCopy): {
  name: 'yuno',
  age: '30',
  skill: [ 'js' ],
  address: { city: 'seoul' }
}
///
3. 깊은 복사된 객체(deepCopy): {
  name: 'yuno',
  age: '30',
  skill: [ 'javascript' ],
  address: { city: 'busan' }
}

배열 메소드 예제

04. 배열 메소드 연습(API)

4번문제(라고 쓰고 새끼문제가 10개가 넘었던..ㅎ)는 배열 메소드를 활용하는 문제였다.
우선 문제와 풀이를 쭉 적고 풀면서 알게된 부분만 하단에 정리하려고 한다.

// 1. 배열 API map 활용
// arr의 각 요소에 10을 곱한 새로운 배열을 생성해주세요.
// 결과 값: [100, 200, 300]을 출력해주세요.
var arr = [10, 20, 30]
let arr2 = arr.map(num => num * 10);
// console.log(arr2);


//2. 배열 API filter 활용
// 5의 배수를 찾아 반환해주세요.
// 결과값 [10]을 출력해주세요.
var arr = [10, 22, 33]
let arrFive = arr.filter(num => num % 5 === 0);
// console.log(arrFive);


// 3. 크기가 15보다 큰 숫자의 값을 반환하여 출력해주세요
// 출력값 [20, 25]
const numbers = [5, 10, 15, 20, 25];
let newNumbers = numbers.filter((num) => num > 15);
// console.log(newNumbers);


// 4. 문자열 길이가 4 이상인 값을 반환하여 출력해주세요
var arr = ["banana", "kiwi", "mango", "strawberry", "lime", "orange", "plum", "cherry"];
let arrFour = arr.filter(str => str.length > 4);
// console.log(arrFour);


// 5. 요소의 문자열 길이가 홀수인 요소만 반환하여 출력해주세요
var arr = ["banana", "kiwi", "mango", "strawberry", "lime", "orange", "plum", "cherry"];
let arrOdd = arr.filter(odd => odd.length % 2 === 1);
// console.log(arrOdd)


// 6. 오름차순으로 정렬하여 출력해주세요(점점 커짐)
var arr = [3, 1, 4, 1, 5, 9, 2, 6, 5, 3];
let sortArr = arr.sort((a, b) => a - b);
// console.log(sortArr);


// 7. age를 이용하여 내림차순으로 정렬하고 출력해주세요
var student = [
    { name: "이ㅇㅇ", age: 25 },
    { name: "정ㅇㅇ", age: 30 },
    { name: "김ㅇㅇ", age: 12312 }
];

let ageSort = student.sort((a, b) => b.age - a.age);
// console.log(ageSort);


// 8. 객체 배열에서 name 속성이 null인 객체가 있는지 판별을 확인하는 코드를 작성하고 반환값을 출력해주세요
var student = [
    { id: 1, name: "이ㅇㅇ" },
    { id: 2, name: null },
    { id: 3, name: "김ㅇㅇ" }
];
let nullStudent = student.filter((student) => {
    return student.name !== null;
});

let nullStudent2 = student.some((student) => student.name === null);
// console.log(nullStudent); // 값을 반환
// console.log(nullStudent2); // 불리언 반환


// 9. 문자열 길이가 5를 초과하는 요소가 있는지 검사하는 코드를 작성하고 반환값을 출력해주세요.
var arr = ["banana", "kiwi", "mango", "strawberry", "lime", "orange", "plum", "cherry"];
let arrFive2 = arr.some((fruit) => fruit.length > 5);
// console.log(arrFive2); // true


// 10. kiwi 와 manggo 사이에 새로운 요소를 삽입하는 코드를 작성하고 출력해주세요
var arr = ["banana", "kiwi", "mango"];
arr.splice(2, 0, "apple");
// console.log(arr);
// let newFruits = arr.splice(2, 0, "apple");
// console.log(newFruits); 빈배열

// 11. 배열에 음수가 하나라도 있는지 판별하는 코드를 작성하고 반환값을 출력해주세요
var arr = [1, 5, -3, 10, 0, 8];
let arrMinus = arr.some(num => num < 0);
// console.log(arr.some(num => num < 0)); // true


// 12. 모든 숫자가 음수인지 판별하는 코드를 작성하고 반환값을 출력해주세요
var arr = [1, 5, -3, 10, 0, 8];
let allArrMinus = arr.every((allNum) => allNum < 0);
console.log(allArrMinus); // false

map(), filter()

👩🏻‍💻 가장 많이 사용한 map(), filter() 를 먼저 정리해보자

• map() : 배열 요소를 그대로! 가공만 할 때! => 배열의 길이 동일함
• filter() : 원본 배열에서 추가하거나 삭제하는 거르는 작업을 할 때! => 배열의 길이 달라짐

이 두 메소드를 작성하는 방법은 두 가지가 있는데 포인트는 { } 중괄호이다.

arr.map((num) => num * 10);

이렇게 적었을 때는 return이 생략되어 있기 때문에 원하는 값을 출력할 수 있다.

arr.map((num) => {
	return num*10;
});

하지만 중괄호를 적었을 경우에는 return 을 작성해야만 undefined이 나오는 실수를 막을 수 있다.
⭐️ 콜백 안에서 중괄호를 쓰면 무조건 return을 써야한다는 걸 반드시 기억하자!

sort()

👩🏻‍💻 다음은 sort() 정렬 메소드이다.
오름차순, 내림차순으로 정렬할 때 많이 사용하는 메소드인데

let sort1 = arr.sort((a, b) => a - b);
let sort2 = student.sort((a, b) => b.age - a.age);

첫번째 줄(sort1)은 많이 써봐서 익숙했지만 아래줄(sort2)은 이번에 처음 써봤고 너무 신기하고 재미있었다.

let sort = student.sort((a, b) => a[key] - b[key]);

이렇게 사용하면 배열 안에 있는 객체도 정렬이 가능해진다. 단 숫자일 경우에만!! 가능하다.
sort메소드는 숫자를 정렬하기 때문에 만약 '문자열(String)'을 정렬한다면 NaN이 출력되므로 아래와 같은 방법을 사용해야한다.

items.sort(function (a, b) {
  		if (a.name > b.name) {
    			return 1;
  		} else if (a.name < b.name) {
    			return -1;
  		} else {
    			return 0;
  		}
	})

// 삼항연산자로 간단하게 쓰기
items.sort((a, b) => {
      	return a.name > b.name ? 1 : a.name < b.name ? -1 : 0;
    })

a-b 하는 방식이 음수가 나오면 오름차순 어쩌고 한거니까 그 방식을 활용한거라고 볼 수 있다.

05. forEach로 변환해보기

// 해당 문제를 forEach로 변경하여 풀어주세요
let arr = [10, 20, 30]
let newArr = [];

arr.forEach((num, index) => {
    newArr.push(num * 10);
})
console.log(newArr);
// 결과 값: [100, 200, 300] 출력해주세요 


// 5의 배수를 찾아 반환하세요
let arr2 = [10, 22, 33]
let newArr2 = [];

arr2.forEach(num => {
    if (num % 5 === 0) {
        newArr2.push(num);
    }
})
console.log(newArr2)
// 결과값 [10]

👩🏻‍💻 처음에 이 문제를 풀 때 콘솔에 답은 구했지만 요구하는 형태의 출력값을 구할 수 없거나 undefined가 나왔었다.
forEach는 반환값이 없기 때문에 값을 얻으려면 위 코드에서처럼 let newArr = []; 같은 빈 배열을 만들고, 그 안에 push 하는 등의 방식으로 값을 넣어주어야한다.

06. 메소드 체이닝

// 주어진 학생 객체 배열에서 각 학생의 평균 점수를 계산한 후, 평균이 80점 이상인 학생의 이름만 필터링하여 출력해주세요.
// 가능하다면 메소드 체이닝으로 풀어주세요.


const students = [
    { name: "이ㅇㅇ", scores: [80, 90] },
    { name: "김ㅇㅇ", scores: [90, 95] },
    { name: "정ㅇㅇ", scores: [75, 70] },
];

// 여기에 코드를 작성해주세요
// 예상 출력: ["이ㅇㅇ", "김ㅇㅇ"]

우선 여기서 사용할 메소드부터 적어보면 filter() 로 평균 80 이상인 학생을 거르고, reduce()로 평균을 구해야한다.
배열 메소드의 뽀인뚜는 서로 체이닝이 가능한건데 이를 활용해서 쭈욱 써보는게 미션이다.

let studentArr = students.filter((student) => {
    let avg = student.scores.reduce((prev, curr) => prev + curr, 0) / student.scores.length;
    return avg >= 80;
}).map((avgName) => avgName.name);
console.log(studentArr);

👩🏻‍💻 예전에도 코드카타를 풀면서 reduce 메소드에 대해 공부한 적 있는데 혼자 공부했을 때보다 하나하나 설명을 들으면서 과정을 보니까 너무 쉽게 이해가 되었다.

reduce() 메소드

array.reduce((prev, curr) => prev + curr, 0)

약간.. 엄.. 누적해서~ 더해준다~~ 이런거라서 prev,curr 두 개의 매개변수가 필요하다.
끝에 있는 0은 초기값인데 매애애앤!!처음에 prev에 해당하는 값이 없으니까 0으로 정해준거다.
0으로 정해주지 않으면 똑똑한 듯 망충지송한 컴퓨터는 에!! prev 값이 없자너! 에러! 에러! 이럴거다...

function avg(arr) {
    let total = 0;
    for (let i = 0; i < arr, length; i++) {
        total += arr[i];
    }
    return total / arr.length;
}

반복문으로 풀면 이렇게 풀 수 있지만..! 문제에서 요구하는건 메소드 체이닝이었으니 참고로 알아두기!

---

출처

• 스파르타코딩클럽 달리기반 예제
• https://whyworks.tistory.com/16