0.3 JavaScript

근듀·2023년 3월 9일
0
post-thumbnail

1. 자바스크립트란 무엇인가?

프로그래밍 언어의 한 종류이다.

  • 자바스크립트의 정식 명칭은 ECMAScript이다. 그래서 버전에 따라 ES5, ES6... 이런 식으로 이름을 짓는다.
  • 자바스크립트는 웹 사이트가 살아 움직이도록 생명을 불어넣는 역할을 한다.
  • 스크립트 언어의 한 종류이다.
    ✔️ 스크립트언어의 특징
    • 프로그램이 실행되는 런타임(프로그램이 실행되고 있는 동안)에 코드가 해석된다는 점이다.
  • 최근에는 모바일 앱 개발을 위한 리액트 네이티브나 데스크톱용 앱 개발을 위한 일렉트론 등에서도 자바스크립트를 사용하고 있다.

2. ES6

ES6은 2015년에 발표되었기 때문에 ES2015라고 부르기도 한다. 가장 최신 버전은 ES12이지만 2015년에 ES6가 릴리스 되면서 새로운 문법이 많이 추가되었고 자바스크립트의 표준화의 발판이 마련되었기 때문에 그 의미가 깊다고 할 수 있다.

3. 자바스크립트의 자료형

자료형
-> 프로그래밍 언어에서 데이터를 다루기 위해 미리 정해놓은 데이터의 유형이다. ex) 정수, 배열...

자바스크립트에서는 변수를 선언할 때가 아닌 변수에 데이터가 대입되는 시점에 해당 변수의 자료형이 결정된다. 이처럼 동적으로 자료형이 결정되는 것을 동적 타이핑이라고 부른다. 자바스크립트는 동적 타이핑 방식(dynamic typing)을 사용한다.

자바스크립트의 자료형 자료

✔️ Array 타입은 배열을 나타내는 자료형
배열 Array

  • 여러 가지 변수들을 순서대로 모아놓은 것이다. 숫자나 문자가 모일 수 있다.
  • 변수들을 순서대로 모아놓은 것이기 때문에 배열에 있는 각 변수는 자신의 순서를 나타내는 index 값을 가진다. index는 0부터 시작

✔️ Object 타입의 자료형
객체(Object)

  • 객체를 다루기 위한 자료형
    - 자바스크립트에서 객체는 이름(key)와 값(value)으로 이루어진 쌍의 집합을 의미

4. 자바스크립트의 연산자

자바스크립트는 선언된 변수를 이용해서 다양한 연산을 할 수 있다.
연산을 하기 위해 사용하는 것을 연산자(Operator)라고 한다.


✔️ 대입 연산자

  • 변수에 값을 대입하기 위해 사용하는 연산자
  • 항상 오른쪽에서 왼쪽 방향으로 흐름이 흘러간다.
let a = 10;
let b = 20;

☝🏼 10의 값을 변수 a에 담는다.


✔️ 산술 연산자

  • 덧셈, 뺄셈, 곱셈, 나눗셈, 나머지 연산자(%), 지수 연산자( ** ) 가 있다.
let a = 2;
let b = 3;

console.log(a + b);
  • 증감 연산자(++), 감소 연산자(--)
  • 증감 연산자를 변수의 뒤에 붙이는 방식을 postfix 방식, 변수의 앞에 붙이는 방식을 prefix 방식이라고 한다.
  • 변수의 뒤에 증감 연산자를 붙이게 되면 먼저 증감 전의 값을 반환하고 이후에 변수의 값이 증감된다.
let a = 1;
let b = a++;

console.log(a, b);
//출력결과 : 2, 1

//먼저 b에 증감 전의 값인 1이 대입이 되고 a는 1증가해서 2가 된다.
  • 변수의 앞에 증감 연산자를 붙이게 되면, 먼저 변수의 값을 증감시키고 이후에 증감된 변수의 값을 반환한다.
let c = 1;
let d = ++c;

console.log(c, d);
//출력결과: 2, 2
//먼저 c의 값을 증감시킨 2를 d에 대입하고 증감된 변수의 값인 2를 반환한다.

✔️ 관계 연산자(비교 연산자)

  • 변수들 사이의 관계를 비교하기 위해서 사용한다.
  • < , > , <=, >=
  • 항상 왼쪽에 나온 변수를 기준으로 생각하면 쉽다.
    ex) a < b, a가 b보다 작다.
let a = 1;
let b = 2;

console.log(a < b);
//출력 결과 : true

✔️ 동등 연산자

  • 변수의 값이 같은지 다른지를 비교하고 싶을 때
  • 같다(==), 다르다(!=)

✔️ 일치 연산자

  • 변수의 자료형까지 같은지 비교하고 싶을 때
  • 같다(===), 다르다(!==)
let a = 1;
let b = '1';

console.log(a == b);
//출력 결과 : true

console.log(a === b);
//출력 결과 : false

✔️ 이진 논리 연산자

  • true와 false값만을 가진 boolean값을 비교할 때 사용하는 연산자
  • AND(&&) , OR(||)
  • AND 연산은 양쪽 모두가 true일 경우에만 true를 반환한다.
  • OR 연산은 양쪽 모두가 false일 경우에 false를 반환한다.
let a = true;
let b = false;

console.log(a && b);
//출력 결과 : false

console.log(a || b);
//출력 결과 : true

✔️ 조건부 연산자(삼항 연산자)

  • 조건에 따라서 결과가 두 개로 나눠지게 된다.
    • 조건식 ? true일 경우 : false일 경우
let a = true;
let b = false;

console.log(a ? 1 : 2);
//출력결과 : 1

console.log(b ? 3 : 2);
//출력 결과 : 2

5. 자바스크립트의 함수

  • 프로그래밍에서 함수는 입력을 받아서 정해진 출력을 하는 것을 의미한다.
  • 함수의 입력을 파라미터 또는 인자라고 부른다.
  • 함수 컴포넌트가 하나의 자바스크립트 함수라는 사실을 기억하자
  • function statement(함수) / arrow function expression(화살표 함수)

profile
프론트엔드 개발자 취준생입니다.

0개의 댓글