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

1. 변수와 상수

- 변수: let이라는 키워드로 선언된다.

let hi = '이정욱'; // hi라는 변수에 '이정욱'이라는 값으로 초기화
hi = '안녕하세요' // hi의 값을 변경
let hi = '정욱이' // 다음과 같이 let을 한번 더 쓰면서 재선언 하면 오류 발생

let을 통해 변수를 선언하게 되면 값은 재할당 할 수 있지만 재선언 할수는 없다.

 

- 상수: const라는 키워드로 선언된다

const hello = "안녕하세요!!";
hello = '니하오"; // 다음과 같이 값을 바꾸어 주면 오류 발생

const를 통해 상수를 선언하게 되면 값을 바꿀 수 없다.

 

-변수 이름 규칙

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

-const 사용을 권장하는 이유

 기본적으로 const로 선언을 해주고 변수로 사용이 필요한 경우에만 선언부에서 const를 let으로 바꾸어주는 것이 좋음

 개발을 하면서 잘못 값을 바꾸어 주는 실수를 줄일 수 있기 때문

 

-var를 사용하지 않는 이유

var는 let과 다르게 재선언이 가능하기 때문에 이러한 단점을 보완하기 위해 let을 주로 사용함.

 

2. 원시 데이터 타입

원시 데이터 타입이란?

 객체가 아니면서 메서드도 가지지 않는 데이터 (string, number, bight, boolean, undefined, null, symbol)

 

- number: 숫자를 나타내는 타입

const number = 123;

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

const number = 123n;

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

 

- string: 문자열을 나타내는 타입

const name = '이정욱';

따옴표('')를 통해 감싸주면 문자열(string)이 된다.

작은 따옴표와 큰 따옴표의 기능상 차이는 없다.

 

-백틱(Backtick) 사용법

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

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

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

 

-boolean: 참 거짓을 나타내는 타입

const isTrue = true;
const isFalse = 10 < 20;

변수에 true, false 값을 넣어주면 boolean 타입이 된다.

수식을 통해서도 가능하다

 

-null, undefined

null은 값이 존재하지 않음을 나타냄

undefined는 선언만 하고 값을 넣어주지 않은 상태

 

3. 원시 타입

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

-원시 타입: 변수가 선언되면 메모리에 고정된 크기를 할당받아 값 그 자체를 저장한다.

-참조 타임: 참조 데이터 타입은 메모리에는 주소값을 저장하고 그 주소는 힙(Heap)에 저장된 값을 가르킨다.

 

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

const arr = [1, 2, 3];

다음과 같이 배열을 선언해준다.

인덱스를 통해서 배열의 특정 값에만 접근 할 수도 있다. ex arr[0] 은 1

 

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

const obj = {
	name: '이정욱',
    	job: '개발자',
};

key: value의 형태로 값을 넣어준다.

 

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

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

점 표기법과 대괄호 표기법을 통해 객체의 값에 접근할 수 있다.

 

-배열과 객체의 중첩

const arr = [1, 2, 3, [4, 5]]; 
const arr2 = {1, 2, 3, {name: '이정욱'}];
const obj = {
	arr: [1, 2, 3],
    	something: {
        	name: '이정욱',
            },
};

다음과 같이 배열안의 배열, 배열안의 객체, 객체안의 배열, 객체안의 객체간의 중첩이 가능하다.

 

4. 연산자

-산술연산자: +, - , *, / 와 같은 산술 연산자가 있다.

console.log(1 + 2);  //3
console.log(3 * 6);  //18
console.log(7 - 1); //6
console.log(10 / 3); // 3.33333...
console.log(2 ** 3) // 8

-증감연산자

let number = 10;

number++;	//number가 11이 됨

-비교연산자

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

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

비교연산자에서 ==는 Equal Operator이고, ===는 Strict Equal Operator로 ===는 엄격하게 같은지를 비교한다.

==는 값만을 비교하는 반면 ===는 타입도 같은 지를 비교한다는 차이점이 있다.

 

console.log(null == undefined) // true;
console.log(null === undefined) // false;

var a = [1,2,3]; 
var b = [1,2,3]; 
console.log(a == b); // false 
console.log(a === b); // false

null과 undefined는 서로 타입은 다르지만 값이 없다는 점에서 ==를 통해서 비교하면 true가 나오고 ===에서는 false이다.

그리고 참조 타입끼리 비교하게 되면 얼핏 보았을 때 값이 같아보일 수 있지만 참조 타입의 값은 각 메모리의 주소이기 때문에 ==를 통해 비교했을 때도 false가 나오게 된다.

 

-논리연산자: &&(and), || (or), !(not)

const a = 2 < 3;	//true
const b = 30 > 50;	//false
const c = !a 		//false

console.log(a && b):	//true && false => false

 

-삼항연산자: (조건) ? (참일 때 실행) : (거짓일 때 실행) 의 형식

console.log(2 < 3 ? '참' : '거짓'); //참

 

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

const a = undefined;
const b = null;
const c = '이도해';

console.log(a ?? b ?? c);	//c만 값이 확정되어 있으므로 c 출력

앞에서부터 순서대로 탐색하면서 값이 확정되어 있는 변수를 찾음

 

-비트 연산자: &, |, ~, ^, <<, >> 과 같은 비트연산자가 있음

 

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

let number = 10;

number += 2; // number = number + 2 와 같음

-전개 연산자(전개 구문): 배열이나 객체를 꺼내어 전개할 수 있음

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]

전개 구문을 활용하여 다음과 같이 새로운 배열 생성 가능