1. 개요
가. JavaScript란?
- JavaScript는 오늘날 가장 많이 사용되는 프로그래밍 언어이다.
나. JavaScipt의 역할
- HTML: 요소들의 내용, 배치, 모양을 정하기 위해 사용하는 언어 / 색상이나 디자인 등의 수정은 불가능.
- CSS: 요소들의 색상, 크기 등의 스타일을 설정할 수 있음.
- JS: 웹 내부에서 발생하는 다양한 기능을 만들 수 있는 언어 / 웹을 움직이게 하는 웹의 근육이라고 표현할 수 있음.
2. 변수와 상수
가. 변수, 상수란?
▶ 값을 저장하는 박스
나. 변수 선언
// 1. 변수
let age = 27; // age 변수 선언, 초기화(초기값)
console.log(age);
age = 30;
console.log(age); // 변수 변경됨.
// let age;와 같이 초기값이 없이도 설정 가능
// let age = 40;과 같이 중복 선언 불가능다. 상수 선언
// 2. 상수
const birth = "2002.10.03";
// birth = "123";으로 값 바꾸기 불가능
// const birth;와 같이 초기화 무조건 필요함 ▶ 가장 중요한 것은 변수와 다르게 상수는 무조건 초기화를 해야한다는 것
라. 변수 명명 규칙
1) 네이밍 규칙
// 3. 변수 명명규칙 (네이밍 규칙)
// 3-1. $, _를 제외한 기호는 사용할 수 없다.
let $_name
// 3-2. 숫자로 시작할 수 없다.
let name1;
// let 2name; (x)
// 3-3. 예약어를 사용할 수 없다.
// let let (x)
// let if (x)2) 변수 명명 가이드
// 4. 변수 명명 가이드
let salesCount = 1;
let refundCount = 1;
let totalSalesCount = salesCount - refundCount;▶ 협업을 위해 단순히 a, b로 쓰는 것이 아닌 이 변수가 어떤 것을 의미하는지 정확하게 표기하는 것이 원칙이다.
3. 자료형
가. 자료형이란?
▶ 자료형(Type) = '집합'
동일한 속성이나 특징을 가진 원소들을 묶은 것이다.
ex) 고양이와 강아지는 '동물'이라는 집합으로 묶임.
나. 원시 타입
▶ 기본형 타입이라고도 불리며, 프로그래밍에 있어 가장 기본적인 값들의 타입을 의미한다.
1) Number Type
// 1. Number Type
let num1 = 27;
let num2 = 1.5;
let num3 = -20;
console.log(num1 + num2);
console.log(num1 - num2);
console.log(num1 * num2);
console.log(num1 / num2);
console.log(num1 % num2); // 모듈러 연산이외에도 ▼
let inf = Infinity; // 양의 무한대
let minf = -Infinity; // 음의 무한대
let nan = NaN; // 수치 연산이 실패했을 때의 결과 값으로 보통 사용한다. (Not a Number)2) String Type
// 2. String Type
let myName = "김유겸"; // 문자열은 무조건 작은 따옴표나 쌍 따옴표로 감싸야 함.
let myLocation = "인천";
let introduce = myName + myLocation; // js는 문자열 간 연산 가능// 2-1. 템플릿 리터럴 문법
let introduceText = `${myName}은 ${myLocation}에 거주합니다.` ▶ 백틱 안에서는 변수의 값을 동적으로 넣을 수 있다.
3) Boolean Type
// 3. Boolean Type
let isSwitchOn = true;
let isEmpty = false;▶ 현재 상태를 나타내는데 주로 사용함.
4) Boolean Type
// 4. Null Type
let empty = null;▶ 아무것도 없음을 나타냄.
5) Undefined Type
let none; // 아무것도 할당하지 않았으므로 'undefined' 출력Null vs Undefined
- null은 명시적으로 할당해줘야하는 값.
- undefined는 변수를 선언하고 아무런 값을 할당하지 않았을 때 자동으로 들어가는 값.
다. 형 변환
▶ 어떤 값의 타입을 다른 타입으로 변경하는 것을 말함.
1) 묵시적 형 변환 (암묵적 형 변환)
▶ 개발자가 직접 설정하지 않아도 알아서 자바스크립트 엔진이 형 변환 하는 것을 말함.
// 1. 묵시적 형 변환
// -> 자바스크립트 엔진이 알아서 형 변환 하는 것
let num = 10;
let str = "20";
const result = num + str; // 덧셈 과정에서 str 타입으로 묵시적 변환 됨
console.log(result); // 10 + 20 = "1020"2) 명시적 형 변환
▶ 개발자가 직접 함수 등을 이용해 형 변환을 일으킴. (내가 시켜야만 바뀜.)
// 2. 명시적 형 변환
// -> 프로그래머 내장 함수 등을 이용해서 직접 형 변환을 명시
// 2-1. 문자열 => 숫자
let str1 = "10";
let strToNum1 = Number(str1); // Number 내장 함수 사용
console.log(10 + strToNum1);
let str2 = "10개"
let strToNum2 = parseInt(str2); // parseInt 내장 함수 사용 -> 숫자가 앞쪽에 나와있어야 함
console.log(strToNum2);
// 2-2. 숫자 -> 문자열
let num1 = 20;
let numToStr1 = String(num1); // String 내장 함수 사용
console.log(numToStr1 + "입니다");4. 연산자
가. 연산자(Operator)란?
▶ 프로그래밍에서의 다양한 연산을 위한 기호, 키워드를 말함.
ex) 덧셈 연산자 (+), 곱셈 연산자 (*), 뺄셈 연산자 (-), 나눗셈 연산자 (/) 등
나. 연산자의 종류
1) 대입 연산자
▶ 변수의 값을 저장할 때 사용하는 가장 기초적인 연산자
// 1. 대입 연산자
let var1 = 1;2) 산술 연산자
// 2. 산술 연산자
let num1 = 3 + 2;
let num2 = 3 - 2;
let num3 = 3 * 2;
let num4 = 3 / 2;
let num5 = 3 % 2;
let num6 = 1 + 2 * 10; // 곱셈, 나눗셈, 모듈러 연산이 우선순위가 높음, ()를 사용하면 우선순위 높아짐
console.log(num6);3) 복합 대입 연산자
▶ 산술 연산자 + 대입 연산자
// 3. 복합 대입 연산자
let num7 = 10;
// num7 = num7 + 20;
num7 += 20; // or -= or *= or /= or %=
console.log(num7);4) 증감 연산자
▶ 값을 1씩 늘리거나, 1씩 줄일때 사용하는 연산자
// 4. 증감 연산자
let num8 = 10;
console.log(++num8); // 전위 연산
console.log(num8++); // 후위 연산5) 논리 연산자
▶ Boolean 타입의 값을 다룰때 사용하는 연산자
// 5. 논리 연산자
let or = true || false; // 하나만 참이면 참
let and = true && false; // 두개의 값이 참이어야 참
let not = !true; // 반전
console.log(or, and, not);6) 비교 연산자
// 6. 비교 연산자
let comp1 = 1 === 2; // 동등 비교 연산자 (==일때는 자료형까지의 비교는 안됨.)
let comp2 = 1 !== 2; // 비동등 비교 연산자
console.log(comp1, comp2);
let comp3 = 2 > 1; // 대소 비교 연산자
let comp4 = 2 < 1;
console.log(comp3, comp4);
let comp5 = 2 >= 2;
let comp6 = 2 <= 2;
console.log(comp5, comp6);7) null 병합 연산자
▶ 존재하는 값을 추려내는 기능을 하는 연산자로써, null이나 undefined가 아닌 값을 찾아낸다.
// 7. null 병합 연산자
let var1;
let var2 = 10;
let var3 = 20;
let var4 = var1 ?? var2; // var1은 현재 undefined값, var2는 10
console.log(var4); // 따라서, var4에는 var2의 값인 10이 저장됨
let var5 = var1 ?? var3;
console.log(var5);
let var6 = var2 ?? var3; // 만약, 둘 다 undefined값이 아니라면?
console.log(var6); // 맨 처음에 적힌 값이 출력됨
//----example----
let userName = "김유겸";
let userNickName = "6_yummy";
let displayName = userName ?? userNickName;
console.log(displayName);8) typeof 연산자
▶ 값의 타입을 문자열로 반환하는 기능을 하는 연산자
// 8. typeof 연산자
let var7 = 1;
var7 = "hello";
let t1 = typeof var7;
console.log(t1); // string의 결과값 출력9) 삼항 연산자
▶ 항을 3개 사용하는 연산자, 조건식을 이용하여 참 또는 거짓일 떄의 값을 다르게 반환한다.
// 9. 삼항 연산자
let var8 = 10;
// 요구사항: 변수 res에 var8의 값이 짝수 -> "짝", 홀수 -> "홀"
let res = var8 % 2 === 0 ? "짝수" : "홀수";
// ?를 기준으로 첫번째 항에는 조건식을 적기, :을 기준으로 왼쪽은 참일 때의 반환값, 오른쪽은 거짓일 때의 반환값
console.log(res);