Nyong's Blog
0%

Array HOF 연습 문제

Posted on Edited on In

Array HOF 연습 문제

1. html 생성

아래 배열을 사용하여 html을 생성하는 함수를 작성하라.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
// forEach 활용
const todos = [
  {
    id: 3,
    content: "HTML",
    completed: false,
  },
  {
    id: 2,
    content: "CSS",
    completed: true,
  },
  {
    id: 1,
    content: "Javascript",
    completed: false,
  },
];

function render() {
  let html = "";

  todos.forEach((todo) => {
    html += `<li id = "${todo.id}">
  <label><input type ="checkbox" ${todo.completed ? "checked" : ""}>${
      todo.content
    }</label>
</li>\n`;
  });

  return html;
}

console.log(render());

// map 활용
function render() {
  return todos
    .map((todo) => {
      return `<li id = "${todo.id}">
  <label><input type ="checkbox" ${todo.completed ? "checked" : ""}>${
        todo.content
      }</label>
</li>\n`;
    })
    .join("");
}

console.log(render());

/*
<li id="3">
  <label><input type="checkbox">HTML</label>
</li>
<li id="2">
  <label><input type="checkbox" checked>CSS</label>
</li>
<li id="1">
  <label><input type="checkbox">Javascript</label>
</li>
*/

2. 특정 프로퍼티 값 추출

요소의 프로퍼티(id, content, completed)를 문자열 인수로 전달하면 todos의 각 요소 중, 해당 프로퍼티의 값만을 추출한 배열을 반환하는 함수를 작성하라.

단, for 문이나 Array#forEach는 사용하지 않도록 하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
const todos = [
  {
    id: 3,
    content: "HTML",
    completed: false,
  },
  {
    id: 2,
    content: "CSS",
    completed: true,
  },
  {
    id: 1,
    content: "Javascript",
    completed: false,
  },
];

function getValues(key) {
  return todos.map((todo) => todo[key]);
}

console.log(getValues("id")); // [3, 2, 1]
console.log(getValues("content")); // ['HTML', 'CSS', 'Javascript']
console.log(getValues("completed")); // [false, true, false]

3. 프로퍼티 정렬

요소의 프로퍼티(id, content, completed)를 문자열 인수로 전달하면 todos의 요소를 정렬하는 함수를 작성하라.

단, todos는 변경되지 않도록 하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
const todos = [
  {
    id: 3,
    content: "HTML",
    completed: false,
  },
  {
    id: 2,
    content: "CSS",
    completed: true,
  },
  {
    id: 1,
    content: "Javascript",
    completed: false,
  },
];

// 함수 선언문 활용
// function sortBy(key) {
//   const _todos = [...todos];
//   return _todos.sort((todo1, todo2) => todo1[key] > todo2[key] ? 1 : (todo1[key] < todo2[key] ? -1 : 0));
// }

// 화살표 함수 활용
const sortBy = (key) => {
  const _todos = [...todos];
  return _todos.sort((todo1, todo2) =>
    todo1[key] > todo2[key] ? 1 : todo1[key] < todo2[key] ? -1 : 0
  );
};

console.log(sortBy("id"));
/*
[
{ id: 1, content: 'Javascript', completed: false },
{ id: 2, content: 'CSS', completed: true },
{ id: 3, content: 'HTML', completed: false }
]
*/
console.log(sortBy("content"));
/*
[
{ id: 2, content: 'CSS', completed: true },
{ id: 3, content: 'HTML', completed: false },
{ id: 1, content: 'Javascript', completed: false }
]
*/
console.log(sortBy("completed"));
/*
[
{ id: 3, content: 'HTML', completed: false },
{ id: 1, content: 'Javascript', completed: false },
{ id: 2, content: 'CSS', completed: true }
]
*/

4. 새로운 요소 추가

새로운 요소(예를 들어 { id: 4, content: 'Test', completed: false })를 인수로 전달하면 todos의 선두에 새로운 요소를 추가하는 함수를 작성하라. 단, Array#unshift나 Array#push는 사용하지 않도록 하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
let todos = [
  {
    id: 3,
    content: "HTML",
    completed: false,
  },
  {
    id: 2,
    content: "CSS",
    completed: true,
  },
  {
    id: 1,
    content: "Javascript",
    completed: false,
  },
];

function addTodo(newTodo) {
  todos = [newTodo].concat(todos);
}

// 스프레드 문법 사용
function addTodo(newTodo) {
  todos = [newTodo, ...todos];
}

addTodo({
  id: 4,
  content: "Test",
  completed: false,
});

console.log(todos);
/*
[
  { id: 4, content: 'Test', completed: false },
  { id: 3, content: 'HTML', completed: false },
  { id: 2, content: 'CSS', completed: true },
  { id: 1, content: 'Javascript', completed: false }
]
*/

5. 특정 요소 삭제

todos에서 삭제할 요소의 id를 인수로 전달하면 해당 요소를 삭제하는 함수를 작성하라.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
let todos = [
  {
    id: 3,
    content: "HTML",
    completed: false,
  },
  {
    id: 2,
    content: "CSS",
    completed: true,
  },
  {
    id: 1,
    content: "Javascript",
    completed: false,
  },
];

// function removeTodo(id) {
//   todos = todos.filter(todo => todo.id !== id)
// }

//화살표 함수
const removeTodo = (id) => {
  todos = todos.filter((todo) => todo.id !== id);
};

removeTodo(2);

console.log(todos);
/*
[
  { id: 3, content: 'HTML', completed: false },
  { id: 1, content: 'Javascript', completed: false }
]
*/

6. 특정 요소의 프로퍼티 값 반전

todos에서 대상 요소의 id를 인수로 전달하면 해당 요소의 completed 프로퍼티 값을 반전하는 함수를 작성하라.

hint) 기존 객체의 특정 프로퍼티를 변경/추가하여 새로운 객체를 생성하려면 Object.assign 또는 스프레드 문법을 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
let todos = [
  { id: 3, content: "HTML", completed: false },
  { id: 2, content: "CSS", completed: true },
  { id: 1, content: "Javascript", completed: false },
];

function toggleCompletedById(id) {
  const index = todos.findIndex((todo) => todo.id === id);

  // 스프레드
  return (todos[index] = todos[index].completed
    ? { ...todos[index], completed: false }
    : { ...todos[index], completed: true });

  //Object.assign
  // return todos[index] = todos[index].completed ? Object.assign({}, todos[index], {completed: false}) : Object.assign({}, todos[index], {completed : true});
}

toggleCompletedById(2);

console.log(todos);
/*
[
{ id: 3, content: 'HTML', completed: false },
{ id: 2, content: 'CSS', completed: false },
{ id: 1, content: 'Javascript', completed: false }
]
*/

7. 모든 요소의 completed 프로퍼티 값을 true로 설정

todos의 모든 요소의 completed 프로퍼티 값을 true로 설정하는 함수를 작성하라.

hint) 기존 객체의 특정 프로퍼티를 변경/추가하여 새로운 객체를 생성하려면 Object.assign 또는 스프레드 문법을 사용한다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
let todos = [
  { id: 3, content: "HTML", completed: false },
  { id: 2, content: "CSS", completed: true },
  { id: 1, content: "Javascript", completed: false },
];

function toggleCompletedAll() {
  // 스프레드
  todos = todos.map((v) => ({ ...v, completed: true }));

  // Object.assign
  // todos = todos.map( v => Object.assign({}, v, {completed: true}));

  return todos;
}

toggleCompletedAll();

console.log(todos);
/*
[
{ id: 3, content: 'HTML', completed: true },
{ id: 2, content: 'CSS', completed: true },
{ id: 1, content: 'Javascript', completed: true }
]
*/

8. completed 프로퍼티의 값이 true인 요소의 갯수 구하기

todos에서 완료(completed: true)한 할일의 갯수를 구하는 함수를 작성하라.

단, for 문, Array#forEach는 사용하지 않도록 하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
let todos = [
  {
    id: 3,
    content: "HTML",
    completed: false,
  },
  {
    id: 2,
    content: "CSS",
    completed: true,
  },
  {
    id: 1,
    content: "Javascript",
    completed: false,
  },
];

// function countCompletedTodos() {
//  return todos.filter(todo => todo.completed).length;
// }

//화살표 함수
const countCompletedTodos = () => todos.filter((todo) => todo.completed).length;
// 안한 일 찾기
const countUncompletedTodos = () =>
  todos.filter((todo) => !todo.completed).length;

console.log(countCompletedTodos()); // 1
console.log(countUncompletedTodos()); // 2

9. id 프로퍼티의 값 중에서 최대값, 최소값 구하기

todos의 id 프로퍼티의 값 중에서 최대값을 구하는 함수를 작성하라.

단, for 문, Array#forEach는 사용하지 않도록 하자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let todos = [
  { id: 3, content: "HTML", completed: false },
  { id: 2, content: "CSS", completed: true },
  { id: 1, content: "Javascript", completed: false },
];

// ...todos.map(todo => todo.id) // -> 3, 2, 1

function getMaxId() {
  // 빈 배열일 경우 방어코드 결과 -1
  return Math.max(...todos.map((todo) => todo.id), -1);
  // return todos.length ? Math.max(...todos.map(todo => todo.id)) : -1;
}

// 화살표 함수
// const getMaxId = () => Math.max(...todos.map(todo => todo.id), -1);

function getMinId() {
  return todos.length ? Math.min(...todos.map((todo) => todo.id)) : -1;
}

console.log(getMaxId()); // 3
console.log(getMinId()); // 1

Nyong’s GitHub