[카테캠] FE week 6

werthers·2023년 5월 19일
카테캠
0

카카오테크캠퍼스

목록 보기
7/16
post-thumbnail

1. What I learned today

함수 (Function)

  • 함수 선언문 (Declaration)
    • function hello() {}
    • function 이름을 지정하여 선언하는 방법
  • 함수 표현식 (Expression)
    • const hello = function () {}
    • 할당을 통해 변수에 넣는 방법
  • 호이스팅 (Hoisting)
    • 호이스팅 : 인터프리터가 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 (함수가 유효한 범위 내에서 가장 위로 올라가 선언된다.)
    • 함수 표현식에서는 호이스팅이 발생하지 않는다.
  • 반환 및 종료
    • return 키워드를 통해 함수가 종료되며 호출된 자리에 return 키워드로 설정한 data를 반환한다.
    • return 키워드가 실행되며 함수는 종료된다.
  • 매개변수 패턴
    • 함수는 매개 변수를 여러 개 입력 받을 수 있지만 입력이 들어오지 않을 경우를 대비하여 기본 값을 설정 할 수 있다.
    • function sum(a, b = 1)
      • 두 번째 매개 변수 b가 들어오지 않는 호출(sum(5))도 함수 사용이 가능할 것이다.
    • 객체 구조 분해 할당
      • function getName({ name = '이름이 없습니다' }){}; getName(objUser);
        • objUser 객체를 인수로 넣고 매개변수로 name 속성의 값만 받아올 수 있다.
        • 마찬가지로 기본 값을 지정할 수 있다.
    • 배열 구조 분해 할당
      • function getItem([, b]) {};
        • , 를 통해 인덱스를 다음으로 넘기고 원하는 인덱스만 가져올 수 있다.
    • 나머지 매개변수
      • 가변적으로 매개변수를 사용할 수 있도록 하는 방법
      • function sum(...rest)
      • ...rest 와 같이 전개 방식으로 매개변수를 가변적으로 받을 수 있다.
      • 함수 내부에 arguments 라는 유사 배열에 자동적으로 매개변수의 정보가 저장된다.
    • 화살표 함수
      • function 키워드를 사용하지 않고 단순하게 함수를 만들 수 있는 방법
      • const sum = (a, b) => {return a + b}
        • 화살표 함수에서 return 을 바로 하는 경우 중괄호와 키워드를 생략할 수 있다.
        • => 를 기준으로 왼쪽은 매개변수, 오른쪽은 함수의 실행 영역이다.
    • 즉시 실행 함수 (IIFE)
      • 함수를 만들자마자 호출이 되는 함수
      • 별도의 이름을 지정하지 않고 소괄호 안에 익명함수를 만들고 호출하는 소괄호를 만들면 된다.
      • ((x) => x + y)(3)
      • 일반 함수에서의 즉시 실행 함수 패턴
      • 두 번째 소괄호에 함수의 인수로 사용할 수 있다.
    • 콜백
      • 함수가 호출될 때 인수로 들어가는 또 하나의 함수를 말한다.
      • 이미지가 load 되는데 얼마나 시간이 드는지 모르기 때문에 콜백을 사용하여 이미지가 load 되면 이미지를 띄울 수 있도록 할 수 있다.
    • 재귀
      • 함수가 자기 자신을 호출하는 방식
      • 종료 조건을 함수 내부에 포함하고 있어야 한다.
    • 호출 스케줄링
      • setTimeout 과 같은 함수를 특정 이벤트가 발생했을 경우 발생하거나, 발생하지 않았을 경우 호출을 시킬지 결정하여 스케줄을 조정할 수 있다.
    • this
      • 일반 함수의 this는 호출 위치에서 정의
        • 호출을 한 객체 / 함수를 의미하는 키워드
      • 화살표 함수의 this는 자신이 선언된 함수 범위에서 정의
        • 함수 표현식을 감싸고 있는 외부 함수를 의미하는 키워드

클래스 (Class)

  • prototype
    • new 생성자를 이용해 만든 인스턴스에서 공통적으로 사용할 수 있는 메서드, 속성을 미리 등록한 것. 사용자가 등록할 수도 있다.
    • 한 번의 선언으로 같은 함수의 인스턴스는 모두 사용할 수 있는 메서드, 속성을 등록하여 사용할 수 있어 편리하다. (class 개념으로 보면 된다.)
  • Class
    • class 키워드를 사용하여 prototype 과 같은 개념을 보다 편리하게 구현 할 수 있다.
    • class User{constructor(a, b){ }} 와 같이 초기화 작업을 할 수 있고 prototype으로 사용하던 기능을 내부 선언으로 구현할 수 있다
  • Getter, Setter
    • constructor 가 끝난 후에도 현재 인스턴스가 가지고 있는 속성의 변경도 반영할 수 있는 키워드이다.
    • get 키워드는 인스턴스 내 데이터를 사용하여 메소드 형식으로 class에 정의하여 사용할 땐 속성처럼 사용하면 된다. (조회의 역할)
    • set 키워드를 사용하여 인스턴스 내 데이터를 변경(할당)하는 메소드 형식으로 class에 정의하여 할당 연산자 = 로 변경해주면 된다. (할당의 역할)
      //getter, setter 예시
class User{
	constructor(a, b){
		this.a = a;
		this.b = b;
	} //초기화 작업
  get fullAtt() {
			console.log('get full attiribute');
			return `${this.a} is a and ${this.b} is b`;
	}
	set fullAtt(data) {
			console.log('set full attribute');
			[this.a, this.b] = data.split(' ');
	}
}

const firstIns = new User('hi','hello');

console.log(firstIns.fullAtt); //getter 출력 결과 : hi is a and hello is b

firstIns.fullAtt = 'Hello Hi'; //setter

console.log(firstIns.fullAtt); //getter 출력 결과 : Hello is a and hi is b
  • 정적 메소드
    • 인스턴스가 아닌 클래스 자체에 . 표기법으로 사용할 수 있는 부가 기능을 만들 때 사용하는 방법
    • static 키워드를 통해 클래스 자체에서 호출할 수 있는 메소드를 만들 수 있다.
    • 각각의 인스턴스에서는 정적 메소드 사용이 불가능하다.
  • 상속
    • 선언된 class 의 속성과 메소드를 이어 받아 원하는 기능을 추가, 변경이 가능하도록 사용하는 방법
    • class B extends A 와 같이 extends 키워드를 사용하여 상속받을 수 있다.
    • 상속받은 class에서 부모의 기능을 사용할 땐 super() 메소드 내부에 부모의 속성에 접근, 할당 할 수 있다.
    • 메소드를 override 하여 상속받은 메소드를 자식 클래스에서 변경하거나 기능을 추가하여 사용할 수 있다.
    • instanceof 키워드로 해당 인스턴스가 특정 클래스의 인스턴스인지 확인할 수 있다.
      • insA instanceof classA
  • instanceof constructor
    • instanceof 키워드는 해당 인스턴스가 부모/조상 관계를 가진 class에 대해서도 true 반환
    • constructor 키워드를 통해 인스턴스 해당 class만 찾아낼 수 있다.
      • c.constructor === C
      • arr.constructor === Array

표준 내장 객체

  • 문자
    • .length : 문자열의 길이를 갯수로 확인한다.
    • .includes : 대상 문자열에 인수로 주어진 문자(열)이 포함되어 있는지 확인한다.
      • 두번째 인수로 숫자 n 을 줄 경우 n번째 index부터 포함되는지 확인한다.
    • .indexOf : 대상 문자에 주어진 문자(열)가 일치하는 index를 반환
      • 존재하지 않을 경우 -1 반환
    • .padEnd : 첫 번째 인수로 들어간 숫자보다 대상 문자열의 길이가 작을 경우 두 번째 인수로 넣은 글자로 첫번째 인수의 index까지 padding하는 문자열을 생성하여 반환한다. (원본 변경 X)
      • 첫 번째 인수보다 길이가 길다면 그대로 반환한다.
    • .padStart : 첫 번째 인수로 들어간 숫자보다 대상 문자열의 길이가 작을 경우 두 번째 인수로 넣은 글자를 문자열의 앞에 padding한 문자열을 생성하여 반환한다. (원본 변경 X)
      • 첫 번째 인수보다 길이가 길다면 그대로 반환한다.
    • .replace : 첫 번째 인수로 들어간 문자(열)을 두 번째 인수에 주어진 문자(열)로 대체하여 새로운 문자열을 반환한다.
      • 정규식을 통해 전체에 대해 변환한 문자열을 생성할 수 있다.
        • str.replace(/hello/g, 'hi') //해당 문자열의 모든 hello를 hi로 변경
    • .slice : 대상 문자열의 일부를 추출해 새로운 문자(열)를 반환한다.
      • 이 때 첫 번째 인수부터 두 번째 인수의 직전 인덱스까지만 추출
      • str.slice(0, 5) //0 ~ 4 추출
      • str.slice(6, -1) //6부터 마지막 인덱스 전 글자까지 추출
      • 두 번째 인수를 생략하면 해당 인덱스부터 끝까지 추출한다.
      • str.slice(6)//6 ~ 마지막 추출
    • .split : 대상 문자를 주어진 구분자로 나눠 배열 데이터로 반환한다.
    • .toLowerCase .toUpperCase : 대상 문자열을 영어 소/대 문자로 변환하여 새로운 문자열로 반환한다.
    • .trim : 대상 문자열의 앞 뒤 공백 문자(space, tab)을 제거한 새로운 문자열로 반환한다.
  • 숫자
    • .toFixed : 숫자를 지정된 고정 소수점 표기까지 표현하는 문자열로 반환합니다.
      • 숫자로 다시 활용하기 위해선 parseFloat(num.toFixed(2))와 같이 변환하여야 한다.
    • .toLocaleString : 숫자를 현지 언어 형식의 문자열로 반환한다.
      • 한국 기준 3자리수에 ,를 추가하는 기능
    • Number.isInteger : 숫자가 정수인지 확인한다.
      • 정적 메소드이므로 Number 클래스로 사용 가능하다.
    • Number.isNaN : 숫자가 NaN 인지 확인한다.
    • Number.parseInt parseInt : 주어진 데이터(숫자, 문자)를 파싱하여 특정 진수의 정수로 반환한다.
      • 첫 번째 인수에 해당 데이터, 두 번째 인수에 진법(radix)를 넣어 사용한다.
      • 전역 함수로도 제공하기 때문에 Number. 을 제거해 사용할 수 있다.
    • Number.parseFloat parseFloat : 주어진 데이터를 파싱해 부동 소수점 실수로 반환한다.
  • 수학
    • Math : 수학적인 상수, 함수를 위한 속성 메서드를 지원
    • Math.abs : 첫 번째 인수의 절댓값을 반환한다.
    • Math.ceil : 첫 번째 인수를 올림해 정수를 반환한다.
    • Math.floor : 첫 번째 인수를 내림해 정수를 반환한다.
    • Math.max : 주어진 인수들 중 가장 큰 숫자를 반환한다.
    • Math.min :주어진 인수들 중 가장 작은 숫자를 반환한다.
    • Math.pow : 주어진 첫 번째 인수의 두 번째 인수를 거듭제곱한 값을 반환한다.
    • Math.random : 숫자 0 이상, 1 미만의 난수를 반환한다.
    • Math.round : 첫 번째 인수를 반올림해 정수를 반환한다.
  • 날짜
    • new Date() : 시간 관련 생성자 함수
      • new Date(년도, 월 - 1(zero-base), 일, 시, 분, 초)
    • .getFullYear .setFullYear : 해당 인스턴스의 4자리 format 연도 set / get
    • .getMonth .setMonth : (zero-based) 0 ~ 11 월을 set / get
    • .getDate .setDate .getHours .setHours : 날짜/시 set/get
    • getDay : 요일을 0~6으로 반환
    • .getTime .setTime : 1970-01-01 (유닉스타임)부터 경과한 시간을 기준으로 ms 로 반환하거나 지정.
      • 절대 수치를 비교하여 시간이 더 늦거나 이른 것을 비교할 수 있다.
  • 배열
    • .length : 배열의 길이를 반환한다. (index 갯수)
    • .at : 배열을 인덱싱한다. [] 와 같다.
      • arr.at(arr.length - 1) == arr[arr.length - 1] == arr.at(-1)
    • .concat : 대상 배열과 인수로 주어진 배열을 병합해 새로운 배열을 반환한다.
    • .every : 대상 배열의 모든 요소가 콜백 테스트에 참을 반환하는지 확인한다.
    • .filter : 대상 배열에서 콜백 테스트를 통과한 요소로 구성된 배열을 반환한다.
      • 모두 통과하지 못하면 빈 배열을 반환한다.
    • .find : 대상 배열에서 콜백 테스트를 통과한 첫 번째 요소를 반환한다.
    • .findIndex : find와 같지만 index를 반환한다.
    • .flat : 배열 내부의 배열과 같은 구조를 전부 이어붙여 새로운 배열 반환한다.
      • 깊이 개념으로 flat에 대한 인수 없는 호출로는 [a, [b]] 만 변경
      • 인수로 깊이를 설정하여 이어 붙일 수 있다.
      • arr.flat(Infinity) → 무조건 전부 이어붙인다.
    • .forEach : 대상 배열의 길이만큼 콜백을 실행한다.
      • 반복을 중간에 종료할 수 없다.
    • .join : 대상 배열의 모든 요소를 인자로 들어온 구분자로 연결한 문자열을 반환한다.
    • .map : 대상 배열의 길이만큼 콜백을 실행하고 반환 값을 모아 새로운 배열을 반환한다.
    • .pop : 원본 배열의 마지막 요소를 삭제한다.
    • .push : 원본 배열에 새로운 요소를 추가한다.
    • .reduce : 대상 배열의 길이만큼 콜백을 실행하고, 마지막에 호출되는 콜백의 반환 값을 반환한다.
      • 현재 반환 값은 다음 호출 시 인수로 들어간다.
    • .reverse : 원본 배열의 요소 순서를 반전한다.
    • .sort : 원본 배열의 요소를 콜백의 반환 값에 따라 정렬한다.
      • 인수 없이 호출 시 문자열로 변환해 유니코드로 정렬한다.
    • .splice : (zero-based index, 제거할 item 수, 삽입할 데이터)
      • (index, 제거할 item 수)
    • Array.from : 유사 배열로 배열을 반환한다.
      • 객체 데이터를 배열에서 사용할 수 있는 메소드를 사용할 수 있게 해준다.
      • length 속성이 존재해야하고, key가 인덱스와 유사한 형태여야한다.
  • 객체
    • Object.assign : 두 번쨰 인수 객체부터 가변인자까지를 첫 번째 인자 객체에 속성을 복사하여 반환한다.
      • 대상 객체에 이미 있는 속성일 경우 출처 객체의 속성으로 대체된다.
    • Object.entries : 인자로 받아온 객체의 key:value 를 2차원 배열로 만들어 반환한다.
    • Object.keys : 인자로 받아온 객체의 key를 배열로 반환한다.
    • Object.values : 인자로 받아온 객체의 value를 배열로 반환한다.
  • JSON
    • JavaScript Object Notation : 데이터 전달을 위한 표준 포맷
    • 문자( "만) 사용, 숫자, 불린, Null, 객체, 배열만 사용
    • .json 확장자 사용
    • JSON.stringify() : 데이터를 JSON 문자로 변환
    • JSON.parse() : JSON 문자를 분석해 데이터로 변환

2. Code Snippets

function random(min = 0, max = 10) {
	return Math.floor(Math.random() * (max - min)) + min;
} //범위 지정 랜덤 함수 

a.sort((a, b) => a - b) //오름차순
a.sort((a, b) => b - a) //내림차순

users.sort((a, b) => a.age - b.age) // 나이 오름차순으로 객체 데이터 정렬
profile
werthers
Hello World !
이전 포스트

[카테캠]FE week 5

다음 포스트

[카테캠] FE week 7

0개의 댓글