2023.12.04 TIL - JS Handbook(변수, 자료형, 연산자, 조건문, 배열, 반복문, 함수)

Innes·2023년 12월 4일

TIL(Today I Learned)

목록 보기

11/147

📖 오늘의 공부 📖

Javascript Handbook

Part 01. Hello World

Part 02. 조건문

Part 03. 배열과 반복문

참고

https://nbcamp.gitbook.io/javascript-handbook/

https://ko.javascript.info/

Part 01. Hello World

1. 변수(Variable)

이름이 붙은 저장소!
let : 변수 생성(선언)
(만들어진지 오래된 스크립트에서는 var를 사용하기도 함)
= (할당 연산자) : 변수 안에 데이터 저장
한 줄에 여러 변수 선언 가능 : ,(콤마)
변수 명명 규칙
- 문자, 숫자, 기호($, _)만 가능
- 첫 글자에 숫자는 불가
- 대소문자 구별함
- 예약어는 사용 불가(ex. let, class, fuction 등)
const : 변화하지 않는 변수 선언하기(let 대신 사용)
(full name: constant - '상수')

2. 자료형

(javascript : 8가지 기본 자료형)

1) 숫자형(number type)

정수, 부동소수점 숫자(floating point number)
연산 : *(곱), /(나누기), +(덧셈), -(뺄셈) 등
특수 숫자 값(specail numeric value) : Infinity, -Infinity, NaN
- Infinity : 무한대 ∞ (어떤 숫자든 0으로 나눌 경우)
- NaN : 계산 중 에러 발생(부정확하거나 정의되지 않은 수학 연산 사용할 경우)
  -> 현실에선 특수 숫자 값을 숫자로 취급 X
  -> javascript에서는 숫자형으로 분류함

2) BigInt

길이에 상관없이 정수를 나타낼 수 있음
정수의 한계는 ±253
정수 리터럴 끝에 n을 붙이면 됨

3) 문자형(string)

빈 문자열, 글자들로 이루어진 문자열
따옴표 or 백틱으로 작성 ('', "", \``)
백틱 안에 ${ } 사용하여 원하는 변수나 표현식을 문자열 중간에 손쉽게 넣을 수 있습
단일 문자는 '문자형'이 아니라 그냥 글자(character)

4) 불린형(boolean)

논리 타입
true(긍정), false(부정)

5) null 값

null값만을 위한 독립 자료형
알 수 없는 값
- 다른 언어에서는 : '존재하지 않는 객체에 대한 참조’나 '널 포인터(null pointer)'를 나타낼 때 사용
- JS에서는 : ‘존재하지 않는(nothing)’ 값, ‘비어 있는(empty)’ 값, ‘알 수 없는(unknown)’ 값을 나타내는 데 사용

6) undefined 값

undefined 값만을 위한 독립 자료형
값이 할당되지 않은 상태
ex) 변수는 선언했지만, 값을 할당하지 않은 상태일 때

7) 객체(object)와 심볼(symbol)

객체 : 데이터 컬렉션이나 복잡한 개체(entity)를 표현할 수 있음
심볼 : 객체의 고유한 식별자(unique identifier)를 만들 때 사용

8) typeof 연산자

피연산자의 자료형이 무엇인지 알려줌
자료형에 따라 처리 방식을 다르게 하고 싶거나 변수의 자료형을 빠르게 알아내고자 할 때 유용

3. 형변환(type conversion)

1) 문자형으로 변환

문자형의 값이 필요할 때 사용
string(value) 함수 호출

2) 숫자형으로 변환

수학과 관련된 함수와 표현식에서 자동으로 일어남
number(value) 함수 호출
문자 기반 폼(form)을 통해 입력받은 값을 숫자형 값으로 변환해야 할 때 사용
숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN
숫자형으로 변환 시 적용되는 규칙

전달받은 값	형 변환 후
undefined	NaN
null	0
true and false	1 과 0
string	문자열의 처음과 끝 공백이 제거됨

3) 불린형으로 변환

입력된 값을 true, false값으로 변환함
Booleaan(value) 호출
변환 규칙

전달받은 값	형 변환 후
0, null, undefined, NaN, ""	false
그 외의 값(" "(공백), "0"도 포함)	true

### 4. 기본 연산자와 수학 **1) 들어가기 앞서** - 피연산자(operand)(=인수argument) - 5*2 -> 피연산자는 5와 2 - 단항(unary)연산자 : 피연산자를 하나만 받음 - -1에서의 -(마이너스) - 이항(binary)연산자 : 피연산자를 두개 받음 - 5 - 2에서의 -(마이너스)

2) 연산자

덧셈 연산자 +
뺄셈 연산자 -
곱셈 연산자 *
나눗셈 연산자 /
나머지 연산자 % : 몫X, 나머지 출력
- remainder operator
- 나머지(remainder)를 정수로 반환
거듭제곱 연산자 **
- exponentiation operator
- ex) a ** b : a를 b번 곱한 값이 반환
- 분수를 활용하면 제곱근을 알 수 있음
- ex) alert( 8 ** (1/3) ) // 2

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

문자열을 + : 문자열 병합(연결)
하나가 문자열이면 다른 하나도 문자열로 변환되어 출력됨
ex) alert( 2+2+'1' ) // 41 (221 X)
(순서대로 연산되기 때문)
다른 연산자는 피연산자가 문자열, 숫자열인 경우 숫자열로 변환 후 출력됨

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

ex)
- alert( +true ); // 1
- alert( +"" ); // 0
number(...)와 동일한 수행

5) 연산자 우선순위(precedence)

동일한 기호인 경우의 우선순위
-> 단항 연산자 > 이항 연산자

6) 복합 할당 연산자

let n = 2;
n += 5; (n = n + 5와 동일) // n은 7이 됨
n *= 2; (n = n * 2와 동일) // n은 14가 됨
alert(n); // 14

4. 기본 연산자와 수학

1) 들어가기 앞서

피연산자(operand)(=인수argument)
- 5*2 -> 피연산자는 5와 2
단항(unary)연산자 : 피연산자를 하나만 받음
- -1에서의 -(마이너스)
이항(binary)연산자 : 피연산자를 두개 받음
- 5 - 2에서의 -(마이너스)

2) 연산자

덧셈 연산자 +
뺄셈 연산자 -
곱셈 연산자 *
나눗셈 연산자 /
나머지 연산자 % : 몫X, 나머지 출력
- remainder operator
- 나머지(remainder)를 정수로 반환
거듭제곱 연산자 **
- exponentiation operator
- ex) a ** b : a를 b번 곱한 값이 반환
- 분수를 활용하면 제곱근을 알 수 있음
- ex) alert( 8 ** (1/3) ) // 2

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

문자열을 + : 문자열 병합(연결)
하나가 문자열이면 다른 하나도 문자열로 변환되어 출력됨
ex) alert( 2+2+'1' ) // 41 (221 X)
(순서대로 연산되기 때문)
다른 연산자는 피연산자가 문자열, 숫자열인 경우 숫자열로 변환 후 출력됨

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

ex)
- alert( +true ); // 1
- alert( +"" ); // 0
number(...)와 동일한 수행

5) 연산자 우선순위(precedence)

동일한 기호인 경우의 우선순위
-> 단항 연산자 > 이항 연산자

6) 복합 할당 연산자

let n = 2;
n += 5; (n = n + 5와 동일) // n은 7이 됨
n *= 2; (n = n * 2와 동일) // n은 14가 됨
alert(n); // 14

5. 비교 연산자

불린값(true, false)을 반환함
유의 : '같음' 비교 연산자에는 ==을 씀(=는 할당 연산자)
같지 않음 : a != b

1) 문자열 비교

사전 뒤쪽의 문자열 > 사전 앞쪽의 문자열
소문자 > 대문자
(정확히는 사전순이 아닌 유니코드 순)

2) 다른 형 간의 비교

자료형이 다른 값을 비교하는 경우
-> 숫자형으로 변환 후 비교
ex)

let a = 0;
alert( Boolean(a) ); // false

let b = "0";
alert( Boolean(b) ); // true

alert(a == b); // true!

-> 비교 연산자 == 는 숫자형으로 변환 후 비교함
-> "0"도 0으로 변환 후 비교하기 때문에 a==b는 true

3) 일치 연산자(strict equality operator)

===
두 값의 자료형이 다른 경우
-> 형 변환 없이 비교 가능
a와 b의 형이 다를 경우, a === b는 즉시 false를 반환
ex)

alert( 0 === false ); 
alert( null === undefined ); // false

참고 1) ==로 null, undefined 비교하면 ture

alert( null == undefined ); // true

참고 2) undefined는 null외 다른 값과 비교 불가

Part 02. 조건문

1. if문

if (...) : 결과를 불린값으로 변환
else절 : false일 때 실행됨
else if : 복수 조건 처리하기
조건부 연산자 ?
- ex)
```
let result = condition ? value1 : value2;
```
- 평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2가 반환

2. switch문

복수의 if 조건문을 switch문으로 바꿀 수 있음
하나 이상의 case문으로 구성됨
일치 비교로 조건을 확인
자료형의 중요성
- 비교하려는 값과 case문 값의 형과 값이 같아야 해당 case문이 실행됨

Part 03. 배열과 반복문

1. 배열

순서가 있는 자료를 저장하고 관리하는 용도에 최적화된 특수한 자료구조

1) 배열 선언

선언 방법(대부분 두번째 배열로 선언)

// 대괄호 (가장 많이 쓰이는 방법임)
let arr = [item1, item2...];

// new Array (잘 쓰이지 않음)
let arr = new Array(item1, item2...);

배열내 요소의 순서 : 0부터 시작
배열 내 요소 순서 변경, 새 요소 추가 가능
- ex)

let fruits = ["사과", "오렌지", "자두"];
fruits[2] = '배'; // 배열이 ["사과", "오렌지", "배"]로 바뀜
fruits[3] = '레몬'; // 배열이 ["사과", "오렌지", "배", "레몬"]으로 바뀜

length 프로퍼티
- 요소 몇개인지 파악 가능
- 수정 가능(기존 요소 개수보다 작은 수로 length를 수정하면 해당 값 뒤의 요소들이 삭제됨(되돌릴 수 X)

**2) pop, push와 shift, unshift

큐(queue)
- 배열을 사용해 만들 수 있는 대표적인 자료구조
- 배열과 마찬가지로 순서가 있는 컬렉션을 저장하는 데 사용
- push : 맨 끝에 요소 추가
- shift : 맨 앞 요소 제거
- 선입선출(First-In-First-Out, FIFO) : 먼저 집어넣은 요소가 먼저 나옴
스택(stack)
- '한쪽 끝’에 요소를 더하거나 뺄 수 있게 해주는 자료구조
- push – 맨 끝에 요소 추가
- pop – 스택 끝 요소 추출
- 후입선출(Last-In-First-Out, LIFO) : 가장 나중에 집어넣은 요소가 먼저 나옴
배열 끝에 무언가를 해주는 메서드
- pop : 배열 맨 끝 요소를 제거하고, 제거한 요소를 반환
- push : 배열 맨 끝에 요소 추가
배열 앞에 무언가를 해주는 메서드
- shift : 배열 맨 앞 요소 제거하고, 제거한 요소를 반환
- unshift : 배열 맨 앞에 요소 추가
요약 : 배열의 맨 앞이나 맨 끝에 요소 추가, 제거 메서드
|요소|기능|
|:---------|:--------|
|arr.push(...items)|맨 끝에 요소 추가|
|arr.pop()|맨 끝 요소 제거|
|arr.shift()|맨 앞 요소 제거|
|arr.unshift(...items)|맨 앞에 요소 추가|

3) 다차원 배열

let matrix = [
  [1, 2, 3],
  [4, 5, 6],
  [7, 8, 9]
];

alert( matrix[1][1] ); // 5, 중심에 있는 요소

2. 배열과 메서드

1) 요소 추가, 제거 메서드

arr.splice( ) : 요소 추가, 삭제, 교체가 모두 가능
'삭제된 요소들'을 배열로 반환
문법

arr.splice(index[, deleteCount, elem1, ..., elemN])

index : 첫 번째 요소를 가리킴
deleteCount : 제거하고자 하는 요소의 개수
elem1, ..., elemN : 배열에 추가할 요소
ex 1)

let arr = ["I", "study", "JavaScript"];

arr.splice(1, 1); // 인덱스 1부터 요소 한 개를 제거

alert( arr ); // ["I", "JavaScript"]

ex 2)

let arr = ["I", "study", "JavaScript", "right", "now"];

// 처음(0) 세 개(3)의 요소를 지우고, 이 자리를 다른 요소로 대체합니다.
arr.splice(0, 3, "Let's", "dance");

alert( arr ) // now ["Let's", "dance", "right", "now"]

deleteCount 0으로 설정 : 요소를 제거하지 않으면서, 그 자리에 새로운 요소 추가 가능
음수 인덱스 사용 가능(맨 끝부터 -1, 순서가 왼쪽으로 -1씩 증가)
slice
- 문법
```
arr.slice([start], [end])
```
- start(end를 제외한) end인덱스까지의 요소를 복사한 새로운 배열을 반환

-arr.concat : 새로운 배열을 만들거나 기존 배열에 요소를 추가할 때 사용

2) 배열 탐색 메서드

배열 내에서 무언가 찾고 싶을 때 사용
indexOf, lastIndexOf, includes

3) forEach로 반복작업 하기

주어진 함수를 배열 요소 각각에 대해 실행
문법

arr.forEach(function(item, index, array) {
  // 요소에 무언가를 할 수 있습니다.
});

3. 반복문(loop)

동일한 코드를 여러 번 반복 가능
반복(iteration, 이터레이션)

1) while 반복문

각 반복이 시작하기 전에 조건을 확인
문법

while (condition) {
  // 코드
  // '반복문 본문(body)'이라 불림
}
- condition(조건)이 truthy 이면 반복문 본문의 코드가 실행
<br>

**2) `do...while` 반복문**
- 각 반복이 끝난 후에 조건을 확인
- 문법
```javascript
do {
  // 반복문 본문
} while (condition);

condition을 반복문 본문 아래로 옮길 수 있음
조건이 truthy 인지 아닌지에 상관없이, 본문을 최소한 한 번이라도 실행하고 싶을 때만 사용

3) for 반복문

각 반복이 시작하기 전에 조건을 확인, 추가 세팅 가능
문법

for (begin; condition; step) {
  // ... 반복문 본문 ...
}

4) 반복문 빠져나오기 break

본문 가운데 혹은 본문 여러 곳에서 조건을 확인해야 하는 경우, '무한 반복문 + break’ 조합을 사용하면 좋음

Part 04. 함수

1. 함수

유사한 동작을 하는 코드가 여러 곳에 필요할 때, 중복 없이 유사한 동작하는 코드를 여러 번 호출할 수 있음

중요 용도는 '중복 코드 피하기'!!

함수 선언(function declaration)
- 키워드, 함수 이름, 괄호로 둘러싼 매개 변수를 차례로 작성
- ex)

function showMessage() {
  alert('안녕하세요');
}

지역 변수(local variable) : 함수 내에서 선언한 변수(함수 안에서만 접근 가능)
외부 변수(outer variable) : 함수 외부의 변수(함수 내에서 접근 가능)
전역 변수(global variable) : 같은 이름을 가진 지역 변수에 의해 가려지지만 않는다면 모든 함수에서 접근 가능
매개변수(=인자)(parameter) : 임의의 데이터를 함수 안에 전달 가능

😮 오늘의 발견

개인 토이프로젝트 github 배포하려고 파일을 올렸는데 계속 404 File not found 에러가 떴다.
stack overflow도 확인해보고, 댓글에 올라와있는대로 수정도 해보다가 겨우 해결했다.

시도 방법
1) 파일 이름 수정 Wedding_Invitation -> _삭제 (실패)
2) 파일 이름 index로 수정 (실패)
3) 파일 이름 index.html로 수정 (실패)
4) 파일 이름 index로 유지, 폴더 명 변경 (성공!)
(Wedding Invitation -> WeddingInvitation)

결론
📖 아하... 폴더 명에 공백 있으면 안되는구나...

Innes

무서운 속도로 흡수하는 스펀지 개발자 🧽

이전 포스트

2023.12.01 TIL - Firebase addDoc, getDoc / Github 배포 방법

다음 포스트