[JS - 코드팩토리] 1일차: 출력과 자료형

GPT가 그려준 썸네일. 글씨 뭉개짐 현상은 여전하다...

기본 출력

console.log('Hello World');
console.log(codefactory, '\n', $ive, '\n', _yuJin);

모든 언어에 기본적으로 있는 print문이다. 특이하게 vs code의 output에서 출력을 볼 때는 왼쪽 사진과 같이 문자 왼쪽에 바가 생겨 있었다. 다른 곳에서 출력해도 이와 같은 모양이 나올지는 잘 모르겠지만, 아마 vs code의 특이점으로 사료된다. GPT가 말하기로는 위 코드의 2번 라인과 같이 출력을 할 때와 console.log을 여러 번 사용했을 때의 차이는 없다고 했지만 GPT를 믿을 수가 없어서...^^

자료형

동적 타이핑

var age = 32;
let ive = '아이브';
const newJeans = '뉴진스';

다른 언어에서 int, float, string과 같은 자료형으로 선언을 하지만, js에서는 위와 같이 동적 타이핑을 사용한다는 점이 특이하게 느껴졌다. 

데이터 타입

1) Number (숫자)
2) String (문자열)
3) Boolean (불리언)
4) undefined (언디파인드)
5) null (널)
6) Symbol (심볼)
7) Object (객체)

#Number 타입

int, float, double 등 자료형이 크기나 형식에 따라 나뉘지 않는 것 역시 동적 타이핑의 일종이다. 검색해보니 이를 지칭하는 별도의 명칭은 따로 존재하지 않거나 있어도 자주 사용되지는 않아보인다. 
js가 이 방식을 채택한 이유는, 웹 페이지의 동적 동작을 빠르게 구현할 수 있는 언어로 설계되었기 때문이다. 따라서 모든 숫자를 64비트 부동소수점으로 관리하게 된다. 이로써 메모리 할당과 처리 속도를 최적화하였으며 빠르고 쉽게 배울 수 있는 언어가 되었다.

기본적인 것들은 다른 언어와 다를게 없으니 특수한 number 형들에 대해 추가적으로 알아보았다.

console.log(Number.MAX_VALUE);  // 1.7976931348623157e+308, 이보다 크면 Infinity.
console.log(1 / 0);     // Infinity = Number.POSITIVE_INFINITY
console.log(Number.MIN_VALUE);  // 5e-324, 이보다 작으면 0.
console.log(1 / -0);    // -Infinity = Number.NEGATIVE_INFINITY, negative zero.
console.log(0 / 0);       // NaN (정의되지 않은 연산)
console.log(Number.EPSILON);  // 2.220446049250313e-16, 부동소수점 연산의 오차범위.

1. Number.MAX_VALUE: js가 표현할 수 있는 가장 큰 양수.
   1. MAX_VALUE보다 큰 수는 Infinity로 간주. (무한으로 발산한다.)
2. Infinity: 양의 무한대, -Infinity: 음의 무한대.
3. Number.MIN_VALUE: js가 표현할 수 있는 가장 작은 양수.
   1. MIN_VALUE보다 작은 수는 Infinity로 간주. (0에 수렴한다.)
4. negative zero: -0. 
   1. 0과 -0을 비교하면 같은 값이 나오지만, Object.is로 비교하면 다른 값이 된다.
   2. 일반적으로는 구분하지 않으나 위의 예제와 같은 경우에 그 효과가 발휘된다.
5. NaN: 정의되지 않는 연산. 
   1. 위의 예제 이외에도 연산할 수 없는 자료형과의 연산 등에서 나타난다.
6. Number.EPSILON: 부동 소수점 연산의 오차 범위.
   1. 대표적 사례: 0.1 + 0.2 === 0.3 의 연산은 위의 오차로 인해 false이다.

#String 타입

const iveYuJin = '아이브\n안유진';
console.log(iveYuJin);
// 아이브
// 안유진

const iveWonYoung = '\'아이브\t장원영"';
console.log(iveWonYoung);
// '아이브    장원영"

const groupName = '아이브';
console.log(`${groupName} 안유진`);
//아이브 안유진

내가 배운 다른 언어들과 다르게 " ", ' ', ` ` 모두 string타입으로 간주된다.
가장 바깥을 감싸는 것과 다른 ", ', ` 를 각각 사용한다면 백슬레시 없이도 이 문자들을 그대로 사용 가능하다.
추가적으로, `(백틱)은 \n없이 enter를 치는 것만으로 줄바꿈을 할 수 있게 해주며 templater literal 기능 역시 ${}를 통해 가능해진다.

# undefined 타입 vs null 타입

둘 모두 '없다' 라는 뜻을 내포하고 있지만 undefined는 컴퓨터가, null은 개발자가 부여한다는 차이점이 있다. undefined를 직접적으로 사용하는 것은 코드의 흐름을 모호하게 하기 때문에 지양해야 한다.

#Symbol 타입

고유명사.

const symbol1 = Symbol('1');
const symbol2 = Symbol('1');

console.log(symbol1 === symbol2); //false

#Object 타입

const dictionary = {
    red: '빨간색',
    orange: '주황색',
    yellow: '노란색',
};

Object: key(문자열, symbol) - value의 쌍. map과 유사함.

const iveMembersArray = [
    '안유진',
    '가을',
    '레이',
    '장원영',
    '리즈',
    '이서',
];

Array: 값을 리스트로 나열.

기타: Map, Set, Date, RegExp, null, Error 등.

느낀 점

JavaScript를 공부한 첫날이다. 추석 연휴를 다 즐기고 마지막에 양심의 가책이 와서 찔끔 공부를 시작했다. 원래는 알고리즘도 한 문제 풀고 싶은데 집중이 안되어서 쉬운 걸로 한 문제만 풀었다.

JavaScript를 배우기로 결심한 이유는 내가 만든 Unity 프로젝트를 웹과 연동하여 각종 기능을 사용하고 싶은 마음이 들었기 때문이다. 일단 현재는 여러 서버 중 firebase의 사용을 궁극의 목표로 하고 있다.
물론 firebase는 기본적으로 GUI로 각종 기능을 제공하지만, 일단 가볍게 한 번 배워두면 앞으로도 js를 사용한는 데에 두려움을 줄일 수 있을 것 같아 기본기로써 미리 배워두고 싶었다.

오늘 공부를 하면서 언어를 배울 때 왜 쓸데없이 '개요' 단원부터 시작해서 이 언어의 목적을 배우는건지 느낄 수 있었다. 정작 다른 언어를 학교에서 처음 배울 때(ex: C++, java)는 개요 단원을 지루해하기만 했는데 막상 개요 없이 바로 본론부터 들어가니 가르쳐줄 교수님 없이 유튜브와 함께 독학해서인지는 몰라도 각종 궁금증이 샘솟았다. (학교에서는 궁금증이 샘솟을 틈도 없이 잠을 먼저 이겨내야 한다...)