[자바스크립트] JavaScript의 기본 문법 -1

JavaScript 기본 개념

 

 1.  JavaScript

 

 

자바스크립트는 오늘날 가장 많이 사용되는 프로그래밍 언어로 web페이지를 만들기 위해 개발된 언어이다. HTML과 CSS와 함께 사용되며 다양한 기능들과 웹을 움직이는 웹의 근육과 같은 역할을 한다.

 

웹브라우저에는 자바스크립트 소스를 읽고 처리하는 해석기가 존재하기에 웹문서에서 <script> 태그를 통해 작성 가능하며, 자바스크립트 소스만 별로 스크립트 파일로 작성한 이후 웹문서와 연결하여 사용할 수도 있다.

자바스크립트는 현재 웹페이지를 만드는데에만 사용되는 것이 아닌, 웹서버, 데스크톱 애플리케이션, 모바일 애플리케이션 등 다양한 곳에서 활용되기도 하며 현재 다양한 라이브러리와 프레임워크가 개발되어 편리하게 굉장히 많은 기능들을 구현할 수 있는 장점이  존재한다.

 

 

JavaScript 변수와 상수 / 자료형

 

 1. 변수와 상수 

 

프로그래밍에서 변수와 상수는 어떠한 값을 담을 수 있는 박스 같은 존재이다. 변수는 "변하는 수"를 뜻하며, 상수는 "변하지 않는 수"를 의미한다. 자바스크립트에서 변수를 선언하는 방법으로는 var와 let이 존재하는데, var는 과거에는 많이 사용되었지만 호이스팅 이슈와 각종 다양한 문제로 인해 현재에는 잘 사용되지 않고 let을 주로 사용한다. 자바스크립트에서 상수는 const로 선언한다. 

 

• Let

let age=27;

 

자바스크립트의 특성상 자료형을 통한 선언이 아닌,  let을 통해 변수를 선언하기 때문에 숫자뿐만 아니라 문자열과 모든 자료형을 let으로 선언이 가능하다.

하지만 한번의 선언 이후 같은 이름으로 중복 선언은 불가능하다.  ex) let age=27;... let age=28; --> X

 

• Const

const birth = "2000-10-30"

 

const는 상수로서 선언한 이후에 값 할당으로 값을 변경할 수 없게 된다.

 

const today="2024-03-25"
today="2023-03-25"

console.log(today);

위처럼 코드를 작성할 시 왼쪽과 같은 오류가 발생하게 된다.

 

 

 

자바스크립트에서 변수와 상수는 이름으로 구분되기 때문에 이름을 중복으로 선언한 경우 오류가 발생할 수 있다. 
또한 이름을 짓는데 여러 가지 규칙이 존재하는데, 기억해야 할 규칙들은 다음과 같다.

1. $과 _를 제외한 기호는 사용할 수 없다.

2. 변수 or 상수의 첫 글자가 숫자일 수 없다.

3. 변수 or 상수의 이름에는 예약어가 들어올 수 없다. 

 

 

 2. 자료형

 

원시타입	객체 타입  / object
Number	Array
String	Function
Boolean	RegexExp
Null
Undefined

 

 

자료형이란 프로그램에서 처리할 데이터의 형태를 뜻한다.  자바스크립트의 자료형은 원시타입과 객체타입으로 나뉘는데 이 게시글에서는 원시타입만 다루도록 하겠다. 원시타입에는 Number( 숫자), String( 문자열), Boolean ( 논리형)인 기본유형과 undefined와 null 같은 특수유형이 있다. 

 

 

• Number 

자바스크립트에서는 존재할 수 있는 모든 숫자 값 포함한다. 예를 들어 양수, 음수, 실수 모두 포함되며, 기본적인 사칙연산과 % 모두 적용된다. 

// 1. Number Type
let num1=27;
let num2=1.5;
let num3=-23;

let inf=Infinity;   //양의 무한
let minf=-Infinity; //음의 무한

let nana=NaN;   //숫자가 아님을 의미

 

 

• String

‘’과 “”을 통해 선언, 문자열끼리 덧셈으로 이어 붙이기 가능 ``으로 선언할 수도 있는데, 기본적으로는 “”과 동일하지만, $()을 통해 변수의 값을 동적으로 넣을 수 있음. —> 템플릿 리터럴 문법

// 2. String Type
let myName="점심"; 
let myMenu="돈가스";
let introduce=myName+myMenu;

console.log(introduce);

let introduceText=`${myName}으로는 ${myMenu}을 먹었습니다.`;
console.log(introduceText);

 

 

• Boolean : 참과 거짓을 나타낼 때 사용한다. true와 false로 나타낸다.
• Null : 비어있다는 것을 의미하며 값이 유효하지 않을 때의 상태이다.
• Undefined : 자료형이 지정되지 않았을 때의 상태이다. 예를 들어 변수 선언만 하고 값은 할당하지 않은 변수는 undefined상태이다.
• Null과 Undefined의 차이점: Undefined의 경우 초기화를 아직 하지 않았거나, 존재하지 않는 값인 경우 Undefined라는 특수한 형태, Null은 Undefined와 비슷하지만, 개발자가 직접 의도하에 Null이라는 값을 할당
  
  

// 3. Boolean Type
let isSwitchOn =true;
let isEmpty =false;

// 4. Null Type(아무것도 없다)
let empty=null;

// 5. Undefied Type
let empty2;
console.log(empty2)

 

 

 3. 형 변환

 

 

 

형 변환이란? ' type conversion', 'type casting'이라고도 불리며, 프로그래밍에서 자료형을 다른 자료형으로 형태를 바꾸는 것이다. 형 변환에는 묵시적 형 변환과 명시적 형 변환으로  크게 2가지로 나눌 수 있다.

 

 

묵시적 형 변환은 암묵적 형 변환으로도 불리기도 하며, 개발자가 직접 설정하지 않아도 알아서 자바스크립트 엔진이 형 변환 하는 것을 말한다. 명시적 형 변은 개발자가 형 변환 함수등을 통하여 직접 형을 변환하는 것을 말한다. 

 

// 1. 묵시적 형 변환
// -> 자바스크립트 엔진이 알아서 형 변환 하는것

let num=10;
let str = "20";

const result = num + str; //num이 묵시적으로 string으로 변환됨.
console.log(result); //1020 


// 2. 명시적 형 변환
// -> 프로그래머 내장함수 등을 이용해서 직접 형 변환을 암시
// -> 문자열 -> 숫자

let str1 = "10";
let strTonum1= Number(str1);

let str2="10개"
let strTonum2=Number(str2);
console.log(strTonum2);  //NaN

let str3="10개"         //앞에가 숫자이여야한다.
let strTonum3=parseInt(str3);
console.log(strTonum3);  //10


// -> 숫자 -> 문자열
let num1=20;
let numTostr1 = String(num1);
console.log(numTostr1 + "입니다");

 

 

JavaScript 연산자

 

 

연산자란 프로그램에서 특정한 동작을 하도록 지시하는 기호이다. 다른 상황에서 연산자란 연산만 수행하지만 프로그래밍에서는 연산뿐만 아니라 다양한 동작을 수행한다. 프로그래밍에서는 사칙연산뿐만 아니라 문자열과 문자열을 연결해서 새로운 문자열을 만들기도 하고 논리연산과 null값이 아닌 변수로 새 변수를 지정하거나 typeof를 통해 자료형을 알 수 있다. 

 

 

 1. 산술 연산자

 

+	c = a + b
-	c = a - b
*	c = a * b
/	c = a / b
%	c = a% b ( 나머지를 구한다.)
++	c++ ( 피연산자를 1 증가한다.)
--	c-- ( 피연산자를 1 감소한다.)

 

 

+, -, *, / 은 각 연산자에 맞게 산술연산을 진행한다. % 은 모듈러라고도 불리며 6%4=2와 같이 나머지를 구해준다.

++과 --는 전위연산자와 후위 연산자로 나뉘는데, 어떤 변수 a가 있다고 가정했을 때 a++인 경우 후위 연산 ++a인 경우 전위 연산을 하는 것이다. 둘의 다른 점은 기본적으로 변수가 let a=15로 선언과 할당이 이루어져 있다고 가정했을 때 console.log(++a)의 경우 16을 출력하고, console.log(a++)의 경우 15를 출력한 이후 해당 코드의 행이 끝난 이후 연산을 진행한다. ++연산은 피 연산자에 1을 증가시키고, --도 이와 마찬가지로 해당 피연산자에 1을 감소시킨다.

 

 

 

 2. 논리 연산자

 

OR	||	두 값 중 하나만 true여도 true를 반환한다.
AND	&&	두 값 모두 true인 경우에 true를 반환한다.
NOT	!	피연산자의 반댓값을 저장한다.

 

 

논리연산자는 불리언 연산자라고도 하며, true와 false 즉 boolean자료형을 다루는 연산자이다.

보통 조건문을 다룰 때 많이 사용된다.

 

let or = true || false;     //true
let and = true && false;    //false
let not = !true;            //false

console.log(or, and, not);

 

 

 3. 비교 연산자

 

다른 언어들에서는 비교연산자의 경우 비교연산자가 2개로 이루어져있지만, 자바스크립트의 경우 2개로 이루어져 있는 경우와 3개로 이루어져 있는 경우 모두 존재한다.

 

==	피연산자가 같으면 true
===	피연산자가 같고 자료형도 같으면 true
!=	피연산자가 다르면 true
!==	피연산자가 다르거나 자료형이 다르면 true
<	왼쪽 피연산자가 더 작으면 true
<=	왼쪽 피연산자가 오른쪽 피연산자보다 작거나 같으면 true
>	왼쪽 피연산자가 더 크면 ture
>=	왼쪽 피연산자가 오른쪽 피연산보다 크거나 같으면 true

 

 

위의 표를 보고 확인해보면, 비교연산자가 3개인 경우 자료형까지 같은지 다른지 확인하는 것을 알 수 있다. 

let comp1 = 1 === 2;        //false
let comp2 = 1 !== 2;        //true
console.log(comp1, comp2);

let comp3 = 2 > 1;          //true
let comp4 = 2 < 1;          //false
let comp5 = 2 >= 2;         //true
let comp6 = 2 <= 2;         //true
console.log(comp3, comp4, comp5, comp6);

 

 

 4. Null 병합 연산자, typeof 연산자, 삼항연산자

 

 

• Null 병합 연산자
  존재하는 값을 추려내는 기능을 한다. 두 가지의 변수를 "??"으로 비교하여 둘 중 값이 있는 해당 값을 변수에 초기화해 준다. 둘 다 값이 존재하는 경우?? 앞에 있는 변수의 값을 할당한다.
  
  

  let var1;
  let var2 = 10;
  let var3 = 20;
  let var4 = var1 ?? var2; //10 존재하는 값을 찾아서 var4에 초기화
  console.log(var4);
  
  let var5 = var2 ?? var3; //둘다 값이 존재하는 경우 앞에값으로 초기화​

• typeof 연산자
  
  자바스크립트의 언어적 특성상 한번 let num=1;이라고 선언하여도 number형으로 고정되는 것이 아니다. 변수로 선언 시에 언제든지 다른 자료형으로 변경될 수 있으므로 해당 변수의 현재 자료형을 알고 싶을 때 typeof연산자를 사용한다.
  
  

  let var7 = 1;
  var7 = "hello";
  
  let t1 = typeof var7;     //string
  console.log(t1);​

• 삼항 연산자
  자바스크립트에서는 대부분의 연산은 2항이 기본적이다. 삼항 연산자는 조건식을 이용해서 참, 거짓일 때의 값을 다르게 반환하는 역할을 하는 연산자이며 ( 조건식? 참 : 거짓)의 형태를 띤다.
  
  

  let var8 = 10;
  
  let res = var8 % 2 === 0 ? "짝수" : "홀수";
  console.log(res);​

  
  
  
  

 

 

---

 

이 포스팅은 Inflearn "한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지" 이정환 강사님의 강의와 이지스퍼블리싱 "[Do it!] 한권으로 끝내는 웹 기본 교과서 HTML+CSS+자바스크립트" 고경희 작가님의 책을 를 참고하여 작성되었습니다.

한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 강의 - 인프런