[2024 JS 심화 프론트 스터디] 이서영 #1주차 "JS 1주차 스터디"

 

 

1.자바스크립트 특징

 

- 프로그래밍 언어 : 사이트에 기능을 넣어줌

 

- 인터프리터 언어(코딩 한 결과를 사용자에게 건네주기 전에 포장하거나 가공하는 과정, 즉 컴파일 과정을 거치지 않는 언어)

• 개발과정이 빠르고 유연
• 버그가 덜 걸러짐
• 실행이 조금은 느림

- 동적 자료형

• 코딩의 자유로움 ex) 숫자를 저장한 변수의 값을 문자열, 불리언, 객체나 배열, 함수로 바꾸기 가능

 

 

* 자바 스크립트 실습 환경 세팅

개발자 도구 열기

• 윈도우 : Ctrl + Shift + i
• 맥 : Command + Option + i

콘솔 내용 클리어

• 윈도우, 맥 : Ctrl + l

 

2. 콘솔과 주석

 

- 콘솔

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

• 괄호 안에 출력할 값 입력 ( 타 언어의 print 와 같은 역할 )
• 개발자를 위한 메세지 출력
• 다양한 데이터 출력 가능

- 주석

console.log('Hello');

// 컴퓨터야, 너한테 하는 말이 아니야.

console.log('World');

• 컴퓨터가 무시하는 메세지 ( 코드를 읽는 사람들을 위한 메세지 )
• 윈도우 Ctrl + /
• 맥 Command + /

console.log(true); // 코드의 오른쪽에도 달 수 있음
// console.log(false);

• 코드 비활성화

/*
여러 줄의 주석을
작성하는 방법입니다.
하지만 이 방법보다는...
*/

• 여러 줄의 주석 작성 가능

 

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

 

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

let darkModeOn = true;
const PI = 3.1415926535;

• 데이터에 의미부여
• 한 데이터가 여러곳에 사용될 때
• 수정이 동일하게 적용되어야 할 때
• 고정된 값이 사용되어야 할 때

- let, const

• let : 변수 (넣은 데이터를 바꿀 수 있음)
• const : 상수 (넣은 데이터를 바꿀 수 없음)

- 식별자 명명 규칙

• 영문, 유니코드글자, 숫자 사용 가능
• 특수문자 ( $, _ )
• 숫자로 시작 X
• 공백, 예약어 X

 

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

 

-자료형 ( 프로그램에서 사용되는 데이터의 종류 )

• boolean : 참, 거짓 여부
• number : 숫자 ( 정수, 실수 용량 구분 X )
• string : 문자열
• undefined : 아직 값 지정 X / 데이터가 나올 자리 X
• null : 비어있다고 지정

-연산자

• ! : 뒤에 오는 불리언의 반댓값을 반환
• typeof : 해당 데이터의 자료형 반환

 

-비교 연산자

• == : 자료형에 관계없이 같은 값 ( != 반대 )
• === : 자료형, 값 같음 ( !== 반대 )
• > >= < <= : 크다 작다 크거나같다 작거나 같다

1 == '1'; // true 
1 === '1'; // false

 

- 부수효과 연산자

• ~++ / ++~ ( -- ) : 값을 증가시킴
• ~++ : 값을 증가시키지 않은 채로 사용
• ++~ : 값을 증가시킨 채로 사용

let num1 = 1;

console.log(num1++); // 이때는 아직 1
console.log(num1); // 이제 2로 출력
console.log(++num1) // 바로 3으로

 

- 할당 산술 연산자

연산자	의미
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 양쪽이 모두 true 일 때만 true
• || : OR 한쪽만 true 면 true 

console.log(
  true && true,
  true && false,
  false && true,
  false && false,
);
// true false false false false

console.log(
  true || true,
  true || false,
  false || true,
  false || false,
);
// true true true false

 

- 삼항 연산자

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

 

5. 객체와 배열

- 객체

• 데이터의 묶음 ( 키 : 값 의 조합 , property 라 부름 )
• 자료형 이외의 모든 데이터는 객체
• 값들에 접근하는 방법

console.log(
	person1.name, // . 뒤에 키 이름 (식별자 명명 규칙에 맞을 시)
	person1['name'] // [] 안에 키 이름을 문자열로
);

 

- 배열 

• 다수의 데이터 저장
• 근본적으로 객체

 

6. if / else ( 조건에 따라서 실행할지 말지 결정 )

// open = !open;

if (open) {
  console.log('안녕하세요.');
  console.log('자리로 안내하겠습니다.');
} else {
	console.log('영업종료되었습니다. 죄송합니다.');
}

• if 조건 이외는 else로 실행
• if안에 if를 또 넣은 중첩해서 사용 가능

- if ... else if

const a = 1;
const b = 2;

if (a < b) {
	console.log('a가 b보다 작다.'); // {}는 블럭이라 하고 블럭으로 감싸야함
} else if (a > b) {              
	console.log('a가 b보다 크다.');
} else {
	console.log('a와 b는 같다.');
}

• else if 여러번 사용 가능

7. swith

• 특정 변수/상수의 값 또는 변환값에 따라 작업을 실행할 때
• if - true 인지 false 인지 구분 후 실행, but swith는 숫자든 문자열이든 상관 X

const firePower = 1;

switch (firePower) {
	case 1:
		console.log('레어');
		break;  //break 없으면 시작부분부터 밑으로 쭉 다 나옴
	case 2:
		console.log('미디움');
		break;
	case 3:
		console.log('웰던');
		break;
	default:
		console.log('오류'); //default가 끝이니 break 안 적어도 됨
}