1일차 스터디 - JavaScript Essential

02 August 2021 - 7 mins read time
Tags: JavaScript Technology

Java Script

화살표 함수 (Arrow Function)

화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않습니다.

화살표 함수는 항상 익명입니다.

이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합합니다.

그래서 생성자로서 사용할 수 없습니다.

(param1, param2, paramN) => { statements }; // void
(param1, param2, paramN) => expression;
// 다음과 동일함:  => { return expression; }

// 매개변수가 하나뿐인 경우 괄호는 선택사항:
(singleParam) => { statements }
singleParam => { statements }

// 매개변수가 없는 함수는 괄호가 필요:
() => { statements };

// 객체 리터럴 표현을 반환하기 위해서는 함수 본문(body)을 괄호 속에 넣음:
params => ({foo: bar});

// 나머지 매개변수 및 기본 매개변수를 지원함
(param1, param2, ...rest) => { statements };
(param1 = defaultValue1, param2, paramN = defaultValueN) => { statements };

// 매개변수 목록 내 구조분해할당(Spread Operator)도 지원됨
var f = ([a, b] = [1, 2], {x: c} = {x: a + b}) => a + b + c;
f();  // 6

Template literals

템플릿 리터럴은 내장된 표현식을 허용하는 문자열 리터럴입니다.

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용할 수 있습니다.

이전 버전의 ES2015사양 명세에서는 “template strings” (템플릿 문자열) 라고 불려 왔습니다.

템플릿 리터럴은 이중 따옴표 나 작은 따옴표 대신 백틱( ) (grave accent) 을 이용합니다.

`string text`

`string text line 1
 string text line 2`

`string text ${expression} string text` // 표현식(expression) 삽입

tag `string text ${expression} string text`

많이 쓰이는 Object static Method

Object.assign(target, ...sources)
// 하나 이상의 원본 객체(sources)들로부터 모든 열거가능한 속성들을 대상 객체(target)로 복사합니다.

Object.freeze(obj)
//객체를 프리징(freeze)합니다. 즉, 다른 곳의 코드에서 객체의 속성을 지우거나 바꿀 수 없습니다.

Object.keys(obj)
//주어진 객체 자신의 열거가능한 속성들의 이름의 배열을 반환합니다.

Object.values(obj)
//주어진 객체의 열거가능한 모든 스트링 속성들의 값들을 포함하고 있는 배열을 반환합니다.

Spread Operator

배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b); // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20

// Stage 4(finished) proposal
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40});
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

Array prototype Method

Array.prototype.filter()

주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환합니다.

 const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

 // length 가 6 보다 큰 요소 배열 반환
 const result = words.filter(word => word.length > 6);

 console.log(result);
 // expected output: Array ["exuberant", "destruction", "present"]

Array.prototype.entries()

배열의 각 인덱스에 대한 키/값 쌍을 가지는 새로운 Array Iterator 객체를 반환합니다.

 const a = ['a', 'b', 'c'];

 a.entries(([key, value]) => console.log(key, value));
 //수정사항 : entreis => entries 오타발견
 //아무런 값도 출력 되지 않아서 해당 아래 for문 추가함.
 //by 장준환

 for (const [key, value] of Object.entries(a)) {
     console.log(`${key}: ${value}`);
 }

 /* expected output:
 	0 a
 	1 b
 	2 c
 */

Array.prototype.map()

배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다.

 // array of string
 const values = ['a', 'b', 'c'];

 console.log(values.map(value => value + 1)) 
 // expected output: [a1, b1, c1]

 //수정사항 : console.log(values.map(value => a + 1))로 출력시 [ 'a,b,c1', 'a,b,c1', 'a,b,c1' ] 로 출력
 //by 장준환 
 //아래 내용 추가
 const array1 = [1, 4, 9, 16];

 // pass a function to map
 const map1 = array1.map(x => x * 2);

 console.log(map1);
 // expected output: Array [2, 8, 18, 32]

Array.prototype.reduce()
- 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환합니다.
```
 //구문
 // arr.reduce(callback[, initialValue]);

 //EX
 const array1 = [1, 2, 3, 4];
 const reducer = (accumulator, currentValue) => accumulator + currentValue;

 // 1 + 2 + 3 + 4
 console.log(array1.reduce(reducer));
 // expected output: 10

 // 5 + 1 + 2 + 3 + 4
 console.log(array1.reduce(reducer, 5));
 // expected output: 15
```
- 매개변수
  - callback: 배열의 각 요소에 대해 실행할 함수
    - accumulator: 콜백의 반환값을 누적한다. 콜백의 이전 반환값
    - currentValue: 처리한 현재 요소
    - currentIndex - Optional: 처리할 현재 요소의 인덱스
    - array - Optional: reduce를 호출한 배열
  - initialValue - Optional: 최초 호출에서 첫 번째 인수에 제공하는 값

과제

스터디 1일차 과제 (forked)

스터디 1일차 과제 - 2 (forked)

위 Code Sandbox의 코드를 완성 시키면 됩니다.

규칙

Spread Operator를 이용하십시오
Object Class의 Method 를 시용하십시오
Array prototype Method 를 사용하십시오
밑 결과와 같은 결과가 나와야 합니다.

결과

스터디 1일차 과제

{name: "Wooseok", favFood: "pasta", password: "12345"}
{name: "Wooseok", favFood: "pasta"}
(2) ["Wooseok", "pasta"]
(2) ["name", "favFood"]
Error in sandbox: 
TypeError: Cannot assign to read only property 'name' of object '#<Object>'

스터디 1일차 과제 - 2

(10) [10, 20, 30, 40, 50, 60, 70, 80, 90, 100]
(5) [60, 70, 80, 90, 100]
(4) [70, 80, 90, 100]
340
(3) ["3", "4", "0"]