Javascript - 기본 문법

JavaScript

Javascript - 기본 문법

nswlah 2023. 4. 1. 22:14

이번 글에서는 Javascript 기본 문법들을 한번 정리해 보았습니다.

변수와 상수

자바스크립트 뿐만 아니라 프로그래밍 언어에는 변수와 상수라는 것이 있습니다. 쉽게 말씀드리자면 변수는 말 그대로 "변하는 수"를 의미하며 프로그래밍에서는 값이 변할 수 있는 데이터를 저장하기 위한 공간이라고 생각해주시면 됩니다. 상수는 "변하지 않는 수"를 의미하며 프로그래밍에서는 값을 한번 선언 및 할당(보통 상수는 선언단계에서 값을 할당합니다)하면 값을 변경할 수 없는 데이터를 저장하기 위한 공간이라고 생각해주시면 됩니다.

갑자기 선언과 할당이라는 용어가 나왔는데, 선언은 변수를 사용하기 위해 컴퓨터에 알리는 행위를 말하며, 할당은 변수에 값을 저장하는 행위를 말합니다. 아래는 선언과 할당의 예시입니다.

# 선언
let myLet;
var myVar;

# 할당
myLet = 10;
myVar = "안녕하세요";

# 선언과 할당을 동시에 하기
const myConst = 100;
var myVar = "안녕하세요";
let myLet = 10;

위의 샘플 코드를 보시면 별다른 데이터 타입 없이 var, let, const 만 변수나 상수 이름 앞에 입력하여 선언한 것을 확인 가능합니다. 자바 스크립트는 동적 타이핑이 되기 때문에 일부 언어들과 다르게 변수나 상수에 대한 데이터 타입을 별도로 선언하지 않아도 된다는 장점이 있습니다.

다음은 선언시 접두사에 따른 차이에 대해 알아보겠습니다. 먼저 자바스크립트에는 var, let, const 라는 3가지 유형의 접두사가 있습니다. 이 중 var, let은 변수의 접두사이고 const는 상수의 접두사입니다. const의 경우 선언단계에서 선언과 할당이 모두 이루어져야 하며 이렇게 한번 할당된 값은 다른 값으로 재할당 할 수 없습니다. var, let의 경우 변수 이기 때문에 두 변수 모두 변수값의 재할당이 가능하지만, 선언의 경우 조금 다릅니다. let의 경우 같은 블록 범위에 동일한 변수명의 let 변수가 선언 되어 있다면 재선언 하는 것이 안되지만, var의 경우 재선언이 가능합니다. 아래 예시는 이해를 돕기 위한 샘플 코드 입니다.

// var
// 변수 선언
var myVar
// 변수 할당
myVar = 10;
console.log(myVar); // 10
// 변수 재선언
var myVar = 20;
console.log(myVar); // 20
// 변수 재할당
myVar = 30;
console.log(myVar); // 30


// let
// 변수 선언
let myLet
// 변수 할당
myLet = 10;
console.log(myLet); // 10
// 변수 재선언
var myLet = 20; // 에러 출력
// 변수 재할당
myLet = 30;
console.log(myLet); // 30


// const
// 상수 선언 및 할당
const myConst = 10;
// 상수 재할당
myConst = 20; // 에러 출력

데이터 타입

이미지 참조 링크 : https://velog.io/@oneook/%EB%8D%B0%EC%9D%B4%ED%84%B0-%ED%83%80%EC%9E%85%EA%B3%BC-%EC%9E%90%EB%A3%8C-%EA%B5%AC%EC%A1%B0-JavaScript-Basics

자바스크립트이 자료형은 크게 두 가지 타입으로 분류할 수 있습니다.
원시타입(Primitive Type) : 데이터가 변수에 직접 할당되며, 선언, 재할당 등을 수행할 때 메모리에 직접 접근합니다.
참조타입(Reference Type) : 데이터가 변수에 직접 할당되는 것이 아닌, Heap 저장소에 데이터가 저장 됩니다. 변수에는 이 Heap 저장소의 주소값을 저장합니다.

Heap 저장소란?

Heap 저장소는 메모리 관리 기법 중 하나로, 동적으로 할당된 메모리 공간을 사용하는 프로그램에서 특히 중요한 역할을 합니다. Heap 저장소는 프로그램 실행 중에 동적으로 할당되는 메모리 공간을 관리하는 데 사용됩니다.

Heap 저장소는 일반적으로 운영 체제가 제공하는 메모리 공간 중에서 프로세스가 사용할 수 있는 부분을 할당하여 사용합니다. 이러한 메모리 공간은 일반적으로 프로그램 실행 중에 필요한 크기와 수에 따라 동적으로 할당됩니다.

원시 타입 자료형

1. 숫자 자료형

숫자 자료형은 정수형, 실수형, 지수형, NaN(Not a Number), Infinity형 등이 있습니다. 아래는 그 예시입니다.

// 정수형
let num1 = 10;

// 실수형
let num2 = 3.14;

// 지수형
let num3 = 2.5e5; // 2.5 x 10^5

// NaN
let num4 = "Hello" / 2; // NaN

// Infinity
let num5 = 1 / 0; // Infinity
let num6 = -1 / 0; // -Infinity

정수형, 실수형, 지수형은 일반적인 표현이지만 여기서 자바스크립트 만의 특이한 점은 NaN 자료형입니다. NaN의 경우 숫자가 아닌 자료형을 암시적 형변환(+를 제외한 산술연산) 또는 명시적 형변환(Number() 함수를 사용) 하는 경우 에러 대신에 NaN 이라는 숫자 자료형의 데이터를 대신 변수에 저장합니다.

2. 문자 자료형

문자 자료형은 ' ' 또는 " "로 감싸서 표현 가능합니다. 자바스크립트에서 특이한점은 단일 문자를 표현하는 char 자료형이 없고 char도 모두 string 타입으로 표현한다는 점이 특이한 것 같습니다. 문자열 자료형에서는 아래 샘플과 같은 내장함수들을 많이 이용합니다.

// 문자열 길이 확인
let str = "Hello, world!";
console.log(str.length); // 13

// 문자열 결합(concatenation)
let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result); // "Hello, world!"

// 문자열 자르기(substr, slice)
let str = "Hello, world!";
console.log(str.substr(7, 5)); // "world"
console.log(str.slice(7, 12)); // "world"

// 문자열 검색(search)
let str = "Hello, world!";
console.log(str.search("world")); // 7

// 문자열 대체(replace)
let str = "Hello, world!";
let result = str.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

// 문자열 분할(split)
let str = "apple, banana, kiwi";
let result = str.split(",");
console.log(result); // ["apple", " banana", " kiwi"]

3. 논리 자료형(불 자료형, Boolean)

논리 자료형은 참(true)과 거짓(false)을 나타내는 데이터 타입입니다. 다른말로 불 또는 불리언 타입이라고도 합니다. 이 자료형은 조건 분기를 위해 많이 활용되는 자료 형입니다. 표현 시 " ", ' ' 없이 true나 false 로 참과 거짓을 표현합니다. 논리 자료형의 경우 논리 연산자의 연산 결과로도 많이 발생하는데 대표적인 논리 연산자는 <, >, ===, AND(&&), OR(||), NOT(!) 등이 있습니다. 아래 코드는 논리 자료형 선언과 논리 연산자 사용 예제입니다.

// 선언
let bool1 = true;
let bool2 = false;

// 논리연산
let x = 10;
let y = 5;

let bool3 = (x>y) // x>y는 참임으로 bool3에 true 값이 저장됨
let bool4 = (x>y) && (x<y) // x>y는 참이고 x<y는 거짓, AND 연산이기 때문에 false 값이 저장됨
let bool5 = (x>y) || (x<y) // OR 연산이기 때문에 true 값이 저장됨
let bool6 = !bool4 // bool4는 참이지만, 부정 연산자를 사용해 참의 부정인 false 값이 저장됨

4. undefined, null

일반적으로 다른 언어에서는 변수에 값이 할당되어 있지 않으면 null 값 또는 에러가 출력됩니다. 하지만 자바스크립트에서는 변수에 값이 할당되지 않으면 undefined을 출력하고, 명시적으로 빈값(null)을 할당해주면 null이 출력됩니다.

참조 타입 자료형

참조 타입의 자료형에는 객체, 배열, 함수 등이 있습니다.

1. 객체 자료형

key-value 쌍을 이루는 자료형입니다. 선언시 {} 를 사용해 변수를 선언해 줍니다. 객체의 형식은 아래와 같습니다.

let person = { 
	name: 'Alice', 
	age: 20 
};

person.name // 'Alice'
person.age // 20

2. 배열 자료형

배열은 여러개의 데이터를 순서대로 저장하는 데이터 타입입니다. 대괄호를 사용하여 배열을 선언합니다. 배열은 메모리 공간에서 연속으로 할당되는 변수이기 때문에 동적으로 확장이 가능하지만 배열의 중간에 데이터를 삽입하거나 삭제 시 데이터의 이동이 많이 발생하여 비효율적입니다. 배열의 구조는 아래와 같습니다.

let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];

3. 함수 자료형

함수 자료형이란 코드의 재사용 성을 높이기 위해 사용됩니다. 함수란 특정 입력이 있으면 어떤 처리를 하여 그 결과 값을 반환해주는 기능을 가지는 것을 말합니다. 함수의 기본적인 구조는 'function 함수이름 (매개변수) {Logic}' 의 구조로 이루어져 있습니다. 함수를 사용하는 예제는 아래와 같습니다.

// 함수 선언
function add(x, y) {
  return x + y;
}

// 함수 호출
console.log(add(2, 3));   // 5

// 함수 표현식
let add = function(x, y) {
	retrun x + y;
}

함수에는 전역 스코프와 지역 스코프가 있는데, 쉽게 설명드리자면 함수 밖에서 선언된 변수는 함수 밖과 안에서 모두 사용이 가능하지만, 함수 안에서 선언된 변수는 함수 안에서 만 사용가능한 것을 말한다. 여기서 함수 밖에 선언된 변수를 전역 변수라 하고, 이 변수는 전역 스코프를 가지고 있다 할 수 있습니다. 반대로 함수 안에 선언된 변수를 지역 변수라 하고, 이 변수는 지역(함수 내) 스코프를 가지고 있다 할 수 있습니다.

추가로 자바스크립트에서 함수는 화살표 함수라는 특이한 형태로 사용 가능합니다. 아래는 화살표 함수의 예시입니다.

// 기본적인 화살표 함수
let add = (x, y) => {
  return x + y;
}

console.log(add(2, 3));   // 5

// 한 줄로 된 화살표 함수
let add = (x, y) => x + y;

console.log(add(2, 3));   // 5

// 매개변수가 하나인 화살표 함수
let square = x => x * x;

console.log(square(3));   // 9

형변환

자바 스크립트에서는 명시적 형변환과 암시적 형변환이 있습니다.

암시적 형변환의 경우 코드 작성자가 명시적으로 형변환 하지 않았지만, 연산에 의해 자동으로 타입이 변경되는 형변환을 말합니다. 해당 유형의 형변환 예시로는 산술연산(+ -> 문자열형으로 형변환, 그외 산술 연산 -> 숫자형으로 형변환) 등이 있고 명시적 형변환의 예로는 내장 함수(Number(), String(), Boolean())등을 통한 형변환이 있습니다.

연산자

앞서도 짧게 소개드렸지만 자바스크립트에는 여러가지 유형의 연산자가 있습니다.

산술 연산자(+, -, *, /, %) : 자바 스크립트의 특징중에 하나로 산술 연산자의 +의 경우 문자열 결합 연산에 사용되기 때문에 이항 연산시 한 항의 자료형이 문자열이라면 피연산자를 문자열 자료형으로 반환합니다.
할당 연산자(=) : 할당 연산자의 경우는 다른 언어처럼 산술 연산자와의 조합을 통해 줄임 표현이 가능합니다. 예시(+=), 줄임표현 작성시 "=" 기호는 산술연산자 보다 뒤에 와야합니다.
비교 연산자(===, !==, <, >) : 비교 연산자의 경우 특징으로는 "==" 나 "!=" 대신 "===", "!=="를 사용한다는 점이 있습니다. 자바스크립트에서도 "=="와 "!=" 연산이 사용가능하지만, "=="나 "!="의 경우 자료형이 불일치 하더라도 true 값을 반환하기 때문에 일반적으로 자료형 까지 일치한지 비교하는 "==="와 "!==" 연산자를 사용합니다.
논리 연산자(&&, ||, !) : && (AND), ||(OR), !(NOT)
삼함 연산자(조건?참:거짓) : ? 좌항의 조건을 판별한 결과에 따라 ? 우항의 참 거짓을 선택하여 실행합니다.
타입 연산자(typeof) : 변수의 자료형(타입)을 반환하는 연산자 입니다.