1. 자바스크립트란?
- 기능이 제한된 '마크업 언어'인 html과 css와 달리 반응하고 결과를 산출되도록하는 '프로그래밍 언어'임
- 초기에는 브라우저만 읽고 실행할 수 있었지만 엔진의 추출이후 활용영역이 확장됨
- 컴파일 과정을 거치지 않는 인터프리터언어임
- 개발과정이 빠르고 유연하지만 버그가 덜 걸러지고 실헹이 조금 느림
2. 콘솔과 주석
- 콘솔
console.log('출력할 값'); //괄호 안에 출력한 값을 입력
console.log(1, 2, 3); // 쉼표로 구분하여 다수의 데이터 출력 가능
console.log(this); // 다양한 데이터 출력 가능
console.log(console); // 복잡한 데이터를 편리하게 펼쳐서 볼 수 있도록 해줌
- 타 언어의 print와 같은 역할
- 주석
//로 표현하여 우측에 있는 내용 무시
/*
여러 줄의 주석을
작성하는 방법입니다.
*/
- 컴퓨터가 무시하는 언어로 코드를 읽는 사람을 위한 메시지를 담음
3. 변수와 상수에 데이터 담기
- 변수
let a = 5; // a라는 주머니에 5라는 데이터를 담기
a = "안녕하세요" // 데이터의 종류 자료형에 있어 민감하지 않음
let b // 선언만 할 수 있음
- let을 사용하며 특정 주머니를 생성함
- 넣은 데이터를 바꿀 수 있음
- 상수
const A = 4; // 상수는 보통 대문자로 명명
- const를 사용하여 특정 주머니를 생성함
- 넣은 데이터를 바꿀 수 없음
- 선언만 할 수 없음
4. 기본 자료형들과 연산자
- boolean : 참/거짓 여부
let bool1 = true; //참
let bool2 = false; // 거짓
- typeof 연산자 : 해당 데이터의 자료형을 반환
- ! 연산자 : 뒤에 오는 불리언의 반대 값을 변환
- number : 숫자
let num1 = 10; // 정수
let num2 = 3.14; // 실수
// 정수/실수간 구분없음
// 사칙연산
console.log(1 + 2); // 덧셈
console.log(3 - num1); // 뺄셈
console.log(num1 * num2); // 곱하기
console.log(num1 / num2); // 나눗셈
- string : 문자열
// 작은따옴표 또는 큰따옴표로 둘러쌈
const str1 = 'Hello';
const str2 = "월드 🌐"; // 비 알파벳 문자 및 이모지 등 표현 가능
5. 연산자 더 알아보기
- 비교연산자
== | 자료형에 관계없이 같은(값으로 치환될 수 있는) 값임 |
!= | ==의 반대 |
=== | 자료형도 같고 같은 값임 |
!== | ===의 반대 |
> | 오른쪽보다 크다 |
>= | 오른쪽보다 크거나 같다 |
< | 오른쪽보다 작다 |
<= | 오른쪽보다 작거나 같다 |
- boolean을 변환
-부수효과를 일으키는 연산자
- ~++ : 값을 증가시키지 않은 채 이용
- ++~ : 값을 증가시킨채 이용
let num3 = 4;
let num4 = 8;
let num5 = num3++ * ++num4;
// num5 = 4(num3)x9(num4+1)
console.log(num3, num4, num5); // 5, 9, 36
- 할당 상술 연산자
연산자 | 의미 |
x += y | x = x + y |
x -= y | x = x - y |
x *= y | x = x * y |
x /= y | x = x / y |
x %= y | x = x % y |
x **= y | x = x ** y |
- 삼항 연산자
- 조건에 대하여 ?(참일떄의 값) :(거짓일떄의 값)
let num6 = 10234;
console.log('곰돌이는 ' + (num6 % 3 === 0 ? '귀엽다.' : '못생겼다'));
// 곰돌이는 못생겼다
// ㅠㅠ
6. 객체와 배열
- 객체 : (키 : 값)의 조합
- 이 둘의 조합을 프로퍼티라고 부름
// 예시
const person1 = {
name : '김규현',
age : 21,
married : false
};
- 값들에 접근하는 방법
console.log(
person1.name, // . 뒤에 키 이름으로 접근 가능
person1['name'] // [] 안에 키 이름을 문자열로 ''이 필요
);
- 프로퍼티추가 및 수정
person1.job = 'student'; // job : student로 추가됨
person1['bloodtype'] = 'AB'; // bloodtype : AB로 추가됨
person1.age++; // age에 해당하는 21이 21+1로 22됨
- 해당 상수가 아닌 그 내부 데이터이므로 const임에도 추가및 변경 가능
- 배열 : 키 없이 데이터만 저장
const hello = [false, 4.45, 'hi', person1]; // person1처럼 객체도 들어갈 수 있음
- 프로그래밍에서 숫자는 0부터 세기 때문에 요소에 접근할때 [0]부터 시작함
- push를 하여 요소를 추가하거나 pop을 이용하여 제거 혹은 반환후 제거가능함
- 객체와 배열의 중첩사용도 가능함
7. if / else 구문
- if 문 예시
if (true) console.log('사실'); // true 라면 사실을 출력하고
if (false) console.log('거짓'); // false 라면 거짓을 출력하라
- 여러줄 코드
let open = true; // open 에다가 true라는 값을 넣음
// 여러줄 코드
if (open) {
console.log('안녕하세요.');
console.log('자리로 안내하겠습니다.');
}
- if를 여러번 사용해서 나타내도 되지만 else를 사용하여 나타낼 수도 있음
8. switch문
- switch문
- 특정 변수/상수의 값 또는 반환값에 실행할 때 이용
const dog = 1;
switch (dog) {
case 1 :
console.log('말티즈');
break; // break 가 없다면 dog = 1일떄 나머지 값도 모두 출력됨
case 2 :
console.log('푸들');
break;
case 3 :
console.log('진돗개');
break;
default :
console.log('오류')
}
'WINK-(Web & App) > Express.js (Node.js) 스터디' 카테고리의 다른 글
[2024 JS 심화 백엔드 스터디] 이지원 #2주차 (0) | 2024.05.06 |
---|---|
[2024 JS 심화 백엔드 스터디] 김수아 #1주차 "JS~switch문" (0) | 2024.04.09 |
[2024 JS 심화 백엔드 스터디] 김태일 #1주차 "JS 기초" (0) | 2024.04.08 |
[2024 JS 심화 백엔드 스터디] 이지원 #1주차 (0) | 2024.04.08 |
[2024 JS 심화 백엔드 스터디] 김민서 #1주차 "JS 기본 (1)" (0) | 2024.04.08 |