Step 2. JavaScript(2)

• Numbers

자바스크립트에서는 숫자를 이용해서 많은 연산이 가능하다.

var num = 1;
console.log(num); // 1

var num2 = num * 2;
console.log(num2); // 2

// %는 나머지를 구해주는 연산자이다.
var remainder1 = 30%4;
console.log(remainder1); // 2

var remainder2 = 100%5;
console.log(remainder2); // 0

// 알다시피 곱셈과 나눗셈이 더하기, 빼기보다 우선시로 실행된다.
var result = 3 + 7*2;
console.log(result); // 17

// 비교 또한 가능하다.
var result = 3 > 7;
console.log(result); // false

var result = 3 >= 1;
console.log(result); // true

var one = 5;
var two = 5;
console.log(one === two); // true

// 코드 길이를 줄일 수 있는 간단한 연산자들
var a = 1;
a += 1; // a = a + 1;
console.log(a); // 2

a += 2; // 4
a -= 1; // 3
a *= 3; // 9
a /= 3; // 3

a++; // 4
a--; // 3
a** // 실행 안됨
a// // 실행 안됨

// 유효하지 않은 연산
var a = 0;
var b = 0;
var c = a/b;
console.log(a/b); // NaN

// NaN인지 판별해주는 함수
console.log(isNaN(c)); // true

// 연산자가 어떤 종류의 값인지 판별해주는 연산자
var a = typeof 10; // 10의 유형이 무엇이느냐 -> number -> a = number
console.log(a); // number

 

• String, 문자열

var a = typeof 3;
console.log(a); // number

var number = 30;
var something = typeof number; // 30의 유형이 something에 저장되므로 something은 "number"이다.
console.log(number === something); // false
console.log(number == something); // false

큰따옴표, "" 혹은 작은 따옴표, ''로 표현되는 문자들을 String, 문자열이라고 한다. 위에서 3의 유형은 number이고 console.log로 a를 확인했을 때 문자열인 "number"가 출력된다.

 

something에는 30이라는 값이 저장된 number의 유형이 대입되는데, 30의 유형은 number라는 문자열이다. 따라서 console.log로 확인했을 때 30이라는 숫자가 저장된 number와 "number"라는 문자열이 저장된 something의 유형 자체부터 다르므로 false가 뜬다. 값 또한 30과 "number"로 다르기 때문에 ==으로 비교해도 false가 뜬다.

 

 - 문자열 붙이기

var s1 = "something";
var s2 = "else";
var result = s1 + s2;

console.log(result); // "somethingelse"

문자열을 더했을 때는 위의 결과처럼 서로 '붙여진다'.

 

 - 문자열 비교

var s1 = "abc";
var s2 = "abc";

var result = s1 === s2;
console.log(result) // true;

var s3 = "abc "; // 공백 포함
var s4 = "abc"; // 공백 미포함

var result2 = s3 !== s4; // !==는 서로 다른지 물어보는 연산자이다.
console.log(result2); // 서로 다르므로 true

 

 - 문자열 길이

var str1 = "abc";
console.log(str1.length); // 3

var str2 = "   "; // 공백 3칸
console.log(str2.length); // 3

console.log("graph-ql".length); // 8

 

 - 문자열 인덱스

var str = "abcdef";
console.log(str[0]); // "a"

console.log("cde"[2]); // "e"

인덱스는 위치를 나타낸다고 보면 된다. 인덱스는 항상 0부터 시작하므로 abcdef의 0번째는 a가 되고, cde의 2번째는 e가 된다.

 

 - 문자열 메서드

'6'.repeat(3); // 문자열 '6'을 3번 반복해 붙인다. '666'
'hi jun'.includes(' ju'); // ' ju'을 포함하고 있는가? true
'what are you doing?'.startsWith('what '); // 'what '으로 시작하는가? true
'I am doing FiNe'.endsWith('iNe'); // 'iNe'로 끝나는가? true
'Are you sure?'.indexOf(' yo'); // ' yo'가 시작되는 index는? 3
'Are you sure?'.indexOf('z'); // z가 포함되지 않다. indexOf는 이럴 때 -1을 반환한다.
'Are you sure?'.indexOf('are'); // indexOf는 대소문자를 구분한다. 따라서 이때도 -1을 반환한다.
'Yeah I am sure'.slice(2, 5); // 2번째와 5번째(5번째는 미포함)사이의 값들을 반환한다. 'ah '
'I?doubt?that'.split('?'); // ?을 기준으로 분리한다. (3) ['I', 'doubt', 'that']
'Why would you doubt my word?'.split(''); // ''안의 값들을 하나하나씩 분리한다.
// (28) ['W', 'h', 'y', ' ', 'w', 'o', 'u', 'l', 'd', ' ', 'y', 'o', 'u', ' ', 'd', 'o', 'u', 'b', 't', ' ', 'm', 'y', ' ', 'w', 'o', 'r', 'd', '?']
'You hAve BeEn DiSHonest'.toLowerCase(); // 소문자로 반환한다. 'you have been dishonest'
'No wAy!'.toUpperCase(); // 대문자로 반환한다. 'NO WAY!'

 

• Types, 유형들

자바스크립트에서 다뤄지는 값들의 종류는 총 7가지가 있다.

 

 - String, 문자열

var s1 = 'ju';
var s2 = 'n';
console.log(s1 + s2); // jun

console.log((s1 + s2)[1]); // u

var s3 = s1 + s2;
console.log(s3[2]); // n

따옴표를 이용해 표현하고, 문자열끼리는 더해질 수 있다.(정확히는 붙여지는 것)

 

또한 index를 사용해서 문자열의 각 부분에 접근할 수 있다.

 

 - Number, 숫자

덧셈과 뺄셈, 곱셈과 나눗셈이 가능하며 연산 우선 순위 또한 우리가 아는 바와 같다. Infinity나 -Infinity로 무한대 또한 표현 가능하다.

var i = Infinity;
console.log(typeof i); // number
console.log(i/1); // Infinity

 - Boolean, 논리값

true와 false 두 가지 값이 있다.

 

 - Undefined, 정의되지 않은 값

 

 - Null, 없음

undefined와 null이 '없음'을 나타내는 용도로 쓰인다는 점이 비슷해도, 대입한 적이 없는 변수(undefined)와 의도적으로 '없음'을 나타내는 경우(null)는 구분되어 사용된다.

 

 - Object, 객체

배열이나 함수와 같은 객체. 무언가로 이루어진 집단이라고 표현해도 될지 모르겠다.

const person = []; // 빈 객체 생성
person.name = 'jun'; // 빈 객체 내에 key와 value 생성(name이 key이고, 'jun'이 value다)
console.log(person.name); // 'jun'
console.log(person); // [name: 'jun']
console.log(typeof person); // object

const list = [1, 2, 3];
console.log(typeof list); // object

function foo() {};
console.log(typeof foo); // function