[JavaScript] 바닐라 JS로 크롬 앱 만들기 (1) - DATA TYPE: number, text, variable, booleans, null, undefined, arrays, objects

선영·2021년 9월 23일
0

JavaScript

목록 보기
1/27
post-thumbnail

2021.09.23 > JS #2.1~#2.6 수강
2021.10.19 > 복습
2021.10.22 > 정리

console.log(value);

  • 이 코드는 콘솔에 log 혹은 print 하는 역할을 한다.

  • 괄호안엔 숫자, 문자 모두 입력 가능하다.

  • web-검사(단축어:option+command+I)-console창에 그 값이 나타난다.

DATA TYPE(자료형)

관련 URL https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures

#2.1 - Basic Data Types

자바스크립트가 이해할 수 있는 데이터의 종류들
자바스크립트는 이를 위에서 아래로 읽는다.

number(숫자)

  • 1 = integal = full number(정수)

  • 1.5 = float 이랑은 다르다.

  • 이와 같은 정수는 아래와 같이 값이 도출된다!
    예시/ 1+1=2

text(문자)

  • 문자는 "" 혹은 '' 안에 들어가는 것을 말한다.

  • 예를 들어 "2" 는 text(문자) 이다.

  • string: 처음부터 끝까지 모두 글자로 이뤄져 있다
    예시/ "hello" + "my name is nico" = "hellomy name is nico"

#2.2~#2.3 - Variable(변수)

const, let 혹은 var 이 있다.
variable에 data값을 저장해놓고 불러오기 위해 사용한다.

const a = 5
console.log(a / 2);
console.log(a * 2);
console.log(a + 2);

variable에 띄어쓰기가 필요한 경우, 다음을 참고해서 작성
예시/ const my name (x) const myName (o)

const variable = value; (고정값)

  • constant=상수=계속 유지되는 값

  • 항상 const를 사용

  • 재선언 금지
    const a = b;
    const a = c;

  • 재할당 금지
    const a = b;
    a = c;

let variable = value; (변경값)

  • "variable은 추후 업데이트될 수 있다" 라는 문맥상의 의도를 보여준다.

  • 가끔 let을 사용

  • 재선언 금지 > const와의 공통점
    let a = b;
    let a = c;

  • 재할당 가능 > const와의 차이점
    let a = b;
    a = c;

#2.4 - Booleans / Null / Undefined

true or false

const(let) variable = true or false;


const(let) variable = null; --> nothing in variable

"비어있음(null)"으로 값이 채워짐
const variable = null;

let variable = undefined;

data를 저장하기 위한 variable은 있지만 아직 data가 입력되지 않은상태
추후 업데이트를 위해 let으로 설정해준다. (const로 설정시에 에러뜸)
let variable;

#2.5 - Arrays(배열)

하나의 variable 안에 많은 수의 data를 수정할 수 있는 list로써 정리
data의 항목들에 공통된 맥락이 있기 때문에, variable을 알 수 있다.

const variable = [a, b, c, d];

  • 규칙1: [ ] 대괄호 사용
  • 규칙2: , 쉼표로 구분

나열된 값들 중에 n번째 data를 찾는법

주의: 0번 부터 시작함

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri"];
console.log(daysOfWeek[0]); --> "mon"

나열된 값에 data를 추가 하는법

특정 값을 대체하기

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri"];
console.log(daysOfWeek); --> ["mon", "tue", "wed", "thu", "fri"]

daysOfWeek[2] = "sat";
console.log(daysOfWeek); --> ["mon", "tue", "sat", "thu", "fri"]

끝쪽에 값을 추가하기

const daysOfWeek = ["mon", "tue", "wed", "thu", "fri"];
console.log(daysOfWeek); --> ["mon", "tue", "wed", "thu", "fri"]

daysOfWeek.push("sat");
console.log(daysOfWeek); --> ["mon", "tue", "sat", "thu", "fri", "sat"]

여기서 잠깐,

Q. variable이 const형식인데, 값을 수정할 수 있는 이유는?

A. 질문처럼 기존에 const a = 2; 인 경우 a = 4; 처럼 재할당은 불가능하다.
하지만 array(배열)과 같은 경우에는 내용물 안의 요소들은 변경이 가능하다.
이것을 이해하기 위해 array를 하나의 박스로 생각하자.
이걸 박스로 생각하면 const daysOfWeek = ["mon", "tue", "wed", "thu", "fri", "sat"]; 이렇게 선언을 하면 이후에 daysOfWeek = ["hi"]; 이렇게 수정하는건 불가능하다.
왜냐하면 박스를 통째로 바꾸려고 하기 때문이다.
하지만 그 박스 안의 내용물들을 추가하거나 삭제할 수는 있다.


#2.6 - Objects(객체)

하나의 variable 안에 다양한 특성을 가진 property들을 묶어줌
variable 재할당 금지, property 재할당 가능

작성법 예시

const Player(variable) = {
    name: "Sunyoung",
    points: 10,
    beauty: true,
}

특정 property를 아는법

console.log(Player.name); --> "Sunyoung"
console.log(Player["name"]); --> "Sunyoung"

특정 property를 수정하기

console.log(Player); --> {name: 'Sunyoung', points: 10, beauty: true}
Player.beauty = false;
console.log(Player); --> {name: 'Sunyoung', points: 10, beauty: false}

특정 property를 추가하기

console.log(Player); --> {name: 'Sunyoung', points: 10, beauty: true}
Player.height = 172;
console.log(Player); --> {name: 'Sunyoung', points: 10, beauty: true, height: 172}

profile
Superduper-India

0개의 댓글