Programming/JavaScript

[JavaScript] 자바스크립트의 기초-1

dev seon 2023. 11. 20. 13:17

자바스크립트란?

자바스크립트는 하이레벨의 객체지향, 다중패러다임의 프로그래밍 언어입니다.

프로그래밍 언어는 컴퓨터에 지시를 내리는 언어입니다.

하이레벨이란 우리가 복잡한 부분을 고려할 필요가 없다는 것,

객체지향이란 객체를 기반으로 하여 사용하는 언어라는 것,

멀티 패러다임은 다른 종류의 프로그래밍을 할 수 있다는 것입니다.

HTML과 CSS로 내용과 디자인을 마치고 웹앱을 만들기 위해 사용하는 프로그래밍 언어입니다.

 

우리는 자바스크립트를 이용하여 프론트엔드의 역할인 동적인 효과와 웹앱을 만들 수 있습니다.

리액트, 엥귤러, 뷰 같은 라이브러리를 활용하기 위해 자바스크립트 실력을 키워두는 것이 좋습니다.

그리고 자바스크립트로 웹 서버, 백엔드의 역할을 하기 위해 노드를 사용할 수 있습니다.

또한 자바스크립트를 이용해 모바일 앱과 데스크톱 앱도 제작할 수 있습니다.

 

자바스크립트 파일을 링크하는 법

html 파일의 </body> 앞에 아래의 내용을 삽입하면 됩니다.

<body>
...
  <script src="script.js"></script>
</body>

 

Value와 Variable

Value는 값이라는 뜻으로 프로그래밍에서 가장 근본적인 정보단위입니다.

Variable은 변수라는 뜻으로 값을 저장하는 박스입니다.

선언된 변수를 바꾸면 뒤에 있는 모든 변수의 값이 한 번에 바뀝니다.

let firstName = "John";
console.log(firstName)

 

변수의 이름을 정할 때는 규칙이 있습니다.

camelCase는 두 단어 이상일 때 첫 단어는 소문자, 다음 단어의 첫 글자는 대문자로 쓰는 방법입니다.

자바스크립트에서는 camelCase를 표준으로 사용합니다.

변수 이름은 숫자로 시작할 수 없으며 특수 문자는 '_'와 '$'만 가능합니다.

또 자바스크립트에 있는 기본 명령어들은 변수 이름으로 사용할 수 없습니다.

변수의 첫 글자는 소문자여야 합니다. 대문자가 나오면 안됩니다.

단, 변하지 않는 값인 상수에 한해 대문자로 쓸 수 있습니다.

 

데이터 타입

자바스크립트에서 Value는 Object 또는 Primitive로 나눌 수 있습니다.

그중 Primitive에 있는 7개의 데이터타입을 알아보겠습니다.

 

1. Number(숫자)

2. String(문자열) : 따옴표를 사용해서 표현

3. Boolean : True, False 논리타입

4. Undefined: empty value

5. Null: empty value

6. Symbol: Unique, cannot be changed

7. BigInt : 큰 숫자

 

이 중 1~3번이 가장 중요하고 많이 쓰이는 데이터타입입니다.

자바스크립트는 동적 타이핑을 지원하여 데이터 타입은 자동적으로 결정됩니다.

이에 따라 하나의 변수의 값을 서로 다른 데이터 타입으로 쉽게 바꿀 수 있다는 장점이 있습니다.

 

 

주석 다는 법

// 짧은 주석
/* 여러 줄
   주석을
   달 때
   사용합니다
 */

 

변수 선언 방식

var은 옛날 방식의 변수 선언 방식이고 모던 자바스크립트에서는 let과 const를 사용합니다.

let은 나중에 바뀔 수 있는 변수를 선언할 때 쓰입니다.

const는 바뀌지 않는 상수인 변수를 선언할 때 쓰입니다.

 

기초 연산자

연산자는 값을 변환하거나 값을 결합하게 해 줍니다.

그중 기초적인 연산자를 살펴보겠습니다.

 

수학 연산자에는 더하기(+), 빼기(-), 곱하기(*), 나누기(/)가 있습니다.

제곱 연산을 할 때는 (**)을 활용합니다.

더하기를 이용하여 두 개의 다른 문자열을 연결할 수도 있습니다.

 

데이터 타입을 확인하는 방법은 typeof 연산자를 사용하는 것입니다.

console.log(typeof year)

 

등호(=)는 할당 연산자입니다.

아래 있는 연산자들이 할당 연산자입니다.

let x = 10 +5;
x += 10; // x = x +10 = 25
x*4 = 4; // x = x * 4 = 100
x++; // x = x + 1
x--; // x = x - 1

 

마지막으로 비교연산자가 있습니다.

부등호와 등호를 사용하여 두 값을 비교할 수 있습니다.

결과는 True 또는 False로 나옵니다.

 

연산자의 우선순위

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Operator_precedence

 

Operator precedence - JavaScript | MDN

Operator precedence determines how operators are parsed concerning each other. Operators with higher precedence become the operands of operators with lower precedence.

developer.mozilla.org

 

MDN 문서 아래에 보이는 우선순위 번호대로 연산자가 실행이 됩니다.

수학 연산과 마찬가지로 () 괄호가 가장 먼저 계산됩니다.

 

 

Udemy The Complete JavaScript Course 2024 강의를 듣고 정리한 내용입니다.