▶ Quiz 1. 위아래 위위아래 위아래 위위아래

제출할 디렉토리 이름	ex01
제출할 파일 이름	exid.js, exid-method-chaining.js

실행 시 아래 출력 값을 출력하는 객체 exid를 작성하세요. 다음과 같은 동작을 하는 함수를 구현해 exid.js로 제출해야 합니다. 또한 같은 기능을 가진 함수를 메소드 체이닝으로 재구현해 exid-method-chaining.js 로 제출해주세요.

• exid는 다음과 같은 프로퍼티와 메소드를 가져야합니다.
  • count: 횟수를 세는 프로퍼티
  • up: 횟수를 하나 증가시키는 메소드
  • down: 횟수를 하나 감소시키는 메소드
  • showCount: 횟수를 출력하는 메소드.

💡 테스트시 다음과 같은 코드가 적혀 있는 파일을 폴더에 넣어 실행합니다.

// exid.js
const exid = {
    count: ...
    up(){
      ...
    },
    down(){
      ...
    },
    showCount(){
      ... 
    },
  };

exid.up();
exid.down();
exid.up();
exid.up();
exid.down();
exid.up();
exid.down();
exid.up();
exid.up();
exid.down();
exid.showCount();

메소드 체이닝을 이용해 아래와 같이 실행할 수 있게 만들어주세요.

const exidMethodChaining = {
    count: ...,
    up(){
      ...
    },
    down(){
      ...
    },
    showCount(){ 
      ...
    },
  };
  
exidMethodChaining.up().down().up().up().down().up().down().up().up().down().showCount()

출력 결과는 다음과 같습니다.

Hint: 메서드 체이닝???

▷ 풀이

exid.js

const exid = {
  count: 40,
  up() {
    this.count++;
  },
  down() {
    this.count--;
  },
  showCount() {
    console.log(this.count);
  },
};

exid.up();
exid.down();
exid.up();
exid.up();
exid.down();
exid.up();
exid.down();
exid.up();
exid.up();
exid.down();
exid.showCount();
//출력: 42

• 메서드체이닝이란 메소드가 객체(this)를 반환하여 여러 메소드를 순차적으로 선언할 수 있도록 하는 것을 말한다.
• 코드를 메서드 체이닝 방식으로 작성하면, 각 동작의 결과를 별도의 변수에 저장할 필요가 없어져 코드를 간결하게 만들 수 있다.
• 메서드 체이닝을 적용하려면, 객체의 메서드가 새 객체를 반환하게 작성하여 반환된 객체에서 다른 메서드를 호출할 수 있게 연결하면 된다.

exid-method-chaining.js

const exidMethodChaining = {
  count: 40,
  up() {
    this.count++;
    return this;
  },
  down() {
    this.count--;
    return this;
  },
  showCount() {
    console.log(this.count);
    return this;
  },
};

exidMethodChaining
  .up()
  .down()
  .up()
  .up()
  .down()
  .up()
  .down()
  .up()
  .up()
  .down()
  .showCount();

---

▶ Quiz 2. 배열로 만드는 스택

제출할 디렉토리 이름	ex02
제출할 파일 이름	stack.js

배열을 스택처럼 사용할 수 있는 함수들을 만들어보세요.

다음과 같은 함수를 사용할 것이고, 제출할 코드의 상단에 해당 코드를 넣어주세요. 스택으로 사용할 배열이 들어있는 객체를 리턴하는 함수입니다.

const stackCreate = () => ({
  arr: []
});

만들어야 할 함수는 다음과 같습니다.

• stackEmpty(stack) : 객체(stack) 안 배열이 비어있는지 확인하는 함수. Boolean을 리턴해준다.
• stackPush(stack, data) : 객체(stack) 안 배열에 자료(data)를 가장 위에 추가하는 함수. 리턴값은 없다.
• stackPeek(stack) : 객체(stack) 안 배열의 맨 위에 있는 자료를 리턴하는 함수.
• stackPop(stack) : 객체(stack) 안 배열의 맨 위에 있는 자료를 지우는 함수. 리턴값은 없다.

💡 이 예제에선 아래 링크의 배열 함수들을 사용할 수 없습니다.
Array - JavaScript | MDN

💡 이 과제를 해결하는 것이 어렵다면 스터디 장에게 문의해봅시다!
ChatGPT를 사용해도 좋아요! 다만 코드 작동방식은 제대로 이해해올 것!!

▷ 풀이

const stackCreate = () => ({
  arr: [],
});

const stackEmpty = (stack) => stack.arr.length === 0;

const stackPush = (stack, data) => {
  stack.arr[stack.arr.length] = data;
};

const stackPeek = (stack) => {
  if (!stackEmpty(stack)) {
    return stack.arr[stack.arr.length - 1];
  }
};

const stackPop = (stack) => {
  if (!stackEmpty(stack)) {
    const lastIndex = stack.arr.length - 1;
    const lastElement = stack.arr[lastIndex];
    stack.arr.length = lastIndex;
    return lastElement;
  }
};

const stack = stackCreate();

console.log(stackEmpty(stack));
stackPush(stack, 1);
stackPush(stack, 2);
stackPush(stack, 5);
console.log(stackPeek(stack));

.length를 사용하니 쉬웠는데 부대표님은 .length를 사용하지 않고 풀었다..
아래는 부대표님이 작성한 코드이다.

const stackCreate = () => ({
	arr: []
  });

const stackEmpty = stack => {
	let count = 0;
	for (element in stack.arr){
		count++;
	}
	return count === 0;
};

const stackPush = (stack, data) => stack.arr = [data, ...stack.arr];

const stackPeek = stack => {
	if (!stackEmpty(stack))
		return stack.arr[0];
}

const stackPop = stack => {
	if (stackEmpty(stack))
		return undefined;
	let count = 0;
	const newArr = [];
	for (element in stack.arr){
		count++;
	}
	for (let i = 1; i < count; i++){
		newArr[i - 1] = stack.arr[i];
	}
	stack.arr = newArr;
}

newStack = stackCreate();

stackPush(newStack, 10);
console.log(newStack);
stackPush(newStack, 20);
console.log(newStack);
stackPush(newStack, 30);
console.log(newStack);
stackPop(newStack);
console.log(newStack);

console.log(stackPeek(newStack));