[2024 JS 심화 프론트 스터디] 한승훈 #1주차

안녕하세요.

 

JS 스터디 1주차입니다. 

 

 

0강. 자바스크립트는 어떤 언어인가요?

- 인터프리터 입니다.

- 웹에 참 많이 사용 됩니다.

- java와 유사한 문법을 지닙니다.

 

 

1강. 수강을 위한 준비

WebStorm 사용하도록 하겠습니다. VSCode 사용해도 좋아보입니다.

 

 

2강. 콘솔과 주석

 

 - 콘솔

JS에서 출력 결과를 확인하고 싶을 경우에는

console.log()를 사용합니다.

print와 굳이 차이를 두자면.. 값을 잘 받아오고 있는지처럼 테스트용으로 유용하게 사용됩니다.

 

- 주석

컴파일되지 않는 코드입니다.

// 한 줄

/*

여러

줄*/

 

여러 줄을 쭉 선택하고 cmd+/인거로 기억합니다.. 이거 하시면 주석 한번에 되어 참 편리합니다.

 

3강. 변수와 상수에 데이터 담기

let 와 const를 주로 사용합니다.

let과 달리 const는 상수라서 데이터가 바뀌지 않는 특징이 있습니다.

 

const A = 1;
console.log(A);
// 결과는 1

 

* 이름(식별자)의 네이밍 규칙이 있습니다.

긴 내용인데요, 요약하자면

- 문자, 숫자, 언더바, $ 이렇게 사용한다고 보면 편합니다.

- 이 중 숫자로 시작할 수 없습니다.

- 예약어는 역시 사용 불가합니다.

 

4강. 기본 자료형들과 연산자

JS는 동적 자료형을 사용해 자료형 제한이 없습니다.

이 중 다소 낯설 수 있는 typeof, undefined과 null에 대해 이야기해보겠습니다.

 

 

let num = 1;
console.log(typeof num);

>>>number
// typeof는  데이터의 자료형을 반환합니다.

 

 

 

*undefined, null

undefind: 아직 정의되지 않은 상태입니다.

고의적으로 비워놓은 null과 대조됩니다.

 

5강. 연산자 더 알아보기

 

*비교 연산자?

대입 연산자 =를 여러 개 사용하면 비교 연산자가 됩니다.

==은 자료형과 상관없이 같은 값일 경우 true.

===은 자료형까지 같아야 true가 반환됩니다.

 

*증감연산자 ++와 --

값을 증가시키는 거지만, 전위와 후위의 차이가 있습니다.

 

let a = 1;
console.log(a++);  >>> 1
// 1을 출력하고, a는 2로 변경됨
console.log(++a);  >>> 3
// a가 3으로 변경되며 출력된다.

 

**AND와 OR

boolean을 다루는 AND는 &&으로, OR은 ||으로 표기됩니다.

AND는 모두 true시 true를, OR은 하나라도 true시 true를 가집니다.

 

**삼항 연산자

(조건) ? (참일 경우의 값) : (거짓일 경우의 값)

조건의 참일 경우 : 이전의 값을, 거짓일 경우 이후의 값을 반환합니다.

let boolean = true;

let result = boolean ? '참' : '거짓';
>>> 참

 

6강. 객체와 배열

*객체는 키:으로 묶인 데이터입니다.

let me = {
  name = "한승훈",
  age = 22,
  gender = male
 }

객체를 이렇게 정의할 경우, 

console.log(
  me.name,
  me['gender']
 );

 

로 값에 접근이 가능합니다.

const로 선언하여도 자유롭게 내부 데이터 변경 가능합니다.

 

*배열

다수의 데이터를 저장.

const array = [1, 41, 'tyler'];

console.log(array)

요소의 자료형에 제한이 없다.

array는 index로 접근이 가능하다.

python의 arrayList와 동일하게 추가나 반환 가능.

 

** 객체와 배열은 중첩 사용이 가능하다.

예시는 아래와 같다.

const person = {
  name: '한승훈',
  age: 22,
  languages: ['Korean', 'English', 'Chinese'],
  education: {
    major: ['소프트웨어', '인공지능'],
    graduated: false,
  }
};

console.log(person);

console.log(person.languages[2]);
// 객체 person의 하위 배열 languages에 접근 >> English
console.log(person.education.graduated);
// 객체 person의 하위 객체 education의 키 graduated에 접근 >> false

 

 

7강. if-else 문

조건문인 if 문이 사용 가능하다.

if (time > 6) {
  console.log('저녁 시간입니다.');
} else {
	console.log('저녁 시간이 아닙니다.');
}

 

 

else if 또한 사용이 가능하다.

if (time > 18) {
  console.log('저녁 시간입니다.');
} else if (time > 12) {
	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의 배수입니다.');
}

 

 

8강. switch 문

다른 조건문인 switch 문이 사용 가능하다.

const dice = 4;

switch (dice) {
	case '1':
		console.log('1칸 전진');
		break;
	case '2':
		console.log('2칸 전진');
		break;
	case '3':
		console.log('3칸 전진');
		break;
	case '4':
		console.log('4칸 전진');
		break;
	case '5':
		console.log('5칸 전진');
		break;
 	case '6':
		console.log('6칸 전진');
		break;
	default:
		console.log('다시던져');
}

 

switch가 받는 자료형은 여러 가지가 가능합니다.

1회차 진도인 8강 switch  설명으로 블로깅을 마치겠습니다.

감사합니다.