JavaScript (1)

우리가 보통 프런트엔드 분야에 입문하여, 코딩을 배우기 시작하면 HTML, CSS, JavaScript 이 삼대장을 무조건 배우고 넘어간다.

여기서!!! JS은 무엇인지 지금까지 내가 학습하고 경험 한 내용을 정리해 보겠다.

---

JavaScript 란?

웹 페이지를 만들때 복잡한 기능을 구현할 수 있도록 하는 스크립팅 언어이다.

컴파일이 필요 없는 인터프리터 언어이며, 웹을 풍성하고 동적으로 만들어 주는 역할을 한다.

예를 들어, 웹으로 계산기를 만들 때 HTML과 CSS로 계산기의 구성요소와 디자인을 만들어주고 끝이 난다면, 사용자가 원하는 계산을 위해 버튼을 클릭했을 때 아무런 반응도 일어나지 않고 그저 이쁜 껍데기일 뿐이다, 이럴 때 JavaScript 를 이용하여 계산기의 계산기능을 구현할 수 있다!!!

지금부터 JavaScript의 문법을 알아보자.

JavaScript 에서 변수 선언은 Python과 달리, 변수 이름 앞에 명령문을 사용해야 한다.

변수를 선언하고 싶어? 무조건 변수선언 명령문 먼저 써! (기억하자)

변수 선언 명령문의 종류는 세가지가 있다.

1. var : 글로벌 변수 선언자라고 볼 수 있다. 문제가 많아 ( 호이스팅) 현재는 var을 보완하기 위해 let과 const 명령문이 생겼다.
2. let: var의 문제점을 보완해 지역변수 기능만 한다. const와는 다르게 변수 할당 값을 수정 할 수 있다. (재선 언 불가능, 재할당 가능)
3. const: 한번 변수 할당을 하면 그 변수의 할당값을 변경 할 수 없다. (재선 언, 재할당 불가능)

var fullName = " Jay Jung";
let age = 20;
const height = 180;

const height = 185; #이미 선언한 변수의 값을 바꿀 수 없으므로 오류가 난다!

데이터 타입:

• 원시형 데이터 타입 (primitive type) : 할당될 때 변수에 값 자체가 즉시 할당되는 타입
  1. number : 숫자를 의미하고, 파이썬과는 달리 정수 , 소수 이런 개념 없이 모두 숫자 타입으로 쓰인다.
  2. string : 문자열을 의미하며, 따옴표로 묶어 ("사과") or ('사과') 작성한다. 따옴표 안에 따옴표는 \ (백슬래쉬를) 이용해 작성할 수 있다. ('"It\\'s all right."')
  3. boolean : True , False를 의미하는 데이터 타입.
  4. null : 값이 없음을 의미(의도적으로 비어 있음). typeof를 통해 확인해보면 object타입으로 표현됨.
  5. undefined : 값이 할당되지 않음을 의미.
• 참조형 데이터 타입 (reference type) : 할당될 때 참조할 보관함의 주소가 담기는 타입
  1. object
  2. array
  3. function
  ❗여기서 중요한 포인트 ❗
• 원시형 타입과 참조형 타입의 동작 차이점을 이해하는 것이 중요하다!
• JavaScript 에서는 원시타입을 제외하고는 , 전부 참조형 데이터 타입이다. 대표적으로는 아래의 데이터 타입 등이 있다.

let x = 10;
let y = x;
x = 30;

console.log(x);
console.log(y);

#출력 값 : 변한 x 값에 따라 y 값은 변하지 않습니다.
30
10


let obj1 = {age : 20, height : 170};
let obj2 = obj1;
obj1.age = 30;

console.log(obj1.age);
console.log(obj2.age);

#출력 값 : 변한 obj1 값에 따라 obj2 값이 변합니다.
30
30

다음 글은 연산자와 조건문, 반복문 등을 간단히 정리해 보자.