[멋쟁이사자처럼] 부트챌린지: 11시간만에 트위터만들기 - JavaScript

 

벌써 3일차 강의. 오늘은 JS를 배웠다. 아는 내용이기도 하고 대체로 내용은 이 아래에 포스팅한 것과 비슷하다.

 

[Java 풀스택 개발자] JavaScript 완전 정복!

[Java 풀스택 개발자] JavaScript 완전 정복!

 

 

다만 고차함수에 대해서는 위 포스트들에서 없기 때문에(정확히는 간단히만 짚고 넘어갔기에) 다룬다.

 

고차 함수(Higher-Order Function)는 함수를 인자(argument)로 받거나 함수를 결과값으로 반환하는 함수로, 함수를 인자로 받는 경우는 예전에 콜백함수에 대해 다뤘을 때도 다룬적이 있다.

 

https://bbbbabbbababababa.tistory.com/17

[Java 풀스택 개발자] #특별편(보충학습) - 콜백 함수에 대해

 

물론 고차 함수가 반드시 콜백함수를 사용하는 것은 아니다. 강의에서 예제로 들어진 고차함수로는 map(), filter(),  forEach() 가 있는데, 다음과 같이 사용된다. 참고로 이 고차함수들은 대부분 인자로 받는 함수는 화살표 함수(람다식)로, 이 화살표 함수와 람다식에 대한 간략한 설명도 다룬적이 있다.

 

[개인 개발 공부] 그래서, 람다식이 뭔데?

[개인 개발 공부] 그래서, 람다식이 뭔데?

 

// 💡 원본 배열: 회원들의 나이 데이터
const ages =;

// ==========================================
// 1. forEach() : 단순히 한 명씩 꺼내서 출력하기
// ==========================================
console.log("-- forEach 결과 --");
ages.forEach(age => {
    console.log(`회원의 나이는 ${age}살입니다.`);
});
// (화면에 순서대로 나이가 출력되지만, 새 배열을 만들지는 않음)


// ==========================================
// 2. filter() : 성인(19세 이상)만 골라내기
// ==========================================
// 조건(age >= 19)이 맞아서 true인 데이터만 모아 새 배열을 만듭니다.
const adults = ages.filter(age => age >= 19);

console.log("-- filter 결과 --");
console.log(adults); // 결과: [20, 35, 42]


// ==========================================
// 3. map() : 모든 회원의 나이를 내년 나이(+1)로 변경하기
// ==========================================
// 모든 요소를 똑같이 1씩 더해서 변형된 새 배열을 만듭니다.
const nextYearsAges = ages.map(age => age + 1);

console.log("-- map 결과 --");
console.log(nextYearsAges); // 결과: [16, 21, 36, 19, 43]

 

위 예제는 제미나이를 통해서 만든 것이다. 보다시피 각각 화살표 함수를 통하여 간단하게 함수를 받고 실행을 한다. map()와 filter()의 경우 새 배열을 만들어 반환하므로 이 부분에 유의하면 좋다.

 

과제는 피라미드 만들기였다. 강의에서는 node.js를 사용하여 print했는데 이러한 print문은 process.stdout.write('내용')으로 사용 가능하다. 이 피라미드 만들기는 간단한 내용인데, 처음해보는 사람들에게는 조금 어려울 수도 있다.

 

    *
   ***
  *****
 *******
*********

 

이런 피라미드를 만드는 형태인데, 공백(space)과 별(*)이 적절하게 이루어져야 한다. 이중 for문이라고 하였기 때문에 수에 맞추자면, 바깥 for문은 줄이어야 하며, 안쪽 for문은 각 줄을 이루는 공백과 별이어야 한다. 이에 따라서 별이 1-3-5-7-9개이므로 최대 9개에 맞추면 되는데, 바깥 for문이 있으므로 star는 루프를 돌 때마다 매번 초기화되기 때문에 i라는 변수를 이용하는 것이 중요하다. i가 늘어날 때마다 star가 늘어나야하므로 이에 유의해서 식을 짜면 된다.

 

따라서 식은 다음과 같이 된다.

 

// 이중 For문으로 피라미드 만들기
for(let i = 0; i < 5; i++) {
  const star = 1 + (2 * i);
  const blank = (9 - star) / 2;

  for(let b = 0; b < blank; b++) {
    process.stdout.write(' ');
  }

  for(let a = 0; a < star; a++) {
    process.stdout.write('*');
  }

  process.stdout.write('\n');
}