개념을 이해한다. === 용어를 정확히 이해하고 설명할 수 있다.
제어문 (control flow statement)
조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다.
•
블록문 (block statement)
◦
0개 이상의 문을 중괄호로 묶은 것, 코드 블록 또는 블록
◦
일반적으로 제어문이나 함수를 정의할 때 사용하는 것이 일반적
•
조건문 (conditional statement)
◦
if … else
▪
Boolean 값으로 평가되어야 한다.
▪
실행해야 할 내용이 복잡하여 여러 줄의 문이 필요하다면 if...else
▪
조건에 따라 단순히 값을 결정하여 변수를 할당하는 경우, 삼항 조건 연산자
구조
◦
switch
▪
Boolean 값보다는 string 이나 number 으로 평가되는 경우가 많다. (다양한 상황)
▪
switch 문: 일치하는 표현식을 갖는 case 문으로 실행 흐름을 옮긴다.
▪
case 문: 상황을 의미하는 표현식을 지정하고 콜론으로 마친다.
구조
•
반복문 (loop statement)
◦
반복문을 대체할 수 있는 다양한 기능
▪
배열을 순회할 때 forEach Method
▪
객체의 프로퍼티를 열거할 때 for...in
▪
ES6에 도입된 iterable을 순회할 수 있는 for...of
◦
for
▪
조건식이 거짓으로 평가될 때까지 반복 실행
구조
▪
반복 횟수가 명확할 때 사용
▪
실행과정
변수 선언문→조건식 true→코드 블록→증감식→*조건→…→ false → 실행종료
false→실행 종료
◦
while
▪
평가 결과가 참이면 코드 블록을 반복 실행
▪
반복 횟수가 불명확할 때 사용
◦
do … while 문
▪
코드 블록을 먼저 실행하고 조건식을 평가
•
break 문
◦
코드 블록을 탈출한다.
◦
레이블 문 ~~:
▪
식별자가 붙은 문
▪
for 문 외부로 탈출할 때 유용하다.
▪
그 밖의 경우에는 권장하지 않는다.
•
continue 문
◦
반복문의 코드 블록 실행을 현 시점에서 중단하고 증감식으로 이동
◦
코드가 길 때, 사용하는 것을 권장
타입 변환과 단축 평가
•
암묵적 타입 변환 (type coercion)
◦
개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스크립트 엔진에 의해 암묵적으로 타입이 변환되는 것
◦
문자열 타입 변환
◦
숫자 타입 변환
▪
'' , [] , null , false = 0
▪
true = 1
▪
undefined = NaN
◦
불리언 타입 변환
▪
Truthy: falsy 값 외의 모든 값
▪
Falsy: false , null , undefined , NaN , 0 , -0 , 0n , "" , document,all
•
명시적 타입 변환 (type casting)
◦
개발자가 의도적으로 값의 타입을 변환하는 것
▪
빌트인 메서드: 자바스크립트에서 기본 제공하는 함수
◦
문자열 타입 변환
▪
String()
▪
.toString()
▪
+ ''
◦
숫자 타입 변환
▪
Number()
▪
parseInt() / parseFloat()
▪
단항 산술 연산자 +
▪
산술 연산자 *
◦
불리언 타입 변환
▪
Boolean()
▪
!! 부정 논리 연산자
◦
단축 평가
▪
논리 연산 결과를 결정하는 피연산자를 타입 변환하지 않고 그대로 반환하는 것
▪
평가 결과가 확정된 경우 나머지 평가 과정을 생략하는 것
▪
논리 연산자 || , &&
▪
옵셔널 체이닝 연산자
▪
null 병합 연산자 ??
객체 리터럴
JavaScript는 객체 (Object) 기반의 프로그래밍 언어이며, JavaScript를 구성하는 거의 “모든 것”이 원시 값을제외하고는 객체다. (함수, 배열, 정규 표현식 등)
또한 원시 타입의 값과 다르게 객체는 변경 가능한 값 (mutable value)이다.
•
기본구조
◦
객체는 0개 이상의 property로 구성된 집합이며, key와 value로 구성된다.
◦
객체는 property와 method로 구성된 집합체다.
◦
프로퍼티: 객체의 상태를 나타내는 값 (data)
◦
메서드: property(상태 데이터)를 참조하고 조작할 수 있는 동작
◦
객체와 함수
▪
함수로 객체를 생성하기도 하며 함수 자체가 객체이기도 하다.
◦
객체 리터럴에 의한 객체 생성
▪
인스턴스
→ 클래스에 의해 생성되어 메모리에 저장된 실체
→클래스, 인스턴스 ⊂ 객체
•
프로퍼티
◦
객체는 프로퍼티의 집합이며 키와 값으로 구성된다.
◦
key: 빈 문자열을 포함하는 모든 문자열 또는 심벌 값
◦
value: 자바스크립트에서 사용할 수 있는 모든 값
◦
식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 "" , '' 를 사용해야 한다.
•
메서드
◦
객체에 묶여 있는 함수
원시 값과 객체의 비교
primitive type - immutable value
object type - mutable value
•
원시 값
◦
불변성 (immutability)
▪
변수의 값을 변경하려면 재할당
◦
문자열
▪
유사 배열 객체
→ 갑자기 원시 값인 문자열이 객체일 수도 있으니 혼란스러울 수 있겠다 (장난?)
→ 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있고 length 프로퍼티를 갖는다.
◦
값에 의한 전달, 메모리 주소 전달
▪
변수에는 값이 전달되는 것이 아니라 메모리 주소가 전달된다.
•
객체
◦
해시 테이블
▪
자바스크립트 객체는 프로퍼티 키를 인덱스로 사용하는 연관 배열이다.
◦
변경 가능한 값(mutable value)
▪
프로퍼티를 동적으로 추가하거나 갱식 혹은 삭제도 가능하다.
◦
참조에 의한 전달
▪
참조 값이 복사되어 전달
▪
두 개의 식별자가 하나의 객체를 공유한다는 것
함수
“입력(input)”을 받아 “출력(output)”을 내보내는 일련의 과정을 문(Statement)으로 구현하고 코드 블록으로 감싸서 하나의 실행 단위로 정의
•
함수를 사용하는 이유
◦
유지보수의 편의성
◦
코드의 신뢰성
◦
코드의 가독성
•
함수 리터럴
◦
함수는 객체다.
구성 요소 | 설명 |
함수 이름 | - 함수 이름은 식별자다.
- 함수 이름은 함수 몸체 내에서만 참조 가능
- 함수 이름은 생략 가능
a. 기명함수 (named function)
b. 무명/익명함수 (anonymous function) |
매개변수 목록 | - 0개 이상의 매개변수를 소괄호로 감싸고 쉼표로 구분
- 각 매개변수에는 함수를 호출할 때 지정한 인수가 순서대로 할당
- 매개변수는 함수 몸체 내에서 변수와 동일하게 취급 |
함수 몸체 | - 함수가 호출되었을 때 일괄적으로 실행될 문들을 하나의 실행 단위로 정의한 코드 블록이다.
- 함수 몸체는 함수 호출에 의해 실행된다. |
•
함수 정의
◦
함수 선언문
function add(x, y){
return x + y;
}
JavaScript
복사
▪
함수 리터럴과 형태가 동일하다.
▪
(함수 리터럴과 다르게) 함수 이름을 생략할 수 없다.
▪
표현식이 아닌 문이다. undefined 값이 출력되는 이유
undefined 값이 출력되는 이유◦
함수 표현식
let add = function(x, y){
return x + y;
}
JavaScript
복사
▪
함수 선언문은 표현식이 아닌 문 / 함수 표현식은 표현식이다.
◦
함수 생성 시점과 함수 호이스팅
▪
함수 생성 시점
→ 함수 선언문 : 코드가 한 줄씩 순차적으로 실행되는 런타임 이전에 자바스크립트 엔진에 의해 먼저 실행
▪
함수 호이스팅
→ 함수 선언문이 코드의 선두로 끌어 올려진 것처럼 동작하는 자바스크립트 고유의 특징
함수 표현식으로 함수를 정의하면 함수 호이스팅이 발생하는 것이 아니라 변수 호이스팅이 발생한다. ………..
◦
Function 생성자 함수
let add = new Function('x', 'y', 'return x + y');
JavaScript
복사
◦
화살표 함수
let add = (x, y) => x + y;
JavaScript
복사
•
함수 호출
◦
매개변수와 인수
▪
매개변수 : 함수를 정의할 때 선언
▪
인수: 함수를 호출할 때 지정하며, 개수와 타입에 제한이 없다.
◦
인수 확인
▪
자바스크립트 함수는 변수와 인수의 개수가 일치하는지 확인하지 않는다.
▪
매개변수의 타입을 사전에 지정할 수 없다.
◦
매개변수의 최대 개수
▪
제한은 없다.
▪
그러나 이상적인 함수는 한 가지 일만 해야 하며 가급적 작게 만들어야 한다.
▪
최대 3개 이상을 넘지 않는 것을 권장
◦
반환문 return
▪
함수 호출은 표현식
•
참조에 의한 전달과 외부 상태의 변경
•
다양한 함수의 형태
◦
즉시 실행 함수
▪
익명 함수
▪
기명 함수
◦
재귀 함수
▪
자기 자신을 호출하는 함수
◦
중첩 함수
◦
콜백 함수
◦
순수 함수와 비순수 함수
스코프
Scope(유효범위)는
•
종류
◦
전역 (Global)
◦
지역 (local)
•
스코프 체인
•
함수 레벨 스코프
•
렉시컬 스코프
전역 변수의 문제점
전역 변수의 무분별한 사용은 위험하다. (왠만하면 지역 변수를 사용할 것을 권장)
•
변수의 생명 주기
◦
지역 변수의 생명 주기 (= 함수의 생명 주기)
◦
전역 변수의 생명 주기
▪
전역 객체
•
전역 변수의 문제점
◦
암묵적 결합
◦
긴 생명 주기
◦
느린 검색 속도
◦
네임스페이스 오염
•
전역 변수의 사용을 억제하는 방법
◦
즉시 실행 함수
◦
네임스페이스 객체
◦
모듈 패턴
◦
ES6 모듈
let, const 키워드와 블록레벨 스코프
•
var로 선언한 변수의 문제점
◦
변수 중복 선언 허용
◦
함수 레벨 스코프
•
let
◦
변수 중복 선언 금지
◦
블록 레벨 스코프
◦
변수 호이스팅
▪
선언 단계와 초기화 단계 분리
▪
일시적 사각지대
◦
전역 객체와 let
•
const
◦
선언과 초기화
◦
재할당 금지
◦
상수
◦
const와 객체
•
무엇이 무엇이 좋을까요~?
