데이터 정리(array, object, function)

array

내가 일주일의 요일을 만들고 싶다면

아래처럼 요일을 하나씩 정의해서 만들려고 할 수도 있다.

const mon = "monday";
const tue = "tuesday";
const wed = "wendesday";
const thu = "thursday";
const fri = "friday";
const sat = "saturday";
const dayOfWeek = mon + tue + wed + thu + fri + sat;

console.log(dayOfWeek);
-----------------------
mondaytuesdaywendesdaythursdayfridaysaturday

하지만 보다시피 결괏값도 엉망으로 나오고

dayOfWeek는 하나의 값이므로

몇 번째 요일을 빼오거나 더하거나 등 그 안에 들어있는 데이터를 따로 취급할 수 없다.

이럴 때 리스트로 그룹화를 해야하는 데 장바구니같다고 생각하면 된다.

const dayOfWeek = ['mon', 'tue', 'wed', 'thu', 'fri'];
console.log(dayOfWeek);
------------------------
[ 'mon', 'tue', 'wed', 'thu', 'fri' ]

이것이 배열이다.

1. 시작과 끝에 대괄호 []
2. ,로 구분
3. 정의된 데이터 뭐든지 넣어도 된다.

array안에서 항목 받아오기

데이터가 나열되어있고 몇변째 데이터를 가지고 오고 싶으면

~
console.log(dayOfWeek[3]);
---------------------------
thu

대괄호[] 안에 가져오고 싶은 순서(0부터 시작)를 입력한다.

배열에 있는 4번째 데이터를 가지고 온다.

 

array는 기본적으로 살아있는 것같아서 많은 일을 할 수 있다.

array안에서 항목을 받아오는 것이나 원한다면 array에 항목을 추가할 수 있다.

array안에 항목 추가하기

Array.prototype.push() - JavaScript | MDN

const dayOfWeek = ['mon', 'tue', 'wed', 'thu', 'fri'];
dayOfWeek.push('sat')
console.log(dayOfWeek);
------------------------
[ 'mon', 'tue', 'wed', 'thu', 'fri', 'sat' ]

push를 사용하면 배열 가장 뒤에 항목이 하나 더 추가 된다.

array의 목적

하나의 variable 안에 데이터의 list를 가지는 것.

만약 list가 없다면 너무 많은 variable이 필요하게 된다.

 

다른 프로그래밍 언어에서도 가장 기초적이고 필수적인 데이터구조.

값을 리스트로 정리하는 것.

objects

가끔씩은 list가 유용하지 않은 경우가 있다.

array를 써서 나에 대한 정보를 모은다고 하면

[ 'dalbong', 1, true, 'too big' ]

console.log(user);
-----------------------------------
[ 'dalbong', 1, true, 'too big' ]

결괏값을 보면 값이 어떤 의미인지 알 수가 없고

하나씩 변수를 주는 것도 효율적이지 않다.

혹은 주석을 써서 

// user[0] == name;
// user[1] == age;

이런식으로 설명 할 수 있겠지만 역시 효율적이지 않다

 

이때 쓰기 좋은 것이 object.

const user = { name : "dalbong", age : 1, cute : true, size : "too big"}
console.log(user);
console.log(user.name);
console.log(user["name"]);
------------------------
{ name: 'dalbong', age: 1, cute: true, size: 'too big' }
dalbong
dalbong

1. object 안에서의 규칙은 밖이랑 다르다 = 말고 :를 사용한다.
2. 중괄호{} 사용

object구조 파헤치기

user.name 구조를 보면 user는 묶어준 object, name은 user안에 있는 데이터 name

비슷한 구조를 많이 접했다.

바로 console.log.

console이라는 object, 그 안의 어딘가에 log가 있다는 말.

user를 만든 것은 console과 같은 object를 만든것이다.

 

수정하기

const user = { name : "dalbong", age : 1, cute : true, size : "too big"}

console.log(user);
console.log(user.name);

user.name = "jjong" 
console.log(user) 
console.log(user.name);
-------------------
{ name: 'dalbong', age: 1, cute: true, size: 'too big' }
dalbong
{ name: 'jjong', age: 1, cute: true, size: 'too big' }
jjong

보면 이름이 바뀌어져 있다.

내가 만약 age에 10살을 추가 하고 싶다면

const user = { name : "dalbong", age : 1, cute : true, size : "too big"}
user.age= user.age+ 10;
console.log(user.age)
-------------------
11

user는 const인데 어떻게 바뀌었나? 물을 수 있다.

우리는 object를 바꾼게 아니고 그 안의 무언가를 수정한거라 가능하다

object는 변하지 않았다.

추가하기

player.lastName = "apple" 

console.log(player)

const user = { name : "dalbong", age : 1, cute : true, size : "too big"}
user.favfood = "apple" 
console.log(user)
-------------------
{ name: 'dalbong',
  age: 1,
  cute: true,
  size: 'too big',
  favfood: 'apple' }

보면 favfood가 추가 되었다.

수정하는 방법과 일치한다. 데이터가 있으면 수정되고 없으면 맨 뒤에 추가된다.

 

object도 데이터를 정리하는 한 종류지만 리스트는 아니다.

리스트는 모든 값이 같은 의미를 갖고 있다.

그게 무엇인지 알 수없는 property들이 있어서 object를 써야한다.

functions

functions이란?

계속 반복해서 사용할 수 있는 코드 조각이라고 보면 된다.

어떤 코드를 캡슐화해서 실행을 반복할 수 있게 해주는 것같다.

(노래나 동영상을 계속 반복해서 볼수 있는것처럼)

가능한 적은 코드를 적고 싶기 때문에 사용한다.

 

어떤이름이든 Hello해주는 function을 만들거다

console.log("hello my name is Dalbong");
console.log("hello my name is jjong");

function을 사용하지않는다면 반복이 많아서 좋지 않다.

functions 구조파악

 

function sayHello() {
console.log("Hello!")
};
sayHello();
-----------
Hello!

function만드는 규칙

1. ()가 필요하다. 나중에 신의 한수가 될거다.
2. 실행하게 할 코드 블록이 필요하다 {}.

이 블록{} 안에 작성하는 것( console.log("Hello!") )이

sayHello()의 실행을 누를 때마다 실행되는 거다.

()이 괄호 두개가 실행버튼이라고 보면 된다.

argument

내가 원하는 것은

function sayHello() {console.log("Hello my name is A")};
function sayHello() {console.log("Hello my name is B")};

"Hello my name is" 까지는 자동으로 나오고 A,B 자리에 이름을 넣는 것이다.

그걸 위해서는 우리가 argument라는 것을 보내야 한다.

argument는 function을 실행하는 동안 어떤 정보를 function에게 보낼 수 있는 방법이다.

정보 보내기

우린 어느정도 알고 있다.

log로 정보를 보내려면 ()안에 넣으면 된다는 걸 안다.

console.log("Hello")

그럼 A에 이름을 넣는다면 이런식이지 않을까?

sayHello("dalbong")

예상할 수 있다.

하지만 function을 만들 때 어떻게 이걸 표현해야 할지 모른다.

function에서 log()안에 넣는 것처럼 어떻게 표현해야할까.

A에 dalbong, B에 jjong을 넣어보자.

정보 보내고 받기

function sayHello() 괄호 안에 넣어줘야 데이터를 받을 수 있다.

function sayHello(nameOfPerson) {
console.log("Hello my name is A")
};
sayHello("dalbong");

sayHello로 보내진 첫번째 데이터가 nameOfPerson이라는 variable로 가게 된다는 것을 안다.

nameOfperson = dalbong

function sayHello(nameOfPerson) {
console.log(nameOfPerson)
};
sayHello("dalbong");
sayHello("jjong");
-------------------
dalbong
jjong

이게 우리가 바깥 세상에서 뭔가를 받는 방법이다.

우리의 function에서는 말이다.

첫번째 argument로 어떤데이터가 들어오면

nameOfPerson이라는 variable 이름을 쓰게 된다는 것.

 

우리는 argument를 하나 더 받을 수 있다.

function sayHello(nameOfPerson, age) {
console.log("Hello my name is " + nameOfPerson + " and I'm " + age)
};
sayHello("dalbong", 1);
sayHello("jjong", 11);
---------------------
Hello my name is dalbong and I'm 1
Hello my name is jjong and I'm 11

 

 

@veriable 옆 부분에 공백을 추가해 줘야 문자가 붙어 나오지 않는다.

 

간단한 계산식을 만들어보자

function plus(a,b) {console.log(a + b)};
plus();
---------
NaN

 

@NaN : Not a Number 숫자가 아님

function plus(a,b) {console.log(a + b)};
plus(6,80);
---------
86

a = 6, b = 80

object와 function을 합쳐서 사용해보자.

const user = {
name : "dalbong",
sayHello : function (){ console.log("Hello")}
};

console.log(user.name);
user.sayHello();
-----------------
dalbong
Hello

보다시피 sayHello : function() 이렇게 변형해 사용한다.

 

sayHello에게 바깥 세상으로부터 argument를 받도록

첫번째 argument로 "dalbong"을 받는데 ()안으로 가게 될거다.

const user = {
name : "dalbong",
sayHello : 
function (otherPersonName){console.log("Hello " + otherPersonName + " nice to meet you")}
};

user.sayHello("dalbong");
-------------------------
Hello dalbong nice to meet you