Javascript 핵심 익히기(1)

Javascript는 웹 개발에 쓰이는 프로그래밍 언어이다.

초기 웹 브라우저의 시대가 열렸을 때 javascript만 작동할 수 있도록 표준이 생겼다.

(웹 개발을 하기 위해서 자바스크립트는 필수적!)

 

• 변수

변수 : 데이터를 담는 공간

우리가 웹에서 보는 상품 정보, 이미지, ID 입력창 등은 전부 데이터를 바탕으로 보여지는 결과물이다.

• 선언과 정의

변수를 선언할 때 어떤 변수를 사용할지 정해야한다.

자바스크립트에서는 var, let, const를 사용한다.

var = name;
name = "Tom";

var name = "Tom";

//1. var는 같은 이름의 변수를 다시 사용할 수 있다.
var num1 = 20;
var num1 = "Tim";

//2. let은 한번 선언된 변수에 다시 새롭게 선언할 수 없다.
let num2 = 20;
num2 = "hello";
let num2 = "Tim"; // 에러 발생

//3. const는 한번 선언된 변수에 다시 새롭게 선언할 수 없다. 변수 값이 더이상 변경되지 않도록 할때 사용
contst num3 = 30;
num3 = "Tim"; //에러 발생

변수명은 "영문+숫자"로 지어야 하며 띄어쓰기와 특수문자가 불가능하다.

 

• 자료형

자료형은 데이터의 종류를 의미한다. 

데이터는 각각의 타입을 가지고 있다.

 

(1) 기본 자료형(Primitive Type)

string(문자), number(숫자), boolean(참/거짓 여부)이 있다.

또한, 자바스크립트에서는 null과 undefined 자료형도 존재한다.

 

null은 값이 없을 때 사용하는 자료형이고,

undefined는 변수를 선언만 하고 정의하지 않은 상태일 때 들어가는 자료형이다.

 

*변수의 자료형을 확인하는 문법으로 typeof가 있다.

console.log(typeof name) //string 출력

 

(2) array(배열)

array는 object(객체)의 종류 중 하나로 object 자료형이다.

array는 배열 혹은 리스트(List)라고 불린다.

var productNames = ["농구공", "영양제"] //array 자료형 []
var productIds = [10, 20]; //array 안에는 모든 자료형을 넣을 수 있다.
var productNestArray = [[0, 1, 2], [3, 4, 5]]

var length = productNames.length //productNames의 길이를 알고 싶다면?

var firstValue = productNames[0]; //productNames의 첫번째 인자의 값에 접근하고 싶다면?
var secondValue = productNames[1];

productNames[2] = "키보드"; //productNames에 새로운 값을 추가하고 싶다면?
articleNames.push("키보드")

 

(3) 객체(object)

객체(object)는 자료들을 key, value 형태로 저장하는 자료형이다.

중괄호 { } 안에 key와 value를 순차적으로 넣는다.

//객체 형태
{
	key1 : value1,
	key2 : value2,
}

//실제 객체 사용
var product = {
	title: "키보드",
	description: "맥북 호환 가능한 키보드입니다",
	price : 100000
}

//product의 name값을 얻고 싶다면?
var productName = product["name"];
var productDescription = product.description

//product에 새로운 값을 추가, 변경하고 싶다면?
product["name"] = "마우스";
product.name = "마우스";
product["seller"] = "Tom";
product.seller = "Tom";