해당 글은 JS에 대한 지식을 쭉 정리하고 세부 글을 생성하기 위한 목적으로 작성하는 글입니다.
1. 출력하기
console.log(output);
2. 주석
// 한 줄 주석
/*
여러 줄 주석1
*/
/** 여러
* 줄
* 주석2
*/
3. 변수 선언
var data1;
let data2;
const data = 1;
선언
초기화
변수명 규칙
- 문자, 숫자, $, _(underscore) 가능
- 숫자로 시작할 수 없음
- 키워드(const, let 등)와 같은 예약어를 사용할 수 없음
변수명 컨벤션: camelCase, snake_case, PascalCase 등
변수 이름은 규칙과 약속이 존재하고 중요합니다. 추가적으로 중요한 것은 본인을 포함한 개발자가 변수 이름을 읽었을 때, 어디서 사용되는 변수인지 어떤 목적으로 사용되는 변수인지 알 수 있어야 한다는 것도 중요합니다.
4. 데이터 타입
원시 타입(Primitive type)
- string: 문자열. ''(작은따옴표), ""(큰 따옴표), ``(백틱, template literal)을 사용해 표현.
작은따옴표와 큰 따옴표를 같이 사용하고 싶은 경우 백틱 또는 escaping character
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals
- number: 정수, 실수를 포함한 숫자 + Infinity + NaN. 범위 -2^53 + 1 ~ 2^53 - 1.
- bigint: number보다 큰 범위를 표현하며 마지막에 n이 붙는다. ex) 123n.
https://blog.logrocket.com/how-to-use-javascript-bigint/
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/BigInt
- boolean: true, false 두 가지 값만 가는 데이터.
!!!! falsy(항상 false 값을 가지는 경우)!!!! https://developer.mozilla.org/ko/docs/Glossary/Falsy
- undefined: 사용자가 값을 초기화하지 않았을 때 지정되는 값.
- null: undefined와 달리 사용자가 명시적으로 값이 비어있음을 알리는 값. (주의) null의 타입 값은 object
- symbol: 유일무이한 값을 생성할 때 사용. Symbol 함수를 호출해 사용. ex) let a = Symbol('1'); let b = Symbol('1'); a === b;// false
객체 타입(Object type)
원시 타입을 제외한 나머지 데이터 타입을 의미한다
- object: key-value 쌍으로 이루어진 데이터. key로 접근하며 key는 항상 문자열이다.
- array: 값을 리스트로 나열할 수 있는 타입. 데이터로는 다양한 타입을 사용할 수 있다. index로 접근할 수 있으며 0부터 시작한다.
- function, map 등
js의 특징으로 static typing(타입 명시)이 아닌 dynamic typing(타입 추론)을 사용한다.
5. 호이스팅(Hoisting)
모든 변수 선언문이 코드의 최상단으로 이동되는 것처럼 느껴지는 현상.
console.log(name); // undefined
var name = 'nulzi';
console.log(name); // nulzi
let, const 또한 hoisting이 일어난다. 하지만 var와 다르게 접근할 수 없고 에러가 발생한다.
6. Operators(연산자)
산술 연산자
- +: 덧셈
- -: 뺄셈
- *: 곱셈
- /: 나눗셈
- %: 나머지
- **: 지수
증감 연산자
- ++
- --
할당 연산자
- =
- 산술연산자=
비교 연산자
- ==: 값의 비교
- ===: 값과 타입의 비교
- !=, !==
- <, >, <=, >=: 대소 비교
삼함 조건 연산자
- condition ? true : false
논리 연산자
- &&: and
- ||: or
- !: not
단축 평가
&&, ||를 사용해 원하는 값을 출력할 수 있다.
// && 앞 조건의 결과가 true이면 우측값 반환, false이면 좌측값 반환
console.log(true && 'nulzi'); // nulzi
console.log(false && 'nulzi'); // false
// || 앞 조건의 결과가 false이면 우측값 반환, true이면 좌측값 반환
console.log(true || 'nulzi'); // true
console.log(false || 'nulzi'); // nulzi
nullish 병합 연산자(nullish coalescing operator)
- condition ?? 대체: condition이 null 또는 undefined인 경우 대체하는 연산자
7. 메모리
메모리는 메모리 셀로 이루어져 있다. 메모리 셀마다 주소가 존재하며 일반적으로 16진수로 표현한다.
주소로 직접 접근하는 경우 실수를 했을 때 큰 문제가 발생할 수 있는데, 이를 방지하기 위해 변수명을 사용한다고도 할 수 있다. 또한 주소값은 복잡하기 때문에 변수명으로 대체한다고 볼 수도 있다.
8. 조건문
if문
if(condition) {
} else if(newCondition) {
} else {
}
switch문
switch(condition) {
case case1:
break;
case case2,case3:
break;
default:
break;
}
9. 반복문
for문
for(variable; rangeCondition; 증감) {
if(stopCondition) break;
if(skipCondition) continue;
}
// 중첩 가능
for() {
for() {
// ...
}
}
// for...of
for(element of string or array) {
// ...
}
// for...in
for(key(index) in object(index)) {
// ...
}
while문
while(condition) {
if(stopCondition) break;
if(skipCondition) continue;
}
// while문의 경우 조건을 확인하고 실행합니다.
// do ~ while문의 경우 실행이 한 번 이루어지고 조건문을 확인한다.
do {
if(stopCondition) break;
if(skipCondition) continue;
} while(condition)
10. coercion(타입 변환)
1. 명시적 타입 변환: 개발자가 직접 타입 변환을 하는 경우
let num = 1;
let str = num.toString();
let num2 = Number(str); // or parseInt(str);
// 실수 변환 parseFloat(str);
let bool = Boolean(num); // or !!num;
2. 암묵적 타입 변환: 언어 규칙에 의해 타입 변환이 된 경우
let num = 1;
let str = 1 + '';
let num2 = +str;
암묵적 타입 변환을 사용하게 되면 DX(Developer Experience, 개발자 경험) 측면에서 좋지 않다.
11. 함수(function)
개발자는 DRY하게 코드를 작성하는 것이 중요하다.
D - Don't
R - Repeat
Y - Yourself
그렇기에 변수를 사용해 같은 값을 저장해 반복해서 사용하고, 기능 또는 계산을 반복해서 사용하고 싶은 경우 함수에 저장해 반복해서 사용할 수 있다. 또한 변수 이름을 정할 때 의미를 담는 것이 중요하듯이 함수 이름 또한 의미를 담는 것이 중요하다.
함수를 사용하는 방법
// function 키워드
function funcName() {
// 기능 또는 계산, 또 다른 함수
}
let funcName = function () {
// 기능 또는 계산, 또 다른 함수
}
// arrow function(화살표 함수)
let funcName = () => {
// 기능 또는 계산, 또 다른 함수
}위 코드와 같이 정의를 하고 함수를 사용할 수 있습니다. 하지만 위 코드만 보면 내부에서만 값을 입력하고 사용해야 하기 때문에 불편합니다. 이를 해결해 주는 게 인자(인수, arguments) 또는 매개변수(parameter)라고 불리는 것을 사용하면 됩니다. 둘은 같은 것을 가리키지만, 함수에 입력받을 값을 매개변수라고 하고 함수에 입력하는 값을 인자라고 합니다.
https://developer.mozilla.org/ko/docs/Glossary/Parameter
이 외에도 기본값(default value), arguments 키워드, IIFE(Immediately Invoked Function Execution, 즉시 실행 함수) 등 여러 기능이 있습니다.
+) 자바스크립트에서 타입을 알 수 있는 방법은 typeof 키워드를 사용하는 것인데요. 'typeof 원하는 값'과 같이 코드를 사용하면 해당 값의 타입을 알 수 있습니다. 특정 타입임을 비교하는 키워드인 instanceof도 있습니다.
12. 배열 메서드
기본적으로 제공해 주는 함수는 다양하지만 그중에서 배열을 사용할 때 자주 사용하고, 활용하면 편리한 함수를 정리하겠습니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array
제공되는 함수는 크게 기본 배열에 영향을 주느냐의 여부로 구분할 수 있습니다.
영향을 주는 함수
- push(value)
- pop()
- shift()
- unshift(value)
- splice(start_index, erase_num+1)
영향을 주지 않는 함수
- concat(value or array)
- slice(start_index, end_index+1)
- join(separator = ',')
- sort(compCallbackFunc)
- reverse()
- map(callbackFunc)
- filter(callbackFunc)
- find(callbackFunc)
- reduce(callbackFunc)
...(spread operator) : 재미있는 연산자인데 객체나 배열을 얕은 복사(shallow copy)할 때 사용합니다.
13. 객체(Object)
객체 리터럴은 {}(중괄호, curly braces)를 이용해 생성할 수 있습니다. 키-값(key-value) 형태로 데이터를 저장합니다. 키는 항상 string 타입으로 저장됩니다. 또한 값으로 함수를 사용할 수 있습니다.
let obj = {
valueName: value,
// if valueName === value,
value,
funcName: function () {},
funcName() {},
...
}
// 접근
obj.valueName;
obj[valueName]
obj.funcName();
obj[funcName]();
+) 내부에서 필드에 접근하기 위해서 this 키워드가 등장합니다.
14. call by value, call by reference or copy by value, copy by reference
객체나 배열을 사용할 때 const 키워드를 사용해도 내부의 값이 변경되는 것을 경험할 수 있습니다.
왜 그렇게 되는가? [JS] 변수는 메모리에 어떻게 저장될까?(기본형, 참조형)
15. 에러 핸들링(try...catch)
try {
throw new Error('error');
} catch(error) {
console.log(error);
} finally {
conosole.log(final);
}
참고
인프런 9시간 JS 정복, 코드 팩토리, 2024.12.11
'개발' 카테고리의 다른 글
| [TS] TS Doc Handbook 1회독 - 1 (0) | 2025.02.06 |
|---|---|
| [JS] 한 번에 보는 JS 정리 2 (0) | 2025.01.22 |
| [주의] JS String.prototype.trim() (1) | 2024.11.22 |
| [VSCode] C++ 설치 및 실행(with windows) (1) | 2024.11.15 |
| [JS] 변수는 메모리에 어떻게 저장될까?(기본형, 참조형) (2) | 2024.11.14 |
