[TIL] 210907

dev·2021년 9월 7일

JavaScript TIL 배열 알고리즘

📝 오늘 한 것

📖 학습 자료

📚 배운 것

배열 함수들(Array APIs)

1. 드림코딩 유튜브 강의 9편 (퀴즈 11문제)

TIL

목록 보기

20/204

📝 오늘 한 것

배열 APIs 퀴즈 풀이 & 오답 분석
자바스크립트 강의 수강 (배열 APIs)
프로그래머스 알고리즘 문제 풀이

📖 학습 자료

드림코딩 유튜브 '자바스크립트' 강의 9편
사전 학습 가이드 STEP 2 (Quiz), STEP 3 (Algorithm), How to tackle problems

📚 배운 것

배열 함수들(Array APIs)

1. 드림코딩 유튜브 강의 9편 (퀴즈 11문제)

📌 9편 강의에서 다루는 메서드 :

join() / split() → 문자열 메서드 / reverse() / splice() / slice() /
find() / filter() / map() / some() / reduce() / sort()

Q1. Make a string out of an array.

{
  const fruits = ['apple', 'banana', 'orange'];
}

📝 내 답변 (ok)

{
  const fruits = ['apple', 'banana', 'orange'];

  const makeString = fruits.toString();
  // 'apple,banana,orange' → toString 대신 join 사용 가능

  console.log(makeString);
}

Q2. Make an array out of a string.

{
  const fruits = '🍎, 🥝, 🍌, 🍒';
}

📝 내 답변 (ok)

{
  const fruits = '🍎, 🥝, 🍌, 🍒';

  const makeArray = fruits.split(', '); // ['🍎', '🥝', '🍌', '🍒']
  // split()는 문자열 메서드이다

  console.log(makeArray);
}

Q3. Make this array look like this: [5, 4, 3, 2, 1]

{
  const array = [1, 2, 3, 4, 5];
}

📝 내 답변 (ok)

{
  const array = [1, 2, 3, 4, 5];

  const reverseArray = array.reverse();

  console.log(reverseArray);
}

Q4. Make new array without the first two elements.

{
  const array = [1, 2, 3, 4, 5];
}

📝 내 답변

{
  const array = [1, 2, 3, 4, 5];

  array.shift();
  array.shift();

  const useShift = array;

  console.log(useShift);
}

💖 엘리 답변

{
  const array = [1, 2, 3, 4, 5];

  const newArray = array.slice(2, 5);
  console.log(newArray);
}

// shift()와 splice()는 기존 array 자체를 변형시킨다
// 그러나 문제는 기존 array를 변형시키는 게 아니라 새로운 배열을 만드는 것이다
// 따라서 slice()를 사용해야 한다

💡 5 ~ 10번 문제 공통 코드
💡 여기서 students는 객체 배열이다

class Student {
  constructor(name, age, enrolled, score) {
    this.name = name<;
    this.age = age;
    this.enrolled = enrolled;
    this.score = score;
  }
}
const students = [
  new Student('A', 29, true, 45),
  new Student('B', 28, false, 80),
  new Student('C', 30, true, 90),
  new Student('D', 40, false, 66),
  new Student('E', 18, true, 88),
];

Q5. Find a student with the score 90.

📝 내 답변

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const find90 = students.find((Student) => Student.score = 90);
  console.log(find90);
}

💖 엘리 답변

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const with90 = students.find(function (student) {
    return student.score === 90;
  })
  console.log(with90);

  /*
  이때 콜백 함수의 매개변수(student)는 배열(students)의 요소 하나하나
  즉, 여기서는 각각의 객체{}를 가리킨다
 
  students 배열의 요소 하나하나에 순차적으로 콜백 함수가 호출된다(looping)
  콜백 함수가 true가 될 때, 즉 (student.score === 90)이 true일 때
  loop를 멈추고, 그 요소를 반환한다

  find() 메서드를 화살표 함수로 바꿔 쓰면,
  const with90 = students.find((student) => student.score === 90);
  */
}

Q6. Make an array of enrolled students.

📝 내 답변ㅠㅠㅠ

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const enrolled = students.filter((student) => student.enrolled = true);
  console.log(enrolled);
}

💖 엘리 답변

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const enrolled = students.filter((student) => student.enrolled === true);
  console.log(enrolled);
}

// =가 문제였다. =와 ===를 구분하자 ❗

Q7. Make an array containing only the students' scores.
result should be: [45, 80, 90, 66, 88]

📝 내 답변ㅠㅠㅠ

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const values = students.values();

  for (let value of values) {
    console.log(value.score);
  }
}

💖 엘리 답변

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const scores = students.map((student) => student.score);
  console.log(scores);
}

// value()가 아니라 map()을 사용해야 했다

Q8. Check if there is a student with the score lower than 50.

📝 내 답변 (ok)

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const lower50 = students.some(Student => Student.score < 50);

  console.log(lower50);
}

Q9. Compute students' average score.

📝 내 답변

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  // score 값만으로 구성된 새로운 배열 만들기
  // 이걸 어떻게 하는지 모르겠다 → 8번 문제 답변 참고!

  // 그 배열에 reduce 함수 이용해서 합산 구하기
  // const addAllScores = scores.reduce((prev, curr) => prev + curr);

  // 그 합산을 5로 나누기
  // const average = addAllScores / 5;

  // console.log(average);
}

💖 엘리 답변

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  // array.reduce() MDN '객체 배열에서의 값 합산' 참고
  const addALL = students.reduce((prev, curr) => prev + curr.score, 0);
  console.log(addALL / students.length);
}

/*
내가 생각한 방법은 map()을 통해 score로만 구성된 배열을 만들고,
여기에 reduce() 사용하는 것이었는데 reduce()만으로 가능했다
reduce()에 대한 이해도 부족했다
평균을 구할 때 분모에는 '배열의 길이'를 넣어라
*/

Q10. Make a string containing all the scores.
result should be: '45, 80, 90, 66, 88'

📝 9번 문제까지 강의를 듣고 난 후의 내 답변

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const scores = students.map((student) => student.score);
  const makeString = scores.join(', ');
  console.log(makeString);
}

💖 엘리 답변

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const scores = students
  .map((student) => student.score)
  .join(', ');
  // 함수형 프로그래밍
  // map()은 그 자체로 배열을 return 하기 때문에
  // 바로 이어서 그 배열에 api를 또 쓸 수 있다

  console.log(scores);
}

Q11. Do Q10 sorted in ascending order.
result should be: '45, 66, 80, 88, 90'

📝 10번 문제까지 강의 듣고 난 후의 내 답변

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const scores = students
  .map((student) => student.score)
  .sort();

  console.log(scores);
}

  // 답은 우연히 같게 나왔지만
  // 배열 요소 중 400이 있었다면 45와 66 사이에 400이 위치하게 되어
  // 오름차순으로 정렬이 안 되었을 것

💖 엘리 답변

{
  class Student {
    constructor(name, age, enrolled, score) {
      this.name = name;
      this.age = age;
      this.enrolled = enrolled;
      this.score = score;
    }
  }
  const students = [
    new Student('A', 29, true, 45),
    new Student('B', 28, false, 80),
    new Student('C', 30, true, 90),
    new Student('D', 40, false, 66),
    new Student('E', 18, true, 88),
  ];

  const scores = students
  .map((student) => student.score)
  .sort((a, b) => a - b); // 오름차순 정렬

  console.log(scores);
}

알고리즘(Argorithm)

1. 프로그래머스 문제 풀이

~~첫 알고리즘 문풀 🙃~~

1) 서울에서 김서방 찾기

🔎 최종 풀이

function solution(seoul) {
  var answer = `김서방은 ${seoul.indexOf('Kim')}에 있다`;
  return answer;
}

2) 가운데 글자 가져오기

🔎 최종 풀이

function solution(s) {
  if (s.length % 2 !== 0) {
    var answer = s[(s.length-1)/2];
  } else {
    var answer = `${s[(s.length)/2 - 1]}${s[(s.length)/2]}`;
  }
  return answer;
}

🔎 어떻게 풀었나

{
  // 가운데 글자 가져오기
  const s = '12de56';

  if (s.length % 2 !== 0) {
    var answer = s[(s.length-1)/2];
  } else {
    var answer = `${s[(s.length)/2 - 1]}${s[(s.length)/2]}`;
  }

  console.log(answer);
}

3) 수박수박수박수박수

🔎 최종 풀이

function solution(n) {
    if (n % 2 === 0) {
        var answer2 = '수박'.repeat(n/2);
    } else {
        var answer1 = '수박'.repeat((n+1)/2);
        var answer2 = answer1.slice(0, -1);
    }
    return answer2;
}

🔎 어떻게 풀었나
n = 짝수 → n/2 한 것만큼 '수박' 반복
n = 홀수 → n에 1을 더한 것만큼 '수박' 반복하고 마지막 문자 제거
{
  // 수박수박수박수박수박수
  var n = 3;

  if (n % 2 === 0) {
    var answer2 = '수박'.repeat(n/2);
  } else {
    var answer1 = '수박'.repeat((n+1)/2); // n = 3, 수박수박
    var answer2 = answer1.slice(0, -1); // 수박수
  }

  console.log(answer2);
}
🔎 뭘 새로 배웠나
string.slice()는 문자열의 시작 인덱스부터 끝 인덱스 '이전'까지의 요소값을 새로운 문자열로 반환한다. 따라서, 위의 풀이처럼 slice(0, -1)이라고 쓰면 마지막 문자를 제거해주는 것과 같다.

✨ 내일 할 것

알고리즘 공부 자세히 알아보기
사전 학습 가이드 STEP 4 (DOM ~)

dev

dev log

이전 포스트

[TIL] 210906

다음 포스트

[TIL] 210907

TIL

📝 오늘 한 것

📖 학습 자료

📚 배운 것

배열 함수들(Array APIs)

1. 드림코딩 유튜브 강의 9편 (퀴즈 11문제)

알고리즘(Argorithm)

1. 프로그래머스 문제 풀이

1) 서울에서 김서방 찾기

2) 가운데 글자 가져오기

3) 수박수박수박수박수

✨ 내일 할 것

[TIL] 210906

[TIL] 210908

0개의 댓글

관련 채용 정보