자바스크립트(2)

flow control

: 제어 흐름, 흐름 제어

: 명령어 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서

 

5가지 제어 흐름의 종류

1. goto : 다른 구문에서 시작

2. choice: 일부 조건이 충족되는 경우에만 일련의 명령문 실행 ( if-else 문, switch문)

3. loop: 어떤 조건이 충족될 때까지 일련의 명령문을 0회 이상 실행

4. continue: 현재 실행 구문에서 떨어진 한 구문의 집합을 실행

5. break: 프로그램 실행을 중단 

 

표현식(expression)

• 어떤 값으로 이행되는 임의의 유효한 코드 단위
• 표현식이 평가되면, 새로운 값을 생성하거나 기존 값을 참조
• 새로운 값을 생성하거나 기존 값을 참조

 

문(statement)

• 프로그램을 구성하는 기본 단위, 최소 실행 단위
• 선언문, 할당문, 제어문, 반복문, 블럭문, ...

* 블럭문: 명령문들을 그룹으로 묶을 수 있는 블럭문, 한 쌍의 중괄호로 묶어서 표현

 

조건문

if-else 문

: 논리 조건의 참/ 거짓에 따라 명령문을 실행해야 할 경우 사용

: 논리 조건이 참인 경우 if 블럭문 실행

: 논리 조건이 거짓인 경우 else 블럭문 실행

: 해당 값은 false 로 평가 => false, undefined, null, 0 ,NaN, ""(empty string)

 

switch문

: switch 에 명시된 표현식을 평한 후, 평가된 값과 case 라벨 값을 비교하여 일치하는 case 의 명령문을 실행

: default 문 작성 => 평가된 값에 해당하는 case 문이 없을 경우 실행됨

switch ( 표현식 ) {
	case 라벨:	
    		..명령문..
    	default:
    		..명령문..
}

 

반복문

Conditional loop ( 조건부 )

: 일부 조건이 변경될 때까지 루프를 반복하는 구조

⚠️종료될 수 있는 조건이 아닌 경우, 무한 루프에 빠질 수 있다. 

 

1. 시작할 때 조건을 평가하는 타입 

ex) while 문 

 

2. 마지막에 조건을 평가하는 타입 

ex) do while 문 

 

for loop

: 특정 부분의 코드가 반복적으로 수행될 수 있도록 한다.

: [초기화- 조건식- 증감문] 형식

• 초기문: loop 내에서 사용할 loop 변수를 초기화
• 조건문: loop 내 코드 실행 전, 조건을 평가하여 loop를 지속할지 판단
• 증감문: loop 내 코드 실행 후, 실행되는 문장 ( 루프 변수 증감 용도) 

Collection loop ( Foreach 루프)

: 컬렉션 안의 항목들을 횡단하는 제어 흐름문

: 명시적으로 카운터(루프변수) 를 관리하지 않는다.

: 잠재적인 순환 횟수 오류를 예방한다.

 

for ... of 문

: 반복 가능한 객체를 통해 반복하는 루프를 만든다.

: for ([변수]  of [object] ) {...}

: 변수는 반복 가능한 객체의 값을 반환한다.

: 반복 가능한 객체 => Array, Set, String

const foo = 'apple';
for(const i of foo){
	console.log(i);
    //'a'
    //'p'
    //'p'
    //'l'
    //'e'
}

 

for ... in문

: 객체의 열거 속성을 통해 지정된 변수를 반복한다. 

: for ([변수]  in [object] ) {...}

: 변수는 객체의 key 값을 반환한다. 

 

break 문

: 프로그램 실행 중단 종류

: 반복문, switch 문을 종료시킬 때 사용

: 가장 가까운 반복문을 종료하고, 다음 명령어로 넘어간다.

 

continue 문

: 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 종류에 속한다.

: while, do.. while, for 문을 다시 시작하기 위해 사용

: 전체 루프 실행을 종료하지 않는다. ( while 문 => 조건문으로 이동, for 문: 증감문으로 이동 )

---

⚠️예외 처리하기

예외상황이란?

런타임 때 발생할 수 있는 의도치 않은 상황

 

예외의 원인

: 코드 레벨에서의 문제, 하드웨어/디바이스의 문제, 라이브러리 손상, 사용자의 입력 실수 ... 

 

예외의 종류

: ECMAScript Error => 자바스크립트 언어에서 발생하는 Error Type

ex) RangeError, ReferenceError, SyntaxError, TypeError

 

: DOMException => Web API 레벨에서 발생하는 Error Type

ex) NetworkError, AbortError, TimeoutError ... 

 

: 그 외 예외

ex) 개발자도 예상치 못한 예외 상황

 

예외 처리하기

throw 문

: 예외를 발생시킬 때 사용 => catch 블럭에서 에러 객체 핸들링

: throw 문 이후의 명령문은 실행되지 않는다.

 

Error 객체

: 사용자가 직접 정의하여 사용할 수 있음

:  new Error(' 에러 메시지') , Error.message, Error.name

 

try...catch 문

: 블록문 내에서 예외가 발생할 경우, 예외 처리를 맡을 하나 이상의 반응 명령문을 지정

=> try  블록의 명령문 중 하나가 실패하면,  catch 로 제어권이 넘어간다.

=> try  블록의 명령문 중 하나가 성공하면,  catch 로 제어권이 넘어가지 않는다. 

=> finally 블록: try 블록에서 예외 상황이 발생하지 않더라도 실행된다.

---

객체(Object)

객체란?

: 속성을 가진 독립적인 개체

: 자바스크립트는 객체 기반의 프로그래밍 언어

const foo = {
	hello : 'Javascript',
	happy : 'nice to meet you'
};

foo;

 

객체의 속성

 

: 키와 값 사이의 연결관계 , key - value

: 속성 접근 방법 

          1. 마침표 표기법 => objectName.propertyName

          2. 대괄호 표기법 => objectName["propertyName"]

: 속성에는 값 뿐 아니라 함수도 할당 가능 => method

 

객체 생성 방법

 

1. 리터럴 표기

const foo = {name: 'apple'};

 

2. 생성자 함수

: new 키워드와 함께 객체를 생성하고 초기화 하는 함수

: 템플릿처럼 사용하여 속성이 동일한 객체를 여러 개 생성할 수 있다. 

function Person(name,age){
	this.name = name;
	this.age = age;
}

new Person('Jason',30);

 

3. Object.create

: 생성자 함수처럼 동일한 속성값을 갖는 객체를 생성할 수 있다.

: Object.create(객체)

 

객체 속성 control

: 객체는 원시타입과 다르게 변경 가능한 값이다.

: 객체는 전달하는 과정에서 참조형태로 전달된다.

 

1. 객체의 속성 동적 생성

: 객체에 존재하지 않는 속성을 참조하고 할당문을 통해 값을 할당하면 속성이 동적으로 생성되고 추가된다.

 

2. 나열하기

• for..in 문 : 모든 열거 가능한 속성을 순회한다.
• Object.keys(객체) : 객체 자신의 열거 가능한 속성 이름을 배열로 반환
• Object.getOwnPropertyNames(객체) : 객체 자신만의 모든 속성을 배열로 반환

3. 삭제하기

: delete 연산자로 속성 삭제

: delete 속성 이름 

 

객체 간 비교와 복사

 

객체 비교

: 객체를 서로 비교하면 객체 속성과 값이 같은 객체여도, 참조값이 다르므로 서로 다름

: 자기 자신과의 비교에서만 true

const foo = {
	name='apple'
};

const bar = {
	name='apple'
};

console.log(foo === bar); //false
console.log(foo === foo); //true

 

객체 복사

 

1. 얕은 복사

: 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있게 되면, 얕은 복사 되었다고 한다.

: 객체의 속성 중 참조 타입이 없는 경우에만 얕은 복사 방법 권장

: Object.assign({}, 복사할 객체) , spread 연산자 { ... 복사할 객체}

 

2. 깊은 복사

: 복사된 객체의 속성 중 하나라도 같은 참조를 하고 있는 속성이 없다면 깊은 복사 되었다고 한다.

: 재귀 함수를 이용한 복사(lodash - cloneDeep), JSON.stringify (권장 X) 

 

Build-in 객체

 

Number 객체

: 숫자를 표현하고 다룰 때 사용하는 원시 래퍼 빌트인 객체

: 함수로 바로 사용 가능

: 속성 => MAX_VALUE, MAX_SAFE_INTEGER .. 

: 메소드 => isNaN, isFinite,parseInt, parseFloat ..

 

Math 객체

: 수학적인 상수와 함수를 위한 속성과 메서드를 가진 빌트인 객체 ( 숫자 데이터 타입만 지원)

:  메소드 => abs(x), pow(x,y), sqrt(x), ... 

 

Date 객체

: 1970년 1월 1일 UTC 자정과의 시간 차이를 밀리초 단위로 나타낸 것 

: 메소드 => now(),parse(),UTC()

: 인스턴스 메서드

getMonth() => 1월이 0부터 시작,  getDay() => 일요일이 0부터 시작

 

문자열

: 문자열 리터럴로 표현되며, 쌍따옴표나 따옴표를 사용하여 표현

: 문자열 내에 이스케이프 문자 사용 가능( \n)

: 데이터 보관시 문자열 형태로 저장 유용

 

문자열 조작

: 문자열 요소 접근 => charAt, 유사배열이라 배열처럼 접근

: 문자열 비교 => 알파벳순을 비교하여 순서가 뒤에 올수록 크다고 판단

 

String 객체

: 문자열을 다룰 때 사용하는 원시 래퍼 빌트인 객체

: 함수로 바로 사용 가능

: 인스턴스 메서드 => 문자열 체크(get) , 문자열 변경(set)

 

문자열 체크

: 접근 =>at(), charAt() , charCodeAt() , codePointAt()

: 찾기 => indexOf() , lastIndexOf(), search()

: 포함 여부 => includes(), startsWith() , endsWith(), match(정규표현식), matchAll(정규표현식)

: 비교 => localeCompare()

 

문자열 변경

: toLocaleLowerCase(), toLocaleUpperCase() , toString()

: replace(), replaceAll() ... 

: 추가하기 => padEnd(), padStart(), repeat()

: 합치기 => concat() , 산술연산자 

: 분리하기 => slice(), substring(), split(), trim(), trimStart(), trimEnd()

 

정규표현식

: 문자열에서 특정 문자 조합을 찾기 위한 패턴(==정규식)

: /pattern/flags 

 

Collection

: 비용을 절감하기 위하여 상황마다 효율적인 데이터 형태로 처리해야한다.

: 컬렉션은 데이터 항목들의 그룹을 의미한다.

: 컬렉션에는 list,set,tree,graph 등이 포함되어 있다.

 

indexed collections

: index 값을 기준으로 정렬되어 있는 데이터 집합

: index 로 배열 내의 값을 참조할 수 있다.

const foo=[1,2,3];
foo[1]; // 2

 

* 배열(Array)

: 이름과 인덱스로 참조되어 정렬된 값들의 집합

: js 에서 배열의 길이는 고정되어 있지 않음

: 모든 요소는 필수값이 아님(undefined 로 지정해도 됨)

 🛠️ 생성 방법

1. 배열 리터럴: 대괄호([]) 로 묶는다.
2. Array 객체 생성자: new Array(length) => 길이만 지정된 배열, new Array(element0, element1, ...) => 요소가 지정된 배열

 

key based collections

: key 값을 기준으로 정렬되어 있는 데이터 집합

: Map, Set 포함

: 키와 값을 매핑하여 저장

: 저장된 순서대로 각 요소들을 반복적으로 접근할 수 있음

const foo = new Map();
foo.set(key,value);

 

* Map 객체

: 간단한 키와 값을 서로 매핑시켜 저장하고, 저장된 순서대로 요소를 반복적으로 접근할 수 있다.

: [key,value] 의 형태로 삽입된 순서대로 추가

: 인스턴스 속성 => size

: 인스턴스 메서드 

• 요소 체크(get) : 접근, 포함 여부 - get, has
• 요소 변경(set) : clear, delete, set
• 순환  관련 : keys, values, entries, forEach 

* WeakMap

: 키에 대한 강력한 참조를 생성하지 않는 키/값 쌍의 모음

: 키는 object 만을 허용

: 객체 정보를 비노출 (객체의 사적인 정보를 저장하기 위함, 상세 구현 내용을 숨기기 위함)

• 요소 체크(get) : 접근, 포함 여부 - get, has
• 요소 변경(set) : delete, set
• 순환  관련 : 없음

* Set

: 모든 값들의 집합

: 입력된 순서에 따라 저장된 요소를 반복 처리할 수 있음

: 특정 값은 Set 내에서 하나만 존재

: 배열을 Set 으로, Set을 배열로 변환 가능

: for ... of 를 통해 순회 가능

: 인스턴스 속성 => size

: 인스턴스 메서드 

• 요소 체크(get) : 접근, 포함 여부 - has
• 요소 변경(set) : clear, delete, add

* WeakSet

: 객체 컬렉션(object 만 허용)

: 약한 참조를 가진다.

: 인스턴스 메서드 

• 요소 체크(get) : 포함 여부 - has
• 요소 변경(set) : delete, add
• 순환 관련: 없음

JSON 객체

Javascript Object Notation

: 키 - 값 쌍, 배열 자료형, 기타 모든 직렬화 가능한 값

: 직렬화 => Object 를 문자열로 변환하는 것 (JSON.stringify )

: 역직렬화 => 문자열을 Object 로 변환하는 것 ( JSON.parse )

 

Intl 객체

: 각 언어에 맞는 문자, 숫자, 시간, 날짜 비교를 제공하는 국제화 API를 위한 namespace

: DateTimeFormat 생성자 함수 => 언어에 맞는 날짜, 시간 서식을 적용하기 위한 객체

: NumberFormat 생성자 함수 => 언어에 맞는 숫자 서식을 적용하기 위한 객체 

---

프로토타입 기반 언어

객체 지향 프로그래밍

: 객체 라는 기본 단위로 나누고, 이들의 상호작용으로 서술하는 방식

: 클래스 기반 객체 지향 => 자바 , 프로토타입 기반 객체 지향 => 자바스크립트 

 

* 프로토타입 객체

• 객체의 인스턴스를 만드는 부모 객체 개념
• 자바스크립트의 모든 객체는 부모 객체인 프로토타입 객체와 연결
• 부모 객체의 속성과 메서드를 상속 받아 사용 가능

생성자 함수

: 인스턴스 객체 생성 시 사용

: 대문자 함수형 컨벤션

: new 키워드와 함께 호출

: 인스턴스의 부모 객체 == 생성자 함수.prototype

 

프로토타입 chain

: 객체 속성 참조시, 속성이 없는 경우 프로토타입 체인 동작

=> [[Prototype]] 을 통해서 부모 객체를 탐색

: 모든 객체의 부모는 Object.prototype

: 만약 마지막 부모객체에서까지 속성을 찾지 못할 경우, undefined 반환

 

class

: class 클래스명 {...}

: class 내에는 메서드만 작성 가능

: 인스턴스 생성 => new 클래스명();

 

constructor

: 인스턴스가 생성될 때, 호출되는 메서드 

: 인스턴스 생성시 전달한 인자를 constructor 메서드의 인자로 받을 수 있다.

: 생략 가능

class Person {
	constructor(name) {	
    	console.log(name);
    }
}

new Person('joy');

 

인스턴스 Method

: 클래스 내에 존재하는 메서드

: 메서드 내에서 클래스를 this 로 접근 가능

: 클래스의 인스턴스 속성에도 접근 가능

 

정적 Method

: 클래스의 인스턴스를 생성하지 않아도 호출할 수 있는 메서드를 정의할 때 사용

: static 키워드 사용

class Person {
	constructor(age){
    	this.age=age;
    }
    
    static legCount(){
    	return 2;
    }
}

Person.legCount();

 

인스턴스 속성

: 클래스 내부에 캡슐화된 변수 == 멤버 변수

: this 에 추가한 속성

: 인스턴스 속성 초기화는 constructor 메서드에서 보통 진행

 

인스턴스 속성 조회 및 조작

* getter

: 특정 인스턴스 속성을 조회하며 조작하는 메서드

: 무조건 값을 반환

: 사용시, 일반 메서드처럼 호출하지 않고 속성처럼 참조하는 형식으로 사용 

 

*setter

: 특정 인스턴스 속성에 할당하며 조작하는 메서드

: 사용시 일반 메서드처럼 호출하지 않고 속성처럼 할당하는 형식으로 사용

 

상속(extends)

: 코드의 재사용 관점에서 상속 필요 (부모 - 자식)

: extends 와 super 키워드를 통해 class 에서 상속 구현

: extends => 부모 클래스를 상속 받는, 자식 클래스를 정의할 때 사용

: class 부모 {...} 

  class 자식 extends 부모 {...}

 

상속 - super()

: 부모 클래스의 생성자를 호출하게 됨

: 부모 클래스와 공통된 변수를 선언, 초기화시 간결하게 처리 가능

---

자바스크립트 컨텍스트

scope

: 스코프 == 변수 영역

: 변수가 유효성을 갖는 영역

 

scope 규칙

 

1. 정적 영역 규칙 (자바스크립트) 

: 어디서 호출하였는지가 아니라, 어디에 선언하였는지에 따라 스코프 결정

 

2. 동적 영역 규칙

: 어디서 호출하였는지에 따라 스코프 결정

: 런타임 때 결정됨

 

scope 종류

 

: 전역 스코프 => 소스 코드 상 모든 곳에서 사용할 수 있는 전역 변수

: file 스코프 => 해당 파일 전체에서 접근 가능, 다른 파일에서 접근 불가능

: 모듈 스코프 => 모듈을 지원하는 프로그래밍 언어에서 모듈 단위 변수 선언 가능 

: 함수 레벨 스코프 => 함수가 반환된 이후에는 사용 불가능, 함수 외부에서 유효하지 않음

: 블록 레벨 스코프 => 코드 블록 내에서 유효한 변수( let, const )  

---

🌟 배운 점

오늘은 자바스크립트 입문 강의를 마쳤다. 진짜 강의가 너~무 많아서 듣는데 힘들었다. 처음 들어보는 것이 너무 많고, 내용도 정말 많아서 혼자 복습하는 시간이 꼭 필요할 것 같다. 블로그에 정리해둔 것을 두고 두고 봐야겠다. 그리고 이렇게 이론만 들으면 무슨 역할을 하고, 어떻게 쓰는 것인지 감이 잘 안잡혀서 실습도 꼭 필요할 것 같다.