Vanilla JS # 01 (데이터 타입의 종류)

0_CyberLover_0·2022년 3월 18일
0

Vanilla JS

목록 보기
1/7
post-thumbnail

데이터 타입의 종류

1.Number

  • 정수 (integer) // 1,2,3,4 ...

  • 소수(float) // 1.555, 2.545345 ...

  • Number 타입은 서로 연산 기호를 이용하여 계산 할 수 있다.

2.String

  • 처음부터 끝까지 문자(text)로 구성되어 있다는 의미
"Hello," + "My name is Joo" // Hello, My name is Joo
  • String 타입은 ""을 이용하여 입력하고 String 타입의 합은 두개를 합쳐서 출력한다.

const => 변수 선언을 통해 코드를 간결하게

const a = 10;

const b= 2;

console.log(a + b);

console.log(a * b);

console.log(a / b);

#길이가 긴 변수를 선언할때 => Camelcase

VeryLongVariableName

cf. python에서는 

very_long_variable_name

변수 만들때 let, const, var 차이

let 재선언 금지 🚫 ,재할당 가능

let a = b ;

let a = c ;

//재선언 금지

let a = b ;

a = c

// 재할당은 가능

const 재선언 금지 , 재할당 금지

const a = b ;

const a = c ;

//재선언 금지

const a = b ;

a = c ;

//재할당 금지

var 재선언 가능 , 재할당 가능

var a= b ;

var a= c ;

a= d ;

// 재선언 , 재할당 모두 가능

booleans

데이터 타입으로 숫자, string이 있다.

그리고 다른게 또 있는데

그것을 boolean이라고 한다.

ture 아니면 false

const amIFat = false;

또 다른 데이터 타입이 있는데 '존재 하지 않음'을 의미하는 것중 하나는 null이 있다.

const amIFat = null; nullnull이라는 값이 정의 되어 있는 것이다.

자연적으로 발생하지 않는다. 값이 없다라는 것을 확실히 하기 위해 쓴다.

let something; 이렇게 변수를 선언하여 값이 정의 되지 않은걸 undefined라고 한다. 

메모리 차지는 하는데 값이 없는것.

arrays

데이터를 나열하기 위한 방법 중 하나

항상 [ ] 안에 콤마 ( , ) 로 데이터들을 나열한다.

변수도 쓰일수 있고, boolean, text, number 등 데이터 정렬이 가능하다.

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat", "sun"];

만약, 위의 변수에서 5번째 element 값을 알려 주세요. 라고 한다면 어떻게 출력해야 할까?

console.log(daysOfWeek[4]) 라고 해야 5번째 값을 출력할 수있다.

컴퓨터는 숫자를 0부터 세기 때문에 , "mon"0번째 라고 생각 하면 된다.

JS의 주석 처리는 // ( 맥 기준 command + / )

위의 상태에서 daysOfWeek이란 변수에 하나의 값을 더 넣고 싶다면

daysOfWeek.push("holiday") .push 는 추가하는 기능

object

object는 property를 가진 데이터를 저장해주며, { } 를 사용 한다.

const player = {

name:tomato,

color:red,

food:true,

};

console.log(player);

property를 불러오는 방법은 2가지가 있다.

1. console.log(player.name); => tomato

2. console.log(player["name"]); => tomato

또한 property를 바꾸는 것은 가능하지만 선언된 object를 바꾸는 것은 불가능하다.

const player = {

name:tomato,

color:red,

food:true,

};

console.log(player);

player.color = "blue";

console.log(player.color);

==> blue

그리고 property를 추가 할수도 있다.

player.koreanName = "토마토";

--> {name: "tomato", color: "blue", food: true, koreaName: "토마토"}

functions

plyer.points( ); 라고 사용하지 않았다.

player,points은 function이 아니기 때문에 player.points은 숫자다.

player에게 function을 주기전에, 어떻게 function을 만드는지를 배워야 한다.

function은 계속 반복해서 사용할수 있는 코드 조각이다.

어떤 코드를 캡슐화 해서 실행을 여러번 할 수 있게 해준다.

argument(인수)를 보내야 하는데 인수란 함수를 실행하는 동안 어떤 정보를 함수에게 보낼수 있는 방법이다.

function 선언 :

function 함수명 ( ) {

실행코드

}

function sayHello(){

console.log("Hello");

};

소괄호 안에 작성하는 것은 실행 버튼을 누를 때마다 발생한다.

sayHello();이렇게 쳐서 실행 할수 있다.

argument(인수)는 function을 실행하는 동안 정보를 function에게 보낼수 있는 방법으로 , 소괄호 안에 위치한다.

인수를 받기 위해서 함수를 선언할때 function 함수명 (variable){} 작성 한다.

function sayHello(nameOfPerson,age){

console.log("Hello my name is " + nameOfPerson + " and I'm " age);

}

sayHello("Joo", 36);

sayHello("samara", 28);

여기서 이제 player.name(); 이런 식으로 만들려고 하면

const player = {

name: "Joo",

sayHello: function(otherPersonsName){

console.log("Hello" + otherPersonName + "nice to meet you!");

},

};

player.sayHello("samara");

let 과 const의 차이는 let은 업데이트를 할 수 있다는 것이다.

let을 업데이트 할땐 다시 let을 붙이지 않아도 됨

ex:) 기존 변수의 값을 업데이트 하고 싶은 경우

let a = 5; // 기존의 값이 5인 상태

a = 10; // let을 생략하고 10으로 업데이트 했음

코드를 읽으면서 의미를 부여하기 위해 항상 const, 가끔 let, 사용하지 말자 var
(그냥 이런것이 있다. 예전에야 썼지 요새는 안 쓴다.)

boolean은 딱 두가지 옵션만 있다. ture, false

null은 아예 '비어있음을 정의' 해버리는것 ,

undefinde는 변수에 값을 부여하지 않은 상태

array 만들기

const days = [ 1, 2 "안녕하세요" , 'abc' , false , null ]

호출시에는 console.log(days[2]) // 인덱스 2번째 인 "안녕하세요" 가 로그에 출력됨...

 

array에 무언가를 업데이트 하고 싶을 때에 직접 변경하기

ex:) days[2] = "water" // days 변수의 object 인덱스 2번째인

"안녕하세요""water"로 교체 된다.

 

.push() 로 추가 할수 있음

ex:) days.push('생선') // days 라는 변수에 '생선'이라는 string 값을 추가해준것

const 의 object값을 변경하는 행위는 const 자체를 변경하는 것이 아니고

object 값을 변경하는 것이기 때문에 재할당 오류와 관계 없다.

profile
꿈꾸는 개발자

0개의 댓글