New 병아리 개발자

# 자바스크립트 학습

# 관계 연산자 (Relational)

• 관계 연산자는 작거나, 크거나 등을 비교하는 연산자 이다.
• 관계 연산자에는 <, >, <=, >= 연산자, instanceof 연산자, in 연산자가 포함된다.

## > 연산자

• 부등호 : Greater-than
• 양쪽이 Number 타입일 때, 왼쪽이 오른쪽 보다 크면 true, 아니면 false를 반환한다.

log((1 + 2) > 1);

=>
true

먼저 표현식을 평가하여 값을 구한다. (1+2) => 3
3 > 1 에서 3이 1보다 크므로 true를 반환한다.
(숫자로 비교하는 것을 수학 값으로 비교한다고 말한다.)

## String 타입 비교

log( 1 > "A" );

=>
false

한 쪽이 String 타입이면 false를 반환한다.

• 양쪽이 모두 String 타입이면 유니코드 사전 순서로 비교한다.

log(("\u0033" > "\u0032"));		// \u0033 : 3, \u0032 : 2
log("A" > "1");		// A : \u0041, 1 : \u0031
log("가" > "다");

=>
true
true
false

코드 포인트는 유니코드를 등록할 때 부여한다.
유니코드 등록 순서로 비교 or 유니코드 사전 순서로 비교한다고 말한다.
한글도 유니코드 사전 순서로 비교한다.

• 문자 하나씩 비교

log("A07" > "A21");

=>
false

A, 0, 7
A, 2, 1 
각 각 유니코드 코드 포인트 값을 비교

• <, <=, >= 는 비교 기준만 다르다.

# == 연산자

• 동등 연산자
• 왼쪽과 오른쪽 값이 같으면 true, 다르면 false를 반환한다.
• 값 타입은 비교하지 않는다. (1과 "1"이 같음)

log(1 == "1");

=>
true

값 타입이 다르면, 숫자:문자 or 문자:숫자 일때 
문자 타입을 숫자 타입으로 변환하여 비교한다.

var value1;
log(value1 == undefined);

=>
true

value1를 선언만 했으므로 undefined


var value2;
log(value2 == null);

=>
false

value2를 선언만 했으므로 undefined		
undefined : 값, 타입은 undefined
unll : 값, 타입은 object
그런데, 값만 비교하므로 true

# != 연산자

• 부등 연산자
• 왼쪽과 오른쪽 값이 다르면 true, 같으면 false를 반환한다.
• a != b와 !(a == b)가 같다.

# === 연산자

• 일치 연산자
• 왼쪽과 오른쪽의 값과 타입이 모두 같으면 true, 값 또는 타입이 다르면 false
• 1 === 1 의 경우 true
• 1 === "1" 의 경우 값은 같으나, 타입이 다르므로 false

log(1 === "1");

=>
false

• undefined, null 비교

var value;
log(value == null);
log(value === null);

=>
true
false

value 변수를 선언만 했으므로 값은 undefined
undefined 는 값으로, 타입은 undefined
null 는 값으로, 타입은 object

undefined == null	// 둘다 값이므로 true
undefined === null	// 둘다 값이지만, 타입이 다르므로 false

# !== 연산자

• 불일치 연산자
• 값 또는 타입이 다르면 true, true가 아니면 false

# 콤마 연산자

• 기호 : , (Comma)
• 콤마를 이용하여 표현식을 분리한다.
• var a = 1, b = 2; (콤마로 분류, var는 한 번만 작성)

# ( ) 연산자

• 그룹핑 연산자
• 소괄호( ) 안의 표현식을 먼저 평가한다.
• 평가한 값을 반환한다.
• 5 / (2 + 3)

# | | 연산자

• 논리 OR 연산자
• 표현식의 평가 결과가 하나라도 true이면 true, 아니면 false
• true가 되는 변수 값 반환

var value, zero = 0, two = 2;
log(value || zero || two);

=>
2	// true가 되는 시점의 변수 값 반환(two일때 반환)

value의 변수 값이 undefined이므로 false
zero 변수 값이 0 이므로 false
two 변수 값이 2 이므로 true

• 모두가 false 일 때

var value, zero = 0;
log(zero || value);

=>
undefined	// 마지막가지 비교하였는데 모두가 false이면 마지막 변수 값 반환

zero 는 0 이므로 false
value 는 undefined 이므로 false

• true이면 비교 종료

var one = 1;
log(one === 1 || two === 2);

=>
true

one === 1 은 true 이므로 다음은 비교하지 않는다.

# && 연산자

• 논리 AND 연산자
• 표현식의 평가 결과가 모두 true이면 true, 아니면 false
• 모두가 true일 때

var one = 1, two = 2;
log(one && two);

=>
2	// true가 되는 마지막 변수값인 2 반환

• 왼쪽 결과가 false이면 오른쪽은 비교하지 않는다.

var one = 1, zero = 0;
log(one && zero && nine);

=>
0

# 조건 연산자

• 3항 연산자 라고도 한다.
• 기호 : 조건 ? a : b 
• 조건의 표현식을 먼저 평가하여 true이면 a의 결과를 반환하고, false이면 b의 결과를 반환한다.

log(1 === 1 ? "같음" : "다름");
log(1 === "1" ? "같음" : "다름");

=>
같음
다름

# 연산자 우선 순위

• 연산자의 실행 우선순위 (자바스크립트의 스펙인 ECMA-262에는 없고 MDN에 작성되어있다.)
• MDN 주소 : developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/%EC%97%B0%EC%82%B0%EC%9E%90_%EC%9A%B0%EC%84%A0%EC%88%9C%EC%9C%84

# 자바스크립트 학습

# 산술연산자

## - 연산자

• 왼쪽 표현식 평가 결과에서, 오른쪽 표현식 평가 결과를 뺍니다.
• String 타입이지만, 값이 숫자이면 Number 타입으로 변환하여 계산한다.

log("135" - 2);

=>
135가 String 타입이지만, 값이 숫자이므로
값을 Number 타입으로 변환하여 계산
133

## * 연산자

• 왼쪽 표현식 평가 결과와, 오른쪽 표현식 평가 결과를 곱한다.
• 숫자 값으로 변환할 수 있으면 변호나하여 곱한다.
• NaN 반환 : 양쪽의 평가 결과가 하나라도 숫자가 아닐 때, NaN을 반환한다.

log(10 * "20");
log(10 * true);
log(10 * false);
log(10 * null);
log(10 * "A"); 

=>
200
10
0
0
NaN

• 소수 값이 생기는 경우 처리

log(2.3 * 3);
log(2.3 * 10 * 3 / 10);

=>
6.8999999999999995	// IEEE 754 유동 소수점 처리 때문
6.9	// 위 대응 방법으로 실수를 정수로 변환하여 값 구하고, 다시 정수를 실수로 변환

## / 연산자

• 왼쪽 표현식 평가 결과를 오른쪽 표현식 평가 결과로 나눈다.
• NaN 반환 : 양쪽의 평가 결과가 하나라도 숫자가 아닐 때, 분모와 분자 모두 0일 때 NaN 반환

## % 연산자

• 왼쪽 표현식 평가 결과를 오른쪽 표현식 평가 결과로 나누어 나머지를 구한다.
• 3 % 2의 나머지는 1

log(5 % 2.5);
log(5 % 2.3);
log((5 *10 - (2 * 2.3 * 10)) / 10);

=>
0
0.40000000000000036	// IEEE 754 유동 소수점 처리 때문
0.4	// 위 해결위해 실수를 정수로 변환하여 연산 후 다시 정수를 실수로 변환

# 단항 연산자

## 단항 + 연산자

• 형태 : +value
• 값을 Number 타입으로 변환한다.

var value = "7";
log(typeof value);
log(typeof +value);
log(typeof Number(value));	// Number() 함수가 가독성이 더 좋다.

=>
string
number
number

## 단항 - 연산자

• 형태 : -value
• 값의 부호를 바꾼다. ( +는 -로, -는 +로 바꾼다.)
• 연산을 할 때만 바뀌며, 원래 값은 바뀌지 않는다.

var value = 7;
log(-value);
log(8 + -value);
log(value);

=>
-7
1	// 8 + (-7)
7

# 후치, 전치, 논리 NOT 연산자

## 후치 ++ 연산자

• 형태 : value++
• 값을 자동으로 1 증가 시킨다.
• 문장을 수행한 후에 1 증가 시킨다. (문장을 수행한 후에 1증가, 즉, 세미콜론(;) 다음에서 증가)

var one = 1;
var value = one++ + 3;	// 1 + 3으로 value = 4, 그 후 one의 값 2로 변경
log(value);
log(one);

=>
4	
2

## 전치 ++ 연산자

• 형태 : ++value
• 값을 자동으로 1 증가 시킨다.
• 문장 안에서 1 증가 시킨다. (표현식을 평가하기 전에 1증가, 표현식에서 증가된 값을 사용한다.)

var one = 1;
var value = ++one + 3;	// one가 2로 값 변경, 2 + 3 = 5
log(value);

=>
5

## 후치 -- 연산자

• 형태 : value--
• 값을 자동으로 1 감소 시킨다. (문장을 수행한 후에 1감소, 즉, 세미콜론(;) 다음에 감소

var two = 2;
var value = two-- + 3;	// 2 + 3 = 5 계산 후, two 값 변경
log(value);
log(two);

=>
5
1

## 전치 -- 연산자

• 형태 : --value
• 값을 자동으로 1 감소 시킨다. (표현식을 평가힉 전에 1 감소, 표현식에서 감소된 값을 사용한다.)

var two = 2;
var value = --two + 3;	// two 값 변경 후 계산 1 + 3 = 4
log(value);

=>
4

## ! 연산자

• 논리 NOT 연산자
• 형태 : !value
• 표현식 평가 결과를 true, false로 변환한 후, true이면 false로, false이면 true로 변환한다.
• 원래 값은 바뀌지 않으며, 사용할 때만 변환한다.

var value = true;
log(!value);
log(!!"A");	// "A"는 true, !"A"는 false, !!"A"는 true

=>
false
true

# 유니코드, UTF

## 유니코드 (Unicode)

• 세계의 모든 문자를 통합하여 코드화 한 것
• 언어, 이모지 등이 코드화 되어 있다.
• 코드 값을 코드 포인트 (code point)라고 부른다.
• 형태 : 0000~FFFF로 되어 있다. 10000 ~ 1FFFF 값에 문자가 매핑된다.
• 유니코드 컨소시엄에서 관장한다. (http://www.unicode.org/)

## 유니코드 표기방법

• u와 숫자 형태 : u0031은 숫자 1
• 자바스크립트는 u엎에 역슬래시(\)를 작성한다.

log("\u0031");	//	1
log("\u0041");	//	A
log("\u1100");	//	ㄱ
log("\uac01");	//	각

• 역 슬래시 자체를 문자로 표시하기 위해서는 역 슬래시 2개를 작성(\\)

log("\\u0031");	// \u0031
log("\\u0041");	// \u0041

• ES6에서 표기 방법 추가 (ES5는 4자리만 지원, ES6는 5자리 지원)

## UTF

• Unicode Transformation Format
• 유니코드의 코드 포인트를 매핑하는 방법으로 UTF-8, UTF-16. UTF-32로 표기한다.
• <meta charset="utf-8">
• UTF-8은 8비트로 코드 포인트를 매핑하겠다는 것으로, 8비트 인코딩(Encoding)이라고 부른다.

# 자바스크립트 학습

# 연산자

• 연산의 사전적 의미 : 규칙에 따라 계산하여 값을 구함

## 연산자의 형태

+ - * / %
> >= < <=
== != === !==
콤마(,), typeof, delete, void
instanceof, in, new 등등

## 표현식의 형태

• 자바 스크립트는 표현식의 연결이다.

1 + 2

var total = 1 + 2;

var value = total / (2+3);

=>
여기서 1 + 2 를 표현식을 평가 한다고 한다.
표현식을 평가하면 반드시! 결과가 반환된다. 이를 평가결과 라고 한다.
1+2의 평가결과는 3

## 할당 연산자

• 단일 할당 연산자 : = 을 하나만 사용

var result = 1 + 2;

• 복합 할당 연산자 : = 앞에 연산자를 작성한다.

= 앞에 연산자 작성
+=, -=, *=, /=, %=
<<=, >>=
>>>=, &=, ^=, |=

먼저 = 앞을 연산한 후 할당한다.
var point = 7;
point += 3;

## 해석, 실행 순서

• 해석 : 자바스크립트 코드를 기계어로 바꾸는  것 (Compile), "엔진이 해석하고(Compile 하고) 실행한다."고 한다.
• 실행 순서

var result = 1 + 2 + 6;
=>
왼쪽에서 오른쪽으로 실행
= 왼쪽의 표현식 평가
= 오른쪽의 표현식 평가
왼쪽에서 오른쪽으로 평가(1 + 2, 3 + 6)
= 오른쪽 표현식의 평가 결과를 왼쪽 표현식 평가 결과에 할당
var result = 9;

## 산술 연산자

• 더하기(+) 연산자 : 양쪽의 표현식을 평가, 평가 결과를 더한다.

var value = 1 + 2 + 4;
log(value);
=>
우선 1과 2를 더하고
1과 2를 더한 값인 3에 4를 더한다.
그리고 더한 값인 7을 value 변수에 할당한다.

• 1 + 5 + "ABC"의 결과

var value = 1 + 5 + "ABC";
log(value);

=>
6ABC
우선 더하기 규칙에 따라 1과 5를 더하여 6이 된다.
이어서 6과 "ABC"를 연결한다.




var two = "2";
var value = 1 + two;
log(value);
log(typeof value);

=>
12
string
일반적으로 number 타입과 string 타입은 계산하는 것은 문법에 맞지 않다.
하지만, 자바스크립트는 이를 "연결하여" 값을 반환한다.
(자바스크립트는 되도록이면 특정한 부분에서 에러가 발생하여 
전체 웹 페이지가 표시되지 않는 것을 방지하려는 경향(특성)이 강함, 이를 반영한 것)

## 숫자로 변환

• 자바스크립트는 연산 전, 우선 숫자로 변환을 시도한다.
• 숫자로 변환이 되면 변환 된 값으로 연산을 수행한다.

var value;
log(10 + value);

=>
NaN
value 값을 선언만 했으므로 undefined
10 + value의 경우 10 + undefined로 NaN 으로 변환


log(10 + null);
log(10 + true);
log(10 + false);

=>
10
11
10
null은 0으로
true은 1로
false은 0으로 변환


log(10 + "123");
log(123 - "23");

=>
10123	// +는 연결
100		// + 외에는 숫자로 변환 시도하여 작업

# 자바스크립트 학습

# 데이터 타입

• 데이터(Data) 의 사전적 의미는 자료이다.
• 데이터 타입을 자료형이라고 부르기도 한다.
• 데이터는 반드시 타입을 갖는다.
• 자바스크립트는 데이터를 기준(변수에 설정된 데이터에 따라)으로 타입을 결정 한다. (타입을 먼저 선언하고 타입에 맞는 데이터를 할당하지 않는다.)

## 데이터 타입의 형태

• 숫자 타입

var value = 123;

• 문자 타입(큰 따옴표 or 작은 따옴표 안에 작성)

var value1 = "work";
var value2 = "book";

## typeof 연산자

• typeof 연산자와 같은 단어를 키워드 라고 한다. ( 키워드란 특별한 의미를 가진 단어)
• typeof value에 데이터를 작성, 데이터 타입을 반환

val point = 123;
log(typeof point);
=> number 출력

val book = "책";
log(typeof book);
=> string 출력

# 데이터 타입의 분류

• 데이터 타입은 언어 타입과 스펙 타입으로 분류된다.

## 언어 타입

• 자바스크립트 프로그램에서 사용할 수 있는 타입이다.
• Undefined, Null, Boolean, String, Number, Object

## 스펙 타입

• 언어 알고리즘을 위한 타입이다.
• 자바스크립트에서는 사용할 수 없다.
• Reference, List, Completion, Property Descriptor, Data Block, Lexical Environment, Lexical Record 등

## Number 타입

• 부호를 가진 값(+, -)

var point = 123;
log(typeof point);
point = -1.23;
log(typeof point);
=>
number
number 출력

• 숫자 값의 범위는 2의 64승 - 2의 53승 + 3
• Number 타입의 특수한 3개 값

NaN : Not-a-Number (숫자가 아니라는 시맨틱이면서 값이다.)

Infinity : 양수 무한대

-Infinity : 음수 무한대

• NaN은 자바스크립트의 특징이며 성향으로서, 되도록이면 프로그램이 죽지 않도록 하기위한 시맨틱이자 값 (숫자가 아니라는 값)

Not-a-Number 예
var point = 1 * "A";
log(point);
=> NaN

## String 타입

• 문자 타입으로 큰 따옴표("") or 작은 따옴표('') 사이에 작성한다.
• 최대 문자수는 2의 53승-1
• 큰 따옴표와 작은 따옴표를 같이 사용할 때 따옴표 작성 방법

var point = "책, '123'";
log(point);
=> 책, '123' 
( 큰 따옴표 안에 작성된 작은 따옴표도 출력 )

point = '책, "123"';
=> 책, "123"
( 작은 따옴표 안에 작성된 큰 따옴표도 출력 )

• 따옴표에 숫자를 작성하면 문자 타입이 된다.

var value = "123";
log(typeof value);
=> string

## Undefined 타입

• Undefined (대문자)는 스펙에서 사용하는 타입이다.
• undefined (소문자)는 값이다.
• 변수의 디폴트 값(Defatult)이다. 

var point;
log(point)
=> undefined
변수를 선언만 한 것으로, undefined가 초깃값으로 설정된다.

• undefined는 변수에 값을 할당하지 않은 것을 나타내는 시맨틱이다.
• 자바스크립트의 변수는 반드시 이름과 값을 갖는 구조가 되어야 한다.
• undefined는 값이므로, 변수에 할당할 수 있다.

var point = undefined;
log(point);
=> undefined

## Null 타입

• Null (대문자)는 스펙에서 사용하는 타입이다.
• null (소문자)는 값이다.

## null과 nudefined의 차이

• undefined는 단지 변수만 선언한 것 ( 변수에 undefined 값을 할당하지 않아도 변수는 undefined 값을 갖는다. )
• 하지만, null은 변수에 null값을 할당해야 값이 null이 된다.
• null은 의도적으로 값을 할당한 것으로 코드를 수행한 것이 된다.

var book;			// 변수만 선언한 것
log(book);

var point = null;	// null 값을 할당한 것
log(point);

=>
undefined
null

## Boolean 타입

• true, false

log(true);
log(false);

=>
true
false

## Object 타입

• Object (대문자) 형태는 아래와 같다. (콤마로 구분하여 여러개 사용 가능)

{name:value} 형태		// 이름-값(=키-값)

• 프로퍼티 (Property) : name과 value 하나(하나의 쌍)를 지칭한다. (위의 {name:value}를 의미)
• Object (대문자)는 프로퍼티의 집합이다. Object에는 프로퍼티를 작성하지 않아도 된다.(즉, 0개 이상의 프로퍼티 작성 가능)

var book = {
	title: "책", point: 123
};
log(book);
=>
{title: 책, point: 123}

# 자바스크립트의 기본 데이터 타입 정리

• 기본 데이터 타입을 Primitive 타입이라고 한다.

log(typeof 123);
log(typeof "문자열");
log(typeof true);
log(typeof undefined);

=>
number
string
boolean
undefined	// undefined는 값과 타입이 같다.

log(typeof null);
log(typeof {book: "책"});

=>
object	// typeof 연산자의 한계(설계 미스)
object