JS데이터(JSData) - javascript 기본

JS데이터(JSData)

html, css : 모양 기반
javascript : 데이터 기반

0. ECMAScript

ECMA스크립트(ECMAScript, 또는 ES)란, Ecma International이 ECMA-262 기술 규격에 따라 정의하고 있는 표준화된 스크립트 프로그래밍 언어를 말한다.

• 위키백과 :
  https://ko.wikipedia.org/wiki/ECMA%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8

1. String (문자)

'가나다라마바사'

string은 문자열을 나타내는 데이터 타입

const string1 = 'Hello'; // 큰따옴표
const string2 = 'odada!'; // 작은따옴표
const string3 = `Hello World! ${string1} ${string2} ${1 + 1} ??`;
// 리터럴 방식 (기호를 통해 만들어내는 방식)
// `(backticks, 백틱) 을 사용하여 표현한다.
// 영문으로 설정 후 1번 왼쪽 키 클릭

console.log(string3);

2. Number (숫자)

123456789

number는 숫자를 나타내는 데이터 타입
따옴표를 사용하지 않음

- 숫자 표현

const number = 123;
const negative = -123;
const float = 0.123;

console.log(number + 1, negative + 1, float); // 124 -122 0.123

- typeof : 데이터 타입을 확인

const number2 = -123.1234;

console.log(number2 + undefined); // undefined는 NaN으로 나옴
console.log(typeof (number2 + undefined)); // number

- Number : 숫자로 변환

const a = 0.1;
const b = 0.2;

console.log(a + b); // 부동 소수점 방식으로 인해 0.3이 아닌 0.30000000000000004가 나옴
console.log((a + b).toFixed(1)); // toFixed() : 소수점 자리수를 지정해주는 메소드, 문자열로 반환
console.log(typeof (a + b).toFixed(1)); // 문자열이기 때문에 typeof로 확인해보면 string이 나옴
console.log(Number((a + b).toFixed(1))); // Number로 감싸주면 number로 반환

3. boolean (참 & 거짓)

true , false

boolean은 true와 false 두 가지 값만 가질 수 있는 데이터 타입

const truthy = true;
const falsy = false;

if (truthy) {
    console.log(true); // true
}

4. null & undefined (값 없음)

null과 undefined는 값이 없음을 나타내는 데이터 타입

- null : 명시적으로 값을 할당하지 않음

명시적 : 매우 분명하고 명확하게

let age = null;
console.log(age); // null

age = 20; // 값이 할당되면 null이 사라짐
console.log(age); // 20

- undefined : 암시적으로 값을 할당하지 않음

암시적 : 직접적으로 표현되지 않지만 상황, 맥락 또는 언어의 사용을 통해 이해해야 하는 것

let height;
console.log(height); // undefined

height = 180; // 값이 할당되면 undefined가 사라짐
console.log(height); // 180

• ex)

const user = {
    name: 'Kim',
    age: 20,
    height: 170,
    email: null,
};

console.log(user.name, user.age, user.height); // Kim 20 170
console.log(user.weight); // undefined
console.log(user.email); // null : 이메일이 없습니다.

5. array (배열)

[1, 2, 3, 4, 5]

배열이란 순서가 있는 데이터의 집합

// 배열은 대괄호로 만들어줌
const animals = ['dog', 'cat', 'fish'];

console.log(animals[0], animals[2]); // dog fish
// 배열의 인덱스는 0부터 시작 (Zero-based numbering)
console.log(animals); // ['dog', 'cat', 'fish']
console.log(animals.length); // 3
// 배열의 길이는 length로 확인 가능
console.log(animals[animals.length - 1]); // fish
// 배열의 마지막 인덱스를 가져오는 방법

6. object (객체)

{a: 1, b: 2}

객체란 이름과 값으로 구성된 프로퍼티의 순서가 없는 집합

// 객체는 중괄호로 만들어줌
const user2 = {
    name: 'Kim',
    age: 20,
};

console.log(user2); // { name: 'Kim', age: 20 }
console.log(user2.name, user2.age); // Kim 20

- 점 표기법과 대괄호 표기법의 차이점

// 점 표기법은 객체의 키가 유효한 이름인 경우에만 사용 가능
console.log(user2.name, user2.age); // Kim 20

// 대괄호 표기법
// 대괄호 표기법은 변수를 키로 사용할 때 사용 가능
console.log(user2['name'], user2['age']); // Kim 20
console.log(user2[key]); // 20

- ex

const userA = {
    name: 'Kim',
    age: 20,
};

const userB = {
    name: 'Lee',
    age: 30,
    parent: userA,
};

console.log(userB); // { name: 'Lee', age: 30, parent: { name: 'Kim', age: 20 } }
console.log(userB.parent.name); // Kim 점 표기법
console.log(userB['parent']['name']); // Kim 대괄호 표기법

- 배열에 객체를 넣을 수 있음

const users = [userA, userB];

console.log(users[0].name); // Kim
console.log(users[0]['name']); // Kim

7. function(함수)

함수란 특정 코드를 하나의 명령으로 실행할 수 있게 해주는 기능

// 함수 선언식 (기명 함수)
function printHello() {
    console.log('Hello');
}

printHello(); // Call
// 함수를 호출할 때는 함수 이름 뒤에 괄호를 붙여줌

• 함수는 자바스크립트의 데이터로서 함수 자체와 함수의 호출은 전혀 다른 개념이다.

// 함수 표현식 (익명 함수)
const getNumber = function () {
    return 123;
};

console.log(getNumber); // [Function: getNumber]
console.log(typeof getNumber); // 함수 데이터

console.log(getNumber()); // 123
console.log(typeof getNumber()); // number

8. Type Conversion (형 변환)

• 형 변환이란 데이터 타입을 다른 데이터 타입으로 바꾸는 것으로
• 정확하게 비교를 해주는 일치 연산자(===)를 사용하는 것이 좋다.
• 일치 연산자를 사용하면 형 변환이 일어나지 않기 때문에 더 정확하게 비교할 수 있다.

const a = 1; // number
const b = '1'; // string

console.log(a === b); // false (=== : 일치 연산자)
console.log(a == b); // true (== : 동등 연산자)
// 동등 연산자는 형 변환이 일어나기 때문에 1과 '1'을 비교해도 true가 나온다.
// 다른 데이터인데도 불구하고 동등 연산자에서는 true가 나온다.

const c = false;
const d = 0;

console.log(c === d); // false
console.log(c == d); // true

const e = true;
const f = '1';

console.log(e == f); // true
console.log(e === f); // false

9. Truthy & Falsy (참과 거짓)

• Truthy : true 같은 것
• Falsy : false 같은 것
  • false
  • 0
  • ''
  • null
  • undefined
  • NaN

if (true) {
    console.log('true!'); // true!
}
// true는 true이기 때문에 true!가 출력된다.
// false를 넣으면 출력되지 않는다.
// 0, -0, '', null, undefined, NaN은 false로 간주한다.
// 그 외의 값은 true로 간주한다.

const fruits = [''];

if (fruits.length) {
    console.log('아이템이 들어있음!');
}

// ''는 false로 간주되기 때문에 출력되지 않는다.
// 배열에 아이템이 들어있는지 확인할 때는 length를 사용한다.
// length는 배열의 길이를 알려주는 속성이다.

10. 데이터 타입 확인

console.log(typeof '123'); // string
console.log(typeof 123); // number
console.log(typeof true); // boolean
console.log(typeof undefined); // undefined
console.log(typeof null); // object
console.log(typeof {}); // object
console.log(typeof []); // object
console.log(typeof function () {}); // function

// null, {}, []는 object로 나오기 때문에 구분하기 어려움
// constructor를 통해 데이터 타입을 확인할 수 있음
console.log([].constructor); // Array
console.log({}.constructor); // Object
console.log(null.constructor); // error : null은 constructor가 없음

// null 데이터 타입 확인 방법
// 아래 방식 추천
console.log(Object.prototype.toString.call(null).slice(8, -1)); // Null

• 데이터 확인 함수

function printType(data) {
    console.log(Object.prototype.toString.call(data).slice(8, -1));
}

console.log(printType(123)); // Number
console.log(printType(true)); // Boolean
console.log(printType(null)); // Null
console.log(printType({})); // Object
console.log(printType([])); // Array
console.log(printType(function () {})); // Function

11. JSON (JavaScript Object Notation)

• JSON은 데이터를 교환하는 포맷으로, 텍스트를 기반으로 한 가벼운 데이터 교환 형식
• JSON은 자바스크립트 객체 문법을 따르며, 데이터는 이름과 값의 쌍으로 이루어짐

// JSON.stringify() : 자바스크립트 객체를 JSON 문자열로 변환
const user = {
    name: 'Kim',
    age: 20,
};

const userJSON = JSON.stringify(user);
console.log(userJSON); // {"name":"Kim","age":20}

// JSON.parse() : JSON 문자열을 자바스크립트 객체로 변환
const user2 = JSON.parse(userJSON);
console.log(user2); // { name: 'Kim', age: 20 }

12. react에서 데이터 다루기

• react에서 데이터를 다루는 방법은 다음과 같다.

1. props : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용
2. state : 컴포넌트 내부에서 데이터를 다룰 때 사용
3. context : 전역적으로 데이터를 관리할 때 사용
4. redux : 상태 관리 라이브러리

• props와 state는 react에서 데이터를 다루는 데 가장 많이 사용되는 방법이다.

// props
// App.js
import React from 'react';
import Child from './Child';

function App() {
    return (
        <div>
            <Child name="Kim" age={20} />
        </div>
    );
}

export default App;

// Child.js
import React from 'react';

function Child({ name, age }) {
    return (
        <div>
            <p>{name}</p>
            <p>{age}</p>
        </div>
    );
}

export default Child;

// state
// App.js
import React, { useState } from 'react';

function App() {
    const [name, setName] = useState('Kim');
    const [age, setAge] = useState(20);

    return (
        <div>
            <p>{name}</p>
            <p>{age}</p>
        </div>
    );
}

export default App;