제어문

주어진 조건에 따라 블록을 실행하거나 반복 실행 할 때 사용
일반적 코드의 실행 순서를 인위적으로 제어

블록문

0개 이상의 문을 중괄호로 묶은 것
자바스크립트에서는 하나의 실행 단위로 취급
단독으로 사용가능하나 일반적으로 제어문, 함수 선언문 등에서 사용

조건문

주어진 조건식의 평가 결과에 따라 코드 블록의 실행 결정
조건식은 boolean 값으로 평가될 수 있는 표현 식

if…else 문

주어진 조건식의 평과 결과에 따라 실행할 코드 블록을 결정
조건식의 평가 결과가 불리언 값이 아니면 불리언으로 강제 변환되어 논리적 구별

else if, else는 옵션
if와 else는 2번 사용 할 수 없지만 else if는 여러번 사용 가능

대부분 삼항 조건 연산자와 바꿔 사용 가능하지만 삼항 조건 연산자는 식으로 값처럼 사용이 가능하지만 if…else문은 값처럼 사용할 수 없는 문

switch 문

주어진 표현식을 평가하여 그 값과 일치하는 표현식을 갖는 case문으로 실행 순서를 이동
상황을 의미하는 표현식을 지정하고 콜론으로 마침
switch 문의 표현식과 일치하는 case 문의 표현식이 없다면 default 문으로 이동

default 의 사용은 옵션

if…else vs switch

if…else 문의 조건식은 반드시 불리언 값으로 평가
switch 문의 표현식은 문자열, 숫자도 가능
switch 문은 놀리적 참, 거짓 보다는 상황에 따라 실행할 코드 블록을 결정할 때 주 사용

반복문

주어진 조건식의 평가 결과가 참인 경우 코드 블록을 실행
실행 후 조건식을 다시 검사하여 여전히 참인 경우 다시 실행
조건식이 거짓일 때까지 반복

for 문

1
2

for (변수 선언문 또는 할당문; 조건식; 증감식)
  조건식이 참인 경우 반복 실행될 문;

변수 선언문, 조건식, 증감식은 모두 옵션
어떤 식도 없으면 무한 루프

변수 선언문은 한 번만 실행
코드 블록의 실행이 종료된 후 증감식이 실행
조건식이 참이면 코드 블록 실행, 거짓이면 for 문의 실행 종료

while 문 vs do…while 문

조건식의 평가 결과가 참이면 코드 블록을 계속해서 반복 실행
조건식의 평가 결과가 불리언 값이 아니면 불리언 값으로 강제 변환되어 논리적 참, 거짓 구별

조건식의 평가 결과가 언제나 참이면 무한루프

do…while문은 코드 블록을 먼저 실행 후 조건식 평가

break 문

코드 블록 탈출 -> 레이블문, 반목문 또는 switch 문의 코드 블록을 탈출

레이블문, 반복문, switch 문의 코드 블록 이외에 break문을 사용하면 SyntaxError

레이블문 : 식별자가 붙은 문

// foo라는 레이블 식별자가 붙은 레이블 문
foo: console.log(‘foo’);

continue 문

반복문의 코드 블록 실행을 현 시점에서 중단하고 반복문의 증감식으로 이동
break 문처럼 반복문을 탈출하지 않음

타입 변환과 단축 평가

타입 변환

타입 캐스팅(Type casting) : 명시적 타입 변환(Explicit coercion), 개발자가 의도적으로 값의 타입을 변환한 것
타입 강제 변환(Type coercion) : 암묵적 타입 변환(Implicit coercion), 개발자의 의도와 상관없이 자바스크립트 엔진에 의해 암묵적으로 타입이 자동 변환하는 것

암묵적 타입 변환

자바스크립트 엔진은 표현식을 평가할 때 코드의 문맥을 고려하여 암묵적 타입 변환을 실행

자바스크립트는 가급적 에러를 발생시키지 않도록 암묵적 타입 변환을 통해 표현식을 평가

문자열 타입으로 변환

문자열 연결 연산자 표현식을 평가하기 위해 문자열 연결 연산자의 피연산자 중에서 문자열 타입이 아닌 피연산자를 문자열 타입으로 암묵적 타입 변환

ex) 1 + ‘2’ //“12”

숫자 타입으로 변환

산순 연산자의 역활은 숫자 값을 만드는 것, 따라서 산술 연산자의 모든 피연산자는 코드의 문맥 상 모두 숫자 타입이어야 함

ex)
1 - ‘1’ // 0

1 * ‘10’ // 10

1 / ‘one’ // NaN

자바스크립트 엔진은 비교 연산자 표현식을 평가하기 위해 비교 연산자의 피연산자 중에서 숫자 타입이 아닌 피연산자를 숫자 타입으로 암묵적 타입 변환

ex)
‘1’ > 0 // true

불리언 타입으로 변환

논리적 참, 거짓을 반환해야 하는 표현식에서 자바스크립트 엔진은 조건식의 평가 결과를 불리언 타입으로 암묵적 타입 변환

명시적 타입 변환

• 래퍼 객체 생성자 함수를 new 연산자 없이 호출하는 방법
• 빌트인 메소드를 사용하는 방법
• 암묵적 타입 변환을 이용하는 방법

문자열 타입으로 변환

console.log(String(1));

console.log((1).toString());

console.log(1 + ‘’)

숫자 타입으로 변환

console.log(Number(‘0’));

console.log(Number(true)); // 1

console.log(parseInt(‘0’)); // 0

console.log(+’0’); // 0

console.log(+true); // 1

console.log(‘0’ * 1); // 0

console.log(true * 1); // 1

불리언 타이으로 변환

• boolean 생성자 함수를 new 연산자 없이 호출하는 방법
• !부정 논리 연산자를 두번 사용하는 방법

단축 평가

단축 평가 사용 패턴

1
2
3
4

var elem = null;

console.log(elem.value); // TypeError: Cannot read property 'value' of null
console.log(elem && elem.value); // null

객체 리터럴

객체란?

javascript에서 원시 타입을 제외한 모든 것

원시 타입은 단 하나의 값만을 나타내지만 객체 타입(object / reference type)은 다양한 타입의 값(원시 타입의 값 또는 다른 객체)들을 하나의 단위로 구성한 복합적인 자료 구조

• mutable value
• 키(key)와 값(value)로 구성된 프로퍼티(Property)의 집합
• 프로퍼티의 값은 자바스크립트에서 사용할 수 있는 모든 값
• 값으로 취급 가능
• 프로퍼티 값으로 함수를 사용할 수도 있으며 프로퍼티의 값이 함수일 경우 일반 함수와 구분하기 위해 메소드(Method)라고 부름

데이터를 의미하는 프로퍼티와 데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드로 구성
데이터와 동작을 하나의 단위로 구조화 가능

자바스크립트는 함수로 객체를 생성하기도 하며 함수 자체가 객체

객체 리터럴에 의한 객체 생성

인스턴스 : 클래스에 의해 생성되어 메모리에 저장된 실체
객체 지향 프로그래밍에서 객체는 클래스와 인스턴스를 포함한 개념

자바스크립트의 객체 생성방법

• 객체 리터럴 : 가장 일반적이고 간단한 방법
• Object 생성자 함수
• 생성자 함수
• Object.create 메소드
• 클래스(ES6)

객체 리터럴의 중괄호는 코드 블록을 의미하지 않음
객체 리터럴은 표현식 -> 닫는 중괄호 뒤 ; 필요

객체를 생성하기 위해 클래스를 먼저 정의하고 new 연산자와 함께 생성자를 호출할 필요없음
숫자 값이나 문자열 값을 만드는 것과 유사한 리터럴 표기법만드로 객체를 생성
객체 리터럴에 프로퍼티를 포함시켜 객체의 생성과 동시에 프로퍼티를 만들 수 있고 객체를 생성한 후 프로퍼티를 동적으로 추가 가능

프로퍼티

객체 = 프로퍼티의 집합
프로퍼티 = 키와 값으로 구성
프로퍼티의 나열은 ,로 구분
마지막 프로퍼티의 ,은 없어도 됨

프로퍼티 키

• 빈 문자열을 포함하는 모든 문자열
• symbol 값
• 프로퍼티 값에 접근할 수 있는 이름
• 식별자 네이밍규칙을 따라야 하지는 않음
• 숫자리터럴을 사용하면 암묵적 타입 변환을 통해 문자열로 변환
• 갱신 - 중복 선언시 나중에 선언한 프로퍼티가 덮어짐 -> 에러 발생 안함

프로퍼티 값

• 자바스크립트에서 사용할 수 있는 모든 값
• 식별자 네이밍 규칙을 따르지 않는 이름에는 반드시 따옴표 필요

문자열 또는 문자열로 변환 가능한 값을 반환하는 표현식을 사용하여 프로퍼티 키 동적 생성 가능
프로퍼티 키로 사용할 표현식을 [...]로 묶어야 함
이를 계산된 프로퍼티 이름(Computed Property name)이라 함

빈 문자열을 프로퍼티 키로 사용해도 가능하지만 키로서 의미가 없으므로 권장하지 않음
예약어도 사용 가능하지만 에러발생의 소지가 있어 권장하지 않음

메소드

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위하여 메소드라 부름
메소드 = 객체에 제한되어 있는 함수

this : 객체 자신을 가리키는 참조변수

프로퍼티 접근

마침표 표기법(Dot notation), 대괄호 표기법(Bracket notation)으로 접근

네이밍 규칙을 따르는 이름으로 키를 만든 경우 두 방법 모두 사용 가능 -> 네이밍 규칙을 따르지 않은 경우 반드시 대괄호 표기법을 사용해야 함

대괄호 연산자는 내부에 지정하는 프로퍼티 키는 반드시 따옴표를 감싼 문자열 -> 없으면 식별자로 인식, 숫자의 경우 생략 가능

프로퍼티 동적 생성

존재하지 않는 프로퍼티에 값을 할당하면 동적으로 생성되고 값이 할당

프로퍼티 삭제

delete 연산자 이용
delete 연산자의 피연산자는 프로퍼티 값에 접근할 수 있는 표현식 -> 존재 하지 않는 프로퍼티의 삭제시 에러없이 무시

ES6에서 추가된 객체 리터럴 확장기능

프로퍼티 축약 표현

1
2
3
4
5
6
7
8

// ES6
let x = 1,
  y = 2;

// 프로퍼티 축약 표현
const obj = { x, y };

console.log(obj); // {x: 1, y: 2}

변수명과 프로퍼티 키가 동일한 이름이면 프로퍼티 키 생략가능
프로퍼티키가 변수의 이름으로 자동 생성

프로퍼티 키 동적 생성

객체 리터럴 내부에서 프로퍼티 키 동적 생성 가능

메소드 축약 표현

메소드 선언시 function 키워드 생략 가능

고찰

1. Truthy 값과 Falsy 값은 엔진에서 변환을 위해서만 존재하는건가요?
   해당 값들도 프로그래머가 사용 할 수 있나요?