반응형

React 게시글은 대부분 인프런의 '한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지' 강의를 기반으로 내용을 정리했습니다.

 

자바스크립트란?

자바스크립트는 HTML과 CSS로 만들어진 정적인 웹페이지를 동적으로 변경해주는 언어이다.

 

자바스크립트를 많이 사용할까?

출처 : 2021 스택오버플로우 개발자 설문조사

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(비 원시 타입)
    • 한 번에 여러 개의 값을 가질 수 있음
    • 여러 개의 고정되지 않은 동적 공간 사용
  1. Number(숫자) : 1, -100, 0.8 등과 같은 숫자. 사칙연산이 가능함.
  2. String(문자열) : 큰 따옴표(") 혹은 작은따옴표(')로 감싸진 단어 또는 문장. + 기호를 이용해 문장끼리 이어 줄 수 있음.
  3. Boolean(불린) : 참(True) 또는 거짓(False)만 저장 가능.
  4. Undefined : 변수를 선언하고 아무 값도 할당하지 않았을 때 undefined를 할당받는다.
  5. Null : 아무 것도 없다. 직접적으로 let a = null; 처럼 대입해주어야 한다.
  • 묵시적 형 변환
    • 숫자로 구성된 문자열과 Number 타입인 변수 두 개로 더하기를 제외한 사칙연산을 수행하면 문자열이 숫자형으로 자동으로 변환되어 사칙연산이 수행된다.

 

  • 명시적 형 변환
    • 개발자가 의도적으로 타입을 변환하기 위해 명시적으로 코드에 작성한다.

반응형

 

연산자

  1. 대입 연산자(=) : 변수에 값을 할당
    ex) let a = 10;
  2. 산술 연산자(+, -, *, /, %) : 사칙연산을 가능케 해줌
    ex) a + 10;
  3. 연결 연산자(+) : 문자열에 사용하면 문자열을 이어 붙여줌.
  4. 복합 연산자(+=, -=, *=, /=) : 기존 변수에 있던 값과 새로운 값을 사칙연산한다.
    ex) a = a + 10은 a+=10과 의미가 같다.
  5. 증감 연산자(++, --) : 숫자형의 값을 증가시키거나 감소시킨다. 변수의 앞이나 뒤에 붙일 수 있다. 단독으로 사용하면 앞에 붙이나 뒤에 붙이나 상관없지만 다른 코드와 복합적으로 사용하면 변수의 앞에 붙일 때 해당 줄이 끝나기 전에 제일 먼저 적용이 되고, 뒤에 붙이면 해당 라인이 다 실행되고 나서 값을 증감시킨다.
    ex) let a = 10;
         a++;
         console.log(a); // 11 출력
         console.log(a++); // 11 출력
         console.log(a); // 12 출력
  6. 논리 연산자(!, &&, ||) : 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 출력
  7. 비교 연산자(>, <, >=, <=, ==, !=, ===, !==) : 두 개의 연산자를 비교한다.
    >, <, >=, <=는 생략.
    ==, !=는 두 개의 연산의 값이 같냐, 다르냐를 판단한다. 
    ===, !==는 기본적으로 위의 ==과 !=이랑 비슷한 기능을 하는데 타입까지 비교한다.
    ex) console.log(5 == "5"); // true 출력,  console.log(5 === "5"); // false 출력
  8. typeof 연산자 : 해당 값 또는 변수의 타입을 반환한다.
    ex) console.log(typeof "레호"); // string 출력
  9. 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가 거짓일 경우에 실행된다.

 

반응형
저작자표시 비영리 변경금지 (새창열림)

티스토리툴바