[HoC] 세 번째 워크샵 - JavaScript 기초

Let's TECH🧐·2019년 11월 6일
Student Ambassador
0

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);
};

사실 이 부분은 나도 궁금했던 부분이지만 깊게 생각을 하지 않고 그냥 지나갔었다. 그래서 스터디원분께 나도 이 점이 궁금했는데 해답을 얻지는 못했다며, 다음 시간까지 답을 꼭 알아오겠다고 말씀드렸다. 이건 github의 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주차 워크샵처럼 스터디 참여율을 높여서 팀원들이 많이 배워가실 수 있도록 해야겠다. 저스트코드 앞으로도 파이팅👏

profile
Let's TECH🧐
Minju's Tech Blog
이전 포스트

[HoC] 두 번째 워크샵 - JavaScript 기초

다음 포스트

[HoC] 네 번째 워크샵 - HTML & CSS

0개의 댓글