[2023 신입부원 기초 스터디] 도승준 4주차 -JS는 사실 ... JavaScript의 약자이다

JMH 보고이써? 나 사실 HTML CSS보다 JS가 훨씬 적성에 맞는거가타......

 

1.변수

변수 선언 

let 변수명;

 

변수 초기화

변수명 = '값'; (숫자 자료형일경우 따옴표는 쓰지 않는다.)

 

변수 선언과 초기화 동시에 

let 변수명 = '값'; 

상수 선언과 초기화 동시에

const 상수명 = '값';

 

console.log() -> 콘솔에 괄호 안의 값을 출력해준다. 값을 바꿀때, let을 다시 쓰면 변수를 재할당해주는 것이므로 오류가 난다.

상수를 선언해주었을때는 수정이 불가능하고, 선언과 초기화가 동반 되어야 한다.

 

변수 선언 규칙

1. 변수나 상수이름의 첫번째 글자는 영어,$, _ 만 가능하다. (숫자 불가)

2. 첫 글자를 제외하고는 숫자도 사용 가능하다.

3. 소문자와 대문자는 구별하여 사용한다.

4. let, const와 같은 JS에서 이미 사용하고 있는 예약어는 사용이 불가하다.

5. 공백문자는 사용 불가능하다.

 

변수를 선언하는 또 다른 방법?

- var 키워드. let과 const가 없던 시절 변수나 상수를 선언하기 위한 코드였다.

하지만 var에는 치명적인 약점이 몇 가지 있어 let과 const로 대체되게 되었는데, 그중 하나가

예를 들어 var abc = 123; var abc = 345;와 같이 abc 변수를 두번 선언하게 되면 당연히 let에서 처럼 error가 떠야 하는데,

var은 그렇지 않고 나중에 선언해준 값인 345가 출력된다. 

따라서 우리는 var 키워드 대신 let과 const를 애용해주도록 하자 ^__^

 

원시 데이터 타입

객체가 아니면서 메서드도 가지지 않는 데이터들을 일컫는다.

ex) string, number, bigint, boolean, undefined, null, symbol

 

String

string은 따옴표로 묶어 표기해주면 되는데, C++이나 python과 다르게 ' '와 " "가 완전히 기능상으로 동일하므로 혼용해서 써도 된다.

다만, 키보드 자판 상 ~밑에 있는 `(BackTick)이라는 것도 사용할수 있는데, 밑의 코드 블럭을 보자.

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

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

위 코드 블럭에서 msg는 BackTick을 사용하지 않은 문자열, msg2는 BackTick을 사용하여 만든 문자열이다.

둘 다 출력 결과는 저는 개발자이고, 23살 입니다. 로 동일하다.

BackTick을 사용하지 않는 것이 번거로울 수 있기 때문에, 사용 가능한 경우에 BackTick을 적극 활용하자.

 

BigInt 

숫자 뒤에 n을 써서 표시한다. 일반 정수형으로 나타내지 못하는 -2^53 -1 < x < 2^53  이상의 범위를 나타낼때 사용한다.

 

Boolean

참 또는 거짓을 나타낼 때 사용, 일반적으로 True , False가 들어가지만, 비교식(2<3)등도 사용할 수 있다. 비교식을 사용하는 경우는 비교식의 진위 여부에 따라 Boolean 변수의 값이 달라진다

 

Null 

값이 아예 존재하지 않는 데이터

Undefined 

값이 아직 지정되지 않은 데이터

 

참조 데이터 타입

원시 데이터 타입처럼 고정된 크기를 한번에 할당 받는게 아니라, Heap이라는 별도의 공간에 값을 저장하고, 변수에는 Heap을 가리키는 메모리 주소 값을 저장한다.

원시 타입의 데이터가 메모리에 저장되는 방식

참조 타입의 데이터가 메모리에 저장되는 방식

참조 데이터 타입에는 배열, 객체 , 함수 등이 있는데 이번 강의에서는 배열과 객체만 다루었다.

 

배열

같은 데이터 타입의 집합을 말한다. index와 값으로 이루어져있다. 

const arr = [1,2,3] //배열

 

객체

const obj = {
	name: '도승준',
    job: '개발자',
}; //객체

위 코드블럭에서 obj는 객체이고, name과 job은 obj의 property이다. property와 값을 연결할때는 =이아닌 :로 연결해주어야한다. 또한 property의 마지막에는 ;가 아닌 ,로 이어준다.

 

배열과 객체는 중첩 가능하다.

const Arr = [1, 2, 3, [4, 5]]

위의 예시는 배열과 배열을 중첩한 사례이고,

const Arr = [1, 2, 3, {name: '도승준'}]

위의 예시는 배열과 객체를 중첩한 사례이다.

당연히 객체의 property로 배열을 넘겨주는 것도 가능한데,

const obj = {
	arr: [1,2,3],
    somethine: {
    	name: '도승준',
    },
};

위 코드블럭이 그 사례이다.

 

연산자

연산자는 우리가 이미 알고있는 것과 거의 일치한다. 빠르게 짚고 넘어가보자

• 산술 연산자(+, -, /, % , **(거듭제곱을 계산해주는 지수연산자))
• 증강 연산자(++, --)
• 비교 연산자(<, >, ==, ===, >=, <=)
  ==는 추상비교를 해주는 연산자이고, ===는 엄격 비교를 해주는 연산자인데, 예를 들어
  const abc = 123;, const cdf = '123'; 일때, abc == cdf 는 True지만, abc === cdf 는 false이다.
  따라서 우리는 ===를 더 많이 사용하게 된다.
• 삼항 연산자 - 조건 ? 참일경우 실행될 부분: 거짓일 경우 실행될 부분
• 널리쉬 연산자 : NULL 이나 Undefined가 아닌 값이 확정되어있는 변수를 찾는다
• 비트 연산자 : 다른 언어들과 다르게 js에선 거의 평생 쓰지 않을 수도 있으니 넘어가자 . 다른 언어의 것들과 
  똑같기도 하다.
• 대입 연산자 ( =, +=, -=, /=, **=)

전개 구문

전개 구문이란 , 반복이 가능한 객체( ex) 배열, 문자열) 에 적용 할 수 있는 문법을 말한다.

const numbers = [1, 2, 3]
console.log(...numbers) //전개 연산자를 사용한 구문, 출력 결과는 1 2 3
console.log(numbers) //전개 연산자 미사용 구문, 출력 결과는 [1, 2, 3]

위와 같이 사용하면 매우 편리한 구문임을 알 수 있다.

 

전개 연산자를 사용해 배열의 덧붙이기 등도 가능하다.

const numbers = [1, 2, 3];
const numbers2 = [4, 5, 6];
const newNumbers = [...numbers, ...numbers2]; //전개연산자를 사용해 두 배열을 더해주었음
console.log(newNumbers) //출력결과는 [1, 2, 3, 4, 5, 6]

 

 

이상 끗 !!