[C/F TIL] 14일차 - JavaScript Koans 문제풀이를 위한 기본 개념

mu-eng·2023년 4월 28일

JavaScriptKoans TIL 코드스테이츠

TIL (in boost camp)

목록 보기

15/53

Code States
Front-end boost camp
Today
I
Learned

🍶 오늘 수업 끝나고 막걸리 약속 있는 4월 28일 불금, 14일차 수업 시쟉~!

🍶 spread / rest 문법

spread 문법 : 주로 배열을 풀어서 인자로 전달하거나, 배열을 풀어서 각각의 요소로 넣을 때에 사용

function sum(x, y, z) {
  return x + y + z;
}

const numbers = [1, 2, 3];

sum(...numbers) // 질문: 어떤 값을 리턴하나요?

rest 문법 : 파라미터를 배열의 형태로 받아서 사용, 파라미터 개수가 가변적일 때 유용

function sum(...theArgs) {
  return theArgs.reduce((previous, current) => {
    return previous + current;
  });
}

sum(1,2,3) // 질문: 어떤 값을 리턴하나요?
sum(1,2,3,4) // 질문: 어떤 값을 리턴하나요?

✔️ 배열에서 강력한 spread 문법!

-- 1) 배열 합치기

let parts = ['shoulders', 'knees'];
let lyrics = ['head', ...parts, 'and', 'toes'];

// 질문: lyrics의 값은 무엇인가요
// 답 : ['head', 'shoulders', 'knees', 'and', 'toes']

let arr1 = [0, 1, 2];
let arr2 = [3, 4, 5];
arr1 = [...arr1, ...arr2];  // 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr1의 값을 바꾸려면 새롭게 할당해야 합니다.

// 질문: arr1의 값은 무엇인가요?
// 답 : [0, 1, 2, 3, 4, 5]

-- 2) 배열 복사

let arr = [1, 2, 3];
let arr2 = [...arr]; // arr.slice() 와 유사
arr2.push(4);  // 참고: spread 문법은 기존 배열을 변경하지 않으므로(immutable), arr2를 수정한다고, arr이 바뀌지 않습니다.

// 질문: arr와 arr2의 값은 각각 무엇인가요?
// 답 : [1, 2, 3] / [1, 2, 3, 4]

✔️ 객체에서 사용하기

let obj1 = { foo: 'bar', x: 42 };
let obj2 = { foo: 'baz', y: 13 };

let clonedObj = { ...obj1 };
let mergedObj = { ...obj1, ...obj2 };

// 질문: clonedObj와 mergedObj의 값은 각각 무엇인가요?
// 답 : {foo: 'bar', x: 42} / {foo: 'baz', x: 42, y: 13}
//// 주의! fee 의 값이 다른 속성 둘이 있어서 앞에 온 fee의 밸류 bar는 baz에 덮혔다!

✔️ 함수에서 나머지 파라미터 받아오기

function myFun(a, b, ...manyMoreArgs) {
  console.log("a", a);
  console.log("b", b);
  console.log("manyMoreArgs", manyMoreArgs);
}

myFun("one", "two", "three", "four", "five", "six");

// 질문: 콘솔은 순서대로 어떻게 찍힐까요?
// 답 : a one / b two / manyMoreArgs ['three', 'four', 'five', 'six']
//// 주의 ! nanyMoreArgs는 전체가 아님!

🍶 구조 분해 할당

✔️ 분해 후 새 변수에 할당

배열

const [a, b, ...rest] = [10, 20, 30, 40, 50];

// 질문: a, b, rest는 각각 어떤 값인가요?
// 답 : a = 10/ b = 20/ rest = [30, 40, 50]

객체

const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
// 질문: a, b, rest는 각각 어떤 값인가요?
// 답 : 10/ 20 / {c: 30, d: 40}

✔️ 유용한 예제 : 함수에서 객체 분해

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

let user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
      firstName: "John",
      lastName: "Doe"
  }
};

whois(user) // 질문: 콘솔에서 어떻게 출력될까요?

// 답 : jdoe is John

🍶 화살표 함수

✔️ 함수를 정의하는 방법

1) 함수 선언문

function sum (x, y) {
	return x + y;
}

2) 함수 표현식

const subtract = function (x, y) {
	return x - y;
}

3) 화살표 함수

const multiply = (x, y) => {
	return x * y;
}

매개변수가 한 개일 때, 소괄호()를 생략할 수 있다.

const square = x => { return x * x }

// 위 코드와 동일하게 동작합니다.
const square = ( x ) => { return x * x }

// 단, 매개변수가 없는 경우엔 소괄호를 생략할 수 없습니다.
const greeting = () => { return 'hello world' }

함수 코드 블록 내부가 하나의 문으로 구성되어 있다면 중괄호{}를 생략할 수 있다. 이때 코드 블록 내부의 문이 값으로 평가될 수 있으면 return 키워드를 생략 할 수 있다.

const squre = x => x * x

// 위 코드와 동일하게 동작합니다.
const square = x => { return x * x }

// 위 코드와 동일하게 동작합니다.
const square = function (x) {
	return x * x
}

🍶 페어 프로그램 - JavaScript Koans 문제풀기

expect 함수 : 테스트하는 값과 기대값을 비교하기 위해 사용

expert(테스트하는값).기대하는조건
expect(isEven()).to.be.true => 'isEven(3)'의 결과값은 참(true)이어야 한다.
expect(1 + 2).to.equal(3) => 'sum(1, 2)의 결과값은 3과 같아야(equal)한다.

위 새로운 개념과 함께 약 50문제의 문제를 풀게 되었다. 2시부터 6시까지 중간중간 쉬는 시간, 각자 생각해보는 시간 제외 열띤 토론과 의견공유로 절반 정도를 풀었는데, 아직 정리는 안됨 ^^ㅋ

주말 동안 페어분과 다시 디코로 만나서 문제를 풀기로 했음 + 정리까지

15일차에 풀이 해설 해놓았음!

🍶 14일차 수업을 마치며...

어제 스코프와 클로저 개념때문에 진짜 너무 어려워서 아씨.. 마케팅 다시해야하나? 생각이 잠시 들고 소파에 얼굴 처박고 우울에 잠겨있기도 했다..;; 근데 결국 10시쯤 진짜 내게 남은 열 중에 1정도 수치의 의욕을 이끌어 복습 & 나의 조력자 척척 AI박사님에게 과외를 받고 아 이게 이거였구나!!!!!!!! 라고 90% 이해할 수 있었음.

그리고 오늘 페어 수업에서 그 안에서 헷갈리는 요소들을 내 척척 공대학사 페어 선생님이 쉽고 명확하게 알려주고 이끌어 주어서 거진 다 이해가 된 것 같다. 댓스,, 굿,, b

주말의 할일 : 반복문(완료), 배열, 객체 정리 못한 부분 업데이트하기, 오늘 해당 부분 업데이트하기(~~월요일도 같은 수업이라 패스~~), 오운완 헬씨어 월드 업데이트하기... 겁나 바쁠 것 같네잉.. 🫠

힘드러도,, 포기하지,, 말자,,!

▲ FYI : 우리집 강아지 이름은 '말자'다.