[2025 1학기 React.js 스터디] 이승준 #1주차

⚠️ var

var x = 1;

• 초창기에 사용했으나 오류의 원인으로 작용하는 경우가 많아 사용 ❌
• let과 const로 대체

let & const

let a = 1 // a란 주머니에 1이라는 데이터를 담기
let b = a; // b란 주머니에 a의 데이터를 넣기
a = 2; // a 주머니 안에 든 데이터 변경

• let : 변수 - 넣은 데이터를 바꿀 수 있다.
• const : 상수 - 넣은 데이터를 바꿀 수 없다.

a = "안녕하세요";
b = true;

 

• 앞에 let이나 const가 오지 않으면 주머니를 새로 만들어 내는 것이 아닌 값을 새로 수정한다는 의미이다.
• 앞에 a=2가 저장되어있었는데 a에 문자열 데이터를 넣어줬다. JAVA나 C언어(자료형 고정)를 공부한 사람들은 의아할 것이다. 그러나 Java Script에서는 자료형에 관계없이 수정이 가능하다. (엄격하지 않다)

const A = 1; // 상수는 보통 대문자로 명명
A = 2; // 불가능
const B; // 불가능

• 첫번째 줄에서 const A = 1로 선언&초기화를 해줬다. 여기서 상수는 보통 대문자로 명명한다. (무조건 그래야하는건 아니지만 국룰)
• 두번째 줄에서는 A가 상수인데 수정하려고 A에 2값을 넣으려고 했으므로 불가능하다.
• 상수는 선언만 할 수 없다. (let은 가능)

let c = 1;
let c = 2; // 불가능

 

• 같은 이름의 변수를 다시 생성할 순 없다.
• 브라우저 콘솔에서 따로따로 실행할 때는 가능 (개발자 도구에서 각각 따로 입력하는 경우 가능) - 매우 특수케이스

식별자 identifier 명명 규칙

1. 대부분의 문자 표현 사용 가능
2. 특수문자 $ , _ 사용 가능
3. 숫자로 시작 불가
4. 공백 사용 불가
5. 예약어 사용 불가

---

자료형

• 자바스크립트는 동적 자료형 (변수/상수 등 데이터가 들어갈 곳에 자료형 제한이 없음)

boolean

• true / false 두 값으로 이루어진 자료형
• !true = false / !false = true 처럼 !는 뒤에 오는 불리언의 반대 값을 반환

typeof

console.log(typeof 2);
console.log(typeof "Hello");
console.log(typeof true);

• 첫번째줄에서는 number이 나오고 두번째는 string, 세번째는 boolean이 나오는데 여기서 알 수 있듯이 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)
console.log(10 % 3) // 나머지를 구하는 연산

• number 자료형은 정수형, 실수형을 다 포함하며, 용량 구분이 없다.

string

const str1 = "Hello";
const str2 = " World";
str3 = str1 + str2;
console.log(str3); // 답 : Hello World

• string 자료형은 문자열이다.
• string 자료형끼리 더하기 연산자는 이어붙여진 값을 반환한다.

undefined & null

let x;
console.log(x, typeof x);

• undefined : 아직 값이 지정되지 않음 / 데이터가 나올 곳이 아닌 자리

x = null
console.log(x, typeof x) // null의 타입은 'object'로 반환 - 초기 설계부실

• null : 비어있다고 지정
• null의 타입은 'object'로 반환 - 초기 설계부실

---

비교 연산자

• boolean을 반환
• == : 자료형에 관계없이 같은값으로 치환될 수 있는 값임
• === : 자료형 & 값 같음 (반대 : !==)
• > , >= , < , <= : 수학과 같음

const str1 = 'ABC';
const str2 = 'DEF';

console.log(str1 > str2) // false

• 문자열의 경우 사전순서상 뒤로 오는 쪽이 더 크다고 인식한다

부수효과를 일으키는 연산자

let num1 = 1;
console.log(++num1); // 2
console.log(num1); // 2

• 앞에 증감 연산자가 오면 먼저 적용한다. 따라서 두번째줄의 값은 2가 출력되고 자연스레 세번째 값도 2이다.

console.log(num1++);
console.log(num1);

• 뒤에 증감 연산자가 오면 후에 적용한다. 따라서 두번째줄의 값은 아직 적용이 안 한 값이 되고 값은 1이고, 나중에 적용되므로 세번째줄은 2가 출력된다.

할당 산술 연산자

• x ㅁ= y : x = x ㅁ y : 여기서 ㅁ안에 + , - , / , * , ** , %가 올 수 있으며 앞과 같은 의미를 가진다. ( 문자열은 +=만 가능)

let str3 = "안녕";
str3 += "하세요";

console.log(str3); // 안녕하세요

boolean 관련 연산자

• AND && : 양쪽이 모두 true일 때만 true 반환
• OR || : 한쪽만 true면 true 반환

삼항 연산자

• (조건) ? (참일 때 값) : (거짓일 때 값)

let num5 = 103247;

console.log(
  'num5는 3의 배수' +
  (num5 % 3 === 0 ? '입니다.' : '가 아닙니다.')
);

---

객체

• 데이터값의 묶음 ( 키 : 값)의 조합
• 위에서 소개한 자료형 이외에 자료형들은 다 객체

(ex)

const person1 = {
  name: '이승준',
  age: 23,
  married: false
};

값에 접근하는 방법

console.log(
	person1.name, // . 뒤에 키 이름 (식별자 명명 규칙에 맞을 시)
	person1['name'] // [] 안에 키 이름을 문자열로
);

• 이런식으로 객체이름.키이름으로 써도 되고 []안에 키 이름을 문자열로 써도 된다.

프로퍼티 추가 & 수정하기

person1.job = 'programmer';
person1['bloodtype'] = 'O';

console.log(person1);

person1.age++; // 기존에 값에 후위 증감연산자로 증가
person1['job'] = 'PM'; // 'job'키의 값을 'PM'으로 수정

console.log(person1);

• 이런 식으로 수정, 추가해줄 수 있다

배열

• 다수의 데이터를 저장
• 근본적으로 객체
• 자료형 제한 X
• .length : 요소의 개수를 반환

const myArray = [true, 3.14, 'Hello', person1];

console.log(myArray, myArray.length);

요소 접근하기

console.log(
	myArray[0], // 프로그래밍에서는 수를 0부터 셈
	myArray[1],
	myArray[2],
	myArray[3]
);

• 0부터 인덱스로 접근 가능.

요소 추가 및 삭제

myArray.push(123); // 요소를 추가

console.log(myArray);

const popped1 = myArray.pop(); // 마지막 요소를 반환하며 제거

console.log(popped1, myArray);

myArray.pop(); // 그냥 제거만 하는 용도로

console.log(myArray);

• .push(값)으로 추가하고 .pop()으로 제거 가능.
• 제거는 마지막 요소를 반환하며 제거.
• 세번째줄은 요소 개수를 건들이지않고 값만 지우는 용도.

객체와 배열의 중복사용

const person2 = {
  name: '이승준',
  age: 23,
  languages: ['Korean', 'English', 'French'],
  education: {
    school: '국민대',
    major: ['컴퓨터공학', '전자공학'],
    graduated: true,
  }
};

console.log(person2);

• 가능하다고 합니다..

if / else

const a = 1;
const b = 2;

if (a < b) {
	console.log('a가 b보다 작다.');
} else if (a > b) {
	console.log('a가 b보다 크다.');
} else {
	console.log('a와 b는 같다.');
}

• 저희가 익히 알고있는 if else elseif 구문입니다 중첩도 가능하구요 짧게 소개하겠습니다.

Switch

const firePower = 1;

switch (firePower) {
	case 1:
		console.log('레어');
		break;
	case 2:
		console.log('미디움');
		break;
	case 3:
		console.log('웰던');
		break;
	default:
		console.log('오류');
}

• 보통 특정 변수/상수의 값 또는 반환값에 따라 작업을 실행할 때 씁니다.
• 이것 또한 익히 잘 알고 있어서 소개를 간단히 하겠습니다.
• break문을 지우면 원하는 케이스가 나올때까지 패스하다가 나오면 그값부터 아래에 있는 구문들을 모조리 실행합니다.
• dafault는 위에 해당하는 케이스가 없으면 실행되는 아이입니다..