JavaScript 기본

semin Ryu·2023년 12월 1일

JavaScript 자바스크립트

JavaScript 기본

브라우저는 HTML 파일을 불러온 뒤, HTML 파일에 포함된 CSS와 자바스크립트 파일을 차례로 불러옵니다. 따라서, HTML, CSS, JavaScript는 웹 페이지를 구성하는 핵심 요소로 볼 수 있습니다.

JavaScript의 기본 데이터 타입

JavaScript에서 제공하는 기본 데이터 타입을 살펴보겠습니다.

Number: 정수(integer)와 실수(float)를 포함한 모든 숫자를 나타냅니다.
Ex) 1, 2, 3는 정수이고, 1.5, 2.1은 실수입니다.
String: 텍스트 데이터를 나타냅니다. 예를 들어, "hello", 'world' 등이 있습니다.
Boolean: 참(true)과 거짓(false) 두 가지 값만을 가집니다.
Null: '값이 없음'을 나타내는 특수한 값입니다.
Undefined: 값이 아직 주어지지 않은 상태, 정의되지 않음을 나타냅니다.

이 외에도 배열(Array), 객체(Object), 함수(Function) 등의 데이터 타입이 있습니다.

변수

자바스크립트에서는 const, let, var 키워드를 이용해 변수를 선언할 수 있습니다.

const: 상수를 선언할 때 사용합니다. 한 번 값이 주어지면 그 값은 변하지 않습니다.
let: 값이 변할 수 있는 변수를 선언할 때 사용합니다. 같은 이름의 변수를 다시 선언할 수 없습니다.
var: let과 유사하게 동작하지만, 몇 가지 차이점이 있습니다. 하지만, 최근의 자바스크립트에서는 let과 const의 사용이 권장되므로 var는 자주 사용되지 않습니다.

함수

함수는 특정한 작업을 수행하는 코드의 집합입니다. 함수는 입력(argument)을 받아 처리한 후, 결과를 반환(return)할 수 있습니다. 함수는 한 번 정의되면 여러 번 호출할 수 있습니다.

function sayHello(name) {
  console.log("Hello, " + name);
}

sayHello("Kim");  // "Hello, Kim" 출력

객체와 메서드

객체(Object)는 여러 개의 변수와 함수를 그룹화한 것입니다. 객체의 변수를 속성(property), 함수를 메서드(method)라고 부릅니다.

const user = {
  name: "Kim",
  age: 20,
  sayHello: function() {
    console.log("Hello, " + this.name);
  }
};

user.sayHello();  // "Hello, Kim" 출력

이벤트

자바스크립트는 웹 페이지에서 발생하는 다양한 이벤트를 감지하고 처리할 수 있습니다. 예를 들어, 버튼 클릭, 키보드 입력, 마우스 이동 등의 이벤트가 있습니다.

const button = document.querySelector("button");

button.addEventListener("click", function() {
  console.log("Button was clicked!");
});

이 외에도 자바스크립트는 HTML 요소를 선택하거나 수정하는 기능, 웹 브라우저의 콘솔을 이용한 디버깅 기능 등 다양한 기능을 제공합니다. 자바스크립트를 이용하면 동적인 웹 페이지를 만들 수 있습니다.

리액트 시작 전 자주 쓰이는 문법

다음으론 리액트 같은 프레임워크를 사용하기 전에 반드시 이해하고 있어야 하는 기본적인 문법들이 있습니다. 그 중 몇 가지를 살펴보겠습니다.

1. Object Shorthand Assignment

자바스크립트에서 객체를 생성할 때, 객체의 속성 이름과 할당할 변수 이름이 같은 경우에는 한 번만 작성하여 축약할 수 있습니다. 이를 'Object shorthand assignment'라고 합니다.

let name = "Kim";
let age = 20;

let person = { name, age };  // { name: "Kim", age: 20 }

2. Destructuring

Destructuring은 객체나 배열에서 원하는 값을 바로 추출할 수 있는 문법입니다.

객체에서 Destructuring 사용하기

let person = { name: "Kim", age: 20 };

let { name, age } = person;  // name = "Kim", age = 20

배열에서 Destructuring 사용하기

let array = [1, 2, 3, 4];

let [a, b] = array;  // a = 1, b = 2

또한, 나머지 연산자 ...를 사용해 남은 모든 요소를 가져올 수 있습니다.

let [a, b, ...rest] = array;  // a = 1, b = 2, rest = [3, 4]

3. Spread Operator

Spread 연산자 ...는 배열이나 객체의 모든 요소를 펼쳐줍니다. 이를 이용하면 객체나 배열을 쉽게 복사하거나 합칠 수 있습니다.

객체에서 Spread 사용하기

let person = { name: "Kim", age: 20 };

let person2 = { ...person };  // person 객체의 모든 속성을 복사

배열에서 Spread 사용하기

let a = [1, 2];

let b = [...a, 3];  // [1, 2, 3]

4. Ternary Operator

삼항 연산자는 조건에 따른 값 선택을 간결하게 표현할 때 사용합니다.
조건 ? 참일때의 값 : 거짓일때의 값 형태로 사용합니다.

let person = { name: "Kim" };

console.log(person ? person.name : "there is no person");  // "Kim"
// true면 :의 왼쪽 (person.name), false면 :의 오른쪽("there is no person")