[2024 JS 심화 백엔드 스터디] 김태일 #1주차 "JS 기초"

본 글은 다음 영상(~switch문)을 보고 정리한 글입니다.

https://www.inflearn.com/course/%EB%89%B4%EB%B9%84%EB%A5%BC-%EC%9C%84%ED%95%9C-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8#curriculum

[지금 무료] 뉴비를 위한 자바스크립트 | 얄팍한 코딩사전 - 인프런

---

1.자바스크립트란?

 

• 자바스크립트 용도

- 마크업 언어로 만들어진 것들에게 무엇인가를 시키려면 프로그래밍 언어인 자바스크립트를 사용해야함

- 따라서 사용범위가 브라우저로 한정되어 있었고,  프론트엔드 개발자들의 전유물이었음.

- Node.js 의 개발로 활용 영역 확장

 

 

• 자바스크립트 특징

인터프리터 언어 - 개발과정이 빠르고 유연 but 버그가 덜 걸러지고 실행이 조금 느림 (유의미한 느림은 아님)

동적 자료형 - 규칙이 덜 깐깐함

 

 

 

 

2.콘솔과 주석

자바스크립트는 쉼표로 구분하여 다수의 데이터를 한번에 출력 가능

다양한 데이터를 출력 가능

 

 

• 주석

- 컴퓨터가 무시하는 메시지, 코드를 읽는 사람을 위한 메시지

- 자바스크립트에서는 //(슬래시 2개)로 주석처리

- 코드를 비활성화 할때도 사용 

- 주석이 여러줄일때는 /* ~~ */ 로 가능 혹은 ctrl + / 로 적용 (후자가 더 편리)

 

 

 

 

3.변수와 상수

데이터를 변수,상수라는 주머니에 넣는것 --> 데이터에 의미 부여

한 데이터가 여러곳에 사용될때 편리

이전에는 var를 가지고 변수를 만들어 사용 --> let 과 const로 대체

 

 

• let 변수

- 데이터를 넣은 후 언제든지 바꿀 수 있음

- 주머니를 만든 이후 값을 따로 넣어도 무방 

- 주머니를 다시 만드는 것은 불가능

 

 

• const 상수

- 넣은 데이터를 수정 불가능

- 주머니를 만든 이후 값을 따로 넣는 것은 불가능

- 상수는 보통 대문자로  명명

 

자료형이 다른 데이터를 담을 수 있음(데이터의 종류에 있어 엄격하지 않음)

 

변수나 상수 등을 만들때 이름을 지을때 규칙

- 영문, 한글 및 유니코드 글자, 숫자 사용가능

- 특수문자는 $,_ 만 가능

- 숫자로 시작 불가능

- 공백 사용불가

- 이미지정된 언어(예약어)는 사용 불가능

 

 

 

4.자료형들과 연산자

자료형

- 데이터의 종류마다 메모리에 저장하는 방식과 용량이 다 다름 

- 자바스크립트 : 동적자료형 = 자료형에 대한 제한이 없음

- 연산자 : 프로그래밍 코드에서 사용되는 기능을 가진 것

- typeof + 연산자 = 해당 데이터의 자료형을 반환

 

 

 

• boolean - 참,거짓 여부

! + 연산자 = 뒤에 오늘 불리언의 반대 값을 반환

ex) let bool1 =!true;  -> false 

       let bool1 =!!true;  -> true

 

 

• number - 숫자

- 정수, 실수, 용량 구분 없음

- (변수 x 변수), (변수 x 상수), (상수 x 상수) 연산 가능

- 연산자들이 우선순위가 있다

ex) 곱하기 연산자(*)>더하기 연산자(+)

 

 

• string - 문자열

- 문자열도 한글자의 문자와 여러가지텍스트를 하나로 퉁쳐서 스트링 문자열로 표현 가능

- 단따옴표, 쌍따옴표 둘다 가능

- typeof가 반환하는 모든 값은 문자열로 반환

- 문자열에서 + 는 이어붙이는데 사용

 

 

• undefined null

- 자바스크립트에서 뭔가 없다는것을 나타내는 자료형

- undefined = 변수에 뭐가 들어있는지 정해지지 않았다

- null = 주머니가 비어있다

※차이점 : undefined는 애초에 뭔가 나오는곳이 아닌곳이고 null은 뭔가 나와야하는데 비어있다는 것을 의미

typeof를 사용해서는 데이터가 null인지 알수없다

 

 

 

 

 

5.연산자 더 알아보기

== : 자료형 관계없이 양쪽값이 같으면 true 다르면 false 를 반환

!= : 반대

=== : 자료형도 값도 같음

!== : 반대

>, >=, <, <= : 크기 비교 (문자열의 경우 사전순서상 뒤에 오는 쪽이 더 크다고 인식)

&& : and

|| : or

 

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

~++,++~ : 둘 모두 값을 증가시킴

~++ : 값을 증가시키지 않은 채 사용

++~ : 값을 증가시킨 채 사용

문자열은 +=만 가능

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

 

삼항연산자 

(조건) ? a : b

- 조건이 참일 시 a 반환

- 조건이 거짓일 시 b 반환

 

 

 

 

 

6.객체와 배열

배열은 객체의 한 종류

지금껏 배운 자료형(원시 자료형)이외의 모든 데이터는 객체

 

 

• 객체

- 키 : 값 조합

- 이 조합을 프로퍼티(property)라 부름

 

키로 접근하는방법

-  . 뒤에 키 이름

- []안에 키 이름을 문자열로

 

※const 지만 바꿀 수 있는 이유 : 상수 그 자체가 아닌 내부의 데이터를 변경하는것은 가능

 

 

 

• 배열

- 다수의 데이터를 저장

- 키 없이 값들만 저장

- 자료형 제한 없음

 

요소 추가 혹은 삭제

- .push() 요소를 추가

- .pop() 요소를 제거

- 객체는 객체,배열을 포함 가능

 

 

 

 

7.if / else 문

- 어떤 조건에 따라서 뭔가를 실행하거나 실행하지 않거나를 결정

- 하나 이상의 문에 if문을 사용하려면 {}으로 감싸줘야함

(자바스크립트에서 0 == false)

 

 

 

 

8.switch 문

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

- break가 없으면 해당 값부터 끝까지 다 출력

- default = if/else 문에서 else와 같은 역할