2023-09-05 사전캠프 2일차 TIL

JavaScript Handbook 정리 (09/05)

프로그램 언어

- 컴파일 여부
컴파일: 유저가 작성한 소스코드를 컴퓨터가 이해할 수 있는 언어 (0과 1)로 변환하는 작업
컴파일 언어 (C, Java) : 프로그램 실행 전 소스코드를 기계어로 변환함, 컴파일 시간이 오래걸림, 에러 발생율 낮음.
인터프리터 언어 (Python, Javacript) : 소스코드 한 줄씩 해석하고 실행, 별도의 컴파일이 필요하지 않음, 에러 발생율 높음.

- 성능/안정성과 편의성의 Trade-off 관계 
Trade-off : 한가지를 취하면 다른 것은 포기해야하는 관계
일반적으로 성능/안정성이 뛰어나면 편의성이 떨어진다.
예를 들어, 메모리 관리를 할 때 유효하지 않은 메모리(Garbage)를 c언어에서는 유저가 직접 정리해야하지만, Java나 JavaScript 같은언어 에서는 자동으로 판단하고 관리한다.
적절한 때에 사용자가 직접 관리를하면 효율적인 프로그램을 작성할 수 있지만, 직접해야하기 때문에 편의성이 떨어진다.

"따라서 프로그램 언어는 상황과 환경에 따라서 시작해야한다."


프로그래밍 패러다임이란?
프로그래머에게 프로그래밍 관점을 갖게 해주는 것.
특정 프로그램을 작성할 때 설계단계와 개발, 문제 해결을 수행하는데 있어 주요하게 작용하는 특정한 방법론과 사고의 흐름을 공유 하는 것.

프로그래밍 패러다임이 중요한 이유는
프로그래밍 언어들은 특정 패러다임과 관련한 문법을 지원할 수도 있고 지원하지 않을 수도 있기 때문이다.
지원 여부에 따라서 특정 프로그래밍 언어의 패러다임을 따질 수 있다.
대표적으로 "절차형", "객체지향형", "함수형" 패러다임이 있다.

이러한 내용을 궁금해 해야하는 이유
1. 앞으로 공부를 할때 마주하게 될 용어들과 친숙해 질 수 있다.
2. 컴퓨터는 생각보다 멍청하며, 우리가 알아야할 내용은 너무 방대하다. 앞으로 개발을 하면서 항상 능동적으로 학습하는 태도가 필요하다.

---

코드 구조

- 문 
문(statement)은 어떤 작업을 수행하는 문법구조와 명령어를 의미한다.
코드에는 원하는 만큼 문을 작성할 수 있으며, 각 문은 세미콜론(;)으로 구별된다.
자바스크립트에서는 줄바꿈이 발생하면 '암시적' 세미콜론으로 해석이됨, 이를 세미콜론 자동삽입이라고 함.

// 문 작성 예시
console.log('Hello'); console.log('World'); //가독성 떨어짐

console.log('Hello'); //줄바꿈을 통해 가독성이 높아짐
console.log('World'); 
 
// 세미콜론 자동 삽입 예시
console.log('Hello') console.log('World') // SyntaxError발생

console.log('Hello') // 세미콜론 자동삽입
console.log('World')

// 불완전한 표현식 예시, 표현식이 마무리 되지 못한 상태에서는 세미콜론 자동삽입이 일어나지 않음
console.log(1
    +
    2);

대괄호 앞에서는 세미콜론 자동삽입이 적용되지 않는다.
이러한 경우들이 있기 때문에 세미콜론을 입력하는 습관을 가져야한다.

- 주석 
주석은 작성한 코드를 이해하고 설명하기 위해 사용하며, 자바스크립트 엔진에서는 주석을 무시한다.

대표적인 사용법에는 
//... (한줄 주석),
/* ... */ (여러줄 주석) 이 있다.

---

엄격 모드
자바스크립트는 오랫동안 사용되고, 웹 프론트엔드 언어로 표준화가 되었다.
오랜시간동안 호환성에 문제가 없던 이유는 기존의 기능을 변경한 것이 아닌 새로운 기능을 추가하였기 때문이다.

그러던 중 자바스크립트 ES5 업데이트에서는 일부 기능이 변경되고 새로운기능이 추가되었다.
기존의 기능이 변경되었음에도 호환성에 문제가 없는 이유는 특별지시자인 "use strict"를 사용할 때만 모던한 방식으로 동작하게 하였기 때문이다.

-use strict
해당 명령어는 스코프의 최상단에 위치해야한다.
최상단이 아니라 다른곳에 위치하면 해당 명령어는 유효하지 않는다.
또한 use strict를 통해 엄격모드가 활성화 되면 취소할 방법은 없다.

엄격모드는 클래스와 모듈을 사용한 코드라면 자동으로 적용되기 때문에 사용하지 않아도 된다.
클래스나 모듈을 사용하지 않는다면 'use strict'를 통해서 엄격모드 환경에서 개발을 하는 것이 좋다.

---

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

문 : 실행을 통해 동작을 수행하는 것 (프로그램의 상태에 영향)

표현식 : 평가를 통해 값으로 판단되는 문 (프로그램의 상태에 영향 없음)

---

alert : 알림창으로 ok 버튼을 클릭하면 없어짐
 - alert("보여줄 내용");

prompt : 알림창으로 사용자 입력을 받을 수 있음. (확인, 취소 버튼)
값으로 판단되기에 변수에 할당 가능.
값을 입력하지 않으면 null 값으로 판단됨
 - let value = prompt("보여줄 내용",[기본값(default)])
   console.log(value); // 입력한 내용
** ([]) 대괄호 내에 들어간 값은 선택사항

confirm : 확인/취소 버튼을 가진 알림창으로 true/false 를 반환시킴
 - let valueConfirm = confirm("완료하시겠습니까?");
   console.log(valueConfirm); // 확인이면 true, 취소면 false

---

변수는 데이터를 저장할 때 쓰이는 이름이 붙은 저장소

자바스크립트에서는 let을 이용하여 변수를 생성한다.

변수 선언 간 중복 선언이 되면 SyntaxError 발생

변수의 이름은 카멜케이스나 스네이크 케이스를 주로 사용하며,
다음의 규칙을 따른다
1. 변수명에는 오직 문자와 숫자 그리고 기호 $와 _만 들어갈 수 있다.
2. 첫 글자는 숫자가 될 수 없다.
3. 대소문자를 구분한다.
4. 예약어는 변수의 식별자가 될 수 없다.

변수는 내용인 값을 변경할 수 있지만 변화하지 않는 값을 가질 때는 const를 사용한다.

상수를 변경하려고 하면 TypeError가 발생한다.

값을 변경할 수 없는 const의 특징을 이용한 표기법이 있다.
- 대문자 상수
기억하기 힘든 값을 변수에 할당해 별칭으로 사용
페이지가 로드되기전에도 정해져 있는 값은 대문자 상수사용
const COLOR_RED = "#F00";

변수 명은 항상 이해하고 알아보기 쉽게 명명해야한다.

---

자료형
자바스크립트에서 값은 항상 특정한 자료형에 속한다.

자바스크립트에는 여덟가지의 자료형이 있다.
또한 자바스크립트의 변수는 모든 자료형을 값으로 가질 수 있기 때문에 매순간 자료형이 변화할 수도 있다. => 동적타입 언어

1. 숫자형
2. BigInt (2^53 -1 보다 큰정수를 표현)
3. 문자열
4. 불린형
5. null
6. undefined
7. 객체
8. 심볼

각 변수에 있는 값이 어떤 자료형인지 알아보기 위해
typeof x / typeof(x) 와 같은 문법을 사용
자료형을 문자열로 반환해준다.

---

배열

요소를 더하거나 지우기
push(...items) – 맨 끝에 요소 추가하기
pop() – 맨 끝 요소 추출하기
shift() – 첫 요소 추출하기
unshift(...items) – 맨 앞에 요소 추가하기
splice(pos, deleteCount, ...items) – pos부터 deleteCount개의 요소를 지우고, items 추가하기
slice(start, end) – start부터 end 바로 앞까지의 요소를 복사해 새로운 배열을 만듦
concat(...items) – 배열의 모든 요소를 복사하고 items를 추가해 새로운 배열을 만든 후 이를 반환함. items가 배열이면 이 배열의 인수를 기존 배열에 더해줌
원하는 요소 찾기
indexOf/lastIndexOf(item, pos) – pos부터 원하는 item을 찾음. 찾게 되면 해당 요소의 인덱스를, 아니면 -1을 반환함
includes(value) – 배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함
find/filter(func) – func의 반환 값을 true로 만드는 첫 번째/전체 요소를 반환함
findIndex는 find와 유사함. 다만 요소 대신 인덱스를 반환함
배열 전체 순회하기
forEach(func) – 모든 요소에 func을 호출함. 결과는 반환되지 않음
배열 변형하기
map(func) – 모든 요소에 func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦
sort(func) – 배열을 정렬하고 정렬된 배열을 반환함
reverse() – 배열을 뒤집어 반환함
split/join – 문자열을 배열로, 배열을 문자열로 변환함
reduce(func, initial) – 요소를 차례로 돌면서 func을 호출함. 반환값은 다음 함수 호출에 전달함. 최종적으로 하나의 값이 도출됨
기타
Array.isArray(arr) – arr이 배열인지 여부를 판단함

---

반복문 
- while
- do...while
- for(;;)

---

함수
표현식과 선언문 중 우선적으로 선언문을 사용 권장
화살표 함수는 규모가 작은 함수를 선언할 때 유용
스프레드 문법은 인수의 개수를 모를때 유용, 다수의 인수를 받을 때 사용하기 유용