[TIL] 210907

Lee SyongΒ·2021λ…„ 9μ›” 7일
JavaScriptTILλ°°μ—΄μ•Œκ³ λ¦¬μ¦˜
0

TIL

λͺ©λ‘ 보기
20/204
post-thumbnail

πŸ“ 였늘 ν•œ 것

  1. λ°°μ—΄ APIs ν€΄μ¦ˆ 풀이 & μ˜€λ‹΅ 뢄석

  2. μžλ°”μŠ€ν¬λ¦½νŠΈ κ°•μ˜ μˆ˜κ°• (λ°°μ—΄ APIs)

  3. ν”„λ‘œκ·Έλž˜λ¨ΈμŠ€ μ•Œκ³ λ¦¬μ¦˜ 문제 풀이


πŸ“– ν•™μŠ΅ 자료

  1. λ“œλ¦Όμ½”λ”© 유튜브 'μžλ°”μŠ€ν¬λ¦½νŠΈ' κ°•μ˜ 9편

  2. 사전 ν•™μŠ΅ κ°€μ΄λ“œ 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)이라고 μ“°λ©΄ λ§ˆμ§€λ§‰ 문자λ₯Ό μ œκ±°ν•΄μ£ΌλŠ” 것과 κ°™λ‹€.


✨ 내일 ν•  것

  1. μ•Œκ³ λ¦¬μ¦˜ 곡뢀 μžμ„Ένžˆ μ•Œμ•„λ³΄κΈ°

  2. 사전 ν•™μŠ΅ κ°€μ΄λ“œ STEP 4 (DOM ~)

profile
Lee Syong
λŠ₯λ™μ μœΌλ‘œ μ‚΄μž, ν–‰λ³΅ν•˜κ²ŒπŸ˜
이전 포슀트

[TIL] 210906

λ‹€μŒ 포슀트

[TIL] 210908

0개의 λŒ“κΈ€