노마드코더 바닐라 JS 수업 정리 - 자료형

주로 css는 head태그 안에, javascript는 body태그 안에 넣는다.
브라우저의 콘솔 창에서 자바스크립트를 실행할 수 있다.

자료형 - 숫자형(정수형, 실수형), 문자형, Booleans, Null, Undefined, array

정수형(integer)
ex) 2 ,4 ,10, ...

실수형(float)
ex) 1.4, 4.56, 0.335, ...

문자형(String)

콘솔에 원하는 내용 표시하기

console.log(콘솔에 표시하고 싶은 것);

변수(Variables)
콘솔에 10+5, 10*5, 10/5 를 각각 표시해보자.

console.log(10+5);
console.log(10*5);
console.log(10/5);

이때 10이라는 숫자를 20으로 바꿔주고 싶다면 어떻게 하면 될까?
괄호 내부의 10이라는 숫자를 일일이 바꿔줘도 되겠지만, 식이 복잡해진다면 오류가 생길 가능성도 커진다.
이 때 등장하는 것이 바로 변수이다.
변수란 프로그래밍 언어에서 값을 저장하거나 유지하는 역할을 하는 것을 말한다.
아래 예시를 보자.

const a = 10;
const b = 5;

console.log(a+b);
console.log(a*b);
console.log(a/b);

const(파이썬과 달리 변수 앞에 syntax가 추가된다. C언어와 비슷. syntax 종류도 몇 가지 있다.) 를 이용하여 a, b라는 변수에 각각 10, 5라는 값을 선언해주고, 각각의 변수를 더하거나, 곱하거나, 나눠주는 방식으로 문제를 해결하였다. 위에서 말한 것처럼 10을 20으로 바꿔주고 싶다면 각각의 10이라는 숫자를 20으로 바꿔줄 필요 없이, 10으로 선언된 a변수에 20이라는 값을 넣어주면 된다.

문자열을 변수에 담고 싶다면?

const myName = "JW";

console.log(myName);
console.log("Hello" + myName);

위 예시 코드처럼 myName이라는 변수 안에 "JW"라는 값을 넣어주었다. 숫자형과 달리 문자형은 앞뒤에 따옴표('' / "")를 붙여야 함에 주의하자. 숫자형이었던 것도 앞뒤에 따옴표를 붙이면 문자형으로 자료형이 바뀐다.

아래 콘솔출력부분을 보면, 변수를 그대로 출력하기도 했고, "Hello"라는 문자열 뒤에 변수를 붙여서 출력하기도 했다. 콘솔 창에는 JW 또는 HelloJW가 뜰 것이다.(띄어쓰기를 안했기 때문)

아까 변수 선언할 때 앞에 붙는 syntax가 여러 종류가 있다고 했는데, const말고 어떤 것이 붙는다는 것일까? 그것은 바로 let이다.

그럼 const와 let의 차이는 무엇일까? const는 내용이 변경 불가능하고, let은 내용이 변경 가능하다는 차이가 있다. 외우지 않아도 된다. const는 constant의 줄임말로서, 변하지 않는다는 뜻을 갖고 있다. 문법이 용어의 뜻을 그대로 따라가는 것이다. const를 보통 쓰고, 변수를 업데이트하고 싶을 때 let을 쓴다고 한다.

하지만 위와같은 문법 규칙은 자바스크립트가 업데이트 되면서 새로 생긴 것이고, 예전에는 그냥 var만 썼다고 한다. 하지만 이는 let과 비슷해서, const처럼 업데이트 방지 효과는 없다.

Booleans 자료형

true 또는 false 값을 갖는 자료형.

정의되지 않음. 값이 없음

null. 이것은 false와 다르다. null은 아무것도 없다는 뜻이지만, false는 false라는 값을 가지고 있다는 뜻이다.

undefined. 정의되지 않았다는 뜻. 변수는 선언됐지만 값이 정해지지 않은 경우 이렇게 뜬다.

결론적으로 null과 undefined의 차이는,

null은 변수의 값이 비어있다는 사실을 의도적으로 나타낸 것이고, undefined는 변수의 값을 정하지 않았을 때 나오는 자료형이다.

array(배열)

지금까지 나온 요소들을 하나의 묶음으로 표현하고싶다면, array를 사용하자.

const a = 1;
const b = 2;
const c = 3;
const d = 4;
const e = 5;
const f = 6;

|
V

const alphabet = [a,b,c,d,e];

array 속에 있는 요소들은 정해진 순서대로 존재한다. 첫번째 요소가 0번째, 두번째 요소가 1번째, ...

그렇다면 array속 요소를 불러올 땐 어떻게 하면 될까?

const alphabet = [a,b,c,d,[e,f]]

// 만약 d를 호출하고싶다면, 네번째 숫자인 3를 이용하면 된다.

console.log(alphabet[3]);

>> 4

결과는 d에 저장된 4라는 값이 나오게 된다. 위처럼 array 안에 array를 추가할 수도 있다.

python에서 array에 요소를 추가할 때 append를 쓰는 것처럼, javascript에서는 push를 사용한다.

const arr = [a,b,c,d,e];
arr.push(f);

console.log(arr);

>> [1,2,3,4,5,6]

array에 문자를 넣은 예시는 이렇다.

const toBuy = ["a","b","c","d","e"];
toBuy.push("f");

console.log(toBuy);

>> [ 'a', 'b', 'c', 'd', 'e', 'f' ]

객체(Objects)

아래 예시를 보자.

const playerName = "JW"
const playerScore = 100;
const playerHealth = 200;

위 변수들은 "player"라는 공통의 인자를 기준으로 이름, 점수, 체력 등을 나타내는 자료이다. 이를 좀 더 효율적으로 표현하는 방법은,

const player = {
    name : "JW", 
    score : 100, 
    health : 200,
};

이렇게 표현할 수 있다. 이를 Objects(객체)라고 부른다.

const player = {
    name : "JW", 
    score : 100, 
    health : 200,
};

console.log(player.name); // >> JW
player.score = 150; // 기존 100이라는 값을 150으로 업데이트
player.height = 170; // height: 170 이라는 정보 추가.
// 부연설명: const는 let과 다르게 바꾸지 못하는 것으로 알고 있는데 왜 바뀌었는가 궁금.
// 이는 player라는 객체 자체를 바꾼 것이 아니기 때문. 객체 내부 요소는 수정 가능.
// 만약 player라는 요소 자체를 다른 것으로 바꾸었다면, 오류 발생.

오늘은 여기까지. 그냥 기록일 뿐이어서 부정확한 정보가 많을 것이라고 생각한다.