[2024 JS 심화 프론트 스터디] 류상우 #1주차 "JS 기초"

목차

• JS란?
• 변수와 상수
• 자료형과 연산자
• 객체와 배열
• 조건문

---

 

JS란?

JavaScript란 웹 페이지가 기능을 할 수 있게 만들어주는 언어이다. 하지만 현재는 Node.js/React Native/Electron 등의 개발로 인해 여러 분야에서 사용되기도 한다.

 

JS의 특징

• 인터프리터 언어: 코드를 실행하기 전 컴파일 과정을 거치지 않고 바로 실행된다.
• 동적 자료형: 한 번 선언한 변수가 boolean, number 등 여러 자료형을 가질 수 있다.
• 객체 지향: Prototype을 기반으로 하며 객체 지향이지만 JAVA나 C++과는 차이가 있다. 

---

변수와 상수

변수와 상수는 '주머니'이다 어떠한 값을 넣을 수도, 꺼내볼 수도 있다. 한 데이터가 여러 곳에 사용되거나 로직을 구현할 때 필요하다.

 

• var: JS초창기에 사용된 변수로 여러 문제점을 지녀 현재 사용하지 않는다.
• let: 변수, 저장된 값을 계속 변경할 수 있다. 한 변수가 여러 자료형을 가질 수도 있다.

let a = 2024; //정수형
console.log(a);
a = "Hello, WINK!"; //문자열
console.log(a);
a = true; //불리언
console.log(a);
let a = 3.14; // !똑같은 이름을 지닌 변수를 선언할 수 없다.

• const: 상수, 한 번 선언하면 값을 변경할 수 없다.

const A // !상수는 값을 지정하지 않고 선언만 할 수 없다.
const A = 2024 // 상수는 보통 대문자로 몀명한다.
console.log(A)
a = "Hello, WINK!" // !const는 값을 변경할 수 없다.

• 식별자 명명 규칙
  • 영문, 한글 및 유니코드 글자, 숫자 사용 가능
  • 특수문자는 $ 또는 _만 가능
  • 숫자로 시작할 수 없음
  • 공백 사용 불가
  • 예약어 사용 불가

---

자료형과 연산자

자료형: 데이터의 종류로 숫자, 텍스트, 참과 거짓 등이 있고 각각 필요한 용량이 다르다.

boolean	참/거짓, true와 false로 나뉜다.
number	정수/실수
string	문자
undefined	변수의 값이 지정되어있지 않다.
null	변수가 비어있다.

---

연산자: 어떤 식이나 값에 동작을 지시하는 부호를 의미한다.

typeof	뒤에 오는 데이터의 자료형을 반환한다.
!	뒤에 오는 불리언의 반대 값을 반환한다.
+	문자열을 이어붙인다.

추가적인 연산자

• 비교 연산자: boolean을 반환한다.

console.log(2 == "2"); //true
console.log(2 === "2"); //false
console.log(2 > 2); //false

 

• 부수 효과를 일으키는 연산자: 사용된 항의 값을 수정한다.
  • 변수++, ++변수: 변수의 값을 1증가시킨다. 전자는 값을 변화시키지 않고 사용하고 후자는 값을 변화시키고 사용한다.
  • 변수--, --변수: 변수의 값을 1감소시킨다. 전자와 후자의 차이는 위와 같다.
  • 할당 산술 연산자: a += b와 같은 모양을 가지며 a = a + b라는 뜻이다. +, -, *, /, %, **모두 사용 가능하다.

let a = 1;
console.log(a++); //1
console.log(a); //2
console.log(++a); //3
console.log(a += 4); //7

 

• boolean관련 연산자
  • and와 or: &&(and)는 양쪽이 모두 true면, ||(or)은 양쪽 중 하나라도 true면 true를 반환한다
  • 삼항연산자: (조건) ? (참일 시 값) : (거짓일 시 값)

console.log(true && false); // false
console.log(true || false); // true
console.log(false ? "Hello" : "WINK" // WINK);

---

객체와 배열

객체: 데이터의 묶음 - 키:값의 조합(property, 프로퍼티), {key: value, key: value}의 형식

const obj = {
name: '류상우',
age: 20
};
console.log(typeof obj); //object

 

• 값에 접근하는 방법
  • object.key (단, 식별자 명명 규칙에 맞을 때만 가능)
  • object['key']
• 프로퍼티 추가하기
  • object.key = value;
  • object['key'] = value;
• 프로퍼티 수정하기
  • obeject.key++;
  • object[key] = value;

const를 변경할 수 있는 이유: 상수 자체가 아닌 내부 데이터는 변경 가능. (배열도 마찬가지)

---

배열: 다수의 데이터를 저장한다. 키가 number타입인 객체이다. ["Hello", 1, true]의 형식이다.

length프로퍼티는 배열의 요소의 개수를 반환한다.

const arr = [1, "Hello", true];
console.log(arr.length); //3

 

• 요소에 접근하기: arr[index], arr[index] = 2, arr[index] += 5
• 요소 추가 및 제거하기
  • arr.push(value): 배열의 가장 뒤에 요소를 추가한다.
  • arr.pop(): 배열의 가장 마지막 요소를 제거하며 반환한다.

---

조건문

if  문: if (조건문) 코드 형식으로 조건문이 true이면 코드가 실행된다. 코드가 여러 줄일 때는 {}로 묶는다.

else/else if문: else 코드/else if (조건문) 코드 형식으로 if문의 조건문이 false일 때 실행된다.

if (true) console.log("It's True!") //It's True!

if (false) {
	console.log("A");
} else if (true){
	console.log("B");
} else {
	console.log("C");
}//B

---

switch 문: 특정 변수/상수의 값 또는 반환값에 따라 작업을 실행한다.

const num = 3;

switch (num) { //switch(변수/상수) {}
    case 1: //case 변수/상수의 값:
    	console.log("일 번"); //num == 1일 때 실행
    	break;               //해당 case의 마지막에 break;를 넣어야 함
    case 2: 
    	console.log("이 번"); //num == 2일 때 실행
    	break;
    case 3: 
    	console.log("삼 번"); //num == 3일 때 실행
    	break;
    default:
    	console.log("default"); //case에 해당하는 값이 없을 때 실행
        break;
} //삼 번

switch (num) {
	case 1:
    case 2: //여러 case가 동일한 코드를 실핼할 때
    	console.log("3보다 작다."); //num == 1 || num == 2일 때 실행
    case 3:
    	console.log("3이다.")
}