[2024 JS 심화 백엔드 스터디] 김수아 #1주차 "JS~switch문"

01. JS(Java Script)

JS는 본래 웹사이트에 사용될 목적으로 만들어졌다. (HTML은 웹페이지의 토대를, CSS는 이 요소들을 꾸민다.. 이 둘은 기능이 제한된 'Markup Language'이므로 'Programming Language'인 JS가 이에 생명을 불어넣는다)

이에 JS는 '브라우저'로 한정되어 있었으나, Node.js / React Native / Electron 등의 개발로 활용범위가 확장되었다. 

 

• JS는 파이썬이나 루비처럼 'Interpreter Language' (컴파일과정 거치지 않고 바로 실행)(vs. Compiled Language)
• 동적 자료형을 가짐 (코딩 자유롭게)
• 객체지향 지원하는 언어 (Prototype기반)
• First Class Object(일급 객체들) 활용해 함수형 프로그래밍

02. 콘솔과 주석

콘솔 활용하기

console.log('출력할 값');

• 타 언어의 print역할(개발자를 위한 메시지 출력)
• ; _JS에서 필수는 아니나, 많은 프로그래밍 언어에서 문 끝에 붙임

console.log(1, 2, 3);

• 다수의 데이터를 한 번에 출력할 땐 쉼표로 구분
• 브라우저 콘솔: 복잡한 데이터를 펼쳐서 보이게함

주석

컴퓨터가 아닌, 사람을 위한 메시지(컴파일 되지 않는 코드)

• // 한 줄
• /*    여러 줄     */

03. 변수와 상수에 데이터 담기

어떠한 데이터를 변수/상수라는 주머니에 넣는 것

let x = 10; //정수형
console.log(x);
x = "I'm Suah"; //문자열
console.log(x);
x = true //불리언
console.log(x);
let x = 55; //같은 이름을 지닌 변수(주머니)는 선언불가

const Y //값 지정하지 않고 선언만 불가
const Y = 5; //상수는 보통 대문자로 명명
console.log(Y);
Y = "I'm Suah" (X) //한 번 값을 선언하면 변경불가

• var: JS초창기에 사용되었으나 여러 문제점들로 인해 현재는 사용X
• let: 변수- 넣은 데이터 계속 변경가능
• const: 상수- 넣은 데이터 변경불가

** 식별자(identifier) 명명규칙

• 영문, 한글 및 유니코드*(대부분의 문자 표현)* 글자, 숫자 사용 가능
• 특수문자는 $ 또는 _
• 숫자로 시작할 수 없음
• 공백*(스페이스)* 사용 불가
• 예약어 사용 불가 - 이 사이트에서 Keywords 항목 확인

Lexical grammar - JavaScript | MDN

04. 기본 자료형들과 연산자

자료형

프로그램에서 사용되는 데이터의 종류로 각각 필요로 하는 메모리 용량 다름

(JS는 동적 자료형으로 변수, 상수 등 데이터가 들어갈 주머니에 자료형 제한이 없다)

boolean	True/False
number	정수/실수
string	문자열
undefined	변수 값 지정되지 않음
null	변수 비어있음

 

연산자

어떤 식이나 값에 동작을 지시하는 부호

typeof	해당 데이터의 자료형을 반환
!	뒤에 오는 불리언의 반대 값을 반환
+	이어붙여진 값을 반환

 

**연산자 더 알아보기

• 비교연산자(boolean을 반환)

==	자료형에 관계없이 같은 값임(값으로 치환)
!=	반대
===	자료형과 값이 같음
!==	반대
>	오른쪽보다 크다
>=	오른쪽보다 크거나 같다
<	오른쪽보다 작다
<=	오른쪽보다 작거나 같다

 

• 부수효과를 일으키는 연산자

~++	값을 증가시키지 않은 채 사용
++~	값을 증가시킨 채 사용
--	감소

 

• 할당 산술 연산자

연산자	의미
x += y	x = x + y
x -= y	x = x - y
x *= y	x = x * y
x /= y	x = x / y
x %= y	x = x % y
x **= y	x = x ** y

 

• boolean 관련 연산자

&&	AND- 양쪽 모두 T or F = T or F
||	OR-둘 중 하나만 T or F=T or F

 

• 삼항 연산자

(조건) ? (참일 시 값) : (거짓일 시 값)

05. 객체와 배열

객체

데이터 묶음- (key : value)의 조합(둘의 조합을 property라 부름)

//예시
const person1 = {
  name: '김수아',
  age: 20,
  woman: true
};

//값들에 접근하는 법(값을 반환하는 코드)
console.log(
	person1.name, // . 뒤에 키 이름 (식별자 명명 규칙에 맞을 시)
	person1['name'] // [] 안에 키 이름을 문자열로
);

//프로퍼티 추가하기
person1.job = 'student';
person1['bloodtype'] = 'AO';

console.log(person1);

//기존의 프로퍼티 수정하기
person1.age+;
person1['job'] = 'computer programmer';

console.log(person1);

**const 인데 수정할 수 있는건가?

=> 해당 상수 그 자체가 아닌, 그 내부 데이터는 변경 가능

 

배열

• 키없이 다수의 데이터를 저장
• push를 하여 요소 추가, pop을 통해 제거 혹은 반환 후 제거
• 객체와 배열의 중첩사용 가능

const test = [true, 10, 'Hello', person1];
console.log(test, test.length);

06. if / else문

if문

if (true) console.log('진실'); //만약에 T라면 '진실'출력
if (false) console.log('거짓'); //만약에 F라면 '거짓'출력

let love = true;

// 한줄 코드
if (love) console.log('사랑합니다.');

// 여러줄 코드
if (love) {
  console.log('사랑합니다.');
  console.log('정말 많이.');
}

 

if...else문

// love = !love;

if (love) {
  console.log('안녕하세요.');
  console.log('당신에게 한눈에 반했어요.');
} else {
	console.log('우리 헤어집시다.');
}

//중첩해서 사용하기
const x = 10; // 11, 12로 시도해볼 것

if (x % 4) {
  if (x % 2) {
    console.log('홀수입니다.');
  } else {
    console.log('짝수입니다.');
  }
} else {
  console.log('4의 배수입니다.');
}

07. switch문

특정 변수/상수 값 또는 반환값에 따라 작업을 실행할 때

const flower = 1;

switch (flower) {
	case 1:
		console.log('벚꽃');
		break;
	case 2:
		console.log('민들레');
		break;
	case 3:
		console.log('진달래');
		break;
	default:
		console.log('오류');
}