Hacker on Campus

  • 일시: 3주차 [2019.11.5.화]
  • 장소: 성신여대
  • 인원: 4명

0. 2주차 복습

2주차 스터디 이후 꽤 오랜만에 3주차 스터디를 진행했다. 그래서 본격적인 스터디를 시작하기 전에 이전 시간에 배운 내용을 복습하는 시간을 가졌다.
2주차에는 배열, 반복문, 객체에 대해 배워보았고 이 중에서 가장 중요한 부분은 반복문을 활용하여 배열의 각 요소들을 순서대로 출력하거나, 더해서 출력하는 등 다양한 형태로 출력할 수 있다는 것이었다.

1. 문자열, 배열, 숫자 다루기

3주차 스터디에서는 문자열, 배열, 숫자 메소드에 대해 알아보았다.

- 문자열 다루기(String Methods)

  • str[index]
    var str = 'Hello';
    console.log(str[0]); // 'H'
    console.log(str[2]); // 'l'
    console.log(str[7]); // undefined
  • length property
    var str = 'How are you?';
    console.log(str.length); // 12
  • str.indexOf()
    var str = 'There is a book.';
    str.indexOf('i'); // 6
    str.indexOf('a'); // 9
    str.indexOf('book'); // 11
  • str.lastIndexOf()
    뒤에서부터 해당하는 문자열을 찾는다.
    var str = 'There is a book.';
    str.lastIndexOf('e'); // 4
  • str.substring()
    var str = ‘abcdefgh’;
    console.log(str.substring(0, 3));  // ‘abc’
    console.log(str.substring(3, 0));  // ‘abc’
    console.log(str.substring(2, 4));  // ‘cd’
    console.log(str.substring(-1, 4));  // ‘abcd’
    console.log(str.substring(0, 20));  // ‘abcdefgh'
  • str.toLowerCase()/ str.toUpperCase()
    console.log('TIGER'.toLowerCase()); // 'tiger'
    console.log('tiger'.toUpperCase()); // 'TIGER'

- 배열 다루기(Array Methods)

  • length property
    var arr = ['I', 'We', 0, 2, 4, 6]
    console.log(arr.length); // 6
  • Array.isArray()
    배열인지 아닌지의 여부를 검사한다.
    Array.isArray([]); // true
    Array.isArray([0, 2, 6]); // true
    Array.isArray(3); // false
    Array.isArray({}); // false
  • arr.forEach()
    • arguments: element의 길이만큼 반복하는 함수
    • parameters: 현재 element, 현재 index, 배열 그 자체(순서대로)
    • element마다 함수를 반복 실행한다.
      var arr = [0, 2, 4, 6, 8];
      arr.forEach(function(element, index) {
        console.log(index + ': ' + element);
      };
      // 0: 0
      // 1: 2
      // 2: 4
      // 3: 6
      // 4: 8
  • arr.map()
    • arguments: element의 길이만큼 반복하는 함수
    • parameters: 현재 element, 현재 index, 배열 그 자체(순서대로)
    • 기존 배열과 동일한 길이를 갖고, 형태가 다른 새로운 배열을 만든다.
      [1, 3, 5, 7, 9].map(function(element, index) {
        return index + ': ' + (element + 100);
      });
      // 0: 101
      // 1: 103
      // 2: 105
      // 3: 107
      // 4: 109
  • arr.filter()
    • arguments: element의 길이만큼 반복하는 함수
    • parameters: 현재 element, 현재 index, 배열 그 자체(순서대로)
    • 기존 배열에서 조건에 맞는 특정 element를 걸러낼 수 있다.
      ['sushi', 'chicken', 'pizza', 'soup'].filter(function(element) {
        return element.length === 5;
      });
      // ['sushi', 'pizza'];
  • arr.push()
    [4, 3, 2].push(1); // [4, 3, 2, 1]
  • arr.slice()
    var animals = [‘ant’, ‘cat’, ‘dog’, ‘parrot’, ‘tiger’];
    console.log(animals.slice(2))
    // [‘dog’, ‘parrot’, ‘tiger’]  
    console.log(animals.slice(2, 4));
    // [‘dog’, ‘parrot’]
  • arr.splice()
    • arguments:
      • 해당하는 자리의 index
      • (삭제 시) 삭제할 element의 개수
      • (추가 시) 배열에 추가할 element의 값
    • 배열의 내용을 추가/ 삭제할 때 사용한다.
      var animals = [‘ant’, ‘cat’, ‘dog’, ‘parrot’, ‘tiger’];
      animals.splice(2, 0, ‘camel’);  // ‘camel’을 두번째 인덱스에 삽입
      // [‘ant’, ‘cat’, ‘camel’, ‘dog’, ‘parrot’, ‘tiger’]
      animals.splice(2, 1, 'squirrel');  // 두번째 인덱스에서 하나의 항목('camel')을 삭제하고 'squirrel'을 삽입
      // [‘ant’, ‘cat’, 'squirrel', ‘dog’, ‘parrot’, ‘tiger’]
  • arr.reduce()
    • arguments: element의 길이만큼 반복하는 함수, 초기값
    • parameters: 누적값 accumulator, 현재값 currentValue, 현재 인덱스 currentIndex, 원본 배열
    • 모든 element를 누적하여 계산해 하나의 결과를 리턴할 수 있다.
      [1, 2, 3, 4, 5, 6, 7, 8, 9].reduce(function(acc, curr) {
        return acc + curr;
      });
      // 45
      [1, 2, 3, 4, 5, 6, 7, 8, 9].reduce(function(acc, curr) {
        return acc + curr;
      }, 10);
      // 55
  • arr.join()
    var arr = ['book', 'pencil', 'eraser', 'ruler'];
    arr.join(); // 'book,pencil,eraser,ruler'
    arr.join(', ') // 'book, pencil, eraser, ruler'
    arr.join(' + '); // 'book + pencil + eraser + ruler'
    arr.join(''); // 'bookpencileraserruler'
  • arr.indexOf()
    var array = [100, 200, 300, 400, 500];
    array.indexOf(100); // 0
    array.indexOf(500); // 4
    array.indexOf(700); // -1

- 숫자 다루기(Number/ Math Methods)

  • Number.isInteger()
    정수인지 아닌지의 여부를 검사한다.
    Number.isInteger(0); // true
    Number.isInteger(10); // true
    Number.isInteger(-100); // true
    Number.isInteger(1.69); // false
  • parseInt()/ parseFloat()
    정수 또는 소수점이 포함된 숫자로 형변환을 한다.
    parseInt('77'); // 77
    parseInt('77.123'); // 77
    parseInt('77*3'); // 77
    parseInt('-77'); // -77
    parseInt('Hello'); // NaN
    parseFloat('77.123'); // 77.123
    parseFloat('-77.9642'); // -77.9642
  • Num.toFixed()
    원하는 소수점 자리까지 반올림한 후, 문자열로 변환해준다.
    var num = 12345.6789;
    num.toFixed(); // '12346'
    num.toFixed(1); // '12345.7'
    num.toFixed(7); // '12345.6789000
  • Math.min/ Math.max
    console.log(Math.min(10, 25, 700)); // 10
    console.log(Math.max(10, 25, 700)); // 700
    console.log(Math.min(-10, -25, -700)); // -700
    console.log(Math.max('-10', '-25', '-700')); // -10
  • Math.floor()/ Math.round()
    숫자를 내림하거나, 반올림한다.
    console.log(Math.floor(26.97)); // 26
    console.log(Math.floor(-26.97)); // -27
    console.log(Math.round(26.97)); // 27
    console.log(Math.round(-26.97)); // -27
  • Math.random()
    0과 1 사이의 난수를 반환한다.
    console.log(Math.random()); // 0.8133273604772897

2. 질의응답

이번 주차 워크샵에서는 나 혼자 모든 내용을 설명하지 않고 팀원들에게도 수업의 분량을 나눠주어 스터디 참여율을 더 높여보았다. 이런 식으로 수업을 진행하니까 워크샵도 더 재미있고, 질의응답도 훨씬 활발하게 이루어질 수 있었다.
이번 주차에는 어떤 질문이 있었냐면,

1. forEach, map, filter 등의 메소드에 사용되는 콜백함수에는 현재 element, 현재 index, 배열 그 자체가 parameter로 들어가는데, 배열 그 자체는 메소드를 사용하기 전에 먼저 써줄텐데 왜 콜백함수의 parameter에도 배열 그 자체가 들어가는 건지?

// 예시)
var arr = [0, 2, 4, 6, 8];
arr.forEach(function(element, index, array) { // function의 parameter인 array를 왜 또 적어주는 것일까?
        console.log(index + ': ' + element);
};

사실 이 부분은 나도 궁금했던 부분이지만, 깊게 생각을 하지 않고 그냥 지나갔었다. 그래서 스터디원분께 나도 parameter의 마지막에 array를 왜 다시 적어주는 건지 궁금했는데 해답을 얻지는 못했다며, 다음 시간까지 답을 꼭 알아오겠다고 말씀드렸다. 이건 git의 help desk를 통해 질문해야겠다!

2. lastIndexOf에 대한 질문
lastIndexOf가 은근히 헷갈리는 부분이 많아서, 나를 포함한 스터디원들 모두 이 메소드를 콘솔에 치며 여러가지 실습을 반복해서 했었다.

'happy'.lastIndexOf('p'); // 3
'happiness'.lastIndexOf('s') // 8

*lastIndexOf는 뒤에서부터 해당 문자열을 찾지만, 세는 건 앞에서부터!

3. Math.min/ Math.max의 기능
Math.min/ Math.max의 arguments에는 숫자뿐 아니라 숫자를 따옴표 속에 넣은 문자열도 들어갈 수 있다.

console.log(Math.min('88', '1', '3342')); // 1
console.log(Math.max('-10', '-25', '-700')); // -10

하지만, 이렇게 해도 값은 제대로 나온다!
스터디원분이 콘솔에 이것 저것 입력해보다가 발견하신 건데 처음 알게된 거라 신기했었다 :)

3. 마무리

자바스크립트 기초를 마무리하는 3주차가 드디어 끝이 났다.
2주차까지 진행하면서 아쉽다고 생각했던 부분들을 3주차에서는 많이 보완할 수 있어서 기뻤다. 워크샵의 내용들을 팀원들과 나눠서 발표하게 되니까, 스터디 참여율이 올라가는 것뿐만 아니라 스터디도 훨씬 재미있어졌다. 그리고 무엇보다 팀원들이 직접 콘솔에 실습을 해보면서 알게됐던 것들을 함께 공유해주시니까 더 깊이있는 내용들을 배울 수 있어서 나에게도 정말 의미있는 시간이었다.
다음 주부터는 html, css를 활용한 momentum을 만들게 될텐데 3주차 워크샵처럼 스터디 참여율을 높여서 팀원들이 많이 배워가실 수 있도록 해야겠다. 저스트코드 앞으로도 파이팅!