크롬 앱 만들기 2. JavaScript 기본 문법 익히기 (2)

이 프로젝트는 '바닐라 JS로 크롬 앱 만들기'입니다.

이 주제의 경우, NOMAD CODERS에서 누구든지 들을 수 있는 수업입니다.

노마드 코더 Nomad Coders – Clone Startups. Learn to Code.

노마드 코더 Nomad Coders

지난 시간에 이어 오늘은 객체, 함수에 대해 정리해보겠습니다.

---

다들 객체에 대해 많이 들어보셨을 것이라고 생각합니다. 객체지향프로그래밍(OOP, Object-Oriented Programming)

을 통해 대부분 아실 것이지만 들어보지 못하신 분들도 계시니 간단하게 정리하면,

객체는 여러 타입의 변수를 하나로 묶어 저장할 수 있는 데이터 타입입니다.

배열이 대괄호 ( [ ] ) 를 사용해서 선언했다면, 객체는 중괄호 ( { } )를 사용해서 선언할 수 있습니다.

const exampleObject={
	name : "HaDaBle";
	points : 100;
	friends : ["Ha" , "Da" , "Ble"];
	check : true;
 }

다음과 같이 한 사람과 관련 변수들을 하나로 묶어 정리할 수 있으며, 안에는 문자열, 정수형변수 뿐만 아니라 배열과 함수 등등도 포함될 수 있습니다.

값을 수정하거나 불러올 때에는 (객체이름) + . +(변수이름) 으로 불러올 수 있습니다.

console.log(exampleObject);
//{name : "HaDaBle" , points: 100 , friends: ["Ha","Da","Ble] , check: true} 로 출력
exampleObject.name="change";
exampleObject.points=0;
console.log(exampleObject);
//{name : "change" , points: 0 , friends: ["Ha","Da","Ble] , check: true} 로 출력

 

이번 프로젝트의 경우에는 JS를 이용해서 크롬 앱을 만드는 것이 메인이기 때문에 OOP를 중심으로 다루지 않을 예정이라 이정도까지만 다루도록 하겠습니다.

---

다음은 함수입니다.

함수는 메인함수에서 모든 걸 처리하는 것이 복잡하거나 반복해서 진행해야 하는 코드가 있을 경우, 새로운 블록을 만들어 처리할 수 있도록 하는 방식입니다.

자바스크립트에서 함수를 선언하는 방식은 function 이라고 앞에 붙이고 끝에 소괄호를 넣는 방식입니다.

function exampleFunc()
{
 console.log("Print by function");
}

다음과 같이 선언하면 exampleFunc이라는 함수를 불러올 때 마다 "Print by function"을 출력하게 됩니다.

소괄호의 경우에는 변수를 함수에 입력할 때에 사용됩니다.

예를 들어 설명하면,

function sum(x,y)
{
 let z=x+y;
 console.log(z);
 }
 
 //함수를 불러올 때 값 대입
 sum(1,3);
 //4 출력

함수는 그냥 값을 출력하는 것 뿐 아니라 메인함수로 계산된 값을 다시 보내줄 수 있습니다.

값을 다시 보내줄 때에는 return을 사용하며, 위의 간단한 예시를 변형하여

function sum(x,y)
{
 return x+y;
 }
 const z = sum(1,4);
 //z=5와 같은 의미가 된다.
 console.log(z);
 //5출력

다음처럼 사용할 수 있습니다.

다음엔 간단히 조건문에 대해 쓰도록 하겠습니다.