[JS] 내가 놓쳤던 자바스크립트 기초문법 정리

초보자를 대상으로 하는 자바스크립트 기초 강의를 빠르게 수강하며 내가 이미 알고있는 내용은 제외하고 기존에 놓쳤던 내용이나 알고있지만 헷갈리는 내용들만 정리해보았다. (지극히 개인적인 기준)

 

[강의]  인프런  -  렛츠기릿 자바스크립트

[무료] [리뉴얼] 렛츠기릿 자바스크립트 - 인프런 | 강의

 

 

 

 

0자릿수 표현하기

5e4      // 50000
5e-4     // 0.0005

---

진법 표현하기

 

• 2진법 (0b~)
• 8진법 (0o~ 또는 0~)
• 16진법 (0x~)

// 2진법
0b111    // 7

// 8진법
0111     // 73
0o111    // 73

// 16진법
0x1a1    // 417

typeof 0x1a1    // number

진법 표현들도 모두 type은 number

---

NaN과 Infinity의 타입

 

NaN의 type도 number, Infinity의 type도 number

typeof NaN    // number

2 / 0     // Infinity
-2 / 0    // -Infinity
typeof Infinity    // number

---

parseInt()와 Number()의 차이

 

parseInt('345');   // 345
Number('345');     // 345

parseInt('3.14');     // 3
parseFloat('3.14');   // 3.14
Number('3.14');       // 3.14

parseInt('2월');   // 2
Number('2월');     // NaN

---

연산자 우선순위

연산자 우선순위 - JavaScript | MDN

---

소수점 계산 시 주의할 점

 

부동 소수점 오차

0.1 + 0.2    // 0.30000000000000004
0.3 - 0.1    // 0.19999999999999998

 

해결방법 중 가장 간단한 방법은 실수를 정수로 바꾸어 게산한 뒤, 마지막에 다시 실수로 바꾸는 방법

(0.3 * 10 - 0.1 * 10) / 10     // 0.2

---

---

비교연산 관련

 

NaN은 서로 비교하면 !=를 제외하고는 모두 false

NaN == NaN    // false
NaN < NaN     // false

NaN != NaN    // true

 

true false도 비교는 됨 (true는 1, false는 0으로 생각하여)

true > false    // true

 

문자열도 비교연산은 가능 (사전 순서)

문자의 번호를 알아보려면 .charCodeAt() 사용

'b' > 'a'      // true
'ad' > 'ab'    // true

'a'.charCodeAt()    // 97
'&'.charCodeAt()    // 38

 

문자열과 숫자를 비교하면 문자열을 숫자로 바꿔서 비교

'abc'의 경우 NaN으로 바뀌어서 NaN과 연산하면 다 false (!= 연산 제외)

'3' < 5      // true
'abc' < 5    // false
'0' < true   // true

문자열과 숫자의 연산은 +를 제외하고는 문자열을 숫자로 바꿔서 연산됨

(+연산은 문자열에 더 우선순위가 있음)

 

 

boolean값도 비교 연산을 할 때는 숫자로 형 변환됨 ( true → 1 , false → 0)

'0' < true    // true

---

논리연산자

 

다른 자료형을 boolean값으로 형변환 가능

(180도를 2번하면 360도인 것처럼 생각하면 됨)

!!'a'    // true

// 형변환시 false가 되는 값
!!false       // false
!!''          // false
!!0           // false
!!NaN         // false
!!undefined   // false
!!null        // false

---

null

 

null의 타입은 null이 아니라 object  →  자바스크립트의 대표적인 오류 중 하나

typeof null    // object

---

switch 문

 

switch문은 break 안쓰면 조건이 참인 case 아래로 다 실행된다.

let value = 'B';

switch (value) {
    case 'A':
        console.log('A');
    case 'B':
        console.log('B');
    case 'C':
        console.log('C');
}
// 'B' 'C'

---

splice와 slice 비교

 

splice

배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경

array.splice(start[, deleteCount[, item1[, item2[, ...]]]])

 

-  반환값  :  제거한 요소를 담은 배열. (아무 값도 제거하지 않았으면 빈 배열을 반환)

const months = ['Jan', 'March', 'April', 'June'];

months.splice(1, 0, 'Feb');            
console.log(months);     // ["Jan", "Feb", "March", "April", "June"]

months.splice(4, 1, 'May', 'June');    
console.log(months);    // ["Jan", "Feb", "March", "April", "May", "June"]

 

 

slice

어떤 배열의 begin 부터 end까지(end 미포함)에 대한 얕은 복사본을 새로운 배열 객체로 반환

❗  원본 배열은 바뀌지 않는다.

arr.slice([begin[, end]])

 

- 반환값  :  추출한 요소를 포함한 새로운 배열.

let fruits = ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango'];
let citrus = fruits.slice(1, 3);

console.log(fruits);    // ['Banana', 'Orange', 'Lemon', 'Apple', 'Mango']  원본 배열은 변하지 않는다

---

객체

-  자료형의 일종으로 다양한 값을 모아둔 또다른 값.

-  객체의 종류는 배열, 함수, 배열이나 함수가 아닌 객체로 나눌 수 있다.

 

💡  배열과 함수가 객체인 이유

배열과 함수에도 속성들을 추가할 수 있고 수정, 제거할 수도 있다. (배열과 함수는 특수한 객체인 것)

객체는 함수와 배열을 포함하는 개념이라 {}를 사용해 만든 객체를 객체 리터럴이라고 따로 부르는 것이다.

function hello() {}
hello.a = 'really?';
console.log(hello.a);    // 'really?'

const array = [];
array.b = 'wow';
console.log(array.b);    // 'wow'

---

함수 기본

 

function으로 선언한 함수 안에서는 arguments라는 값을 사용하면 함수 호출 시 넣었던 인수들을 배열로 반환해준다.

(화살표 함수에서는 사용 불가)

function test(a, b, c) {
    console.log(arguments);
}

test("hello", "world");    // ["hello", "world"]

---