[2024 여름방학 React.js 스터디] 이종윤 #1주차

0. jacascript란?

 

객체기반의 스크립트의 프로그래밍 언어이다.

웹페이지를 동작시키기 위한 프로그래밍 언어 3가지가 있는데 그 중 하나이다.

(html, css, javascript)

이중 js의 역할은 사용자의 인터렉션(마우스나 키보드의 움직임)에 반응하게 만들어주는 역할이다.

기본적으로 화면을 동적으로 만들어주는 역할을 한다.

주로 웹개발이나 서버, 게임, 머신러닝등에 사용된다.

 

 

※ js는 모든 인터넷 창에서 열어서 사용할 수 있다. (f12, console창에서 사용)

 

1. 변수(variable)

: 어떠한 값을 저장하기 위해서 사용한다

 

*예약어: js에서 기본적으로 쓰기위해 선점해둔 단어들이다. 예시로 let, var, const, function 등등 이것저것 참 많다.

 

변수 선언 문법 2가지(let, const)

그냥 파이썬에서 변수 선언하듯이 사용하고 앞에 붙이기만 하면 된다.

let와 const의 차이점

const(상수)는 한번 그 값을 설정하면 변경할 수 없지만 let은 그 값을 설정해도 값을 변경할 수 있다.

※ 단, let은 한번만 쓰고 그 후로는 let을 빼고 쓴다.

변수에 담을 수 있는 data종류

숫자값, 문자열, bool값, 객체, 배열 이렇게 5개정도 있다.

변수명 다룰 때 주의사항

- 변수명은 처음에 숫자를 쓸 수 없다.

- 변수명에 특수문자를 쓸 수 없다.

※ 두가지 이상의 단어 조합으로 이름을 지을 때 카멜케이스(camelcase)라는 기법을 사용한다.

 

- 특히 변수명을 지을 때 의미를 잘 곱씹어서 지어야한다.

주로 쓰이는 변수명이 기억이 나지 않는다면 한글 변수명을 사용해라

2. 함수(function)

: 특정 기능을 수행하는 코드의 단위

-> 특정 단위로 묶는 이유는 이 함수를 재사용할 때 용이하거나 이것을 가지고 디버깅을 수월하게 하기 위해서이다.

 

함수 선언 방식 2가지

- 함수 표현식

- 함수 선언문

 

용어정리

- 파라미터(매개변수): 함수를 선언할 때 쓰는 값 (like 위에서 있는 a, b)

- 아규먼트(인자): 함수를 호출 할 때 쓰는 값

* 일급함수

: 함수가 변수처럼 어디든지 할당될 수 있다. (js만의 특이한 성질)

함수표현식의 논리로 사용될 수 있다.

 

화살표 함수

: 함수 표현식에서 진화된 문법이다.

그냥 일반 함수 표현식에서 function()을 생략하여 =>로 쓰는 것이다.

 

- 간단히 return 'a'; 같이 한줄로 된 것은 => a의 형태로

- 위 그림에 저 빈 괄호도 인자가 있다면 생략해서 쓸 수 있다.

3. 조건문과 반복문

- 조건문(condition): 주어진 조건을 만족할 때만 코드를 실행하게 하는 문법

- 반복문(loop): 특정 로직을 반복할 때 사용하는 문법

위 이미지는 조건문의 기본 형태이다.

위 이미지는 반복문의 기본 형태이다.

4. 객체(object)

: 우선 js는 객체기반 언어이고 객체는 key(속성이름) - value(속성값) 형태로 이뤄져있다.

객체는 위 그림과 같이 선언한다.

객체의 특징은 일단 객체의 형태로 선언하기만 한다면 이후에 여러 속성을 추가할 수 있다.

객체의 기본 문법

- 향상된 객체 리터럴

- 속성에 정의할 때 function 예약어 생략

 

5. 배열(Array)

: 배열은 객체와 더불어 실제로 웹 애플리테이션을 구현할 때 가장 많이 쓰이는 변수타입이다.

그리고 배열은 순서가 있다.

배열을 선언하는 방식은 객체와 유사하다.

배열 조작 방법이 있는 api등이 많다.

7. 최신문법

- 템츨릿 리터럴(Templete Literal)

js에서 문자열을 입력하는 방식

- 스프레드 오퍼레이터(Spread Operater)

특정 객체 또는 배열값을 다른 객체, 배열로 복제하거나 옮길 때 사용한다.