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

0. Java Script 사용법

- ~.js 파일을 만들고 html 파일의 body 태그 안에 <script src="~.js"></script> 작성 (권장 사용법)

1. 변수와 상수

- 변수: let 키워드로 선언

let hi = '신진욱'; // hi라는 변수에 '신진욱'이라는 값으로 초기화
hi = '이도해'; // hi값 변경

 

- 상수: const 키워드로 선언

const hi = "신진욱";
hi = "더엘리"; // 값을 변경하면 에러
// const로 선언된 상수 값은 변경할 수 없다.

 

- 변수와 상수 이름 규칙

1. 변수나 상수 이름의 첫 번째 글자는 영어, $, _ 만 가능
2. 첫 글자 이외에는 숫자도 사용 가능 
3. 영어 소문자와 대문자는 구별됨 
4. let, const와 같은 자바스크립트 예악어는 사용 불가
5. 이름에 공백은 허용하지 않음 (Camel Case 혹은 Snake Case 방식 사용)

 

- 선언 권장사항

기본적으로 const로 선언!

값 변경이 필요한 경우에 선언부에서 const를 let으로 변경!

-> 개발하면서 값을 잘못 변경하는 실수를 줄일 수 있다.

 

- 출력 방법

console.log(변수 or 상수);

html 파일 실행 후 검사 페이지 Console 창에서 결과를 확인할 수 있다.

2. 원시 데이터 타입

원시 데이터 타입이란?

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

(string, number, bight, boolean, undefined, null, symbol)

 

- typeof 변수 or 상수 : 변수 or 상수의 타입형 반환

 

- number : 숫자 타입

const number = 123;

-(2^53-1) ~ (2^53-1) 의 범위를 표현 가능한데 이를 넘게 되면 bigint 타입을 사용하면 된다.

const number = 123n;

다음과 같이 숫자 뒤에 n을 붙여주면 bigint 타입이 된다.

 

- string : 문자열 타입

const name = '신진욱';

값에 "" 혹은 '' 를 통해 감싸주면 문자열이 된다. (""와 '' 기능상 차이 X)

 

- 백틱(Backtick) 사용법

const age = 20;
const job = '개발자';

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

백틱(`)을 사용하여 문자열을 감싸면 ${}를 통해 변수를 넣을 수 있다.

 

- boolean : true / false 타입

true, false 값을 할당해주면 boolean 타입이 된다. 

 

- null : 값이 존재하지 않는 상태

 

- undefined : 선언만 하고 값이 지정되지 않은 상태 (초기화되지 않은 상태)

3. 참조 데이터 타입

(배열, 객체, 함수 등)

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

- 원시 타입 : 메모리 공간에 변수를 위한 공간이 할당 되고 그 공간에 원시 타입의 값 저장

(원시 타입 변수가 딱 하나의 값만 저장하고 있다.)

- 참조 타입 (원시 타입 데이터들의 집합) : 힙(Heap)이라는 별도의 공간에 원시 타입 데이터 값들을 저장

(변수에는 힙 메모리 주소값을 할당하여 변수 사용 시 주소값을 참조해 사용)

 

- 배열(Array) : 데이터들의 집합

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

인덱스를 통해서 배열의 특정 값 접근 가능

 

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

const obj = {
	name: '신진욱',
    	job: '더엘리',
};

key:value의 형태

 

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

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

객체 변수.key = value (점 표기법)

객체 변수['key'] = value (대괄호 표기법)

 

- 배열과 객체의 중첩

const arr = [1, 2, 3, [4, 5]]; 
const arr2 = {1, 2, 3, {name: '신진욱'}];
const obj = {
	arr: [1, 2, 3],
    	something: {
        	name: '신진욱',
            job: '개발자'
            }
};

배열안의 배열, 배열안의 객체, 객체안의 배열, 객체안의 객체간의 중첩 가능

 

4. 연산자

- 산술연산자 : +,-,*,/,%

 

- 증감연산자 : ++, --

 

- 비교연산자 : <,>,<=,>=,==(추상비교),===(엄격비교),!==

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 출력
// 앞에서부터 순서대로 탐색하면서 값이 확정되어 있는 변수를 찾음

 

- 비트 연산자 : &, |, ~, ^, <<, >>

 

- 대입 연산자 : +=, /=, *=, -= 

 

- 전개 연산자(전개 구문) : 배열이나 문자열 등의 원소를 꺼내어 전개

const numbers = [1, 2, 3];
console.log(...numbers) // 1 2 3 과 같이 출력
// 배열이나 객체 앞에 ...를 붙여서 전개 가능

const numbers = [1, 2, 3];
const numbers2 = [4, 5, 6];
const newNumbers = [...numbers, ...numbers2]; // [1, 2, 3, 4, 5, 6]
// 전개 구문을 활용하여 다음과 같이 새로운 배열 생성 가능