연산자란? 하나 이상의 표현식을 대상으로 연산을 수행하여 하나의 값을 만든다.
연산자는 연산을 수행하는 연산자와 수행되어지는 피연산자로 나뉘어진다.
연산자의 종류:
단항 연산자
산술 연산자
관계 연산자
이진 논리 연산자
삼항 연산자
할당 연산자
옵셔녈 연산자
쉼표 연산자
단항 연산자:하나의 피연산자만 사용하는 연산자다
- void : 표현식을 평가할때 값을 지정하지 않도록 함
- typeof : 평가전의 피연산자의 타입을 나타내는 문자열을 반환
- delete : 객체의 속성을 삭제
산술 연산자 : 두개의 숫자 값을 피연산자로 받아서 하나의 숫자 값을 반환한다.
(단항 산술 연산자, 이항 산술 연산자)
단항 산술 연산자는 1개의 피 연산자를 산술하여 그 값을 반환한다
- ++: 숫자 1을 증가시키고, 증가시킨 값을 암묵적으로 할당한다.
- --: 숫자 1을 감소시키고, ::
- +:아무 기능 없음, 양수임을 표시
- -:양수를 음수로, 음수를 양수로 반전
증가/감소 연산자는 연산자의 위치에 따라 효과가 달라짐
전위 증가감소 연산자 = ++(숫자), --(숫자)
후위 증가감소 연산자 = (숫자)++, (숫자)--
이항 산술 연산자는 2개의 피 연산자를 산술하여 그 값을 반환한다.
- +,-,*,/(나눗셈),%(나머지)
관계 연산자: 두 피연산자 사이의 값을 비교하여 True나 False를 반환한다.
- in : 객체 내부에 속성이 있다면 True를 반환한다..
- instanceof : 특정 속성이 있다면 True를 반환한다.
비교 연산자:두 피연산자 비교하여 True나 False를 반한한다.
피연산자는 숫자, 문자열, 논리형, 객체타입
-
==(동등 연산자) : 두 피연산자의 값이 같으면 True
-
===(일치 연산자) : 두 피연산자 사이의 값과 속성이 같으면 True
-
!=(부등 연산자) : 두 피연산자의 값이 다르면 True
-
!==(불일치 연산자) : 두 피연산자 사이의 값과 속성이 다르면 True
-
(큼 연산자) : 왼쪽이 오른쪽보다 크면 True
-
=(크거나 같음 연산자) : 왼쪽이 오른쪽보다 크거나 같으면 True
-
<(작음 연산자) : 왼쪽이 오른쪽보다 작으면 True
-
<=(작거나 같음 연산자) : 왼쪽이 오른쪽보다 작거나 같으면 True
이진논리 연산자
두개의 피연산자 중 하나를 반환
반환되는 값은 무조건 Boolean이 아니다.
단항논리 연산자 : 첫번째 식을 평가한 결과에 따라서 두번째 식 평가를 실행
- A && B : A가 False로 평가되면 A를 반환, A가 True로 평가되면 B를 반환
- A || B : A가 False로 평가되면 B를 반환, A가 True로 평가되면 A를 반환
Null, Undefined, 빈 문자열 -> False로 평가
And연산자 : Null 검사에 사용
Or연산자 : 캐싱 값에 대해서도 사용
기타 연산자들
쉼표 연산자 : 두 연산자를 모두 평가한 뒤, 두번째 연산자를 반환
문자열 연산자 : 두 문자열을 값을 서로 연결하여 새로운 문자열을 반환
옵셔녈 연산자 : 객체의 속성을 참고 시, 유효하지 않은 경우 에러를 발생시키지 않고
Undefined를 반환
할당 연산자 : 오른쪽 피연산자가 왼쪽 피연산자에 값을 할당
(+=, -=, *=, /=, %=, **=, &&=, ||= 등...)
삼항 연산자 : 조건 연산자에 따라 두 값 중 하나를 반환한다
Condition(연산자) ? TrueValue : FalseValue
함수란?동일한 처리를 여러 번 해야하는 경우 해당 처리를 하나의 로직으로 일관화시키기 위합이다.
함수의 장점:
코드를 수정할 때 수정해야 할 양이 줄어든다.
필요시 다른 곳에서 호출하여 사용 가능하다.
함수의 형태:
input : 로직 형태를 위해 주입받는 데이터
output : 로직 처리 이후 반한되는 결과를 위한 데이터
본문 : 명령문의 시퀸스로 구성
자바스크립트의 함수는 객체처럼 속성과 메소드를 가질 수 있으며 객체와의 차이점은
- 객체 : 외부에서 호출 불가능
- 함수 : 외부에서 호출 가능
자바스크립틔 함수는 일급객체의 특징을 가지며 일급객체란
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체
- 일급객체는 함수의 실제 매개변수가 될 수 있다.
- 일급객체는 함수의 반환값이 될 수 있다.
- 일급객체는 할당명령문의 대상이 될 수 있다.(변수 등에 할당 가능)
- 일급객체는 동일비교의 대상이 될 수 있다.(값으로 표현 가능)
함수의 형태 :
-
함수 이름 : 함수의 이름(외부 호출 시 사용됨)
-
매개 변수 : 함수의 전달되는 인수 (유사 배열 형태)
-
매개 변수의 종류:
기본값 매개변수 (default funtion parameter)
매개변수 값이 없거나 Undefined가 전달될 경우 대체되는 초기값
매개변수에 할당자와 함꼐 초기값을 할당 -
나머지 매개변수 (Rest Parameter):
- 가변형 함수
Spread 연산자
- 가변형 함수
-
Arguments 객체: 함수에 전달되는 인자들을 참고할 수 있는 객체
자바스크립트의 함수 : Funtion 객체 상속
Funtion 객체의 기본 속성 : Arguments
형태 : 배열이 아니라 유사 배열 형태(배열이 아니므로 배열 내장 Method 사용 불가) -
함수 몸체 : 명령 시퀸스들이 존재하는 블록
매개 변수와 인자의 차이:
매개 변수 : 함수를 정의할 때 사용하는 변수
인자 : 함수가 호출될 때 넘기는 값
함수의 생성 방법 :
-
함수 선언문
-
함수 표현식
익명 함수
기명 함수
-
Funtion 생성자 함수
자바스크립트의 내장 객체 중 하나
함수 생성방법의 기본 원리 -> 함수 표현식, 함수 선언문:축약법
생성자 함수 -> 내장 객체 활용 : 인스턴스 생성
new 내장객체()
new funtion(arg1,arg2,...,'return1')
-
화살표 함수
ES6이후부터 사용 가능
funtion 키워드를 사용하지 않고 화살표(=>)사용
const 변수명 = (arg...) => { return ...}
함수 사용 패턴 :
-
IIFE(즉시실행 패턴)
함수 정의와 동시에 코드 실행
코드 평가-> 코드 실행 -> 최초 1회 시행
->초기화 처리에 주로 사용
작성 방법
즉시실행할 코드 괄호로 감싸기
->괄호로 감싸진 함수 실행 -
재귀함수(Recursive Funtion)
자기 자신을 계속해서 호출하는 함수
계속 자신을 참조하여 호출하므로
무한히 호출될 수 있음
->함수 초반에 탈출 조건을 정의해야 함
직관성이 떨어지므로 한정적 사용 -
중첩함수(inner Funtion)
내부함수 내의 변수 참조 -> 부모를 포함한 외부 범위 참조 가능
부모함수 내의 변수 참조 -> 자식 범위 참조 불가능
스코프 체인 -
콜백함수(callback Funtion)
함수의 매개변수가 될 수 있다.(일급객체 중)
->인자로 B함수를 받은 A함수
->A함수가 호출되는 시점에서 B함수도 호출
특정 이벤트에 의해 발생
->시스템에 의해 호출된 함수
flow control이란? 명령형 프로그렘의 개별 명령문, 명령 또는 함수 호출이 실행되거나
평가되는 순서
예시
- 버튼이 클릭이 되면
- 만약에 버튼 옆의 CheckBox가 선택이 되었다면
- 버튼이 빨간색이 되고
- 아니라면, 버튼이 파란색이 된다.
5가지 제어 흐름의 종료
goto 다른 구문에서 시작(프로그래밍에선 사용하지 않음)- choice 일부 조건이 충족되는 경우만 일련의 명령문 실행 (if else,switch)
- loop 어떤 조건이 충족될 때까지 일련의 명령문을 N회 실행(collection loop, general loop)
- continue 현재 실행 구문에서 떨어진 한 구문의 집합을 실행(loop continuation)
- break 프로그램 실행을 중단 (loop early exit, 함수 실행 정지)
표현식과 문의 차이
표현식 (expression)
- 어떤 값으로 이행되는 유효한 코드 단위
표현식이 평가되면, 새로운 값을 생성하거나 기존 값을 참조
값으로 평가할 수 있는 문은 모두 표현식
리터럴 표현식, 함수 표현식...
문(statement)
- 문이란, 프로그램을 구성하는 기본 구성 단위, 최소 구성 단위
->==명령문
선언문,할당문,제어문,반복문,블록문
블록문
- 명령문들을 그룹으로 묶을 수 있는 블록문
->한 쌍의 중괄호로 묶어서 표현
조건문(Choice)
일부 조건이 충족되는 경우에만 일련의 명령문 수행
- if ... else 문
- switch 문
if...else 문
- 논리조건의 참/거짓에 따라 명령문을 수행해야 할 떄 사용
- if문의 논리조건에 따르면
true/false로 평가할 수 있는 표현식을 대입가능- 논리조건이 참일 경우 if블록문 실행
논리조건이 거짓일 경우 else 블록문 실행- 해당 값은 false로 평가(Falsy)
-> false, undefined, null, 0, Nan, ""(Empty String)- else if 절을 사용하여 다수의 조건을 순차적으로 검사할 수 있다.
switch 문
- switch에 명시된 표현식을 평가한 후,
평가된 값과 case 라벨 값을 비교하여
일치하는 case의 명령문을 실행- default 문
평가된 값에 해당하는 case문이 없을 경우
default의 명령문이 실행되도록 함.
->switch 표현식을 작성,
라벨이 표현된 case문을 작성
switch(표현식) { case 라벨: ...명령문... default: ...명령문... }
대다수의 언어에서 반복을 뜻하는 loop문은 두가지 경우로 나뉜다.
1.루프 시작에 조건을 검사하는 타입
2.루프 끝에 조건을 검사하는 타입
루프 시작에 조건을 검사하는 타입은 본문 블록문이 스킵될 수 있지만 루프 끝에 조건을 검사하는 타입은 무조건 한번은 블록문을 실행하게 된다.
loop(while 문)
루프 시작에 조건을 검사하는 타입(본문 생략될 수 있음)
While 문
while(표현식) { 명령문 }
loop(do-while 문)
루프 시작에 조건을 검사하는 타입(본문 생략될 수 있음)
do-while 문
do { 명령문 } while(표현식)
loop(for 문)
다른 언어에서도 자주 쓰이는 일정 횟수 동안 반복하는 loop 문
자바스크립트의 for 문은 ( 초기문; 조건문; 증감문)의 형태로 이루어져 있다.
- 초기문 : loop 내에서 사용할 변수를 초기화
- 조건문 : loop 내 코드 실행 전, 조건을 평가하여 루프를 지속할지 판단
- 증감문 : loop 내 코드 실행 후, 실행되는 문장(루프변수 증감 용도
collection loop(foreach문)
- 컬렉션 안의 항목들을 횡단하는 제어흐름문
- For 문과 다르게, 명시적으로 카운터(루프흐름)을 제어하지 않는다.
- 잠재적인 순환 오류를 예방한다. (off-by-one error)
->코드를 더 단순하게 읽을 수 있게 한다. - 자바스크립트 collection loop
->for...of
->for...in
for-of 문
- 반복 가능한 객체(iterator)를 통해 반복하는 루프를 만든다.
for([변수] of [object]) {
...명령문...
}->변수는 반복 가능한 객체의 값을 반복한다.
(Array, Set, String...)
for-in 문
- 객체의 열거속성(enumerble)을 통해 지정된 변수를 반복한다.
for ([변수] in [object]) {
...명령문...
}->변수는 객체의 키값을 반환한다.
Break문
- 제어흐름의 종류 중 프로그램 실행 중단 종류
반복문, Switch문을 종료할 때 사용
가장 가까운 While,do-While,for 문을 종료시키고
다음 명령어로 넘어간다.
Continue문
- 제어흐름의 종류 중 떨어진 한 구문의 집합을 실행 종류에 속한다,
While,do-while,for 문을 다시 시작하기 위해 사용한다.
가장 안쪽의,While,do-while,for의 반복을 종료하고, 다음 loop를 실행한다.
전체 루프를 종료시키지 않는다.
->while:조건문으로 이동
for증감문으로 이동
예외 상황(Exception)
- 런타임 때 발생할 수 있는 의도치 않은 상황을 뜻한다.
흐름 제어시 발생할 수 있는 예외 상황이므로, 이에 대응하여 코드 레벨에서 대응해야 한다.
->handling:대응한다는 의미
->control:예상하고 직접 조작한다는 의미
예외 상황을 handling하지 않는다면,
기능이 동작하지 않거나, application이 Shut down 될 수 있다.
예외의 원인
언어 레벨, 외부 요인에 의한 예외 상황은 다양하다.
- 코드 레벨에서의 문제
하드웨어, 디바이스의 문제
라이브러리 문제
사용자의 입력 실수
etc...
코드 레벨에서의 예외 상황 종류:
->ECMAScript error:자바스크립트 언어에서 발생하는 error Type
->DomException:Web Api에서 발생하는 error Type
그 외 예외
ECMAScript Error
자바스크립트 언어에서 발생하는 error Type
- RangeError:값이 집합에 없거나 허용 범위가 아닐 때
RefereneceError:존재하지 않는 변수를 참조할 때
SyntaxError:문법을 지키지 않았을 때
TypeError:값이 기대한 자료형이 아니라서 연산이 불가능할 때
...
DomException
Web Api에서 발생하는 error Type
- NetworkError:네트워크 문제 발생 시
AbortError: 작업이 중단되었을 떄
TimeoutError: 작업이 시간 초과되었을 떄
그 외 에러
- 개발자도 예상치 못한 상황
개발자가 직접 예외 상황읠 예상하여 핸들링 할 수 있다.
자바스크립트의 Error 객체를 사용하여 에러를 정의내리고 handling할 수 있다.
throw 문
예외를 발생시킬 때 사용
->catch 블록에서 에러 객체 handling
예외가 발생하면
-
1.현재 함수의 실행 중지
2.에러객체와 함께 에러가 throw
3.제어흐름은
->호출자 사이에 catch블록이 있다면 catch블록으로 전달.
->호출자 사이에 catch블록이 없다면 프로그램 종료 -
예외를 발생시키기 위해 throw 문을 사용한다.
->throw 표현식
throw 이후 명령문은 실행되지 않는다.
Error 객체
- 사용자가 직접 Error 객체를 정의하여 사용할 수 있다.
-> new Error ('에러 메시지')
->Error.message
->Error.name - ECMASCRIPT 표준 내장 오류 유형이 있다.
Error Catch
예외가 발생하면
- 1.현재 함수의 실행 중지
2.에러객체와 함께 에러가 throw
3.제어흐름은
->호출자 사이에 catch블록이 있다면 catch블록으로 전달.
->호출자 사이에 catch블록이 없다면 프로그램 종료
에러를 캐치하여 프로그램이 종료되지 않도록 해야 한다.
예외 처리르 담당하는 핸들러를 찾기 위해, 순서대로 콜 스택(call stack)을 거슬러 올라가
올바른 핸들러를 찾아내어 그곳에서 처리되도록 한다.
call stack
- 스택 자료구조
->출입구가 하나인 자료구조 (First in Last out)
Call stack
->자바스크립트 코드가 실행되며 생성되는 실행컨텍스트가 저장되는 구조
->자료가 저장될 때마다 스택이 쌓이며,
함수의 실행이 종료되면 콜스택에서 스택을 제거하는 원리
에러 throw되면
->콜 스택에서 확인하여, handling되고 있는 catch 문이 있는 스택 처리
Try-catch 문
- Try-catch 문은 블록문 내에서 예외가 발생할 경우
예외 처리르 맡을 하나 이상의 반응 명령문을 지정합니다.
->try블록의 명령문 하나가 실패하면, catch로 제어권이 넘어간다.
->try블록의 명령문 하나가 성공하면, catch로 제어권이 넘어가지 않는다.
catch블록에서 인자로 throw된 catchID를 참조할 수 있다.
->try{...}
catch(catchID){...}
-> 콜 스택 중 하나에서 catch문의 예외가 처리된다면,
더 상위의 콜 스택에서는 더이상 에외가 타고올라오지 않는다.
finally 블록
- finally 블록은 try블록에서 예외상황이 발생하지 않더라도 실행된다.
에외상황이 발생하면 try-catch-finally
예외상황이 발생하지 않으면 try-finally
Try-catch 문 사례
외부에 의존되어서 구현된 로직에서 사용(예기치 못한 상황 대비)
- network 에러 발생
에러를 감지해야 하는 Business 로직
->비즈니스 데이터가 유효하지 않은 경우
유저가 잘못된 데이터를 입력하는 경우
...
