[2023 신입부원 심화 스터디] 박지민 #1주차 - 기초문법 part. 1

0. Java Script 권장 사용법

html 파일에 js 파일을 연결해야 함

• body 태그 안에 <scrpt src="파일이름.js"> 사용하여 파일명 지정

 

1. 변수와 상수

- 변수: let 키워드 사용

let hi; // hi라는 변수 선언
let hi = "안녕하세요"; // "안녕하세요"라는 값으로 초기화
-------------------------------------------------------------
let hi = "안녕하세요" // 선언과 동시에 초기화 가능
hi = "안녕" // hi 값 변경

변수는 값을 변경하는 것은 가능하지만 다시 선언은 할 수 없다.

 

- 상수: const 키워드 사용

const hello = "안녕하세요!!"

상수는 값을 변경하거나 다시 선언 X

반드시 선언과 동시에 초기화 해야함

 

- 변수 이름 규칙

1. 변수나 상수 이름의 첫 번째 글자는 영어, $, _ 만 가능
2. 첫 글자 이외에는 숫자 사용 가능
3. 영어 소문자와 대문자는 구별됨
4. 자바스크립트 예약어는 사용 불가
5. 이름에 공백 허용 X
   • Camel Case 방식 사용
   • Snake Case 방식 사용

 

- const 사용 권장 이유

기본적으로 const로 먼저 선언하고 값 변경이 필요한 경우 let으로 변경

⇒ 실수를 많이 줄일 수 있기 때문

 

- 출력 방법

console.log(변수 또는 상수);

html 파일 실행 후 검사 페이지 consol 창에서 결과 확인

 

- var 사용하지 않는 이유

let, const 없던 예전 JS에서 변수 / 상수 선언 시에 사용 -> 무언가를 선언할 때 구분 없이 선언

⇒ 중복된 이름으로 다시 선언을 해도 console.log로 확인 시 두 번째로 할당된 값이 나오면서 오류 발생 X

단점을 보완하기 위해 let과 const를 사용

 

2. 원시 데이터 타입

- 원시 데이터 타입이란?

객체가 아니면서 메서드도 가지지 않는 데이터

• string, number, bigint, boolean, undefiend, null, symbol
• typeof 변수 또는 상수: 변수 또는 상수의 데이터 타입을 알려줌

 

- 숫자 (Number): 숫자 타입 -> 따옴표 없이 숫자로만 표기

const number = 123;

bigint 타입: 숫자 데이터 타입으로 표현할 수 있는 범위인 -(2^53 - 1) ~ (2^53 - 1)를 넘었을 때 사용

const number = 123n;

지정 시에는 일반 숫자와 구분 위해 ‘숫자n’으 선언

 

- 문자열 (String): 따옴표로 감싸진 문자 -> 문자열 타입

const name = "박지민";

• 작은따옴표 (’ ‘) / 큰따옴표 (” “) / 백틱 ( )으로 나타냄
  • 작은따옴표와 큰따옴표는 기능적 차이 X, 하나를 정해 고정적으로 사용하는 것이 좋음 

백틱 (backtick)

const name = "박지민";
const age = 22;

const msg = '저는 ' + name + '이고, ' + age + '살 입니다.';
const msg2 = `저는 ${name}이고, ${age}살 입니다.`; // 백틱 사용

따옴표와 + 기호 없이 변수를 ${ }안에 넣고 문자열 만들기 가능

- Boolean: 참 또는 거짓 둘 중 하나만 값으로 가질 수 있는 논리 타입

 

- Null: 값이 아직 지정되지 않았음을 의미 (변수를 선언만 하고 초기화 하지 않은 상태)

⇒ 무언가를 선언했을 때 아무 값을 넣지 않아도 기본적으로 undefined로 설정 됨

 

3. 참조 데이터 타입

- 원시 타입과 참조 타입의 차이점

원시타입

변수 생성 → 메모리 공간에 변수를 위한 공간이 할당 → 그 안에 저장하고자 하는 원시 타입의 값이 저장

• 원시 타입의 변수는 직접적으로 값을 가리키는 형태가 됨
• 원시 타입이 값 하나 만을 저장

참조 타입

원시 타입 데이터들의 집합 → 몇 개가 될지 모르는 여러 개의 값을 저장

힙(heap) 이라는 별도의 공간에 값을 저장 → 변수에는 힙을 가리키는 메모리 주소 값만 저장

• 변수 사용 시 주소 값을 참조하여 사용
• 배열, 객체, 함수 등이 해당

 

- 배열 (Array): 데이터들의 집합으로 구성

대괄호([ ])로 묶고 쉼표(,)로 구분

const arr = [1, 2, 3]; // 배열 선언 및 초기화

인덱스: 배열에 위치한 순서 -> 0부터 시작

• 배열에 있는 특정 위치의 값에만 접근 가능

 

- 객체 (Object): 여러 타입을 가진 데이터들의 집합

각각의 요소가 키와 값으로 구성 → 키와 값의 쌍 = 프로퍼티

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

const obj = {
	name: '박지민',
	job: '학생',
};

 

- 점 표기법과 대괄호 표기법

점 표기법: 객체 이름 뒤에 점을 붙이고 접근하려는 프로퍼티에 키 값 지정

대괄호 표기법: 객체 이름 뒤에 대괄호 열고 키 값을 문자열로 지정

obj.name // 점 표기법
obj['name'] // 대괄호 표기법

⇒ 일반적인 상황에서는 점 표기법 사용

 

- 배열과 객체의 중첩

배열 안에 배열, 배열 안에 객체,객체 안에 배열, 객체 안에 객체 넣기 가능

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

 

4. 연산자

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

 

- 증감 연산자: 숫자를 증가 시키거나 감소 시킬 때 사용하는 연산자

• 증가 연산자(++) : 피연산자를 1 증가
• 감소 연산자(—) : 피연산자를 1 감소

 

- 비교 연산자: 비교할 때 사용하는 연산자

• <, >, ≤, ≥
• ==, === : 양 변이 같은지 비교
  • 두 번 비교는 추상 비교
  • 세 번 비교는 엄격 비교 → 두 번 쓸 때보다 양 변의 값을 타입까지 더 정확하게 비교 → 일반적으로 사용

const a = 123;
const b = '123';

console.log(a==b) // true
console.log(a===b) // false

• !== : 양 변이 같은지 같지 않은지 비교

 

- 논리 연산자

• AND (&&) - 양 변에 있는 조건이 모두 참일 때 참
• OR (||) - 양 변에 있는 조건이 하나만 참이어도 참
• not(!=) - 피연산자의 값을 부정

 

- 삼항 연산자: 조건의 결과가 참인지 거짓 인지에 따라 다른 실행 결과를 가짐

• 세 개의 피연산자를 가짐 -> (조건) ? (참일 때 실행) : (거짓일 때 실행)

 

- 널리쉬(Nullish) 연산자: 여러 개의 피연산자 중 값이 확정되어 있는 변수를 찾음

차례대로 각각의 변수가 어떤 값이 확정되어 있는지 체크 & 확정되어 있는 값 선택

const a = undefined;
const b = null;
const c = "박지민";

console.log(a ?? b ?? c); // c <- c만 값이 확정되어 있기 때문

 

- 비트 연산자: 이진 연산 (바이너리 연산자 의미)

• AND(&), OR( | ), NOT(~), XOR(^), left shift(<<), right shift(>>)

 

- 대입 연산자: 등호(=)

복합 대입 연산자: 산술 연산자와 대입 연산자 합침

• +=, -=, *=, %=, **=

 

- 전개 구문 (Spread Syntax): 반복이 가능한 어떤 객체에 적용할 수 있는 문법의 한 종류

전개 구문 사용 → 가지고 있는 요소를 펼치는 역할

• 배열이나 객체의 변수 앞에 점 3개 사용

const numbers = [1, 2, 3];
console.log(...numbers) // 1 2 3과 같이 출력

• 배열 여러 개를 합칠 수 있음

const numbers1 = [1, 2, 3];
const numbers2 = [4, 5, 6];
const newNumbers = [...numbers1, ...numbers2]; // [1, 2, 3, 4, 5, 6]