Frontend/Javascript

벨로퍼트 자바스크립트 강의(문서)

surge_95 2022. 1. 4. 23:17

https://learnjs.vlpt.us/

 

벨로퍼트와 함께하는 모던 자바스크립트 · GitBook

벨로퍼트와 함께하는 모던 자바스크립트 본 강의 자료는 패스트캠퍼스 온라인 강의에서 제공하는 JavaScript 강의에서 사용되는 강의 문서입니다. 강의 소개 이 강의에서 뜻하는 "모던 자바스크립

learnjs.vlpt.us

1-08. 반복문 for

숫자로 이루어진 배열이 주어졌을 때, 해당 숫자 배열안에 들어있는 숫자 중 3보다 큰 숫자로만 이루어진 배열을 새로 만들어서 반환해보세요.

function biggerThanThree(numbers) {
  const a = [];
  for(let i = 0; i< numbers.length; i++) {
  if(i < 3) continue;
  a.push(numbers[i]);
  }
  return a;
}

const numbers = [1, 2, 3, 4, 5, 6, 7];
console.log(biggerThanThree(numbers));   // [4, 5, 6, 7]

1-09 배열 내장함수 map : 배열 안의 각 원소를 변환 할 때 사용되며, 이 과정에서 새로운 배열이 만들어짐.

const array = [1, 2, 3, 4, 5, 6, 7, 8];

const squared = array.map(n => n * n);
console.log(squared);   //[1, 4, 9, 16, 25, 36, 49, 64]

1-09 배열 내장함수 reduce두개의 파라미터를 전달. 첫번째 파라미터는 accumulator 와 current 를 파라미터로 가져와서 결과를 반환하는 콜백함수, 두번째 파라미터는 reduce 함수에서 사용할 초깃값입니다.

const numbers = [1, 2, 3, 4, 5];
let sum = array.reduce((accumulator, current) => accumulator + current, 0);

console.log(sum); //15

2.1 삼항연산자

조건 ? true일때 : false일때
const array = [];
let text = array.length === 0 ? '배열이 비어있습니다' : '배열이 비어있지 않습니다.';

console.log(text);

2.7 rest 문법 : 객체, 배열, 함수의 파라미터에서 사용가능

함수에 n 개의 숫자들이 파라미터로 주어졌을 때, 그 중 가장 큰 값을 알아내세요.

function max(...numbers) {
  return numbers.reduce(
    // acc 이 current 보다 크면 결과값을 acc 로 하고
    // 그렇지 않으면 current 가 결과값
    (acc, current) => (acc > current ? acc : current),
    numbers[0]
  );
}

const result = max(1, 2, 3, 4, 10, 5, 6, 7);
console.log(result);

2.8 scope의 이해 : 변수 혹은 함수를 선언하게 될 때 해당 변수 또는 함수가 유효한 범위를 의미함.

  • Global (전역) Scope: 코드의 모든 범위에서 사용이 가능
  • Function (함수) Scope: 함수 안에서만 사용이 가능
  • Block (블록) Scope: if, for, switch 등 특정 블록 내부에서만 사용이 가능

**호이스팅(Hoisting) : 자바스크립트 엔진은 실행 컨텍스트를 위한 과정에서 모든 선언을 스코프에 등록하는데, 이미 변수선언/함수선언이 저장되어 있기 때문에 선언문보다 참조/출력문이 먼저 나와도 오류 없이 작동하며, 이는 선언이 파일의 맨 위로 끌어올려진 것처럼 보인다.

그러나 let, const, class는 초기화되지 않은 상태로 선언만 저장되는 TDZ(Temporal Dead Zone : 일시적 사각지대)에 놓이기 때문에 참조에러가 발생한다. 

참고 : https://hanamon.kr/javascript-%ED%98%B8%EC%9D%B4%EC%8A%A4%ED%8C%85%EC%9D%B4%EB%9E%80-hoisting/