[JS] 데이터 및 연산자

1. 데이터

 

1) Literal(리터럴)

어떠한 기호를 통해서 데이터를 만들어내는 방식으로 데이터(값) 그 자체를 의미함

- 변수에 넣는 변하지 않는 데이터

- `(백틱) 기호를 사용하면 템플릿 리터럴

- [] 배열, {} 객체, 문자열 등 데이터

 

 

2) Null, undefined

Null : 명시적으로 작성

undefined : 암시적으로 자동으로 들어감(값을 명시하지 않았을 경우)

- 123+undefined의 경우, NaN(Not a number)

 

 

3) toFixed()

소수점 자리수 자르기

- toFixed(1) : 소수점 1자리 숫자만 자르기

- 반올림된 값을 문자열로 반환

- 0은 기본 값(0~100)

 

4) typeof()

- null, [], {} 모두 object 타입이기 때문에 다른 방식으로 type 확인 필요

 

(1) null

null은 constructor를 사용할 수 없어서 Object.prototype.toString.call(null)로 확인 가능
-> 메소드 체이닝으로 slice(8,-1)추가하면 Null 만 추출 가능

 

(2) [] 배열, {} 객체

[].constructor 로 확인하면 array 타입
{}.constructor 로 확인하면 object 타입

 

 

** 아래함수로 여러가지 타입 확인 가능 **

function checkType(data){
    return Object.prototype.toString.call(data).slice(8,-1)
}

console.log(checkType(null));
console.log(checkType({}));

 

 

 

2. 연산자

 

1) 일치/동등 연산자

=== : 일치 연산자

!== : 불일치 연산자

 

== : 동등 연산자(형변환이 일어남)

!= : 부등 연산자

 

2) nullish 병합 연산자

- 왼쪽에서 오른쪽으로 해석

- null, undefined는 건너뛰고, 모든 데이터를 반환

const n = 0

const num2 = n ?? 7; 
console.log(num2); // 0

console.log(null ?? undefied) // undefined
console.log(false ?? 1 ?? 2) // false

 

 

3) 구조분해할당

** 배열 구조분해할당 **

배열, 객체데이터를 분해해서 각각 변수에 맞게 할당

-> 대괄호 안에 데이터가 나열되어있는데 순서대로 해야함

const arr=[1,2,3];

const [a, ...rest] = arr;

console.log(a,rest); // 1 [2,3]

 

 

** 객제 구조분해할당(디졸브) **

순서대로가 아닌, 속성 이름으로 해당하는 데이터를 바로 찾을 수 있음

const obj = {a:1}
const {x=4} = obj // x라는 변수가 선언되어 있지 않다면 기본값으로 4를 사용

--> const {x=4, a:test}=obj 라고 한다면
a 대신에 test라는 변수명으로 바꾸겠다라는 의미

 

 

4) 전개연산자

[...] : 전개연산자, 배열 생성
-> 얕은 복사

- 전개연산자는 배열, 객체 모두 괄호는 지우고 값만 출력됨

const a = [1,2,3]
console.log(...a) // 배열 괄호 지우고 내용만 출력됨, 객체도 마찬가지!!!

 

 

- concat을 전개연산자로 표현 가능

const a = [1,2,3]
const b = [4,5,6]

const d = [...a, ...b] // [1,2,3,4,5,6]

 

 

- assign 메소드 사용

const a = {x:1, y:3}
const b = {y:2, z:2}

const c = Object.assign({}, a, b); // y는 새로 덮어씌워짐
console.log(c)

 

 

5) 선택적 체이닝

- 물음표, 마침표사용
- 에러가 아니라 undefined로 출력 가능 (꼭 필요한 상황에서만 사용, 남용 ㄴㄴ)

const userA = {
    name:'a',
    age :3,
    address : {
        country:'ko',
        city: 'seoul'
    }
}
const userB = {
    name:'b',
    age :22
}

function getCity(user){
    return user.address?.city || '주소 없음' // 물음표 사용, 주소 없음 출력
}
console.log(getCity(userB))

 

 

6) for of (배열) vs for in (객체)

 

for of : 배열에 사용

const fruits = ['Apple', 'Banana', 'Cherry']

// for (let i=0; i<fruits.length; i+=1) {
//     console.log(fruits[i]);
// }

for (const fruit of fruits) {
    console.log(fruit)
}

 

for in : 객체에 사용