[3/16] undefined/null/undeclared의 차이 & map/forEach/reduce & ES6문법

릿·2023년 3월 16일
0

CS스터디

목록 보기
1/18

1. undefined/null/undeclared의 차이

undefined, null, undeclared는 전부 변수에 값이 없다를 뜻함

1. undefined란?

  • undefined는 원시값으로 선언한 후에 값을 할당하지 않은 변수나 값이 주어지지 않은 인수에 자동으로 할당됨
  • undefined의 초기값은 undefined 원시값임
  • typeof undefined는 undefined임
  • 아래의 경우에 변수가 undefined를 반환함
    • 값을 할당하지 않은 변수
    • 메서드와 선언에서 변수가 할당받지 않은 경우
    • 함수가 값을 return하지 않았을 때
  • undefined는 개발자가 의도적으로 할당하기 위한 값이 아니라 자바스크립트 엔진이 변수를 초기화할 때 사용하는 값으로, 개발자가 의도적으로 변수에 할당할 때는 null을 할당함

2. null이란?

  • null은 원시값 중 하나로, 어떤 값이 의도적으로 비어있음을 표현함
    해당 변수가 어떤 객체도 가리키고 있지 않다는 것을 의미함
  • typeof null은 object이나 null은 원시타입으로 자바스크립트에서는 구현버그로 간주함
  • undefined == null은 둘 다 값이 없으니까 true
  • undefined === null은 false
  • 아래의 경우에 함수가 null을 반환함
    • 함수가 유효한 값을 반환할 수 없는 경우 명시적으로 null을 반환하기도 함

3. undeclared란?

  • 접근 가능한 스코프에 변수 선언조차 되어있지 않은 상태를 의미함
  • 선언하지 않은 변수에 접근하고자 할 때는 ReferenceError가 발생, typeof를 하면 undefined를 반환함

2. map/forEach/reduce

아래의 메소드는 모두 사본을 반환하며 원래의 배열은 바뀌지 않음

1. map이란?

  • 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환함
  • 구문: arr.map(callback(currentValue[, index[, array]]), [, thisArg])
  • callback: 새로운 배열 요소를 생성하는 함수, 다음 세가지 매개변수를 가짐
    • 첫번째 매개변수: 처리할 현재요소
    • 두번째 매개변수: 처리할 현재 요소의 인덱스
    • 세번째 매개변수: map()을 호출한 배열
  • thisArg: callback을 실행할 때 this로 사용되는 값

2. forEach란?

  • forEach() 메서드는 주어진 함수를 배열 요소 각각에 대해 실행함
  • 구문: arr.forEach(callback(currentvalue[, index[, array]])[, thisArg])
  • callback: 각 요소에 대해 실행할 함수. 다음 세 가지 매개변수를 받음
    • currentValue: 처리할 현재 요소
    • index: 처리할 현재 요소의 인덱스
    • array: forEach()를 호출한 배열
  • thisArg: callback을 실행할 때 this로 사용할 값.

3. reduce란?

  • reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환함
  • 구문: arr.reduce(callback(accumulator, currentValue, currentIndex, array)[, initialValue])
  • callback: 배열의 각 요소에 대해 실행할 함수. 다음 네 가지 매개변수를 받음
    • accumulator: 콜백의 반환값을 누적함. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값임.
    • currentValue: 처리할 현재 요소.
    • currentIndex: 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작함.
    • array: reduce()를 호출한 배열.
  • initialValue: callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용함. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생함.

3. ES6문법

1. let, const키워드

  • 변수 선언 전에 변수를 사용하면 참조에러가 발생함
  • 블록레벨 스코프를 가짐 (if, for문도 스코프로 인정함)

1. let

  • 변수를 선언할 때 사용

2. const

  • 상수를 선언할 때 사용
  • 재할당이 금지됨 (단, 객체일 경우엔 값 변경이 가능함)
  • 선언할 때 초기값을 무조건 할당해주어야 함

2. 템플릿 리터럴

const tmp = `%{name}은 천재다!`;
  • 백틱으로 감싸주고, 중괄호 앞에 달러 표시를 통해 자바스크립트 표현식 사용이 가능함
  • 여러 줄의 문자열 관리도 가능함

3. 메서드

const obj = {
  x: 1,
  foo() { return this.x },
}
  • ES6메서드는 메서드 축약표현으로 정의된 함수만을 의미함

4. 화살표 함수

const arrow = (x, y) => { ... };
const arrow = x => { ... };
  • 함수표현식으로 정의
  • 매개변수가 여러 개인 경우 소괄호 () 안에 매개변수를 선언
  • 매개변수가 하나일 경우에는 소괄호를 생략할 수 있고, 매개변수가 없을 경우 소괄호 생략 불가
  • 함수 몸체가 하나의 문으로 구성된다면 중괄호 {} 생략 가능

1. 화살표함수와 일반함수의 차이

  • 화살표 함수는 인스턴스를 생성할 수 없음 non-constructor임
  • 화살표 함수는 중복된 매개변수 이름을 선언할 수 없음
  • 화살표 함수는 함수 내부에서 this, arguments, super, new.target바인딩을 갖지 않음

5. 구조분해할당

const { name, age, job } = props;
  • 값을 해체한 후, 개별 값을 변수에 할당하는 과정

6. Promise

  • 비동기 처리를 위한 패턴으로 도입됨. 콜백 패턴이 가진 단점(콜백 헬, 에러 처리)을 보완하며, 비동기 처리 시점을 명확하게 표현할 수 있다는 장점이 있음.
  • 후속처리 메서드로는 then, catch, finally가 있음

7. Class

  • JAVA스럽게 객체 지향적으로 표현하기 위해 추가된 새로운 문법으로, 생김새만 클래스 구조이지, 엔진 내부적으로는 프로토타입 방식으로 작동됨
  • constructor: constructor는 클래스 안에 한 개만 존재할 수 있고, 클래스 필드의 선언과 초기화는 반드시 constructor 내부에서 실시해야 함
  • 메소드 정의 시, 객체리터럴에서 사용하는 문법과 유사한 문법 사용
  • Getter/Setter: 클래스 내에서 Getter 혹은 setter를 정의하고 싶을 때는 메소드 이름 앞에 get 또는 set을 붙여주면 됨
  • 정적 메서드 (static) : 정적 메서드는 클래스의 인스턴스가 아닌 클래스 이름으로 곧바로 호출되는 메서드로, static 키워드를 메소드 이름 앞에 붙여주면 해당 메소드는 정적 메소드가 됨
  • extends 키워드: extends 키워드는 클래스를 다른 클래스의 하위 클래스로 만들기 위해 사용됨
  • super 키워드: 생성자 내부에서 super를 함수처럼 호출하면, 부모 클래스의 생성자가 호출됨
  • Private 클래스 변수: ES2021(ES12)부터는 메서드와 필드명 앞에 "#"을 붙여서 프라이빗 메서드와 필드 정의가 가능해짐

8. String Method (includes, startsWith, endsWith)

  • includes() 메서드는 하나의 문자열이 다른 문자열에 포함되어 있는지를 판별하고, 결과를 true 또는 false 로 반환함. 검색 시 대소문자를 구분함
  • startsWith() 메서드는 어떤 문자열이 특정 문자로 시작하는지 확인하여 결과를 true 혹은 false로 반환함
  • endsWith() 메서드는 어떤 문자열에서 특정 문자열로 끝나는지를 확인할 수 있으며, 그 결과를 true 혹은 false로 반환함

9. default parameter

function sum(x = 0, y = 0) {
  return x + y;
}
  • ES6에서 도입된 매개변수 기본값을 사용하면 인수 체크 및 초기화를 간소화할 수 있음
  • Rest파라미터에는 기본값을 지정할 수 없음

10. Module

  • 모듈 : 애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각을 의미함
<script type='module' src='app.mjs'></script>
  • script태그에 type='module' 어트리뷰트를 추가하고, 파일 확장자는 mjs사용을 권장
  • 모듈은 모듈 스코프를 가지며, import와 export 키워드를 이용하여 사용함

11. for...of문

  • for...of 명령문은 반복가능한 객체 (Array, Map, Set, String, TypedArray, arguments 객체 등을 포함)에 대해서 반복하고 각 개별 속성값에 대해 실행되는 문이 있는 사용자 정의 반복 후크를 호출하는 루프를 생성함
  • 구문: for (variable of iterable) {}
  • variable: 각 반복에 서로 다른 속성값이 variable에 할당됨
  • iterable: 반복되는 열거가능(enumerable)한 속성이 있는 객체

12. Rest 연산자

  • Rest파라미터는 함수에 전달된 인수들의 목록을 배열로 전달받음
  • Rest파라미터는 먼저 선언된 매개변수에 할당된 인수를 제외한 나머지 인수로 구성된 배열이 할당되므로, 반드시 마지막 파라미터여야 함
  • Rest파라미터는 단 하나만 선언할 수 있음

13. Spread 연산자

1. 함수의 인자로 사용하는 경우

  • Spread 문법(Spread Syntax, ...)는 대상을 개별 요소로 분리한다. Spread 문법의 대상은 이터러블이어야 함
  • Rest 파라미터는 반드시 마지막 파라미터이어야 하지만 Spread 문법을 사용한 인수는 자유롭게 사용할 수 있음

2. 배열이나 객체에서 사용하는 경우

  • 특정 객체 또는 배열의 값을 다른 객체나 배열로 복제하거나 옮길 때 사용
  • React에서는 state의 특정부분만 변화시키거나, 최초의 상태를 유지하며 데이터를 추가하는 등의 경우에 사용됨
profile
항상 재밌는 뭔가를 찾고 있는 프론트엔드 개발자

0개의 댓글