[ KDT] 핀테크 서비스프론트앤드 개발자 - TIL #4

Suhyxn·2022년 4월 19일
0

4주차 4/16 ~ 4/22


JS 데이터 (자료형, Data Type)


원시형

  1. 문자 (String)
  2. 숫자 (Number)
  3. 불린 (Boolean)
  4. Null
  5. Undefined
  6. 심볼 (Symbol)
  7. 큰정수 (BigInt)

참조형

  1. 배열 (Array)
  2. 객체 (Object)
  3. 함수 (Function)

문자

따옴표로 묶여 있어야 함!

“Heropy”
‘Heropy’
`Heropy`

숫자

부동소숫점 오류 > toFixed
Number 인스턴스의 소수 부분 자릿수를 전달받은 값으로 고정한 후, 그 값을 문자열로 반환합니다.

소숫점 숫자 날리기

numObj.toFixed(<소수 부분의 자릿수>)

NAN
Not-A-Number - 숫자 데이터 / 숫자로 표시 불가!

불린(Booleadn)

True 
False

Null - 지정해서 만든 명시적 빈 값

'존재하지 않는', '비어 있는', '알 수 없는’ 값을 명시적으로 나타냄

Undefined - 지정이 되어 있지 않다.

‘값이 할당되지 않은 상태’를 암시적으로 나타냄

Symbol

Symbol은 고유하고 변경 불가능한 원시 값이며 객체의 속성 키로 사용할 수 있다. 어떤 프로그래밍 언어들에선 "아톰"이라고 부르기도 한다.

Biglnt

지수, 큰(Bing) 정수(Integer)

배열

JavaScript의 String 타입은 텍스트 데이터를 나타낼 때 사용한다. String은 16비트 부호 없는 정수 값 "요소"로 구성된 집합으로, 각각의 요소가 String의 한 자리를 차지한다.

객체

JavaScript에서의 객체는 속성의 컬렉션으로 볼 수 있습니다. 객체 리터럴 구문을 사용해 제한적으로 속성을 초기화할 수의 있고, 그 후에 속성을 추가하거나 제거할 수도 있습니다.

함수

함수는 JavaScript에서 기본적인 구성 블록 중의 하나로 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차이다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 한다다.


자료형 확인

  1. ‘typeof 데이터’
  2. ‘ 데이터.constructor’
  3. ‘Object.prototype.toString.call(데이터’

function checkType(data) {
return Object.prototype.toString.call(data).slice(8, -1)
}

매개변수-파라미터-parameter
인수(인자)-알규먼트-argument



Truthy & Falsy

// falsy
If (false)
If (null)
If (undefined)
If (0)
if(-0)
If (NaN)
If (0n)
If (‘’) // 공백 문자

변수

 
1. const (상수)

  • 유효 범위: 블록 레벨
  • 재할당: x
  • 중복 선언: x
  • 호이스팅: x
  • 전역 등록: x

2.let (변수)

  • 유효 범위: 블록 레벨
  • 재할당: o
  • 중복 선언: x
  • 호이스팅: x
  • 전역 등록: x

3.var

  • 유효 범위: 함수 레벨
  • 재할당: o
  • 중복 선언: o
  • 호이스팅: o
  • 전역 등록: o

! 웬만하면 const로 작성
재할당이 필요할 때만 let 으로 변경


함수

명령들을 감싸는 역할


new Function ()

생성자 함수 호출로 함수를 만드는 법!
하지만 자주 쓰지 않는다.


반환과 종료

return
undefined

return 키워드를 사용하면 함수 종료!


선언과 표현

// 함수 선언 ( 기명 함수 )
Function abc() {

} // 호이스팅 o 

// 함수 표현 ( 익명 함수 )
Const abc = function () {

} // 호이스팅 x

IIFE

Immediately-Invoked Function Expression
즉시 실행 함수

;(익명함수)()
;(익명함수())

호이스팅

인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미한다.


콜백

콜백 함수(Callback function) => 콜백
함수의 인수로 사용되는 함수


화살표 함수

// 일반 함수
const study = function () { console.log("study") }; // study

// 화살표 함수
const study = () => console.log("study"); // study

// 매개변수가 없는 경우
const study = () => console.log('study');
study(); // study

// 매개변수가 하나인 경우
const study = square => square;
const('study'); // study

// 매개변수가 여려개인 경우
const study = (a, b) => a + b; // 간단하게 한줄로 표현할 땐 "{}" 없이 값이 반환됩니다.
study(1, 2); // 3

const study = (a, b) => { return a + b }; 
study(1, 2); // 3

const study = (a, b) => { a + b }; // "{}"를 사용했는데 return이 없을 때 
study(1, 2); // undefined

const study = (a, b) => { // 여러줄 썼을 때
	const cat = 3;
	return a + b + c;
}
study(1, 2, 3) // 6

/*
"{}"를 사용하면 값을 반환할 때 return을 사용해야합니다.
"{}"를 사용하지 않으면 undefied를 반환합니다.
"{}"을 사용할 때는 여러줄을 썼을 때 사용합니다.
*/

// 객체를 반환할 때
const study = () => ( { a: 1, b: 2, c: 3 } );
study(); // { a: 1, b: 2, c: 3 };

this

  • 일반 함수에서 ‘this’ 는 호출되는 위치에서 정의된다.
  • 화살표 함수에서 ‘this’는 자신이 선언된 함수(렉시컬) 범위에어 정의된다.
Call 연결해서 호출
Apply 연결해서 호출, 배열 추가
Bind (연결용)

연산자

비교연산자

연산자이름
==동등
!= 부등
===일치
! ==불일치

A > b
A >= b
A < b
A <= b

=은 항상 나중에


논리 연산자

A && b 그리고 연산자 (And) - 가장 먼저 찾은Falsy를 반환 만약 못 찾으면 마지막 반환
A || b 또는 (Or) - 가장 먼저 찾은 Truthy를 반환, 만약 못 찾으면 마지막 반환
! A 부정 (Not) - a가 Truthy면 false로 , Falsy면 true로 바뀜

삼항 연산자

조건 ? 2항 : 3항


조건문

if statement

If ()
If () else
Else if ()

switch statement

조건이 어떤 값으로 딱 떨어질 때 사용한다

switch(평가) {
case A:
A일때 코드
case B:
B일때 코드
default: 일치하는 케이스가 없을 때 결과
}

0개의 댓글