[2024 JS 심화 프론트 스터디] 박지민 #1주차 "JS"

자바스크립트는 어떤 언어인가요?

• 자바스크립트는 웹사이트에 사용될 목적으로 만들어짐
• 현재 node.js, react native, electron 등 다양한 분야에서 사용됨

자바스크립트의 특징

1. 인터프리터 언어: 코드를 실행하기 전 컴파일 과정을 거침 X
2. 동적 자료형: 한 번 선언한 변수가 문자열, boolean, number 등 여러 자료형을 가질 수 있다.
3. 객체지향 지원: 방식이 자바나 C++과는 차이가 있는 프로토타입 기반

 

콘솔과 주석

consol.log('출력할 값');  // 괄호 안에 출력할 내용 입력 (print 역할)
consol.log(1, 2, 3);  // 쉼표로 구분 -> 다수의 데이터 한 번에 출력 가능
consol.log([true, false], {a:1, b:2});  // 다양한 데이터 출력 가능
// 주석 = 코드를 읽는 사람을 위한 메시지 - 이케 달아여
/*
여러 줄은
이렇게에
*/

 

변수와 상수에 데이터 담기

변수 & 상수: 데이터가 들어있는 주머니 -> 여러 곳에 사용 가능, 수정 / 고정된 값 사용 가능, 로직 구현에 있어 필요

• var: JS 초창기에 사용 - 여러 문제점들 존재 -> 현재 사용 X
• let: 변수 - 데이터 변경 가능, 한 변수에 여러 자료형 사용 가능
• const: 상수 - 데이터 변경 및 다시 선언 X, 반드시 선언과 동시에 초기화, 

식별자 명명 규칙

• 영문, 한글 및 유니코드 글자, 숫자 사용 가능
• 특수문자는 $ 또는 _만 가능
• 숫자로 시작 X
• 공백 사용 불가
• 예약어 사용 불가

 

기본 자료형들과 연산자

자료형: 프로그램에서 사용되는 데이터의 종류

• boolean: 참 / 거짓 여부 (true / false)
• number: 숫자 (정수/실수)
• string: 문자열 (따옴표로 감싸진 문자)
• undefiend: 값 지정 X 상태
• null: 변수가 비어있음

연산자: 어떤 식이나 값에 따라 동작 지시하는 부호

• typeof : 해당 데이터의 데이터 타입 반환
• ! : 뒤에 오는 boolean의 반대 값 반환
• + : 문자열을 이어붙임

 

연산자 더 알아보기

비교 연산자: boolean 반환

const a = 1;
const b = 1;
const c = '1';

consol.log(a == b)  // true
consol.log (a != b)  //false 
consol.log(a == c)  // true - 자료형 관계 X
consol.log(a === c)  // false - 자료형 관계 O
consol.log (a > b, a <= b)  // false true

 

부수효과를 일으키는 연산자: 사용된 항의 값 수정

• 변수++ / 변수--: 변수의 값을 1증가/감소 - 값을 변화시키지 않고 사용
• ++변수 / --변수: 변수의 값을 1증가/감소 - 값을 변화시키고 사용

let num = 1;

consol.log(num++);  // 1
consol.log(num);  // 2

consol.log(++num);  // 3
consol.log(num);  // 3

num += 4
consol.log(num)  // 7

 

산술 연산자: 더하기(+), 빼기(-), 곱하기(*), 나누기(/), 모듈러(%), 지수 연산자(**)

 

boolean관련 연산자

• && (AND) - 양 변에 있는 조건이 모두 참일 때 참
• || (OR) - 양 변에 있는 조건이 하나만 참이어도 참
• 삼항 연산자: (조건) ? (참일 떄) : (거짓일 떄)

 

객체와 배열

객체: 데이터의 묶음 - 키와 값으로 구성 → 키와 값의 쌍 = 프로퍼티 (property)

• 중괄호({ })로 묶고 콜론(:)으로 키 값 설정, 쉼표(,)로 구분

const obj = {
    name: '박지민',
    age: 23,
};

 

값들에 접근하는 방법

obj.name  // . 뒤에 키 이름
obj['name']  // [] 안에 키 이름을 문자열로

 

프로퍼티 추가

obj.job = '학생';
obj['job'] = '학생';

 

기존의 프로퍼티 수정

obj.age--;
obj['age'] = 22;

 

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

 

배열: 다수의 데이터 저장 - 키가 number 타입인 객체 - 대괄호([ ])로 묶고 쉼표(,)로 구분

length 프로퍼티: 배열의 요소 개수 반환

const arr = [true, 3.14, 'Hello', person1];
consol.log(arr.length);  // 4

 

요소들에 접근하기: arr[index]

요소 추가 및 삭제

arr.push(value)  // 배열의 맨뒤에 요소 추가
arr.pop()  // 배열의 가장 마지막 요소 반환하며 제거

 

배열과 객체의 중첩: 배열 안에 배열, 배열 안에 객체,객체 안에 배열, 객체 안에 객체 넣기 가능

const arr = [1, 2, 3, [4, 5]];
const arr = [1, 2, 3, { name: '박지민' };
const obj = {
	arr: [1, 2, 3],
	something: {
		name: '박지민',
	},
};

 

if / else문

if문: if (조건문)의 조건이 거짓이면 블록 내부에 진입하지 않음
if ~ else문: 조건식이 거짓일 때 실행되게 하려면 if문 다음에 else 작성

else if문: 여러 개의 조건을 한 번에 처리 가능

if (조건) {
	조건이 참일 때 실행  // 거짓이면 블록 내부 진입 X
} else if (조건) {  // 여러 번 사용 가능
	위의 조건 거짓 else if 조건 참일 때 실행
} else {
	위의 조건들 모두 거짓일 때 실행
}

 

switch문

동일한 조건이 주어지고 그 조건의 값에 따라 다른 명령을 실행

switch (조건) {  // 일치하는 조건 만나면 이후에 만나는 break까지 명령 실행
	case 값1 : 명령1
    		// 실행할 부분 끝나면 써야 함
		break;  // 나머지 조건 확인 X 조건문 빠져나감
	case 값2 : 명령2
		break;
	default: 명령  // 마지막에 위치 - 위에 나열된 case에 참 X -> 실행
}