자바스크립트 중급 강좌

Doozuu·2023년 4월 7일

자바스크립트 코딩앙마

Javascript

목록 보기

49/99

Temporal Dead Zone(TDZ)

: 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말한다.

var : 선언과 초기화가 동시에 일어난다.
함수 스코프 : 함수 외부에서 사용 불가능. 제어문, 반복문 등의 외부에서 사용 가능
let, const : 선언과 초기화가 분리되어 일어난다. 따라서 TDZ에서 아직 초기화가 되어있지 않기 때문에 참조 에러가 발생한다.
블록 스코프 : 블록(함수, 제어문, 반복문 등) 외부에서 사용 불가능

-> 예측 불가능성을 줄이기 위해 var 사용 자제

생성자 함수

생성자 함수는 대문자로 시작하고, new 연산자를 사용해 새로운 인스턴스를 만든다.

객체 복제

Object.assign( )

: 객체 복제

Object.keys( )

: 키 배열 반환

Object.values( )

: 값 배열 반환

Object.entries( )

: 키/값 배열 반환(이중 배열 형태)

Object.fromEntries( )

: 키/값 배열을 객체로 반환(Object.entries()와 반대)

Symbol

: 심볼은 유일한 식별자를 만들 때 사용한다.

객체 프로퍼티 키 만들기

문자형 : Object.keys 로 출력하면 숫자, 불리언도 문자형으로 변환되서 나옴. 실제로 문자형으로 접근 가능
심볼형 : 심볼을 이용해 객체 프로퍼티 키를 만들면 Object.keys 등으로 출력할 때 심볼 값만 출력되지 않는다. (특정 객체의 원본 데이터를 해치치 않고 속성 추가 가능)

수학 메소드

toString( ) : 10진수 -> 2진수/16진수
Math.ceil( ) : 올림
Math.floor( ) : 내림
Math.round( ) : 반올림
Math.max : 최댓값
Math.min : 최솟값
Math.abs : 절댓값
Math.pow : 제곱
Math.sqrt : 제곱근
toFixed(자릿수) : 소수점 n 자릿수 까지 나타냄
isNaN( ) : 숫자 아닌지 판단
parseInt( ) : 문자를 숫자(정수)로 변환

Number와의 차이점 : parseInt는 문자와 숫자가 섞여있을 때 숫자부분만 추출해서 변환, Number는 NaN을 출력
parseInt(“1”,2) 문자를 숫자로 바꾸고 이진수로 바꾸기

parseFloat( ) : 부동소수점 반환
Math.random( ) : 0~1 사이의 랜덤 숫자 반환

문자열 메소드

str.length : 문자열 길이
특정 위치에 접근 : [ ]대괄호를 이용해 접근 가능
toUpperCase, toLowerCase : 대/소문자 변환
str.indexOf(text) : 특정 문자의 위치 찾기. 없으면 -1 반환
str.slice(n,m) : n부터 m-1까지 문자열 반환. (없으면 문자열 끝까지, 음수면 끝에서부터 센다.)
str.substring(n,m) : n과 m 사이 문자열 반환. 음수는 0으로 인식
str.substr(n,m) : n부터 m개 까지
str.trim() : 앞 뒤 공백 제거
str.repeat(n) : 문자열 반복
문자열 비교도 가능하다. : "a" < "c"

배열 메소드

push, pop, unshift, shift
arr.splice(n,m) : n 부터 m개 요소 지움
arr.splice(n,m, x) : 특정 요소 지우고 추가

arr.slice(n,m) : n부터 m-1까지 반환
arr.concat(arr2,arr3) : 합쳐서 새배열 반환
arr.forEach((item, index, arr) => {}) : 배열 반복
arr.indexOf(), arr.lastIndexOf() : 첫 번째 index, 마지막 index
arr.includes() : 포함하는지 확인
arr.find(fn)/arr.findIndex(fn) : 찾은 첫 번째 요소만 반환
arr.filter() : 해당하는 요소만 반환
arr.reverse() : 역순으로 재정렬
arr.map() : 특정 기능을 시행하고 새로운 배열을 반환
arr.join() : 배열 -> 문자열
arr.split() : 문자열 -> 배열
arr.isArray() : 배열인지 확인
arr.sort() : 배열 재정렬, 원본 배열이 변경됨
(정렬은 Lodash 라이브러리 많이 사용함.)
arr.reduce((누적 계산값, 현재값, index) => {}, 초기값) : 누적합 등에 많이 쓰임

구조 분해 할당

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

기본 값을 줄 수도 있다.
일부 반환값 무시
값 바꾸기 : [a,b] = [b,a]

Rest parameters, Spread syntax

Rest parameters

함수에 인수를 전달할 때, 인수가 몇 개 들어올지 알 수 없으면 Rest parameter를 이용해 나타내준다.

Spread syntax

배열이나 객체 합칠 때 사용 (concat 보다 간단)

Closure

함수와 Lexical 환경의 조합.
함수가 생성될 당시의 외부 변수를 기억하고 생성 이후에도 계속 접근 가능.

setTimeOut, setInterval

setTimeOut : 일정 시간이 지난 후 함수를 실행
setInterval : 일정 시간 간격으로 함수를 반복
중간에 멈추고 싶으면 clearInterval() 실행.

call, apply, bind

함수 호출 방식과 관계없이 this를 지정할 수 있음. (특정 값을 this로 지정)

함수명.call(this로 지정할 변수명, 차례대로 매개변수 나열)
함수명.apply(this로 지정할 변수명, 배열 형태의 매개변수) : 배열 요소를 함수 매개변수로 사용할 때 유용
함수명.bind(this로 지정할 변수명) : 함수의 this 값을 영구적으로 바꿀 수 있음

상속, prototype

공통된 요소가 있을 때 상속해서 사용할 수 있다.
__proto__ 로 상속.

const car = {
	wheels : 4
}

const car1 = {
	color : "Red"
}

const car2 = {
	color : "Blue"
}

car1.__proto__ = car; // car1가 car을 상속받아 wheels 프로퍼티를 사용할 수 있음
car2.__proto__ = car; // car2가 car을 상속받아 wheels 프로퍼티를 사용할 수 있음

const x = {
	name = "x";
}

x.__proto__ = car1; // x -> car1 -> car 
=> 상속은 계속 이어질 수 있다. 이를 prototype chain이라 부른다.