10주차-파트02: Flow control, 표현식과 문, Collection loop, 예외상황, 객체

CHAPTER 1. Flow control, 표현식과 문, Collection loop

Collecion loop

✅Flow control(제어흐름, 흐름제어)

명령형 프로그램의 개별 명령문, 명령 또는 함수 호출이 실행되거나 평가되는 순서. 다음과 같이 5종류가 있다.

• goto: 다른 구문에서 시작 => 권장 x 
• choice: 일부 조건 충족된는 경우에만 일련의 명령문 실행 => If-else, switch
• loop: 어떤 조건이 충족될때까지의 일련문을 0회 이상 실행 => collection loop, general loop
• continue: 현재 실행 구문에서 떨어진 한 구문의 집합을 실행 => loop continuation
• break: 프로그램 실행을 중단 => loop early exit, 함수 실행 정지

 

 

 

✔️ 표현식과 문의 이해

1. 표현식(expression)

• 어떤 값으로 이행되는 임의의 유효한 코드 단위, 값으로 평가될수 있는 문은 모두 표현식
• 표현식이 평가되면 새로운 값을 생성하거나 기존값을 참조
• ex) 리터럴 표현식, 함수 표현식

표현식ㅇ

 

2. 문(statement)

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

문(statement)

 

<Collecion loop(Foreach 루프)>

• For 문과 다르게, 명시적으로 카운터(루프변수)를 관리하지 않는다.
• 자바스크립트의 collection loop(for of, for in문)
• for of문: 반복 가능한 객체(iterator)를 통해 반복하는 루프를 만든다.
• for in문: 객체의 열거속성(enumberable)을 통해 지정된 변수를 반복한다.

for of 문

for in문

 

 

 

 

 

 

CHAPTER 2. 예외 상황

✅예외 상황(Exception)

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

 

1. ECMAScript Error

• RangeError: 값이 집합에 없거나, 허용범위가 아닐때
• ReferenceError: 존재하지 않는 변수 참조 시
• SyntaxError: 문법을 지키지 않았을 때
• TypeError: 값이 기대한 자료형이 아니여서 연산이 불가능할 때
• .........

2. DOMException

Web API레벨에서 발생하는 Error Type

• NetworkError: 네트워크 에러 발생 시
• AbortError :작업이 중단되었을 때
• TimeoutError: 작업 시간이 초과되었을 때

3. 그 외의 에러

개발자가 직접 예외 상황을 예상하여 핸들링 해야함

 

➡️throw문

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

• 예외를 발생시키기 위해 throw문을 사용
• throw문 이후의 명령문은 실행되지 않는다.

 

예외 발생시, 

1. 현재 함수의 실행이 중지
2. 에러객체와 함꼐 에러가 throw
3. 제어흐름은 호출자 사이에 catch블록이 있으면, catch블록으로 전달
4. 호출자 사이에 catch블록이 없으면, 프로그램 종료

에러를 catch하여 프로그램이 종료되지 않도록 해야 한다.

예외 처리를 담당하는 핸들러를 찾기 위해, 순서대로 *콜스택(call stack)을 거슬러 올라가 올바른 핸들러를 찾아내어 그 곳에서 처리되도록 한다.

 

*콜스택(Call stack): 자바스크립트 코드가 실행되어 생성되는 실행컨텍스트를 저장하는 자료구조로, 함수를 호출할때마다 스택이 쌓이고, 함수의 실행이 종료되면 콜스택에서 스택을 제거한다.

에러가 throw되면 콜스택을 확인하여, 핸들링하고 있는 catch문이 있는 스택에서 처리한다.

 

 

➡️Error 객체

사용자가 직접 Error객체를 정의하여 사용할 수 있다. ECMAScript표준 내장 오류 유형이 있다.

• new Error('에러 메세지')
• Error.message
• Error.name

 

 

➡️try catch문

예외 처리를 맡을 하나 이상의 반응 명령문을 지정한다.

• try블럭의 명령문 중 하나가 실패하면, catch로 제어권이 넘어간다.
• try블럭의 명령문 중 하나가 성공하면, catch로 제어권이 넘어가지 않는다.
• finally블록은 try블록에서 예외 상황이 발생하지 않더라도, 실행된다.

try {

//예외발생할 가능성이 있는 문장 
    
}catch(Exception1 e1) {

 //Exception1이 발생했을 경우, 이를 처리하지 위한 문장적는다.
 
}finally{

//예외발생여부에 관계없이 상항 수행되어야 하는 문장적는다.

}

try문에서 예외 발생시 catch문의 Exception으로 들어가 해당 catch문이 실행된다.

 

 

 

 

 

 

CHAPTER 3. 객체

✅객체

• 객체는 속성을 가진 독립적인 개체(entity), 자바스크립트는 객체기반의 프로그래밍 언어이다.
• const 객체명 = {"속성": 값,  "속성2": 값}
• 속성은 키와 값 사이의 연결관계이다. key-value
• 속성 접근 방법으로 1) 마침표 표기법: objectName.propertyName 과 2) 대괄호 표기법: objectName["propertyName"] 이 있다.
• 속성에는 값 뿐만 아니라 함수도 할당 가능하다. (method: 객체에 속해있는 함수를 method라 한다.)
• 객체는 원시타입과 다르게 변경 가능한 값이다.(mutable)
• 전달하는 과정에서 참조형태로 전달된다.(call by reference)

 

 

 

 

 

<객체 Object 생성 방법>

1. 리터럴 표기

• const foo = {name:'apple'};
• 변수명: 새로운 객체의 이름
• 콜론 앞 속성이름(name): 식별자
• 콜론 뒤 값('apple'): 속성에 할당할 표현식

 

 

2. 생성자 함수

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

new키워드와 함께 객체를 생성하고 초기화하는 함수,생성자 함수를 정의한 후 생성자 함수를 활용하여 객체 인스턴스를 생성한다.

 

 

3. Object.create(객체)

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

 

 

 

 

 

 

위에서 객체는 변경가능한 값(mutable)이라고 설명하였다. 이를 이용하여 객체의 속성을 조작해보자.

<객체 속성 조작하기>

1. 동적 생성

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

 

 

2. 나열하기

1. for ... in: 모든 열거 가능한 속성을 순회한다.(객체의 프로토타입 체인의 속성까지)
2. Object.keys(객체): 객체 자신의 열거 가능한 속성 이름을 배열로 반환
3. Object.getOwnPropertyNames(객체): 객체 자신만의 모든 속성을 배열로 반환

 

3. 삭제하기

• delete연산자로 속성 삭제
• delete 속성 이름
• 반환값:true

 

<객체 비교>

객체를 서로 비교하면 객체 속성이 같은 객체여도, 참조값이 다르므로 서로 다르다. 자기 자신과의 비교에서만 true.

 

✔️객체 복사

1) 얕은 복사(shallow copy)

 

2) 깊은 복사(deep copy)

CHAPTER 4.

CHAPTER 5.

CHAPTER 6.

CHAPTER 7.

CHAPTER 8.

CHAPTER 9.

CHAPTER 10.