TIL | #01 | 자바스크립트 기초 | 23.11.29.(수)

23.11.29.(WED).TIL.

Part.01 Hello World

0. 시작하기 전에..

프로그래밍 언어는 왜 이렇게 많을까?

- 컴파일 여부
- 성능/안정성과 편의성의 Trade-off 관계
- 패러다임

컴퓨터 언어의 분류

- 분류 기준 : 컴파일 시점과 방법

- 컴파일 언어
  - C언어, Java 등
- 인터프리터 언어
  - Python, Javascript

Garbage Collection이란?

- 쓰레기 수집(Garbage Collection)은 메모리 관리 기법 중의 하나로, 프로그램이 동적으로 할당했던 메모리 영역 중에서 필요없게 된 영역을 해제하는 기능이다. 영어를 그대로 읽어 가비지 컬렉션이라 부르기도 한다. 1959년 무렵 리스프틔 문제를 해결하기 위해 존 매카시가 개발하였다.
- 출처 : 위키백과 : https://ko.wikipedia.org/wiki/쓰레기_수집_(컴퓨터_과학)

프로그래밍 패러다임이란?

- 개발자에게 개발의 관점을 갖게 해주고, 결정하는 역할을 함.
- 객체지향 프로그래밍
  - 개발자가 프로그램을 상호작용하는 객체들의 집합으로 볼 수 있게 함.
- 함수형 프로그래밍
  - 상태값을 지니지 않는 함수값들의 연속으로 볼 수 있게 함.

- 패러다임
  - 특정한 방법론 / 사고의 흐름을 공유

- 패러다임이 왜 중요한데?
  - 각 언어는 특정 패러다임과 관련된 문법을 지원하기도 하고 지원하지 않기도 하기 때문.

우리가 이런 것들 왜 배워야 하냐?

- 컴퓨터는 생각보다 멍청하고, 어떠한 마법같은 신기한 일은 일어나지 않으며, 반대로 당연한 것도 하나도 없어서, 항상 궁금해야 한다.

Javascript 환경 설정

const a = 1;
if (a + 1 == 2){
  const a = 2;
  console.log("if문 안의 a 값은 " + a);
}
console.log("if문 밖의 a 값은 " + a);

 

코드 구조

문

문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미합니다.

세미콜론

- 자바스크립트는 줄 바꿈이 있으면 이를 '암시적' 세미콜론으로 해석한다.
  - 세미콜론 자동 삽입 (automatic semicolon insertion)
- 대부분의 경우, 줄 바꿈은 세미콜론을 의미함. 하지만 '대부분의 경우'가 '항상'을 의미하진 않는다.
- 반면, 세미콜론이 정말로 필요하지만 자바스크립트가 이를 추정하지 '못하는' 상황도 존재한다.

주석

- 한 줄짜리 주석은 두 개의 슬래시 // 로 시작된다.
- 여러 줄의 주석은 슬래시와 별표 /*로 시작해 별표와 슬래시 */로 끝난다.
- Ctrl + / 를 사용하면 해당 줄의 코드를 한 줄짜리 주석으로 처리할 수 있으며, 여러 줄의 주석은 Ctrl + Shift + / 를 통해 처리할 수 있다.
- 중첩 주석은 지원하지 않는다. (에러 발생)

엄격 모드

use strict

- 이 지시자가 스크립트 최상단에 오면 스크립트 전체가 "모던한" 방식으로 동작한다.
- "use strict" 는 스크립트 최상단에 있어야 한다는 점을 잊지 말자.
- 개발한 기능을 테스트하기 위해 브라우저 콘솔을 사용하는 경우, 기본적으로 use strict가 적용되어 있지 않다는 점에 주의해야 한다.
- 추후 배우게 되는 클래스와 모듈을 사용하여 코드를 구성하게 된다면 use strict를 생략해도 된다. 하지만 아직 배우지 않았으니 "use strict"를 귀한 손님처럼 모시도록 하겠다.

변수? 표현식? 문?

변수?

- 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용하기 위해 변수라는 매커니즘을 이용한다.

- 변수명 : 저장된 값을 식별할 수 있는 고유의 이름
- 변수 값 : 변수에 저장된 값
- 변수 할당 : 변수에 값을 저장하는 행위
- 변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위
- 변수 참조 : 변수에 할당된 값을 읽어오는 것

표현식과 문

- '표현식'은 언어로 치면 '구절'입니다.
- '문(statement)'은 언어로 치면 '문장'입니다.

1. 자료와 변수

"어떠한" "데이터를", "어디에", "어떻게"

1. 꼭 데이터를 저장해서 사용한다의 관점을 갖고 공부를 하면 좋다.
2. 자바스크립트는 "동적 타이핑" 언어이다. 우리가 타입을 지정해 줄 필요는 없지만, 그렇다고 타입이 없는 것은 절대 아니며, 타입과 관련된 처리는 자바스크립트의 특정한 규칙을 통해 처리됩니다. 언젠가 타입스크립트를 사용할 수 있겠지만, 그렇지 않은 동안에는 자바스크립트가 타입을 처리하는 "특정한 규칙"을 숙지하지 않으면 큰 오류를 마주하게 됩니다.

변수와 상수

변수

- 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소'
- let으로 선언하여 사용
- var는 let과 거의 동일하게 동작함.
- 다만 var는 '오래된' 방식임. → 일단 넘어가자.

변수 명명 규칙

1. 변수명에는 오직 문자, 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
2. 첫 글자는 숫자가 될 수 없다.

- 예약어 목록에 있는 단어는 변수명으로 사용할 수 없다.
  - 예약어 예시 : let, class, return, function

상수

- 변화하지 않는 변수를 선언할 땐, let 대신 const를 사용한다.
- 이렇게 const로 선언한 변수를 '상수(constant)라고 부른다.
- 상수는 재할당 할 수 없다.

요약

- let : 모던한 변수 선언 키워드
- var : 오래된 변수 선언 키워드
- const : 변수의 값 변경 불가

참고)

C, C++에서 const와 define이라는 키워드가 있다. 둘 다 고정된 값을 사용하지만, const는 메모리를 할당받고, #define은 메모리를 차지하지 않는다는 것이다.

자료형

자바스크립트에서 값은 항상 문자열이나 숫자형 같은 특정한 자료형에 속한다.

자바스크립트의 변수는 자료형에 관계없이 모든 데이터일 수 있다. 따라서 변수는 어떤 순간에 문자열일 수 있고 다른 순간엔 숫자가 될 수 있다.

숫자형

숫자형엔 일반적인 숫자 외에 Infinity, -Infinity, NaN 같은 '특수 숫자 값(special numeric value)'이 포함된다.

- Infinity는 어떤 숫자보다 더 큰 특수 값, 무한대(∞)를 나타낸다.
- NaN은 계산 중에 에러가 발생했다는 것을 나타내주는 값이다. 부정확하거나 정의되지 않은 수학 연산을 사용하면 계산 중에 에러가 발생하는데, 이때 NaN이 반환된다.

BigInt

- 내부 표현 방식 때문에 자바스크립트에서는 9007199254740991보다 큰 정수 혹은 -9007199254740991보다 작은 정수는 '숫자형'을 사용해 나타낼 수 없다.
- 암호 관련 작업 같이 아주 큰 숫자가 필요한 상황이거나 아주 높은 정밀도로 작업을 해야 할 때는 이런 큰 숫자가 필요하다.

문자형

1. 큰따옴표 : "Hello"
2. 작은따옴표 : 'Hello'
3. 백틱 : `Hello`

불린형

- true와 false 두 가지 값밖에 없는 자료형이다.

'null' 값

- null 값은 지금까지 소개한 자료형 중 어느 자료형에도 속하지 않는 값이다.
- null 값은 오로지 null 값만 포함하는 별도의 자료형을 만든다.
- 자바스크립트의 null은 자바스크립트 이외 언어의 null과 성격이 다르다. 다른 언어에선 null을 '존재하지 않는 객체에 대한 참조'나 '널 포인터(null pointer)'를 나타낼 때 사용한다.
- 하지만 자바스크립트에선 null을 '존재하지 않는(nothing)' 값, '비어 있는(empty)' 값, '알 수 없는(unknown)' 값을 나타내는 데 사용한다.

'undefined' 값

- undefined 값도 null 값처럼 자신만의 자료형을 형성한다.
- undefined는 '값이 할당되지 않은 상태'를 나타낼 때 사용한다.'
- 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다.

객체와 심볼

- 객체 (object) 형은 특수한 자료형이다.
- 심볼 (symbol) 형은 객체의 고유한 식별자(unique identifier)를 만들 때 사용된다.

typeof 연산자

- 인수의 자료형을 반환한다.

1. 연산자 : typeof x
2. 함수 : typeof(x)

typeof x를 호출하면 인수의 자료형을 나타내는 문자열을 반환한다.

- null의 typeof 연산은 "object"인데, 이는 언어상 오류이다. null은 객체가 아니다.

형변환

문자형으로 변환

문자형으로의 변환은 무언가를 출력할 때 주로 일어난다. String(value)을 사용하면 문자형으로 명시적 변환이 가능하다.

숫자형으로 변환

숫자형으로의 변환은 수학 관련 연산시 주로 일어난다.

불린형으로 변환

불린형으로 변환은 논리 연산 시 발생한다.

기본 연산자와 수학

용어 : '단항', '이항', '피연산자'

- 피연산자 : 연산자가 연산을 수행하는 대상
- 단항 연산자 : 피연산자를 하나만 받는 연산자
- 이항 연산자 : 두 개의 피연산자를 받는 연산자

수학

- 덧셈 연산자 : +
- 뺄셈 연산자 : -
- 곱셈 연산자 : *
- 나눗셈 연산자 : /
- 나머지 연산자 : %
- 거듭제곱 연산자 **

나머지 연산자 %

- 나머지 연산자를 사용한 표현식 a % b는 a를 b로 나눈 후 그 나머지를 정수로 반환해준다.

거듭제곱 연산자 **

- 거듭제곱 연산자를 사용한 a ** b를 평가하면 a를 b번 곱한 값이 반환된다.

이항 연산자 '+'와 문자열 연결

- 이항 연산자 +의 피연산자로 문자열이 전달되면 덧셈 연산자는 덧셈이 아닌 문자열을 병합(연결)한다.

단항 연산자 +와 숫자형으로의 변환

- 숫자에 단항 덧셈 연산자를 붙이면 이 연산자는 아무런 동작도 하지 않는다. 그러나 피연산자가 숫자가 아닌 경우엔 숫자형으로의 변환이 일어난다.

연산자 우선순위

순서를 기억할 필요는 없지만, 동일한 기호의 단항 연산자는 이항 연산자보다 우선순위가 더 높다는 것에 주목해주길 바란다.

17위 : 단항 덧셈 : +
17위 : 단항 부정 : -
16위 : 지수 : **
15위 : 곱셈 : *
13위 : 덧셈 : +
13위 : 뺄셈 : -
3위 : 할당 : =

할당 연산자

무언가를 할당할 때 쓰이는 =도 연산자이다.

복합 할당 연산자

let n = 2;
n += 5; // n은 7이 된다. (n = n + 5와 동일.)

증가-감소 연산자

- 증가 연산자 ++는 변수를 1 증가시킨다.
- 감소 연산자 --는 변수를 1 감소시킨다.

비트 연산자

- 비트 AND (&)
- 비트 OR ( | )
- 비트 XOR ( ^ )
- 비트 NOT ( ~ )
- 왼쪽 시프트 (<<)
- 오른쪽 시프트 (>>)
- 부호 없는 오른쪽 시프트 (>>>)

쉼표 연산자

쉼표 연산자 , 는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해준다. 이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의해야 한다.

let a = (1 + 2, 3 + 4);

alert( a ); // 7 (3 + 4의 결과)

// 한 줄에서 세 개의 연산이 수행됨
for (a = 1, b = 3, c = a * b; a < 10; a++) {
    ...
}

비교 연산자

불린형 반환

- true가 반환되면, '긍정', '참', '사실'을 의미한다.
- false가 반환되면, '부정', '거짓', '사실이 아님'을 의미한다.

문자열 비교

- 자바스크립트는 '사전' 순으로 문자열을 비교한다. 사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단된다.
- 정확히는 사전 순이 아니라 유니코드 순이다.

다른 형을 가진 값 간의 비교

- 비교하려는 값의 자료형이 다르면 자바스크립트는 이 값들을 숫자형으로 바꾼다.

일치 연산자

동등 연산자(equality operator) ==은 0과 false를 구별하지 못한다.

0과 false는 어떻게 구별하냐?

일치 연산자(strict equality operator) === 를 사용하면 형 변환 없이 값을 비교할 수 있다.

함정 피하기

- 일치 연산자 === 를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 특별히 주의하기를 바란다.
- 또한, undefined나 null이 될 가능성이 있는 변수가 <, >, <=, >=의 피연산자가 되지 않도록 주의하기를 바란다. 명확한 의도를 갖고 있지 않은 이상 말이다. 만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가하기를 바란다.

논리 연산자

|| (OR)

- 전통적인 프로그래밍에서 OR 연산자는 불린값을 조작하는 데 쓰인다. 인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다.

첫 번째 truthy를 찾는 OR 연산자 '||'

OR 연산자의 활용 방안
1. 변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기
2. 단락 평가

&& (AND)

- 전통적인 프로그래밍에서 AND 연산자는 두 피연산자가 모두 참일 때 true를 반환한다. 그 외의 경우는 false를 반환한다.

첫 번째 falsy를 찾는 AND 연산자 '&&'

- AND 연산자는 첫 번째 falsy를 반환한다. 피연산자에 falsy가 없다면 마지막 값을 반환한다.

! (NOT)

- NOT 연산자는 인수를 하나만 받고, 다음 순서대로 연산을 수행한다.

1. 피연산자를 불린형(true / false)으로 변환한다.
2. 1에서 변환된 값의 역을 반환한다.

 

* 출처 : 내배캠 깃북