React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.
자바스크립트란?
자바스크립트는 HTML과 CSS로 만들어진 정적인 웹페이지를 동적으로 변경해주는 언어이다.
자바스크립트를 많이 사용할까?
2021년도 영어권 기준으로 당당하게 1위를 차지했다.
자바스크립트가 실행되는 곳
자바스크립트 엔진 중 V8이란 엔진은 구글에서 만들었으며 오픈소스이고, C++로 제작되었다.
이 엔진을 Runtime이라고 하는데 엔진이 없는 환경에서는 자바스크립트를 실행할 수 없다.
자바스크립트 엔진을 내장한 웹 브라우저는 Safari, Firefox, Chrome, Edge, Opera 등이 있다.
Hello World
- 자바스크립트 엔진이 내장된 온라인 웹 에디터 사용 : CodeSandbox
CodeSandbox: Online Code Editor and IDE for Rapid Web Development
Optimized for frameworks Custom environments built specifically for React, Vue, Angular, and many more.
codesandbox.io
- 우측 상단 Create Sandbox 클릭
- Vanilla 클릭
- hello world 출력
변수와 상수
- 변수 : 변수는 프로그램이 실행되는 도중에 계속해서 변하는 값을 저장하기 위한 공간
변수는 let이란 예약어로 만들 수 있다.
let age = 25;
console.log(age); // 25 출력
age = 30;
console.log(age); // 30 출력
// 참고!
// 변수명에는 특수문자 언더바(_)와 달러($)를 제외한 특수문자는 사용할 수 없음.
// 변수명은 첫 글자가 문자여야한다. 숫자 등이 들어가면 에러.
// 예약어는 사용이 불가능하다(if, for 등)
var VS let vs const
var와 let은 변수를 선언하는 예약어이다.
최근에는 var 보다는 let을 사용한다. 그 이유는 아마 중복 선언 문제가 제일 클 것이다.
먼저 var를 사용하면 아래와 같이 기이한 코드가 에러 없이 정상적으로 실행된다.
var age = 25;
console.log(age); // 25 출력
var age = 33;
console.log(age); // 33 출력이렇게 중복 선언이 되는데 이럴 경우 제일 마지막으로 할당된 값이 변수에 저장된다. 변수를 유연하게 사용할 수 있다는 뭐 나름의 장점이라면 장점일 수 있겠지만 긴 코드에서 중복 선언은 가볍지 않은 문제들을 일으킬 수 있는 위험 요소인 건 분명하다.
반면 let은 var의 이러한 단점을 보완해준다. 즉, 중복 선언이 불가능하다. 위의 코드에 var를 let으로 변경해보자.
let age = 25;
console.log(age); // 25 출력
let age = 33; // 에러 SyntaxError: /src/index.js: Identifier 'age' has already been declared (5:4)
console.log(age);var와는 다르게 중복 선언을 하게 되면 age라는 변수가 유일하지 않다는 메시지를 보내며 SyntaxError가 발생한다.
그러므로 자바스크립트에서 변수 선언은 let을 이용하는게 좋다.
const는 상수이며 중복 선언과 재할당 모두 불가능하다.
const age = 25;
console.log(age); // 25
age = 30; // TypeError: "age" is read-only
console.log(age);위의 코드는 age 변수는 오로지 읽을 수만 있다는 메시지를 보내며 TypeError가 발생한다.
자료형과 형 변환
| Primitive Data Type | Non-Primitive Data Type | ||||||
| Number | String | Boolean | Undefined | Null | Object | Array | Function |
- Primitive Type(원시 타입)
- 한 번에 하나의 값 만 가질 수 있음
- 하나의 고정된 저장 공간 이용
- Non-Primitive Type(비 원시 타입)
- 한 번에 여러 개의 값을 가질 수 있음
- 여러 개의 고정되지 않은 동적 공간 사용
- Number(숫자) : 1, -100, 0.8 등과 같은 숫자. 사칙연산이 가능함.
- String(문자열) : 큰 따옴표(") 혹은 작은따옴표(')로 감싸진 단어 또는 문장. + 기호를 이용해 문장끼리 이어 줄 수 있음.
- Boolean(불린) : 참(True) 또는 거짓(False)만 저장 가능.
- Undefined : 변수를 선언하고 아무 값도 할당하지 않았을 때 undefined를 할당받는다.
- Null : 아무 것도 없다. 직접적으로 let a = null; 처럼 대입해주어야 한다.
- 묵시적 형 변환
- 숫자로 구성된 문자열과 Number 타입인 변수 두 개로 더하기를 제외한 사칙연산을 수행하면 문자열이 숫자형으로 자동으로 변환되어 사칙연산이 수행된다.
- 명시적 형 변환
- 개발자가 의도적으로 타입을 변환하기 위해 명시적으로 코드에 작성한다.
연산자
- 대입 연산자(=) : 변수에 값을 할당
ex) let a = 10; - 산술 연산자(+, -, *, /, %) : 사칙연산을 가능케 해줌
ex) a + 10; - 연결 연산자(+) : 문자열에 사용하면 문자열을 이어 붙여줌.
- 복합 연산자(+=, -=, *=, /=) : 기존 변수에 있던 값과 새로운 값을 사칙연산한다.
ex) a = a + 10은 a+=10과 의미가 같다. - 증감 연산자(++, --) : 숫자형의 값을 증가시키거나 감소시킨다. 변수의 앞이나 뒤에 붙일 수 있다. 단독으로 사용하면 앞에 붙이나 뒤에 붙이나 상관없지만 다른 코드와 복합적으로 사용하면 변수의 앞에 붙일 때 해당 줄이 끝나기 전에 제일 먼저 적용이 되고, 뒤에 붙이면 해당 라인이 다 실행되고 나서 값을 증감시킨다.
ex) let a = 10;
a++;
console.log(a); // 11 출력
console.log(a++); // 11 출력
console.log(a); // 12 출력 - 논리 연산자(!, &&, ||) : True, False에 사용할 수 있다.
- ! : True, False의 반대 값을 반환한다.
ex) console.log(!True); // false 출력, console.log(!False); // true 출력
- && : 두 개의 논리가 모두 True일 경우에만 True를 반환한다.
ex) console.log(True && True); // true 출력, console.log(False && True); // false 출력
- || : 두 개의 논리 중 하나만 True여도 True를 반환한다.
ex) console.log(True || True); // true 출력, console.log(False && True); // true 출력 - 비교 연산자(>, <, >=, <=, ==, !=, ===, !==) : 두 개의 연산자를 비교한다.
>, <, >=, <=는 생략.
==, !=는 두 개의 연산의 값이 같냐, 다르냐를 판단한다.
===, !==는 기본적으로 위의 ==과 !=이랑 비슷한 기능을 하는데 타입까지 비교한다.
ex) console.log(5 == "5"); // true 출력, console.log(5 === "5"); // false 출력 - typeof 연산자 : 해당 값 또는 변수의 타입을 반환한다.
ex) console.log(typeof "레호"); // string 출력 - null 병합 연산자(??) : 변수가 null이나 undefined이면 물음표 뒤에 있는 값을 할당한다.
ex) let a;
a = a ?? 10;
console.log(a); // 10 출력. 만약 a에 20이란 값이 할당되어 있었다면 20이 출력된다.
조건문
특정한 조건의 결과가 True 혹은 False인지에 따라 프로그램의 흐름을 제어할 때 사용하는 실행문이다.
- if문
let num = 10;
if(num == 10)
{
console.log("같다."); // 출력
}
else
{
console.log("다르다.");
}
if문에서의 조건이 참(true)이면 if 블록 내 코드가 실행되고, 아니면 else 블록 내의 코드들이 실행된다.
- else if문
let a = 50;
if(a > 100)
{
console.log("a는 100보다 크다");
}
else if(a < 100)
{
console.log("a는 100보다 작다."); // 출력
}
else
{
console.log("a는 100이다.");
}else if문은 한 번 더 조건처리를 하는 예약어이다. if문이 거짓일 경우 else if문에서 한번더 조건을 판별한다. else if문의 조건이 참일 경우 else if문을 실행하고 종료한다. 만약 else if에서도 조건이 거짓일 경우 else 블록이 실행된다.
- switch문
let country = "ko";
switch(country)
{
case "ko" :
console.log("대한민국"); // 출력
break;
case "cn" :
console.log("중국");
break;
case "jp" :
console.log("일본");
break;
default :
console.log("없음");
break;
}switch문은 if문과 비슷한 기능을 한다. switch 옆 괄호 안의 값이 case의 값과 같으면 해당 case를 실행한다.
break가 있는 이유는 break가 없으면 참인 case부터 break를 만날 때까지 모든 코드를 다 실행하기 때문에 적절한 분기 처리를 위해 break를 사용해야 한다. default는 if문의 else와 같은 기능으로 위의 모든 case가 거짓일 경우에 실행된다.
