데이터 저장하기 좀 더 파헤쳐보자!

JAVASCRIPT

데이터 저장하기 좀 더 파헤쳐보자!

younajeong 2023. 3. 4. 22:03

“ 지연되는 프로젝트에 인력을 더 투입하면 오히려 더 늦어진다. ”

- Frederick Philips Brooks
Mythical Man-Month 저자

728x90

변수와 상수

변수

변수(variable)란 데이터를 저장하기 위해 프로그램에 의해 이름을 할당받은 메모리 공간을 의미합니다. 즉 변수란 어떠한 값을 저장할 수 있는 저장하기 위한 이름을 가진 공간을 의미하며 변수는 변수라는 이름 그대로 가지고 있는 값에서 다른 값으로 덮어 씌워지며 변할 수 있으며 연산을 하여 값들이 추가될 수도 있습니다. 변수의 종류의 데이터 타입에는 자연수, 실수, 문자 등 각기 다른 종류의 값들 저장할 수 있는 변수의 종류들이 있으며 특수문자까지 저장할 수 있습니다.

<변수는 데이터를 저장할 수 있습니다.>

{
    var x = 100;             
    var y = 200;             
    var z = "javascript";    

    console.log(x);
    console.log(y);
    console.log(z);
}

<변수는 데이터를 변결할 수 있습니다.>

{
    let x = 100;
    let y = 200;
    let z = "javascript"

    x = 300;
    y = 200;
    z = "react";

    console.log(x);
    console.log(y);
    console.log(z);
}

<변수는 데이터를 추가할 수 있습니다.>

{
    let x = 100;
    let y = 200;
    let z = "javascript";

    x += 300; // x = x + 300
    y += 400;
    z += "react";

    console.log(x);
    console.log(y);
    console.log(z);
}

var와 let의 차이점

var는 중복선언이 가능하다는 점이 있다. 중복으로 변수명을 사용해도 에러가 나지 않는다. let은 중복으로 사용할 수 없지만 값을 재할당 할 수 있다는 점이 있다.

데이터를 추가할 때

변수를 추가할 때는 연산자를 이용해서 데이터를 추가할 수 있습니다. += (더하기 ), -=(빼기)

상수

상수(const)란 변수와 마찬가지로 데이터를 저장할 수 있는 메모리 공간을 얘기합니다. 하지만 변수와 다르게 상수는 데이터를 변경하거나 추가할 수 없습니다.

<상수는 데이터를 저장할 수 있습니다.>

 const x = 100, y = 200, z = "javascript";   

    let x = 100;
    let y = 200;
    let z = "javascript";

<상수는 데이터를 변경할 수 없습니다.>

const x = 100;
const y = 200;
const z = "javascript"

 x += 300;     
 y += 400;
 z += "react";

console.log(x);
console.log(y);
console.log(z);

//Uncaught TypeError: Assignment to constant variable.

배열과 객체

배열

배열(Array)는 같은 타입으로 이루어진 유한 집합의 정의하며 순서가 있는 값을 말합니다. 배열을 구성하는 각각의 값을 구성요(element)라고 하며 배열의 위치를 가리키는 숫자를(index)라고 합니다. 배열이 시작되는 순서는 0번째부터 시작하기에 indexd의 번호는 0부터 시작됩니다. 배열의 정의는 [ ] 대괄호로 표시하며 괄호 안에 요소들은 , 쉼표로 구분해 줍니다.

<배열은 new Araay를 사용합니다.>

{
    const arr = new Array();
    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript"

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);
}

const와 let의 차이점은?

const는 상수를 뜻합니다. 상수의 뜻 처럼 변하지 않는 값을 가지고 있습니다. 그러므로 const라는 키워드를 생성한다면 변하지 않는 값을 같은 변수를 생성하게 됩니다. 그리고 const로 선언한 변수는 값을 재할당 할 수 없습니다. const는 반드시 값이 할당되어야 합니다.

const myName = 'NY KIM';
myName = 'Nana';  //TypeError: Assignment to constant variable

const a;
console.log(a); //SyntaxError: Missing initializer in const declaration

let은 const와 다르게 다른 값이 재할당 될 수 있습니다.

let meal = 'Bulgogi';
meal = 'Bibimbap';

따라서 let과 const를 사용할 때 값의 재사용 여부에 따라서 사용할 수 있습니다.

그렇다면 앞에 나온 var는?

var age = 28;       //결과 : 25 (초기 변수 선언) 
age = 18;           //결과 : 18 (변수값 재할당)  
var age = 'old';    //결과 : 'old' (변수 재선언)

var는 age로 이미 선언하고 또 age로 재선언 할 수 있으며

let age = 28;
age = 18;
let age = 'old'; //SyntaxError: Identifier 'age' has already been declared

let은 age로 재선언 할 수 없다. const 역시 재선언 할 수 없습니다.

배열의 여러가지 표현방법

"코드들을 간편하게 정리하기 위한 표현 방법들"

<배열의 값을 () 안에 한 줄로 표현할 수 있습니다. >

const arr = new Array(100,200,"javascript");   
    
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);

<[ ]를 사용하여 표현할 수 있습니다. >

const arr = []; 

    arr[0] = 100;
    arr[1] = 200;
    arr[2] = "javascript"

    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);

<[ ]안에 배열의 값을 넣을 수 있습니다.>

 const arr = [100, 200, "javascript"];   
    console.log(arr[0]);
    console.log(arr[1]);
    console.log(arr[2]);

<키와 값을 이용한 배열의 여러 표현방법들>

onst brr = new Array();
    const crr = new Array(200, "react", false); //  옛날방식
    const drr = [];
    const err = [300, "arrat", true];

    brr[0] = 100;
    brr[1] = "javascript";
    brr[2] = "true";
    drr[0] = 100;
    drr[1] = "javascript";
    drr[2] = "true";

    console.log(brr[0],brr[1],brr[2]);
    console.log(crr[0],crr[1],crr[2]);  
    console.log(drr[0],drr[1],drr[2]);  
    console.log(err[0],err[1],err[2]);

<번외 : Tyepo of()를 이용한 형변화>

typeof: 형의 성질을 알려준다. 형의 성질을 알려준다는 말은 즉 숫자면 Number, 문자면 string이라고 입력된다.

 let x = 100, y = "200", z;
        const func = function(){}   //함수도 변수에 들어갈 수 있음

        document.write(x);
        document.write(typeof(x));  //100을 넣어주면 숫자("Number")로 판단한다. 
        document.write(y);
        document.write(typeof(y));
        
        y = Number(y);  //형이 변환 된다, "=":같다라는 표시가 아닌 좌변에서 우변으로 넘어간다
        document.write(typeof(y));  


        document.write(z);
        document.write(typeof(z));
        document.write(func);
        document.write(typeof(func));

객체

객체의 사전적인 정의로는 실제 존재하는 것을 뜻합니다. 자바스크립에서 기본타입 (data type)은 객체(object)라고 표현합니다. 객체란 키와 값 으로 구성된 프로퍼티(property)의 정렬되지 않는 집합이고 프로퍼티의 값으로 함수(function)가 올 수 있는데 이러한 프로퍼티를 메소드(method)라고 부릅니다.

※property란 객체 안에서 선언된 이름과 값으로 이루어진 한 쌍을 의미합니다.

<객체 예시>

const person = {
	first name = "lee",
    last name = "soonsin",
    age : 30;
};

위 코드처럼 person은 객체 입니다. first name은 프로퍼티(property) 키(key) , "lee"는 프로퍼티의 값(value)입니다.

이렇듯 이러한 프로퍼티의 값으로 함수가 올 수 있는데 이러한 프로퍼티를 메소드 (method)라고 합니다. 또한 원시형 값을 제외한 나머지 값 (함수,배열, 정규 표현식) 은 모두 객체 입니다. 원시형 값은 변경 불가능한 값이지만 객체의 값은 변경이 가능한 값입니다.

배열과 객체의 구조이해!

배열은 (Array): 순서를 가진다.

객체 (Object): 의미를 가진다.

객체의 여러가지 표현방법

<괄호만 사용하여 표현할 수 있습니다.>

const obj = new Object();
    obj[0] = 100;
    obj[1] = 200;
    obj[2] = "javascript"

    console.log(obj[0]);
    console.log(obj[1]);
    console.log(obj[2]);

<객체의 값을 a,b,c로 표현할 수 있습니다.>

const obj = new Object();
    obj.a = 100;
    obj.b = 200;
    obj.c = "javascript"

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);

<{}중괄호를 사용하여 표현할 수 있습니다.>

const obj = {};
obj.a = 100;
obj.b = 200;
obj.c = "javascript";

console.log(obj.a);
console.log(obj.b);
console.log(obj.c);

<{}중괄호안에 값을 넣어 표현할 수 있습니다.>

const obj = {a:100, b:200, c:"javascript"};  

    console.log(obj.a);
    console.log(obj.b);
    console.log(obj.c);

<배열 안에 객체가 존재할 수 있습니다.>

const obj = [
    {a:100, b:200},
    {c:"javascript"}
    ];

    console.log(obj[0].a);
    console.log(obj[0].b);
    console.log(obj[1].c);

배열안에 객체가 있을 때

배열안의 a의 0번째의 값을 구하는 것이고 b의 0번째의 값을 구하는 것이니 실행문을 써줄 때 배열안의 순서를 0번째로 표시해 준 후 .a와 .b를 사용하여 값을 실행시켜줍니다.

<객체 안에 배열이 존재할 수 있습니다.>

const obj = {
    a: 100,
    b: [200,300],
    c: {x: 400, y: 500},
    d: "javascript" 
    }

    console.log(obj.a);
    console.log(obj.b[0]);
    console.log(obj.b[1]);
    console.log(obj.c.x);
    console.log(obj.c.y);
    console.log(obj.d);

객체안에 배열이 있을 때

배열안에 객체가 있는것과 반대 형태로 실행문을 실행시켜주어야 할 때 obj.b 객체를 먼저 써준 후 객체 안에 있는 배열[]순서를 뽑아옵니다.

<상수 a와 같이 저장한 데이터를 객체에 넣어서 출력할 수 있습니다.>

const a = 100;
const b = 200;
const c = "javascript";

const obj = {a, b, c}; // {},[]객체나 변수가 더 들어올 수 있음

console.log(a);
console.log(b);
console.log(c);

//상수를 먼저 선언해준 후 객체로 넣어서 출력해 줄 수 있습니다.

<객체의 값으로 함수가 나올 수 있습니다.>

  const obj = {
            a: 100,
            b: [200, 300],
            c: "javascript",
            d: function(){
                console.log("javascript가 실행되었습니다.");
            },
            e: function(){
                console.log( objc + "가 실행되었습니다.");
            },
            f: function(){
            console.log( thisc + "가 실행되었습니다.");
            }
        }

        console.log(obj.a);
        console.log(obj.b[0]);
        console.log(obj.b[1]);
        console.log(obj.b[2]); //undifind
        console.log(obj.c);
        console.log(obj.d); //(이렇게 쓰면 안된다)
        obj.d();
        obj.e();
        obj.f();

객체의 값으로 함수를 사용할 수 있다!

함수도 프로퍼티 값으로 사용할 수 있습니다.
객체의 프로퍼티 값이 함수인 경우를 메소드라고 부릅니다.
함수는 일급 객체입니다.
함수로 객체를 생성하기도 하며 함수자체가 객체입니다.
함수는 객체이지만 일반객체와 차이가 있습니다. 일반객체는 호출 할 수 없지만 함수는 호출 할 수 있습니다. 일반 객체에는 없는 고유의 프로퍼티를 지니고 있습니다.

함수의 호출 방법

함수는 선언할 수 있는데 코드박스에 나온 d,e,f처럼 직접 선언하여 실행시킬 수 있고 e처럼 obj.c가 가지고 있는 "javascript"라는 변수를 가져와서 선언할 수 있으며 this를 이용하여 this.c라고 써주며 이것은 c다 라는 해석으로 c가 가지고 있는 "javascript"다 라는 해석으로 해석할 수 있습니다.

현재글데이터 저장하기 좀 더 파헤쳐보자!

300x250

코딩 공부 기록장📁

GIT 블로그

오답노트, 피그마, 홈페이지제작, 효과, gsap, jquery, 자바스크립트, 애니메이션효과, 함수, css, 레이아웃, html, 퀴즈사이트만들기, 슬라이드효과, 코딩, 슬라이드이펙트, 퀴즈유형, 코딩일기, 코딩공부, 사이트만들기,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30

Youna