240730 걷기반 실습

오늘은 어제 강의를 바탕으로 실습문제 총 4개를 풀어보았다.

난이도 '하' 2문제와 '중' 2문제로 이루어져 있었다!

그래서 실습하기 전에 한 20분 정도 어제 배웠던 내용을 복습하고 실습에 참여하였다.

 

 

 

 

문제 1. 쇼핑 목록 수정하기

*1.js 파일을 만들어 변수* shoppingList 의 요소를 수정해주세요.

let shoppingList = ['우유', '계란', '아이스크림', '목살'];

// 여기에 코드를 작성하세요.
...

console.log(shoppingList);
// 출력 : [ '우유', '계란', '아이스크림', '삼겹살' ]

 

• 배열의 마지막 요소인 '목살' 을 제거한 후, '삼겹살' 을 추가해주세요.
• 출력 결과

 

 

 

나의 답

let shoppingList = ["우유", "계란", "아이스크림", "목살"];

shoppingList.pop();
shoppingList.push("삼겹살");

console.log(shoppingList);

 

풀이: pop 메서드를 사용해서 배열의 마지막 요소인 "목살"을 튕겨내고, push 메서드를 사용해서 배열의 마지막에 "삼겹살"을 추가해주면 조건에 맞는 배열을 출력할 수 있다.

 

 

 

 

문제 2. 배열 메서드 활용하기: forEach()

*2.js 파일을 만들어 '걷기반 튜터님'만 출력되도록 해주세요.*

let tutorNames = ['최원장', '김르탄', '윤창식', '박가현', '김병연', '내배캠'];

// 여기에 코드를 작성하세요.
// forEach 메서드를 사용해 배열을 순회하세요.
// '걷기반 튜터님'만 콘솔에 출력되도록 조건문을 사용하세요. -> 논리합연산자(||)를 활용해보세요.
// '걷기반 튜터님'이 누군지는 다 알고 계시죠? 🥹
...

 

• 배열 메서드인 forEach 와 조건문을 활용하여 완성해주세요.
• 출력 결과

 

 

 

나의 답

tutorNames.forEach(function (tutor) {
  if (
    tutor === "최원장" ||
    tutor === "윤창식" ||
    tutor === "박가현" ||
    tutor === "김병연"
  ) {
    console.log(tutor);
  }
});

 

풀이: 배열의 튜터님들 중 걷기반 튜터님들만 출력해야 하기 때문에 forEach 메서드 안에 if 조건문을 사용해주면 원하는 값만 출력될 수 있다. if 조건문을 사용할 때 여러개의 조건 중 하나만 만족해도 값을 내보낼 수 있게 논리합연산자(| |)를 사용해야 한다.

 

 

 

 

문제 3. 배열 메서드 활용하기: map()

*3.js 파일을 만들어 멘토링 상태를 확인할 수 있는 isMentoring 속성을 추가한 newTutors 를 만들어주세요.*

let tutors = [
  {
    name: '최원장',
    time: '9to6',
  },
  {
    name: '윤창식',
    time: '9to6',
  },
  {
    name: '박가현',
    time: '9to6',
  },
  {
    name: '김병연',
    time: '9to6',
  },
];

// 여기에 코드를 작성하세요.
// 멘토링 상태를 확인할 수 있는 불리언 타입의 isMentoring 속성을 추가합니다.
const newTutors = ...

console.log(newTutors);

1. 배열 메서드인 map 을 사용하여 완성해주세요.
2. isMentoring 속성이 추가된 새로운 객체 배열을 만듭니다.(값은 true로 설정해주세요.)
3. 반환값이 있는 map 을 통해 newTutors 변수에 담아서 출력해주세요.

• 출력 결과

 

 

 

나의 답

let tutors = [
  {
    name: "최원장",
    time: "9to6",
  },
  {
    name: "윤창식",
    time: "9to6",
  },
  {
    name: "박가현",
    time: "9to6",
  },
  {
    name: "김병연",
    time: "9to6",
  },
];

const newTutors = tutors.map(function (tutor) {
  const newTutorList = {
    name: tutor.name,
    time: tutor.time,
    isMentoring: true,
  };
  return newTutorList;
});

console.log(newTutors);

 

풀이: 원래의 배열에서 속성을 추가해 새로운 배열을 만들어야 하니 배열의 메서드인 map을 사용해야 한다. 배열을 순회하면서 객체 하나하나씩 return하기 때문에 객체에 새로운 속성을 추가할 수 있게 'newTutorList' 라는 새로운 객체를 선언해주고 그안에 원래 객체의 요소와 추가할 요소를 적어준다. 그리고 그 새로운 객체를 return하면 속성이 추가된 새로운 배열을 얻을 수 있다.

 

 

 

 

문제 4. 배열 메서드 활용하기: filter**()**

*4.js 파일을 만들어 아이스 전용 커피 데이터를 만들어주세요.*

let starbucks = [
  {
    name: '카페 라떼',
    icedOnly: false,
  },
  {
    name: '콜드 브루',
    icedOnly: true,
  },
  {
    name: '돌체 라떼',
    icedOnly: false,
  },
  {
    name: '돌체 콜드 브루',
    icedOnly: true,
  },
];

// 여기에 코드를 작성하세요.
// 아이스 전용 커피 배열을 만듭니다.
const icedOnly = ...

console.log(icedOnly);

 

1. 배열 메서드인 filter 를 사용하여 완성해주세요.
2. icedOnly 속성이 true 인 커피 배열을 만듭니다.
3. 반환값이 있는 filter 를 통해 icedOnly 변수에 담아서 출력해주세요.

• 출력 결과

 

 

 

나의 답

let starbucks = [
  {
    name: "카페 라떼",
    icedOnly: false,
  },
  {
    name: "콜드 브루",
    icedOnly: true,
  },
  {
    name: "돌체 라떼",
    icedOnly: false,
  },
  {
    name: "돌체 콜드 브루",
    icedOnly: true,
  },
];

const icedOnly = starbucks.filter(function (coffee) {
  //   console.log(coffee);
  return coffee.icedOnly === true;
});
console.log(icedOnly);

 

풀이: 배열에서 조건에 맞는 값만 출력해야 하기 때문에 배열의 메서드인 filter를 사용해야 한다. 따라서 "return값은 배열안 객체에 있는 속성인 icedOnly가 true일때만 반환해라." 라고 명시해주면 된다.

 

 

 

 

 

.

.

.

 

 

 

 

 

# 일기

복습을 하고 가니 문제가 술술 풀려서 기분이 좋았다. 하지만 난이도가  하~중으로 낮았기 때문에 수월했던 것 같다. 일단 난이도 하~중 문제들을 많이 풀어보고 어느정도 막힘없이 풀린다면 그때, 상 문제에 도전해 보고싶다. 프로그래머스만 봐도 난이도가 조금 높아져도 접근하기 어려웠다... 아직까지는 어려운 문제를 보면 어떻게 해결해야할지 뭐부터 해결해야할지 막막하다. 문제를 어떻게 해결해 나가야할지 단계별로 설정하는 것도 문제를 푸는데 있어서 중요한 것 같다!! 한글로 먼저 써보고 그다음 코드를 짜보고 콘솔에 중간중간 출력해보고 이런식으로 진행해야지 더 쉽게 문제에 접근할 수 있을 것 같다. 단계별로 문제에 접근해 보기 약속~~~~~ :)