JS와 완전 초면은 아니지만, 그렇다고 친하다고 할 수도 없는 사람?
바로 나🙄...
천 리 길도 한 걸음부터 시작이랬다. 나중에 헷갈리지 않도록 기초도 차근차근 짚고 넘어가보자.
표기법 4가지
1. dash-case(kebab-case)
pizza-chicken2. snake_case
ice_cream_cake3. camelCase
custardCreamDonut4. ParcelCase
ChocolateCake*camelCase와 비슷하지만 첫글자도 대문자로 작성한다는 점이 다르다
*1,2는 html / css 에서 주로 많이 사용되고
3,4는 JS(특히 new라는 생성자 함수를 사용할 때 특수하게 활용되기도 함)에서 주로 쓴다
*JS는 Zero-Based Numbering 이다. (사실 html / css 를 제외한 프로그래밍 언어들이 다 그런듯)
주석
// 한 줄 메모
/* 한 줄 메모 */
/*
* 여러 줄
* 메모1
* 메모2
*/데이터 종류
크게 원시형(String, Number, boolean, Null, Undefined, Symbol, BigInt)과 참조형(배열, 객체)으로 나뉜다.
String(문자)
- 데이터를 넣을 때 따옴표를 사용한다.
"data" // 쌍따옴표
'data' // 따옴표
`data` // 백틱*백틱의 경우 보간법이라 해서 안쪽에 변수(${variableName})을 넣어줄 수 있다
(= 다른 데이터를 보간한다)
Number(숫자)
- 정수(1, 2, 3...) 및 부동소수점(1.2, 3.57...)이 있다.
let number = 123; // 정수
let opacity = 1.57; // 부동소수점*부동 소수점의 오류 해결 방법
// 숫자.toFixed(자릿수): 숫자를 고정 소수점 표기(자릿수)로 반환(문자)하기
// parseFloat(값): 주어진 값을 파싱해 부동소수점 실수로 반환(숫자)하기
const a = 0.1
const b = 0.2
a + b // 0.30000000000000004
parseFloat((a + b).toFixed(1)) // 0.3NaN(Not a Number)
숫자가 아닌 숫자를 나타낸다.
const num = 123
console.log(num + undefined) // NaNBoolean(논리형, 참or거짓)
- 참(true)과 거짓(false) 두 가지 값 밖에 없는 논리 데이터.
let checked = true;
let isShow = false;
console.log(checked); // true
console.log(isShow); // falseUndefined
- 값이 할당되지 않은 상태.
- 변수는 선언했지만, 값을 할당하지 않았다면 해당 변수에 undefined가 자동으로 할당된다.
let name;
console.log(typeof name); // undefined*혹은 아예 존재하지 않는 데이터도 undefined를 뱉어낸다
Null
- 어떤 값이 의도적으로 비어있음을 명시할때 사용한다.
*의도적으로 null값을 넣는다
undefined와 null의 차이
무엇인가 없다는 것을 의미하는 건 똑같지만 의도적(명시적)이냐 의도적이지 않느냐(암시적) 하는 차이가 있음 (null은 일부러 값을 넣어주지 않는한 자연적으로 생기지 않음)
Symbol(심볼)
- 유일한 식별자(unique identifier)를 만들고 싶을 때 사용.
- 심볼에 붙이는 설명(심볼 이름)은 어떤 것에도 영향을 주지 않는 이름표 역할만을 한다. 동등 연산자(==)로 비교시 false가 반환 됨.
- 객체 프로퍼티 키. 숫자형, 논리형 모두 불가능하고 오직 문자형과 심볼형만 가능.
BigInt
- 자바스크립트에서는 큰 정수를 다룰때 오류가 나는 이슈가 있다. 때문에 큰 정수를 안전하게 다루기 위한 용도로 쓰인다.
- BigInt는 그 자체로서 하나의 데이터 타입이므로 Number와는 별개이다. 비교하려면 동등연산자(==)를 사용하거나 하나를 다른 데이터 유형으로 변환해야한다.
- 정수 뒤에 n을 붙이거나 BigInt()를 호출해서 사용한다.
// n 붙이기
console.log(1234567890123456789012345678901234567890n)
// BigInt()로 호출하기
console.log(BigInt('1234567890123456789012345678901234567890'))Object(객체)
- 여러 데이터를 key:value 형태로 저장하는 데이터들의 집합.
let user = {
// Key: Value,
name: 'BAE',
age: 18,
isValid: true
};
console.log(user.name); // BAE
console.log(user.age); // 17
console.log(user.isValid); // trueArray(배열)
- 여러 데이터를 순차적으로 저장함.
let dessert = ['Cold dessert', 'Hot dessert', 'Frozen dessert'];
console.log(dessert[0]); // Cold dessert
console.log(dessert[1]); // Hot dessert
console.log(dessert[2]); // Frozen dessertVariable(변수)
- 데이터를 저장할 때 쓰이는 ‘이름이 붙은 저장소’.
const a = 8;
console.log(a); // 8
a = 10;
console.log(a); // TypeError: Assignment to constant variable.-
const, let 키워드를 사용해서 변수를 생성한다. var도 사용할 수 있으나 모던자바스크립트에서는 사용하지 않는 유물 같은것... 과거의 코드에서 자주 마주칠 수 있다.
-
대부분의 경우 const를 사용, 값을 재할당 해야하는 변수일 경우 let으로 바꿔서 사용한다.
const, let과 var의 가장 큰 차이점(scope)은 함수 레벨 유효범위(var)와 블록 레벨 유효범위(const, let)를 갖는다는 것. 때문에 호이스팅(Hoisting)에 주의해야함.const let var 블록 레벨 유효범위(Block-level scope) 블록 레벨 유효범위(Block-level scope) 함수 레벨 유효범위(Function-level scope) 재할당 X 재할당 O 재할당 O 중복 선언 X 중복 선언 X 중복 선언 O 호이스팅 X 호이스팅 X 호이스팅 O 전역 선언시 전역 객체의 속성으로 등록 X 전역 선언시 전역 객체의 속성으로 등록 X 전역 선언시 전역 객체의 속성으로 등록 O -
const 는 값(데이터)의 재할당이 불가하고,
let 은 값(데이터)의 재할당이 가능, 변수 선언도 가능하다. 재할당하면 TypeError가 뜨는 것을 볼 수 있다. -
변수명은
$, _로 시작할 수도 있다.
변수명에 -(하이픈)이 포함되어서는 안된다.
숫자로 시작해도 안된다.
몇몇 특수한 경우를 제외하면 camelCase나 _(언더스코어)를 사용한다.
같은 상수(const)지만(최초 할당 이후 변하지 않으므로), 대문자만으로 변수명을 구성하는 경우가 있다. 대문자 상수는 '하드 코딩'한 값의 별칭을 만들 때 주로 사용된다. 예)const COLOR_ORANGE = "#FF7F00"; -
변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어야 한다.
예약어(Reserved Word)
- 이미 특별한 의미를 가지고 있어 변수나 함수 이름 등으로 사용할 수 없는 특정 단어.
- 존재하는 수많은 예약어들 ↓... 외에도 엄청 많다.
abstract arguments boolean break byte case
catch char class continue debugger default
package short this try void synchronized...참고
https://ko.javascript.info/ → 매우많은도움!
패스트캠퍼스 박영웅 강사님 강의
