[JS] 노마드코더 - 바닐라JS로 크롬 앱 만들기 (2.4 ~ 2.7)

 

 

 

- 자바스크립트에서 변수를 만드는 방법 (2가지) : const / let

 

cf.) *const vs let 의 차이점?

: const → 값이 바뀔 수 X   /   let → 값이 바뀔 수 O

const a = 5;
const b = 2;
let myName = "nova";

console.log(a+b);
console.log(a*b);
console.log(a/b);
console.log("hello " + myName);

myName = "nova Shin";
console.log("your new name is " + myName);

myName 값이 nova → nova Shin 으로 변경된다.

 

cf.) 예전에는 var를 많이 사용했지만, var는 어떠한 규칙도 갖고 있지 X  →  때문에 var는 사용하지 않는 것이 좋다!

(항상 const 사용O / 가끔 let 사용O / 절대 var 사용X)

 

 

- boolean 타입

: true / false 둘 중 하나

const amIFat = false;
console.log(amIFat)

결과 : false

 

- null 타입

: 변수에 아무것도 없다는 것을 의미

(비어있다기 보다는, 아무것도 없는 상태로 채워진 것)

const amIFat = null;
console.log(amIFat)

 

- undefined 타입

: 변수는 있지만, 정의되지 않은 것을 의미

(컴퓨터 메모리 안에 공간은 존재하는데, 값이 들어가 있지 않은 것)

const amIFat = null;
let something;
console.log(something);

결과 : undefined

 

 

- Array(배열)

: 데이터로 이루어진 리스트

: [ ] 를 사용

: 안의 요소들은 ,로 구분

const mon = "mon";
const tues = "tues";
const wed = "wed";
const thurs = "thurs";
const fri = "fri";
const sat = "sat";
const sun = "sun";

const dayOfWeek = [mon, tues, wed, thurs, fri, sat, sun];

const nonsense = [1, 2, "hello", false, null, undefined];

console.log(dayOfWeek, nonsense);

 

cf.) *컴퓨터는 0부터 시작

위의 dayOfWeek에서 4번째 요소를 꺼내고 싶다면 console.log(dayOfWeek[3]); 를 해주면 된다.

(만약 [ ] 안에 해당이 없는 인덱스를 넣게 되면, undefined가 결과로 출력된다.)

 

 

dayOfWeek에 다른 원소를 추가하고 싶다면, push()를 사용한다.

const mon = "mon";
const tues = "tues";
const wed = "wed";
const thurs = "thurs";
const fri = "fri";
const sat = "sat";
const sun = "sun";

const dayOfWeek = [mon, tues, wed, thurs, fri, sat, sun];

console.log(dayOfWeek);

//Get Item from Array
console.log(dayOfWeek[3]);

//Add one more day to the Array
dayOfWeek.push(mon);
console.log(dayOfWeek);

 

 

 

- Object(객체)

: property를 가진 데이터를 저장하도록 해준다

: 각 property가 무엇을 의미하는지 알 수 없기 때문에 배열을 사용X

: { } 를 사용

: , 를 기준으로 구분되는 것  →  속성

: 속성은 key와 value로 구분 (키:값 형태)

const player = {
    name: "nova",
    points: 10,
    fat: false
}

console.log(player);
console.log(player.name); //player["name"]도 같은 결과 출력

 

객체 안의 값 수정 및 추가도 가능하다.

const player = {
    name: "nova",
    points: 10,
    fat: false
}

console.log(player);
console.log(player.name);

//Change a property of Item
player.fat = true;
console.log(player);

//Add a property of Item
player.lastName = "potato";
console.log(player);

 

 

 

- Function(함수)

: 반복해서 사용할 수 있는 코드 조각  =  코드를 캡슐화해서 실행을 여러 번 할 수 있게 해줌

: function 이름( ){ } 이런 식으로 사용

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

sayHello();
sayHello();
sayHello();
sayHello();