[TIL] 210907

93117 단어 알고리즘 JavaScript 배열 TIL JavaScript

📝 오늘 한 것

배열 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 ~)

Author And Source

이 문제에 관하여([TIL] 210907), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@leesyong/TIL-210907

우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)

환경 변수(feat. dotenv) (TIL 70일차)

PHP Session ID의 구현 원리와 실례

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다