노마드 코더 - 바닐라 JS로 크롬 앱 만들기(#2.5 ~ #2.10)

#2.5 Arrays

배열 대괄호를 쓰고 대괄호 안에 항목들은 콤마로 구분해 준다. 값을 리스트로 정리하는 것이다.

const non = [1, 2, "hello", true, null, undefined];

그리고 괄호안에는 모든 타입에 데이터들을 넣어도 된다. 그리고 배열 안의 데이터의 접근하고 싶다면 변수 이름적고 대괄호 안에 접근하고자 하는 변수가 몇번째인지 써주면 된다. 단 0부터 시작 한다는 것을 잊지말기.

console.log(non[1]); // 2를 출력한다

배열 끝에 아이템을 추가 할려면 push() 함수를 이용하면 된다.

non.push("sun");
console.log(non);
// [ 1, 2, 'hello', true, null, undefined, 'sun' ] 출력이 된다.

#2.6 Objects

객체 중괄호를 사용한다. property를 가진 데이터를 저장해준다.

const player = {name : "oenomel", age : 12 };

여기서 property를 불러오는 두가지 방법이 있다. 

console.log(player.name);
console.log(player["age"]);

player.name 을 보면 console.log와 비슷하다는 것을 알 수 있는데 console이 객체라는것을 알 수 있고 그 안에 log가 있는것이다. 그리고 property를 추가할 수 있는데 

player.fat = false;
console.log(player) // { name: 'oenomel', age: 12, fat: false } 값이 나온다.

#2.7-2.8 Functions 

함수 어떤 코드를 캡슐화 해서 그걸 계속 반복해서 사용할 수 있도록 하는것이다.

function sayhello() {
    console.log("Hi~!");
}

sayhello(); // 함수를 실행하기 위한 구문

기본적인 구조는 저러한데 function에서 데이터를 받는 방법은 function 괄호 안에 데이터를 추가하면 된다.

function sayhello(N) { // 매개변수 값이 (N,A) 이런식으로 여러개도 가능 
    console.log("Hi~!",N);
}

sayhello("Ani"); // 데이터를 function에 보낸다. Hi~! Ani 출력. 
// 인자값도 2개가 된다. 근데 여러개가 와도 앞에 값만 보낸다.

function 안에 변수들은 괄호 안에만 존재하기 때문에 function 밖에 console.log(N); 이런식으로 쓰면 오류가 난다. 중괄호 안에서만 사용이 가능하다. 

객체에 value에 function이 들어 갈 수 있다.

const calculator = {
    add : function(a,b) {
        console.log(a+b);
    }
}

function add() {
	
    } // 이거와 같은 의미 
    
calculator.add(4,2) // 6이 출력된다. 드디어 console.log()와 비슷한것을 만들게 된것이다.
// calculator이라는 객체안에 add라는 함수 console이라는 객체안에 log라는 함수 인것이다.