04.19 디지털 트윈 부트캠프 7일차

TIL/디지털트윈

04.19 디지털 트윈 부트캠프 7일차

saramnim 2023. 4. 19. 09:54

728x90

~~1. 자바스크립트란?~~
~~2. 데이터타입 & 변수~~
~~3. 연산자~~(0417)
~~4. 제어문(조건문, 반복문)~~
~~5. 함수(함수표현식, 화살표 함수, 콜백 함수)~~(0418)
~~6. 객체~~
~~7. 배열 & 내장 함수~~(0419)
8. 비동기 프로그래밍
9. 프로미스
10. async/await

연습문제
FreeCodeCamp
프로젝트

Javascript - 객체, 배열 & 내장함수

타입 변환

명시적 타입 변환(타입 캐스팅): 값의 타입이 개발자에 의해 의도적으로 변환
- 문자열 타입 변환 console.log(String(1)); // 1
- 숫자 타입 변환 console.log(Number('-1')); // -1
- 불리언 타입 변환 console.log(Boolean('x')); // true
암묵적 타입 변환(타입 강제 변환): 자바스크립트 엔진에 의해 암묵적으로 자동 변환
- 문자열 타입 변환1 + '2' // "12"
- 숫자 타입 변환1 - '1' // 0 1 * 10 // 10 1 / 'one' // NaN
- 불리언 타입 변환if('') console.log('1') if(true) console.log('2') // 2

제어문의 조건식과 같이 불리언 값으로 평가되어야 할 컨텍스트에서 false로 평가되는 값
false, undefined, null, 0, -0, NaN, ''빈문자열)

단축 평가

논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한 쪽으로 평가

좌항에서 우항으로 평가가 진행된다.

논리합 연산자(||)
두 개의 피연산자 중 하나만 true로 평가되어도 true를 반환
논리곱 연산자(&&)
두 개의 피연산자 중 하나만 false로 평가되어도 false를 반환

객체

키와 값으로 구성된 프로퍼티들의 집합

프로퍼티: 객체의 상태를 나타내는 값, 프로퍼티가 동일할 시 뒤에 있는 프로퍼티 출력

메서드: 프로퍼티(상태 데이터)를 참조하고 조작할 수 있는 동작

객체 생성 방법

프로토타입 기반 객체 지향 언어로서 클래스 기반 객체 지향 언어와는 달리 다양한 객체 생성 방법 지원

객체 리터럴

객체 리터럴에 의한 객체 생성 방식의 문제점

객체 리터럴에 의한 객체 생성 방식은 직관적이고 간편하지만 단 하나의 객체만 생성

동일한 프로퍼티를 갖는 여러 개 생성해야하는 경우 비효율적

생성자 함수에 의한 객체 생성 방식의 장점

객체를 생성하기 위한 템플릿(클래스)처럼 생성자 함수를 사용해 프로퍼티 구조가 동일한 객체 여러 개를 간편하게 생성 가능

Object 생성자 함수

new 연산자와 Object 생성자 함수를 호출하여 빈 객체를 생성

빈 객체 생성 이후 프로퍼티 또는 메소드를 추가하여 객체를 완성하는 방법

생성자 함수

함수 이름은 일반적으로 대문자로 시작한다. 생성자 함수임을 인식하도록 도와준다.

프로퍼티 또는 메소드명 앞에 기술한 this는 생성자 함수가 생성할 인스턴스를 가리킨다.

this에 연결되어 있는 프로퍼티와 메소드는 public(외부에서 참조 가능)하다.

생성자 함수 내에서 선언될 일반 변수는 private(외부에서 참조 불가능)하다. 함수 내부에서는 자유롭게 접근이 가능하나 외부에서 접근할 수 없다.

생성자 함수의 인스턴스 생성 과정
인스턴스를 생성하고 생성된 인스턴스 초기화(인스턴 스 프로퍼티 추가 및 초기값 할당)
인스턴스 생성과 this 바인딩
암묵적으로 빈 객체가 생성
함수 몸체의 코드가 실행되는 런타임 이전에 인스턴스는 this에 바인딩
인스턴스 초기화
생성자 함수에 기술되어 있는 코드가 한 줄씩 실행되어 this 에 바인딩되어 있는 인스턴스 초기화 (프로퍼티, 메소드 추가, 초기값 할당하여 초기화 하거나 고정 값 할당)
인스턴스 반환
생성자 함수 내부의 모든 처리가 끝나면 완성된 인스턴스가 바인딩된 this가 암묵적으로 반환

프로퍼티

객체는 프로퍼티의 집합이며, 프로퍼티는 키와 값으로 구성

프로퍼티 키
빈 문자열을 포함하는 모든 문자열 또는 심벌 값
프로퍼티 값
자바스크립트에서 사용할 수 있는 모든 값

이미 존재하는 프로퍼티 키를 중복 선언하면 나중에 선언한 프로퍼티가 덮어쓴다.

프로퍼티 접근

마침표 프로퍼티 접근 연산자(.)를 사용하는 마침표 표기법

대괄호 프로퍼티 접근 연산자(...)를 사용하는 대괄호 표기법

프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값 할당 시 프로퍼티가 동적으로 생성되어 추가되고 프로퍼티 값 할당

프로퍼티 값 갱신

이미 존재하는 프로퍼티에 값 할당 시 프로퍼티 값 갱신

프로퍼티 삭제

delete 연산자 => 객체의 프로퍼티 삭제

메서드

객체에 묶여 있는 함수

프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다.

메서드 호출

메서드를 호출할 때 메서드 이름 앞의 마침표(.) 연산자 앞에 기술한 객체가 바인딩 된다.

메서드를 호출한 객체가 아닌 메서드를 호출한 객체에 바인딩 된다.

배열

여러 개의 값을 순차적으로 나열한 자료구조

요소: 배열이 가지고 있는 값
인덱스: 배열에서 자신의 위치를 나타내는 0 이상의 정수
length 프로퍼티: 요소의 개수, 배열의 길이

=> for문을 통해 순차적으로 요소에 접근

객체와 배열의 차이

자바스크립트 배열은 배열이 아니다.

자료구조에서의 배열
동일한 크기의 메모리 공간이 빈틈 없이 연속적으로 나열된 자료구조(밀집배열)
자바스크립트의 배열
동일한 메모리 공간의 크기를 갖지 않아도 되며 연속적으로 이어져 있지 않을 수도 있다.(희소배열)

=> 자바스크립트 배열은 일반적인 배열의 동작을 흉내 낸 특수한 객체다.

어떤 타입의 값이라도 배열의 요소가 될 수 있다.

length 프로퍼티와 희소 배열

희소 배열: 배열의 요소가 연속적으로 위치하지 않고 일부가 비어있는 배열

배열 생성
- 배열 리터럴 방식 => const arr = [1, 2, 3]; // [1, 2, 3]
- Array 생성자 함수 => new Array(); // []
- Array.of => Array.of(1, 2, 3); // [1, 2, 3]
- Array.from => Array.from('Hello') // ['H', 'e', 'l', 'l', 'o']
배열 요소의 참조
- 대괄호 표기법을 사용하며 안에는 인덱스가 와야한다.
배열 요소의 추가와 갱신, 삭제

배열 메서드

원본 배열을 직접 변경하는 메서드와 원본 배열을 직접 변경하지 않고 새로운 배열을 생성하여 반환하는 메서드가 있다.

Array.isArray
전달된 인수가 배열이면 true, 배열이 아니면 false를 반환
Array.prototype.indexOf
인수로 전달된 요소를 검색하여 인덱스를 반환
Array.prototype.push (원본 배열 직접 변경)
인수로 전달받은 모든 값을 원본 배열의 마지막 요소로 추가
Array.prototype.pop (원본 배열 직접 변경)
원본 배열에서 마지막 요소를 제거하고 제거한 요소를 반환
Array.prototype.unshift (원본 배열 직접 변경)
인수로 전달받은 모든 값을 원본 배열의 선두에 요소로 추가
Array.prototype.shift (원본 배열 직접 변경)
원본 배열에서 첫 번째 요소를 제거 하고 제거한 요소를 반환
Array.prototype.concat
인수로 전달된 값들을 원본 배열의 마지막 요소로 추가한 새로운 배열을 반환
인수로 전달한 값이 배열인 경우 배열 해체 후 새로운 배열의 요소로 추가
Array.prototype.splice (원본 배열 직접 변경)
원본 배열의 중간에 요소를 추가하거나 중간에 있는 요소를 제거하는 경우 사용
첫번째 인수 : 시작 인덱스 / 두번째 인수 : 제거할 요소의 개수 / 세번째 인수 : 제거한 위치에 삽입할 요소들
Array.prototype.slice
인수로 전달된 범위의 요소들을 복사하여 배열로 반환
첫번째 인수 : 복사를 시작할 인덱스. 음수인 경우 배열의 끝에서부터 개수
두번째 인수 : 복사를 종료할 인덱스. 해당 인수 앞의 인덱스까지만 포함
Array.prototype.join
원본 배열의 모든 요소를 문자열로 변환한 후, 인수로 전달 받은 문자열(구분자)로 연결한 문자열 반환
구분자는 생략 가능, 기본 구분자는 콤마(,)
Array.prototype.reverse
원본 배열의 순서를 반대로 뒤집는다
Array.prototype.fill
인수로 전달받은 값을 배열의 처음부터 끝까지 요소로 채운다
첫번째 인수 : 채울 값 / 두번째 인수 : 채우기를 시작할 인덱스 / 세번째 인수 : 채우기를 멈출 인덱스(본인 미포함)
Array.prototype.includes
배열 내의 특정 요소가 포함 되어 있는지 확인하여 true 또는 false를 반환

배열 고차 함수

함수를 인수로 전달받거나 함수를 반환하는 함수

함수형 프로그래밍은 조건문과 반복문을 제거하고 변수의 사용을 억제하는 프로그래밍 패러다임으로, 순수 함수를 통해 부수 효과를 최대한 억제하고자 배열 고차 함수를 사용한다.

Array.prototype.sort
배열의 요소를 정렬, 기본적으로 오름차순
내림차순으로 요소를 정렬할 경우 sort 메서드를 사용해 오름차순 정렬 후 reverse 메서드를 사용
숫자 요소로 이루어진 배열을 정렬할 때 => .sort((a, b) => b - a)
Array.prototype.forEach
자신의 내부에서 반복문을 실행

Array.prototype.map
자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달 받은 콜백 함수를 반복 호출
콜백 함수의 반환값들로 구성된 새로운 배열을 반환

Array.prototype.filter
자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달 받은 콜백 함수를 반복 호출
콜백 함수의 반환값이 true 인 요소로만 구성된 새로운 배열을 반환
Array.prototype.reduce
자신을 호출한 배열의 모든 요소를 순회하면서 인수로 전달 받은 콜백 함수를 반복 호출
콜백 함수의 반환값을 다음 순회 시에 콜백 함수 첫번째 인수로 전달하면서 콜백 함수를 호출하여 하나의 결과 값을 만들어 반환

Array.prototype.find
자신을 호출한 배열의 요소를 순회하면서 인수로 전달된 콜백 함수를 호출하여 반환값이 true 인 첫번째 요소를 반환

스코프

식별자 접근 규칙에 따른 유효 범위

범위는 중괄호(블록) 또는 함수에 의해 나눠진다.

모든 식별자는 자신이 선언된 위치에 의해 다른 코드가 식별자 자신을 참조할 수 있는 유효 범위가 결정된다.

스코프 종류

전역: 코드의 가장 바깥 영역
전역 변수는 어디서든지 참조 가능
지역: 함수 몸체 내부
자신의 지역 스코프와 하위 지역 스코프에서만 유효

함수 레벨 스코프

지역 스코프는 코드 블록이 아닌 함수에 의해서만 지역 스코프 생성

var 키워드로 선언된 변수는 오로지 함수의 코드블록만을 지역 스코프로 인정

Number

Number 생성자 함수

new 연산자와 함께 호출해 Number 인스턴스를 생성할 수 있다.

Number 메서드

Number.

interger

Number.isNaN 인수로 전달된 숫자값이 NAN인지 검사하여 불리언 값으로 반환Number.prototype.toFixed 숫자를 반올림해 문자열로 반환Number.prototype.toString 숫자를 문자열로 변환해 반환

Math

수학적인 상수와 함수를 위한 프로퍼티와 메서드 제공생성자 함수가 아니므로 정적 프로퍼티와 정적 메서드만 제공

Math 프로퍼티

Math.PI 원주율 PI값 반환

Math메서드

Math.abs 인수로 전달된 숫자의 절대값 반환

Math.round 인수로 전달된 숫자의 소수점 이하를 반올림

Math.ceil 인수로 전달된 숫자의 소수점 이하를 올림

Math.floor 인수로 전달된 숫자의 소수점 이하를 내림
Math.sqrt 인수로 전달된 숫자의 제곱근 반환

Math.random 임의의 난수(랜덤 숫자)를 반환, 난수는 0~1 미만의 실수

Math.max 전달받은 인수 중 가장 큰 수 반환

Math.pow 첫번째 인수를 밑으로, 두 번째 인수를 지수로 거듭제곱한 결과 반환

Math.min 전달받은 인수 중에서 가장 작은 수를 반환

Date

날짜와 시간을 위한 메서드 제공

Date 생성자 함수

Date 생성자 함수로 생성한 Date 객체는 내부적으로 날짜와 시간을 나타내는 정수값을 갖는다.

new Date() 인수 없이 new 연산자와 함께 호출 시 현재 날짜와 시간을 가진 Date 객체 반환

New Date(milliseconds) 숫자 타입의 밀리초를 인수로 전달하며 1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 밀리초만큼 경과한 날짜와 시간을 나타내는 Date 객체 반환

New Date(dateString) 날짜와 시간을 나타내는 문자열을 인수로 전달 시 지정된 날짜와 시가능ㄹ 나타내는 Date 객체 반환

New Date(연, 월, 시, 분, 초, 밀리초) 연, 월, 시, 분, 초, 밀리초를 의미하는 숫자를 인수로 전달 시 지정된 날짜와 시간을 나타내는 Date 객체 반환

Date.now 1970년~을 기점으로 현재 시간까지 경과한 밀리초 숫자로 반환

Date.prototype.getFullYear 객체의 연도를 나타내는 정수 반환

Date.prototype.getMonth 객체의 월을 나타내는 0~11의 정수 반환

Date.prototype.getDate 객체의 날짜(1~31)를 나타내는 정수 반환

Date.prototype.getDay 객체의 요일을 나타내는 정수 반환

Date.prototype.getHours/getMinutes/getSeconds/getMilliseconds

String

new 연산자와 함께 호출해 String 인스턴스 생성

String 생성자 함수

String.prototype.indexOf

인수로 전달받은 문자열을 검색해 첫 번째 인덱스 반환(실패 시 -1)

String.prototype.starsWith/endWiths

인수로 전달받은 문자열로 시작하는지/끝나는지 확인해 결과를 true 또는 false로 반환

String.prototype.substring

첫번째 인수는 인덱스를 위치하는 문자부터 두 번째 인수는 인덱스에 위치하는 문자의 바로 이전 문자까지의 부분 문자열 반환

첫번째 인수는 두번째 인수보다 작은 정수여야 정상이지만 아닌 경우도 있다.

String.prototype.slice

메서드와 동일하게 동작하지만 음수인 인수를 전달할 수 있다.

String.prototype.toUppereCase/toLowerCase

대상 문자열을 모두 대문자로 변경한 문자열 반환

String.prototype.trim

대상 문자열 앞 뒤에 공백 문자가 있을 경우 이를 제기한 문자열 반환

String.prototype.repeat

대상 문자열을 인수로 전달받은 정수만큼 반복해 연결한 새로운 문자열 반환

String.prototype.replace

대상 문자열에서 첫번째 인수로 전달 받은 문자열 또는 정규 표현식을 검색해 두 번째 인수로 전달한 문자열로 치환된 문자열 반환

String.prototype.split

대상 문자열에서 첫 번째 인수로 전달한 문자열 또는 정규 표현식을 검색해 문자열을 구분 후 분리된 각 문자열로 이루어진 배열 반환

728x90