[javascript 기초] const & let & var 차이점, Arrays, Object

 

교육을 들으면서 js에 대해 알아봤지만 웹 프로젝트를 진행하면서 활용하려고 하니 생각이 안나더라,, AJAX나 JSON, RESTFUL 웹서비스를 위해 javascript는 다시 한 번 집고 넘어가야겠다 싶어 노마드 코더의 바닐라 JS로 크롬 앱 만들기 강의를 들으며 정리해볼까 한다. 

 

---

JavaScript, 자바스크립트란?

 

자바스크립트는 객체(object) 기반의 스크립트 언어이다.

HTML로 웹의 내용을 작성하고, CSS로 웹을 디자인하며, 자바스크립트로는 웹의 동작을 구현할 수 있다. 자바스크립트는 주로 웹 브라우저에서 사용되나, Node.js와 같은 프레임워크를 사용하며 서버 측 프로그래밍에서도 사용할 수 있다.

 

 

<특징>

1. 객체 기반의 스크립트 언어이다.
2. 동적이며, 타입을 명시할 필요가 없는 인터프리트 언어이다.
3. 자바스크립트는 객체 지향형 프로그래밍과 함수형 프로그래밍을 모두 표현할 수 있다.

 

 

<작성법>

대소문자를 구분하여 작성하며 문장은 세미콜론(;)으로 구분된다. 큰따옴표와(" ") 작은따옴표(' ')를 구분해서 사용한다. 

 

 

<역할>

1. 요소의 추가 및 삭제
2. CSS 및 HTML 요소의 스타일 변경
3. 사용자와의  상호작용
4. 폼의 유효성 검증
5. 마우스와 키보드 이벤트에 대한 스크립트 실행
6. 웹 브라우저 제어 및 쿠키 등의 설정과 조회
7. AJAX 기술을 이용한 웹 서버와의 통신

 

 

---

 

"const" vs "let" vs "var"

 

// alert("hi");
//document.write("hello");

console.log(5555444); //콘솔에 값 출력
console.log("string"); //큰따옴표 작은따옴표 상관 없다.

const a =5; //constant(상수) a라는 변수를 생성해 값을 초기화한다.
//상수는 값을 변경할 수 없다.
console.log(a+3);
console.log(a*3);

//변수의 값을 바꾸고 싶다면 let으로 선언
let myName = "woni";
console.log("hello " + myName);

myName="sowon";
console.log("hello " + myName);

콘솔 출력 값

 

const : 상수 변수를 선언할 때 사용한다. 상수란? 변경할 수 없는 값을 의미하며, 재정의할 수 없다.

let : 변수의 값을 변경하고 싶다, 재정의하고 싶다면 let으로 선언한다.

var : const와 let이 나오기 이전 사용했던 변수 선언 타입으로 const와 let의 특징을 둘다 가지고 있다. 코드를 보호하기 위해서 사용하지 않는 것이 좋다.

 

always ‘const’ , sometimes ‘let’, never ‘var’

 

 

 

배열 ( Arrays)

 

배열은 하나의 variable (변수)에 여러개의 데이터 List(목록)을 가지는 것이다. const array = [ a, b, c, d] 이런 형식으로 배열을 정의하고 초기화할 수 있다. 

 

const amIFat = null; //값이 없는 것, 비어있는 것
let something; //undefined

console.log(amIFat);
console.log(something);

const mon ="mon";
const tue = "tue";
const wed = "wed";
const thu = "thu";
const fri = "fri";
const sat = "sat";
const sun = "sun";

//배열 : 하나의 variable 안에 데이터의 list를 가지는 것
const dayOfWeek = [mon,  tue, wed, thu, fri, sat];
const nonsense = [1,2,"hello",false,null,true,undefined];
console.log(dayOfWeek, nonsense);

//배열에서 값 받아오기
console.log(dayOfWeek[2]);

//배열에 요소 추가하기
dayOfWeek.push("sun");
console.log(dayOfWeek);

 

콘솔 출력 값

 

 

배열에 요소를 추가할때는 dayOfWeek.push() 즉) push라는 함수를 사용하는데 이 함수는 이미 초기화되어 있는 배열 맨뒤에 값을 추가해주는 역할을 한다. const는 값 변경이 안된다고 했는데? 추가라고? 의문이 들었는데, 이는 const a = 1; 이라고 정의해둔 다음에 a = 2; 라고 변경할 수 없는것이지 값은 추가할 수 있다. const a = 1;의 주소값을 예를들어 1111이라고 가정했을 때 a = 2 ;로 값을 변경하는 것은 주소값을 2222로 바꾸는 것과 똑같기 때문이다. 

 

 

 

Object

 

배열을 사용해서 속성 값들을 나열하는 것도 좋은 방법이지만 배열은 그 값들이 어떤 값을 의미하는지 알 수 없다.

예를들어 player 변수의 속성값들은 각각의 요소가 어떤 의미인지 알 수 없다. 그때 Object를 사용한다.

//이 속성값에 배열은 어울리지 않다.
//why? 각 요소들이 어떤 걸 의미하는지 알수없어서.
const player = ["woni", 1212, true, "little bit"];

 

 

//Object : property를 가진 데이터를 저장한다.
const player1 = {
    name : "sowon",
    points : "10",
    pretty : true
}

console.log(player1);
console.log(player1.name);
// = console.log(player1["name"]);

player1.pretty = false;
console.log(player1);

//{} 안에 있는 원하는 속성값을 언제든 추가하고 변경할 수 있다.
player1.lastName = "potao";
console.log(player1);

 

 

Object는 객체와 같은 개념으로 constant player1을 선언하고 초기값을 { } 괄호 안에 정의한다. , (컴마)를 통해 여러 요소들을 정의할 수 있으므로 값들을 호출할때 편리하다. 

 

즉) 설명이 필요하지 않는 데이터 리스트들은 array, 설명이 필요한 정보가 담긴 데이터 리스트들은 object로 정의하면 된다.