javascript 5강~6강(데이터타입, 연산자)

2019-10-03

Web, coding, develop, javascript

JavaScript 5강~6강 예습

5강 : 데이터 타입
1. 데이터 타입이란?
2. 메모리 공간 확보
3. 데이터 타입이 필요한 이유
4. 값
5. 값의 생성
6. 데이터 타입의 분류(종류)
7. 동적 타이밍
6강 : 연산자
1. 표현식 과 연산자
2. 문
3. 문 vs 표현식
4. 표현식인 문 vs 표현식이 아닌 문
5. 완료값
6. 연산자
  - 산술연산자
  - 문자열 연결 연산자
  - 할당연산자
  - 비교연산자
  - 대소 관계 연산자
  - 삼항 조건 연산자
  - 논리 연산자
  - 쉼표 연산자
  - typeof 연산자
  - 지수 연산자

5강

데이터타입

데이터타입 이란?

값의 종류를 의미하며, 자바스크립트의 모든 값은 데이터 타입을 지닌다.

메모리 공간 확보

자바스크립트 엔진은 데이터타입, 즉 값의 종류에 따라 적절한 크기의 메모리 공간을 지닌다.

예를들면 다음과 같다. ( 데이터타입에 따라 확보되는 메모리공간의 크기는 브라우저 제조사마다 다를 수 있다. )

1 2	var score = 100; // 위와 같이 숫자를 입력할 경우 자바스크립트 엔진은 데이터타입을 숫자로 인식하고 메모리 공간을 8byte 내주게된다.

데이터 타입이 필요한 이유

값을 저장할 때 필요한 메모리 공간의 크기를 결정하기 위함
값을 참조할 때 한번에 읽어들일 메모리 공간의 크기를 결정하기 위함
메모리에서 읽어 들인 2진수를 어떻게 해석할 지를 결정하기 위함

값

더 이상 평가할 수 없는 하나의 표현식

실제 메모리 공간에 저장되는 최소 단위

1 2	10 + 20 // 10 + 20은 표현식이고 이로 인해 나온 결과 30은 더이상 평가할 수 없는 값이다.

값의 생성

리터럴 표기법
표현식으로 생성.

리터럴

소스 코드 내에서 직접 만들어 낸 고정된 값 자체.

사람이 이해할 수 있는 표기법으로 값의 생성을 자바스크립트 엔진에게 명령

리터럴	-
정수 리터럴 / 부동 소숫점 리터럴	100 / 10.5
2진수(0b) / 8진수 리터럴(ES 6도입, 0o) / 16진수 리터럴(ES 6도입, 0x)	0b01000001 / 0o101 / 0x41
문자열 리터럴	‘Hello’ , “World”
불리언 리터럴	true , false
null 리터럴 / undefined 리터럴	null / undefined
정규표현식 리터럴	ab+c
객체 리터럴	{ name: ‘Lee’, age : 20 }
배열 리터럴	[ 1, 2, 3 ]
함수 리털럴	function( ){ }

표현식

값을 생성하는 다양한 방법

리터럴, 식별자(변수 혹은 함수 등), 연산자, 함수 호출등의 조합

하나의 값으로 평가될 수 있는 문(식)

// 리터럴 표현식
10
'Hello'

// 식별자 표현식(선언이 이미 존재한다고 가정)
sum
person.name
arr[1]

// 연산자 표현식
10 + 20
sum = 10
sum !== 10

// 함수/메소드 호출 표현식(선언이 이미 존재한다고 가정)
square()
person.getName()

데이터 타입의 분류(종류)

원시타입
- 숫자(number) 타입: 숫자 (정수, 실수)
- 문자열(string) 타입: 문자열
- 불리언(boolean) 타입: 논리적 참(true)과 거짓(false)
- undefined 타입: 선언은 되었지만 값을 할당하지 않은 변수에 암묵적으로 할당되는 값
- null 타입: 값이 없다는 것을 의도적으로 명시할 때 사용하는 값
- Symbol 타입: ES6에서 새롭게 추가된 7번째 타입
객체 타입 / 참조 타입(object/reference type): 객체, 함수, 배열 등

숫자(number) 타입

자바스크립트는 Java , C처럼 정밀하게 숫자들을 나눠 놓은 형식은 없다.
모든 숫자들은 실수로 처리를 하여 표현한다. ( 정수만을 위한 특별한 타입은 존재하지 않는다. )
모든 숫자(정수, 실수, 음의정수, 2진수, 8진, 16진수)는 메모리에 배정밀도 64비트 부동소수점 형식의 2진수로 저장된다.
2진수, 8진수, 16진수를 별도로 제공을 안하기 때문에 이 값들을 참조하면 모두 10진수로 해석한다.

// 숫자 타입은 모두 실수로 처리된다.
console.log(1 === 1.0); // true
console.log(4 / 2);     // 2
console.log(3 / 2);     // 1.5

+ 추가로

숫자 타입은 3가지 특별한 값들도 표현이 가능하다.

Infinity : 양의 무한대
-Infinity : 음의 무한대
NaN : 산술 연산 불가(not a number)

// 숫자 타입의 3가지 특별한 값
console.log(10 / 0);       // Infinity
console.log(10 / -0);      // -Infinity
console.log(1 * 'String'); // NaN

//+ 자바스크립트는 대소문자 구별을 하기에 NaN을 NAN, nan, Nan등으로 적으면 에러가 발생한다.
var x = nan; // ReferenceError: nan is not defined

문자열 타입

텍스트 데이터를 나타내는데 사용한다.

16bit 유니코드 문자들의 집합으로 전세계 대부분의 문자가 표현이 가능하다.

작은 따옴표(‘’), 큰따옴표(“”), 백틱(`) 안에 텍스트를 넣어 생성한다.

가장 일반적인 표기법은 작은 따옴표를 이용한다.

문자열은 원시타입이며 변경 불가능한 값이다. 문자열은 한번 생성되면, 그 문자열은 변경할 수 없다는 것을 의미한다.

템플릿 리터럴

ES6 생긴 새로운 무자열 표기법.

백틱 문자 ` 를 사용한다.

특징1 : 일반적인 문자열에서는 줄바꿈이 허용되 않는다. 공백을 표현하기 위해서는 \로 시작하는 이스케이프 시퀀스를 이용해야만하는데 템플릿 리터럴은 여러줄에 걸쳐 문자열을 작성시 공백을 있는 그대로 출력해준다.

onst template = `<ul class="nav-items">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>`;

console.log(template);

특징2 : 문자열은 문자열 연산자를 사용해 연결한다. 하지만 템플릿 리터럴은 연산자 없이도 문자열 삽입기능을 제공 하며 이를 문자열 인터폴레이션 이라 한다. $ { 표현식 } : 이에 대한 평가 결과는 강제로 문자열이 된다

// 기본적인 문자열 연산자를 이용한 문자열 연결
console.log('나이는 : ' + 25 + '살 입니다.' );

//문자열 인터폴레이션
var age = "나이는";
var num = 25;

console.log('${age} ${num} 살 입니다.');

console.log(`1 + 1 = ${1 + 1}`); // 1 + 1 = 2 강제 문자열

불리언 타입

불리언(boolean) 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐이다.

undefined 타입

선언은 되어있지만 아직 값을 할당하지 않는 변수에 접근할 경우 undefined가 반환된다.

이는 자바스크립트 엔진의 암묵적 초기화에 의한 것이다.

변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 ‘할당된 적인 없는 변수라는 것’ 을 개발자는 간파가 가능하다.

개발자가 의도적으로 변수에 undefined를 할당한다면 혼란을 줄 수 있으므로 권장하지 않는다.

자바스크립트의 정의와 선언의 차이

자바스크립트에서 선언은 식별자가 생성되었지만 값이 아직 할당되지 않은 상태를 말한다.
자바스크립트에서 정의는 식별자가 생성되었고 값까지 할당되어 있는 상태를 의미한다.

// 변수 선언. 내부적으로 undefined로 정의된다.
var foo;
// 변수 선언과 정의
var bar = 1;
// 함수 정의. 식별자가 암묵적으로 생성되고 함수 객체가 할당된다.
function baz { }

null 타입

변수에 값이 없다는 것을 의도적으로 명시 할 때 사용한다.

변수에 null을 할당하는 것은 변수가 이전에 참조하던 값을 더이상 참조하지 않겠다는 의미.

자바스크립트는 대소문자를 구별(case-sensitive)하므로 null은 Null, NULL등과 다르다. (반드시 null로 써야한다.)

<script>
    var element = document.querySelector('.myElem');

    // HTML 문서에 myElem 클래스를 갖는 요소가 없다면 null을 반환한다.
    console.log(element); // null
  </script>

document.querySelector 메소드는 조건에 부합하는 HTML 요소를 검색할 수 없는 경우, 에러 대신 null을 반환.

변수에 null을 할당하게 되면, 이는 더 이상 해당 변수의 값을 참조하지 않겠다는 것을 의미. 따라서 자바스크립트 엔진은 누구도 참조하지 않는 해당 변수의 메모리공간에 대해서 가비지 콜렉션을 수행할 것이다.

symbol 타입

ES6에서 새롭게 추가된 7번째 타입. 변경 불가능한 원시 타입의 값.

주로 이름의 충돌 위험이 없는 객체의 유일한 프로퍼티 키를 만들기 위함

사용방법 : Symbol 함수를 호출해 사용한다.

/// 심볼 값 생성
var key = Symbol('key');
console.log(typeof key); // symbol

// 객체 생성
var obj = {};

// 심볼 key를 이름의 충돌 위험이 없는 유일한 프로퍼티 키로 사용한다.
obj[key] = 'value';
console.log(obj[key]); // value

obj["key"] = "value";
console.log(obj);

Symbol_answer

똑같은 key : value라는 이름의 키와 값을 객체에 넣었는데 전혀 충돌이 나지 않고있다.

또한 Object.keys(obj) 를 찍어보면 Symbol은 나타나지 않고 일반적인 키와 값만 출력한다.

객체 타입

자바스크립트의 6가지 데이터 타입 이외에 모든 것은 전부 객체 타입이다.

객체타입은 추후에 마져 공부한다.

동적 타이밍

자바스크립트 변수는 선언이 아닌 할당에 의해 타입이 결정된다. 그리고 재할당에 의해 변수의 타입은 언제든지 동적으로 변할 수 있다.

// JAVA , C의 경우. int라는 키워드를 통해 이미 정수라는 타입이 결정되었음.
int a;

// javascript , var때문이 아닌 값이 5 라는것을 통해 숫자 타입이라는 것을 알게됨.
var a = 5;

// + 추가로 javascript는 언제든지 동적으로 값에 의해 변수의 타입이 변할수있다.
var a = "hello world"; // a는 숫자 타입에서 "hello world" 라는 문자열 타입으로 변경되었다.

이러한 편리한 구조속에 동적 타이밍은 다음과 같은 단점을 지니고있다.

동적으로 변화하는 데이터 타입을 추척하기 어려울 수 있다. (즉, 확인하기 전까지는 데이터 타입의 값을 확신하기 힘들다.)
동적 타입 언어는 유연성(flexibility)은 높지만, 신뢰성(reliability)이 떨어진다.
따라 안정적인 프로그램 개발을 위해서는 데이터 타입을 체크해야하는 경우가 있는데 이러한 방식은 코드량의 증가를 야기한다. 코드량의 증가는 결국 버그발생률을 높이게 되며, 테스트 분량 또한 증가시킨다. 따라서 다음과 같은 변수 사용 주의사항이 있다.

변수 사용 주의사항

변수의 사용을 적극적으로 줄인다. 변수의 개수가 많으면 많을수록 오류가 발생할 확률은 높아진다.
전역 변수는 사용하지 않는다. 변수의 생명주기를 최대한 짧게 만든다.
변수보다는 상수를 사용해 값의 변경을 억제한다.
변수 이름은 변수의 존재 이유를 파악할 수 있도록 명명한다.

6강

표현식과 연산자

표현식이란?

리터럴 , 식별자(변수 혹은 함수의 이름) , 연산자, 함수호출등의 조합

표현식은 평가되어 하나의 값을 만든다.

1 2	var x = 10; x + 30; // 40

위 예제에서 x+30이 표현식이다. + 연사자는 좌항과 우항의 값을 연산하는 연산자이고 좌항과 우항에는 숫자값이 위치해야한다.

우항은 30이라는 리터럴 표현식 이 좌항에는 x라는 식별자 표현식이 와있고 이 두개의 조합으로이해 40이라는 값을 낼수있다.

문(statement)

문이란?

하나 이상의 표현식과 키워드 조합으로 구서된 자바스크립트 엔진에게 내리는 명령

문의 집합으로 이루어진 것이 프로그램이며 문을 작성하고 나열하는 것이 프로그래밍이다.

문은 코드블록( {내용} )을 제외하고는 ; 으로 끝나야만 한다.

자바스크립트의 모든 코드는 문 또는 표현식이다. 표현식은 그 자체로 문이 될수도 있지만, 반대로 문은 표현식이 될수는 없다.

문 vs 표현식

표현식은 평가되어 값을 만들지만 그 이상의 행위는 할 수 없다.

문은 선언문과 같이 var, let, const, function, class와 같은 선언 키워드를 사용하여 변수나 함수, 클래스를 생성하기도 하고 if, for, while 문과 같은 제어문을 생성하여 프로그램의 흐름을 제어하기도 한다.

결론적으로, 표현식의 역할은 값을 생성하는 것. 문의 역할은 표현식으로 생성한 값을 사용해 JS엔진에게 명령을 내리는 것.

표현식인 문 / 표현식이 아닌 문

표현식인 문은 값으로 평가가 가능하다.

표현식이 아닌 문은 값으로 평가가 불가능하다.

1 2	var x; // 변수 선언문. -> 값으로 평가가 불가능하다. x = 300; // 할당문. x는 300이라는 값으로 평가가 가능하다.

완료값

크롬 개발자 도구에서 표현식이 아닌 문은 언제나 undefined를 출력한다.

이를 완료 값(Completion value)이라 한다.

완료 값은 다른 값과 같이 변수에 할당할 수 없다.

연산자

연산자란?

하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입연산등을 수행해 하나의 값을 만든다.

연산의 대상을 피연산자라 칭한다.

산술 연산자

피연산자를 대상으로 수학적 계산을 하여 새로운 숫자 값을 만든다. 연산이 불가능할 경우에는 NaN을 출력한다.

부수효과 : 피연산자의 값은 변경하는 것.

이항 산술 연산자 ( ex - var a = 1+2; ) : 피연산자끼리 계산을 하여 새로운 값을 만든다.

이항 산술 연산자 의미 부수 효과

+ 덧셈 X

- 뺄셈 X

* 곱셈 X

/ 나눗셈 X

% 나머지 X

이항 산술 연산자	의미	부수 효과
+	덧셈	X
-	뺄셈	X
*	곱셈	X
/	나눗셈	X
%	나머지	X

단항 산술 연산자 ( ex - var a = 0; a++; )

단항 산술 연산자	의미	부수 효과
++	증가	O
–	감소	O
+	숫자 타입이 아닌 피연산자를 숫자타입으로 변환.	X
-	양수를 음수로 음수를 양수로 반전화 시킨다.	X

단항 산술 연산자의 ++ , –는 어느 위치냐에 따라 피연산자에 대한 값의 증가 및 감소처리의 로직이 달라질수 있다.

var x = 5, result;

// 선할당 후증가 (Postfix increment operator)
result = x++;
console.log(result, x); // 5 6

// 선증가 후할당 (Prefix increment operator)
result = ++x;
console.log(result, x); // 7 7

// 선할당 후감소 (Postfix decrement operator)
result = x--;
console.log(result, x); // 7 6

// 선감소 후할당 (Prefix decrement operator)
result = --x;
console.log(result, x); // 5 5

+ 단항 연산자는 숫자 타입의 피연산자에게 어떠한 영향도 주지 않는다.

숫자타입이 아닌 피연산자에게 적용시 강제로 숫자타입으로 반환 해준다.

// 문자열을 숫자로 타입 변환한다.
+'10'; // -> 10

// 불리언 값을 숫자로 타입 변환한다.
+true; // -> 1

// 불리언 값을 숫자로 타입 변환한다.
+false; // -> 0

// 문자열을 숫자로 타입 변환할 수 없으므로 NaN을 반환한다.
+'Hello'; // -> NaN

- 단항 연산자는 양수의 숫자타입을 음수로 바꾸거나,

+ 단항 연사자처럼 숫자타입이 아닌 피연사자를 강제로 음수 숫자타입으로 바꾸어 반환해준다.

// 부호를 반전한다.
-(-10); // -> 10

// 문자열을 숫자로 타입 변환한다.
-'10'; // -> -10

// 불리언 값을 숫자로 타입 변환한다.
-true; // -> -1

// 문자열을 숫자로 타입 변환할 수 없으므로 NaN을 반환한다.
-'Hello'; // -> NaN

문자열 연결 연산자

+ 연산자는 피연산자 중 하나 이상이 문자열인 경우 문자열 연결 연산자로 동작한다.

1 + 2 // 3
'1' + 2 // '12'
1 + true // 2 true : 1
1 + false // 1 false : 0
1 + null // 1 null : 0
1 + undefined // NaN : undefined 는 숫자로 타입 변환되지 않는다.

true / false / null 등은 강제로 숫자타입으로 변환 후 연산을 실행한 것을 알 수 있다.

이를 암묵적 타입 변환 혹은 타입 강제 변환이라고 한다.

할당 연산자

할당 연산자	예	동일 표현	부수 효과
=	x = 5	x = 5	O
+=	x += 5	x = x + 5	O
-=	x -= 5	x = x - 5	O
*=	x *= 5	x = x * 5	O
/=	x /= 5	x = x / 5	O
%=	x %= 5	x = x % 5	O

물론 문자열도 할당 연산자를 적용시킬 수 있다.

var str = 'My name is ';

// 문자열 연결 연산자
str += 'Lee'; // str = str + 'Lee';

console.log(str); // 'My name is Lee'

비교 연산자

비교연산자는 좌항과 우항의 피연산자를 비교한 다음 그 결과를 boolean 값으로 반환한다.

비교연산자	의미	사례	설명	부수효과
==	동등 비교	x == y	x와 y의 값이 같다.	X
===	일치 비교	x === y	x와 y의 값과 타입이 같다.	X
!=	부동등 비교	x != y	x와 y의 값이 다르다.	X
!==	불일치 비교	x !== y	x와 y의 값과 타입이 다르다.	X

동등 비교와 부동등 비교의 경우 피연산자끼리 비교할 때, 타입이 다른 경우 암묵적인 타입 변환을 통해 타입을 일치 시킨 후에 값이 같은지 비교를 한다. 따라서 타입이 다른 경우에도 true를 반환 할 수 도 있다.

반면에 일치비교와 불일치비교는 타입 과 값이 모두 비교를 하기에 좀 더 예측하기가 쉽다.

일치비교의 주의점 : NaN === NaN // false : NaN은 자신과 일치하지 않은 유일한 값

NaN을 조사할 때에는 빌트인 함수 inNaN을 사용해야한다.

1
2
3

isNaN(NaN); // true
isNaN(10); // false
isNaN(10 + undefined); // true

대소 관계 비교 연산자

조건문 이나 반복문에서 자주 사용되는 연산자로 boolean 값을 반환한다.

// 대소 관계 비교
5 > 0;  // -> true
5 > 5;  // -> false
5 >= 5; // -> true
5 <= 5; // -> true

삼항 조건 연산자

삼항 조건 연산자 표현식은 값으로 평가할 수 있는 표현식인 문이다.

자바스크립트의 유일한 삼항 연산자이며 부수효과는 없다.

마치 조건문을 짧게 줄여놓은 형식이다.

조건식 ? 조건식이 true일때 반환할 값 : 조건식이 false일 때 반환할 값

? 앞에 나오는 조건식은 불리언 타입의 값으로 평가가 된다. (즉 (ture)1인지 (false)0인지 본다는 뜻 )

만약 조건식 평가 결과가 불리언 값이 아니라면 불리언 값으로 암묵적 타입 변환을 실행한다.

var x = 2;

// 2 % 2는 0이고 0은 false로 암묵적 타입 변환된다.
var result = x % 2 ? '홀수' : '짝수';

console.log(result); // 짝수

논리 연산자

논리 연산자는 항상 불리언 값을 반환한다.

피연산자는 불리언 타입으로 암묵적 타입 변환을 한다.

논리 연산자	의미	부수효과
\|\|	논리합( OR )	X
&&	논리곱( AND )	X
!	부정( NOT )	X

<주의> 논리합 연산자( || ) 와 논리곱 연산자( && ) 의 결과가 항상 불리언 값이 아닐수도 있다.

1 2	// 단축 평가 'Cat' && 'Dog'; // -> 'Dog'

쉼표 연산자

쉼표(,) 연산자는 왼쪽 피연산자부터 차례대로 피연산자를 평가하고 마지막 피연산자의 평가가 끝나면 마지막 피연산자의 평가 결과를 반환한다.

1 2	var x, y, z; x = 1, y = 2, z = 3; // 3

typeof 연산자

typeof 연산자는 자신의 뒤에 위치한 피연산자의 데이터 타입을 문자열로 반환한다.

종류는 총 7개다

string
number
boolean
undefined
symbol
object
function

typeof ''              // -> "string"
typeof 1               // -> "number"
typeof NaN             // -> "number"
typeof true            // -> "boolean"
typeof undefined       // -> "undefined"
typeof Symbol()        // -> "symbol"
typeof null            // -> "object"
typeof []              // -> "object"
typeof {}              // -> "object"
typeof new Date()      // -> "object"
typeof /test/gi        // -> "object"
typeof function () {}  // -> "function"

주의점

NaN은 number로 반환한다.
null값을 object로 반환한다. ( JavaScript의 첫 버그 )

2번째 주의점인 null 타입 확인은 typeof 대신에 일치연산자 ( === ) 을 사용한다.

var foo = null;

typeof foo === null; // -> false
foo === null;        // -> true

지수연산자

ES7에서 새롭게 도입된 지수 연산자는 좌항의 피연산자를 밑으로, 우항의 피연산자를 지수로 거듭 제곱하여 숫자 타입의 값을 반환한다.

지수 연산자가 도입 전에는 Math.pow 함수를 이용하였다.

지수연산자	Math.pow(a,b)
5 ** 2 ; //25	Math.pow(5, 2); //25
5 ** 2.5; // 55.901699~	Math.pow(5, 2.5); // 55.901699~
5 ** 0 // 1	Math.pow(5, 0); // 1
5 ** -2 // 0.04	Math.pow(5, -2); // 0.04

음수를 거듭제곱의 밑으로 계산하려면 괄호로 묶어야 한다.

1
2
3

-5 ** 2;
// -> SyntaxError
(-5) ** 2; // -> 25

지수 연산자는 할당 연산자와 함께 이용이 가능하며, 모든 이항 연산자보다 우선순위가 높다.

// 할당 연산자와 함께 사용이 가능하다.
var num = 5;
num **= 2; // -> 25

// num ** 2를 행한 값과 * 4를 한다.
4 * num ** 2; // -> 100

TILJavascript-Preview