[2023 신입부원 기초 스터디] 조상혁 5주차 - JS가 뭐야?

JavaScript란?

웹 브라우저에서 HTML 문서에 내장한 JavaScript 를 읽으면 즉시 해석되어, 소스코드가 실행된 결과를 눈으로 볼 수 있는 클라이언트 사이드( 프론트 엔드 ) 언어이다. 웹페이지에서 특정 부분을 클릭하거나 입력했을 때, '팝업 창 띄우기', '애니메이션 효과', '통신' 등의 다양한 기능들을 추가할 수 있다.

 

html에 js 연결하는 방법

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

 

변수  

let 변수명;

동일한 변수명으로를 재할당하면 오류가 생긴다.

 

상수 

const 상수명;

상수는 선언후에 재할당이 불가하다

const 선언은 반드시 초기화를 해야한다

예시 const potato; #선언불가

올바른 예시 const potato = '';

 

console.log(변수명);

로그를 볼 수 있다

 

변수,상수 주의할 점

• 변수 상수 이름의 첫번째 글자는 영어 ,$,_ 만 가능 
• 숫자로 시작하는 변수명은 허용되지 않는다.
• 첫 글자 이외에는 숫자 사용가능
• 영어 대소문자 구별
• let, const 같은 JS 예약어는 사용불가
• 이름에는 공백사용불가

---

 

원시 데이터 타입

객체가 아니면서 메서드도 가지지 않는 데이터 

string,number,bigint,bollean,undifined,null,symbol

 

+ 데이터 타입을 알기 위한 연산자

typeof 변수명

 

참조 데이터 타입

원시 데이터와 달리 힙 이라는 공간에 값을 저장하고 변수에는 주소를 저장

 

백틱(backtick) 사용 이유

• "", '', + 연산자를 사용하지 않고 간단하게 문자열을 삽입할 수 있다.
• (\n)등 줄 바꿈이나 공백 표현을 위해서 백 슬래시로 시작하는 Escape Sequence를 사용하지 않아도 된다.
• 문자열 내부에 포함식을 포함할 수 있다.
• 멀티라인 사용이 가능하다.

//일반적인 문자열
console.log("가격은"+ price + "원 입니다.");
//템플릿 리터럴
console.log(`가격은 ${price}원 입니다.`);

---

JavaScript 연산자

 

// 산술 연산자
// +, - , * , /

console.log(10 % 5);

// 증감 연산자
let number = 10;

number++;
console.log(number);
number--;
console.log(number);

// 비교 연산자

const a = 10;
const b = 20;

console.log(a < b);
console.log(a === b);
console.log(a !== b);

// 논리 연산자

const c = 2 < 3;
const d = 30 > 50;

console.log(c && d);
console.log(c || d);
console.log(!c);

// 삼항 연산자
// 조건 ? 참일 때 실행될 부분 : 거짓일 떄 실행될 부분

console.log(2 < 3 ? '참' : '거짓');

// 널리쉬
// 여러 피연산자 중 값이 확정되어 있는 변수를 찾음
// 쉽게 말해 null 과 undefind 제외하고 찾음

const e = undefined
const f = null
const g = '감자';

console.log(e ?? f ?? g);

// 비트 연산자
// & , | , ~ , ^ , << , >>

// 대입 연산자

let num = 10;

num = num + 2;
num += 2;

// 전개 구문

const numbers = [1,2,3];
const numbers2 = [4,5,6];

console.log(...numbers);
console.log(numbers);

const newNumbers = [...numbers,...numbers2];

console.log(newNumbers);

+ Js 연산자 참고자료

표현식과 연산자 - JavaScript | MDN