2. 기본 문법

TAEJUN BAEK(개발자 백태준)·2023년 5월 23일
JavaScript

Frontend 개발자가 배우는 Javascript

목록 보기
2/13
post-thumbnail

2. 기본 문법

(1) 변수와 상수

변수가 무엇?

모든 프로그래밍 언어는 기억하고 싶은 값을 메모리에 저장하고, 저장된 값을 읽어 들여 재사용
하기 위해 변수라는 메커니즘을 이용
만약, 변수를 이용해서 재사용을 하지 않는다면, 우리는 “10 + 20 + 30 = 60”이라는 식에서 60이라는 결과값을 얻기 위해서 항상 저렇게 긴 식을 써줘야 함. 변수를 사용한다면 60이라는 결과만 변수에 담아놓고, 계속해서 재사용하기만 하면 됌 🙂

⚠️ 변수의 5가지 주요 개념

변수 이름 : 저장된 값의 고유 이름

변수 값 : 변수에 저장된 값

변수 할당 : 변수에 값을 저장하는 행위

변수 선언 : 변수를 사용하기 위해 컴퓨터에 알리는 행위

변수 참조 : 변수에 할당된 값을 읽어오는것

자바스크립트에서 변수는 var, let, const 세 가지 방법으로 선언할 수 있음. var은 예전부터 사용되던 방법 let과 const는 ECMAScript 6(ES6)에서 새로 도입된 방법

// var로 변수 선언
var myVar = "Hello World";
console.log(myVar); // "Hello World"

// let으로 변수 선언
let myLet = "Hello World";
console.log(myLet); // "Hello World"

// const로 상수 선언
const myConst = "Hello World";
console.log(myConst); // "Hello World"

var는 같은 이름의 변수를 여러 번 선언해도 오류가 발생하지 않고, 가장 마지막에 선언한 값으로 변수가 덮어씌워짐. let과 const는 같은 이름의 변수를 두 번 선언하면 오류가 발생 const는 선언 후에 값을 변경할 수 없는 상수를 선언할 때 사용

// var로 변수 덮어쓰기
var myVar = "Hello";
var myVar = "World";
console.log(myVar); // "World"

// let으로 변수 덮어쓰기
let myLet = "Hello";
myLet = "World"; // 기존 값을 덮어쓰기
console.log(myLet); // "World"

// const로 상수 선언 후 값 변경하기
const myConst = "Hello";
myConst = "World"; // 오류 발생
console.log(myConst);

(2) 데이터 타입과 형 변환

  • [1] 데이터 타입

    1. 숫자(Number)

      1. 정수형 숫자(Integer)

        let num1 = 10;
console.log(num1); // 10
console.log(typeof num1); // "number"

      2. 실수형 숫자(Float)

        let num2 = 3.14;
console.log(num2); // 3.14
console.log(typeof num2); // "number"

      3. 지수형 숫자(Exponential)

        let num3 = 2.5e5; // 2.5 x 10^5
console.log(num3); // 250000
console.log(typeof num3); // "number"

      4. NaN(Not a Number)

        let num4 = "Hello" / 2;
console.log(num4); // NaN
console.log(typeof num4); // "number"
        ❗ NaN(Not a Number)은 자바스크립트에서 숫자가 아님을 나타내는 값 보통 수학적으로 정의되지 않는 계산을 수행하거나, 숫자가 아닌 값을 숫자로 변환하려고 할 때 발생

      5. Infinity

        let num5 = 1 / 0;
console.log(num5); // Infinity
console.log(typeof num5); // "number"

      6. Infinity

        let num6 = -1 / 0;
console.log(num6); // -Infinity
console.log(typeof num6); // "number"

    2. 문자열(String)문자열은 문자의 나열. 작은 따옴표(')나 큰 따옴표(")로 감싸서 표현

      let name = 'Alice';
let message = "Hello, world!";

      1. 문자열 길이(length) 확인하기

        let str = "Hello, world!";
console.log(str.length); // 13

      2. 문자열 결합(concatenation)

        let str1 = "Hello, ";
let str2 = "world!";
let result = str1.concat(str2);
console.log(result); // "Hello, world!"

      3. 문자열 자르기(substr, slice)

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

      4. 문자열 검색(search)

        let str = "Hello, world!";
console.log(str.search("world")); // 7

      5. 문자열 대체(replace)

        let str = "Hello, world!";
let result = str.replace("world", "JavaScript");
console.log(result); // "Hello, JavaScript!"

      6. 문자열 분할(split)

        let str = "apple, banana, kiwi";
let result = str.split(",");
console.log(result); // ["apple", " banana", " kiwi"]

    3. 불리언(Boolean)불리언은 참(true)과 거짓(false)을 나타내는 데이터 타입

      let bool1 = true;
console.log(bool1); // true
console.log(typeof bool1); // "boolean"
      let bool2 = false;
console.log(bool2); // false
console.log(typeof bool2); // "boolean"

      불리언 데이터 타입은 조건문(if, else, switch 등)과 논리 연산자(&&, ||, !)와 함께 많이 사용 예를 들어

      let x = 10;
let y = 5;

if (x > y) {
  console.log("x is greater than y");
} else {
  console.log("x is less than or equal to y");
}

let a = true;
let b = false;

console.log(a && b); // false
console.log(a || b); // true
console.log(!a); // false

      위 코드에서는 if 조건문을 사용하여 x가 y보다 큰 경우에는 "x is greater than y"를 출력하고, 그렇지 않은 경우에는 "x is less than or equal to y"를 출력 또한, 논리 연산자를 사용하여 a와 b의 논리적인 AND(&&)와 OR(||) 연산을 수행하고, NOT(!) 연산을 수행

    4. undefined는 값이 할당되지 않은 변수를 의미

      let x;
console.log(x); // undefined

    5. null은 값이 존재하지 않음을 의미합니다. undefined와는 다름

      let y = null;

    6. 객체(Object) 자바스크립트에서는 객체가 매우 중요한 역할을 함.객체는 속성과 메소드를 가지는 컨테이너 중괄호({})를 사용하여 객체를 생성

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

    7. 배열(Array) 배열은 여러 개의 데이터를 순서대로 저장하는 데이터 타입 대괄호([])를 사용하여 배열을 생성

      let numbers = [1, 2, 3, 4, 5];
let fruits = ['apple', 'banana', 'orange'];
  • [2] 형 변환 자바스크립트에서는 다양한 자료형을 다룰 수 있음 그리고 이 자료형들은 서로 형변환이 가능 [2]-1. 암시적 형 변환(implicit coercion) 암시적 형 변환은 자바스크립트에서 자동으로 수행되는 형 변환이며, 일반적으로 연산자를 사용할 때 발생 [2]-1-1. 문자열 변환
    console.log(1 + "2");   // "12"
console.log("1" + true);   // "1true"
console.log("1" + {});   // "1[object Object]"
console.log("1" + null);   // "1null"
console.log("1" + undefined);   // "1undefined"
    위의 예제에서는 문자열과 다른 자료형이 연산자로 결합 이 경우에는 자바스크립트는 다른 자료형을 문자열로 변환한 후 연산을 수행 [2]-1-2. 숫자 변환
    console.log(1 - "2");   // -1
console.log("2" * "3");   // 6
console.log(4 + +"5");   // 9
    위의 예제에서는 연산자를 사용할 때, 문자열을 숫자로 변환 이때, 빈 문자열("")이나 공백 문자열(" ")은 0으로 변환 [2]-1-3. 불리언 변환
    console.log(Boolean(0));   // false
console.log(Boolean(""));   // false
console.log(Boolean(null));   // false
console.log(Boolean(undefined));   // false
console.log(Boolean(NaN));   // false
console.log(Boolean("false"));   // true
console.log(Boolean({}));   // true
    위의 예제에서는 Boolean() 함수를 사용하여 불리언 값으로 변환 이때, 0, 빈 문자열(""), null, undefined, NaN은 false로 변환 그 외의 값은 true로 변환 [2]-2. 명시적 형 변환(explicit coercion) 명시적 형 변환은 개발자가 직접 자료형을 변환하는 것을 말함 [2]-2-1. 문자열 변환
    console.log(String(123));       // "123"
console.log(String(true));      // "true"
console.log(String(false));     // "false"
console.log(String(null));      // "null"
console.log(String(undefined)); // "undefined"
console.log(String({}));        // "[object Object]"
    위의 예제에서는 String() 함수를 사용하여 다른 자료형을 문자열로 변환 [2]-2-2. 숫자 변환
    console.log(Number("123"));   // 123
console.log(Number(""));      // 0
console.log(Number("  "));    // 0
console.log(Number(true));    // 1
console.log(Number(false));   // 0

(3) 연산자

자바스크립트에서는 다양한 연산자를 제공하여 변수나 상수를 다양한 방법으로 조작할 수 있음

[1] **산술 연산자(arithmetic operators)**

[1]-1. **더하기 연산자(+)**

console.log(2 + 3);       // 5
console.log("2" + "3");   // "23"
console.log("2" + 3);     // "23"
console.log(2 + "3");     // "23"

위의 예제에서는 더하기 연산자를 사용하여 숫자나 문자열을 더할 수 있음 이때, 더하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 문자열로 변환

[1]-2. **빼기 연산자(-)**

console.log(5 - 2);       // 3
console.log("5" - "2");   // 3
console.log("5" - 2);     // 3
console.log(5 - "2");     // 3
console.log("five" - 2);  // NaN

위의 예제에서는 빼기 연산자를 사용하여 숫자를 뺄 수 있음 이때, 빼기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

[1]-3. 곱하기 연산자(*)

console.log(2 * 3);       // 6
console.log("2" * "3");   // 6
console.log("2" * 3);     // 6
console.log(2 * "3");     // 6
console.log("two" * 3);   // NaN

위의 예제에서는 곱하기 연산자를 사용하여 숫자를 곱할 수 있음 이때, 곱하기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

[1]-4. 나누기 연산자(/)

console.log(6 / 3);       // 2
console.log("6" / "3");   // 2
console.log("6" / 3);     // 2
console.log(6 / "3");     // 2
console.log("six" / 3);   // NaN

위의 예제에서는 나누기 연산자를 사용하여 숫자를 나눌 수 있음. 이때, 나누기 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

[1]-5. 나누기 연산자(%)

console.log(7 % 3);       // 1
console.log("7" % "3");   // 1
console.log("7" % 3);     // 1
console.log(7 % "3");     // 1
console.log("seven" % 3); // NaN

위의 예제에서는 나머지 연산자를 사용하여 나눗셈의 나머지를 구할 수 있음 이때, 나머지 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

[2] **할당 연산자(assignment operators)**

[2]-1. **등호 연산자(=)**

let x = 10;
console.log(x);   // 10

x = 5;
console.log(x);   // 5

위의 예제에서는 등호 연산자를 사용하여 변수에 값을 할당할 수 있음

[2]-2. **더하기 등호 연산자(+=)**

let x = 10;
console.log(x);   // 10

x += 5;
console.log(x);   // 15

위의 예제에서는 더하기 등호 연산자를 사용하여 변수에 값을 더할 수 있음

[2]-3. **빼기 등호 연산자(-=)**

let x = 10;
console.log(x);   // 10

x -= 5;
console.log(x);   // 5

위의 예제에서는 빼기 등호 연산자를 사용하여 변수에서 값을 뺄 수 있음

[2]-4. **빼기 등호 연산자(-=)**

let x = 10;
console.log(x);   // 10

x *= 5;
console.log(x);   // 50

위의 예제에서는 곱하기 등호 연산자를 사용하여 변수에 값을 곱할 수 있움

[2]-5. **나누기 등호 연산자(/=)**

let x = 10;
console.log(x);   // 10

x /= 5;
console.log(x);   // 2

위의 예제에서는 나누기 등호 연산자를 사용하여 변수에서 값을 나눌 수 있음

[2]-6. **나머지 등호 연산자(%=)**

let x = 10;
console.log(x);   // 10

x %= 3;
console.log(x);   // 1

위의 예제에서는 나머지 등호 연산자를 사용하여 변수에서 값을 나눈 나머지를 구할 수 있음

[3] **비교 연산자(comparison operators)**

[3]-1. **일치 연산자(===)**

console.log(2 === 2);   // true
console.log("2" === 2);   // false
console.log(2 === "2");   // false

위의 예제에서는 일치 연산자를 사용하여 두 값이 같은지 비교할 수 있음 이때, 일치 연산자는 자료형까지 비교

[3]-**2. 불일치 연산자(!==)**

console.log(2 !== 2);   // false
console.log("2" !== 2);   // true
console.log(2 !== "2");   // true

위의 예제에서는 불일치 연산자를 사용하여 두 값이 다른지 비교할 수 있음 이때, 불일치 연산자는 자료형까지 비교

[3]-**3. 작다(<) 연산자**

console.log(2 < 3);   // true
console.log(2 < "3");   // true
console.log("2" < 3);   // true

위의 예제에서는 작다 연산자를 사용하여 두 값을 비교할 수 있움 이때, 작다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

[3]**-4. 크다(>) 연산자**

console.log(2 > 3);   // false
console.log(2 > "3");   // false
console.log("2" > 3);   // false

위의 예제에서는 크다 연산자를 사용하여 두 값을 비교할 수 있음 이때, 크다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

[3]**-5. 작거나 같다(<=) 연산자**

console.log(2 <= 3);   // true
console.log(2 <= "3");   // true
console.log("2" <= 3);   // true
console.log(2 <= 2);   // true

위의 예제에서는 작거나 같다 연산자를 사용하여 두 값을 비교할 수 있음 이때, 작거나 같다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환

[3]-**6. 크거나 같다(>=) 연산자**

console.log(2 >= 3);   // false
console.log(2 >= "3");   // false
console.log("2" >= 3);   // false
console.log(2 >= 2);   // true

위의 예제에서는 크거나 같다 연산자를 사용하여 두 값을 비교할 수 있습니다. 이때, 크거나 같다 연산자는 숫자와 문자열을 함께 사용할 경우, 자동으로 숫자로 변환합니다.

[4] 논리 연산자**(logical operators)**

[4]-1. **논리곱(&&) 연산자**

console.log(true && true);   // true
console.log(true && false);   // false
console.log(false && true);   // false
console.log(false && false);   // false

위의 예제에서는 논리곱 연산자를 사용하여 두 값을 비교할 수 있음 이때, 논리곱 연산자는 두 값이 모두 true일 경우에만 true를 반환

[4]-2. **논리합(||) 연산자**

console.log(true || true);   // true
console.log(true || false);   // true
console.log(false || true);   // true
console.log(false || false);   // false

위의 예제에서는 논리합 연산자를 사용하여 두 값을 비교할 수 있음 이때, 논리합 연산자는 두 값 중 하나라도 true일 경우 true를 반환

[4]**-3. 논리부정(!) 연산자**

console.log(!true);   // false
console.log(!false);   // true
console.log(!(2 > 1));   // false

위의 예제에서는 논리부정 연산자를 사용하여 값을 반대로 바꿀 수 있음 이때, 논리부정 연산자는 true를 false로, false를 true로 바꿈

[5] **삼항 연산자(ternary operator)**

[5]**-1. 삼항 연산자(?:)**

let x = 10;
let result = (x > 5) ? "크다" : "작다";
console.log(result);   // "크다"

위의 예제에서는 삼항 연산자를 사용하여 조건에 따라 값을 선택할 수 있음 이때, 삼항 연산자는 조건식 ? true일 때의 값 : false일 때의 값 형태로 사용

[6] **타입 연산자(type operators)**

[6]-1. **typeof 연산자**

console.log(typeof 123);   // "number"
console.log(typeof "123");   // "string"
console.log(typeof true);   // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);   // "object"
console.log(typeof {});   // "object"
console.log(typeof []);   // "object"
console.log(typeof function(){});   // "function"

위의 예제에서는 typeof 연산자를 사용하여 값의 자료형을 확인할 수 있음 이때, typeof 연산자는 원시 자료형의 경우, 해당 자료형의 이름을, 객체나 함수의 경우, "object" 또는 "function"을 반환합니다. typeof null의 경우 "object"를 반환하는 버그가 있움

(4) 함수

자바스크립트에서는 함수를 정의하여 코드의 재사용성을 높일 수 있음

[1] 함수 정의하기

[1]-1. 함수 선언문(function declaration)

function add(x, y) {
  return x + y;
}

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

위의 예제에서는 function 키워드를 사용하여 add라는 함수를 선언 함수 선언문을 사용하면 함수를 미리 정의해두고, 필요할 때 호출할 수 있음

[1]-2. 함수 표현식(function expression)

let add = function(x, y) {
  return x + y;
}

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

위의 예제에서는 function 키워드를 사용하여 add라는 변수에 함수를 할당 함수 표현식을 사용하면 함수를 변수에 할당하여 익명 함수를 생성할 수 있음

[2] 함수 호출하기

[2]-1. 함수 호출하기

function add(x, y) {
  return x + y;
}

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

위의 예제에서는 add라는 함수를 호출하여 결과값을 반환 함수를 호출할 때는 함수 이름 뒤에 괄호를 사용

[3] 함수 매개변수와 반환값

[3]-1. 함수 매개변수

function add(x, y) {
  return x + y;
}

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

위의 예제에서는 add라는 함수가 x와 y라는 두 개의 매개변수를 받아들입니다. 함수를 호출할 때는 매개변수에 값을 전달합니다.

[3]-2. 함수 반환값

function add(x, y) {
  return x + y;
}

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

위의 예제에서는 add라는 함수가 x와 y라는 두 개의 매개변수를 받아들이고, 이를 더한 값을 반환합니다. 함수를 호출한 결과값을 변수에 할당하여 사용할 수 있음

[4] 함수 스코프

Untitled

[4]-1. 전역 스코프(global scope)

let x = 10;

function printX() {
  console.log(x);
}

printX();   // 10

위의 예제에서는 전역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조합니다. 전역 스코프에서 선언된 변수는 어디에서든지 참조할 수 있음

[4]-2. 지역 스코프(local scope)

function printX() {
  let x = 10;
  console.log(x);
}

printX();   //

data:image/svg+xml,%3csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20version=%271.1%27%20width=%2730%27%20height=%2730%27/%3e

위의 예제에서는 지역 스코프에서 변수 x를 선언하고, 함수 printX에서 변수 x를 참조 지역 스코프에서 선언된 변수는 해당 함수 내에서만 참조

[4]-3. 블록 스코프(block scope)

if (true) {
  let x = 10;
  console.log(x);
}

console.log(x);   // ReferenceError: x is not defined

위의 예제에서는 if문 내에서 변수 x를 선언하고, 이를 출력 if문 내에서 선언된 변수는 해당 블록 내에서만 참조할 수 있음

[5] 화살표 함수

[5]-1. 기본적인 화살표 함수

let add = (x, y) => {
  return x + y;
}

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

위의 예제에서는 화살표 함수를 사용하여 add라는 함수를 선언 화살표 함수를 사용하면 함수의 선언이 간결해짐

[5]-2. 한 줄로 된 화살표 함수

let add = (x, y) => x + y;

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

위의 예제에서는 한 줄로 된 화살표 함수를 사용하여 add라는 함수를 선언 함수 내부에 return문이 한 줄로 작성될 경우, 중괄호와 return 키워드를 생략할 수 있음

[5]-3. 매개변수가 하나인 화살표 함수

let square = x => x * x;

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

위의 예제에서는 매개변수가 하나인 화살표 함수를 사용하여 square라는 함수를 선언 매개변수가 하나일 경우에는 괄호를 생략할 수 있음

profile
TAEJUN BAEK(개발자 백태준)
𝙸 𝚊𝚖 𝚊 𝚌𝚞𝚛𝚒𝚘𝚞𝚜 𝚍𝚎𝚟𝚎𝚕𝚘𝚙𝚎𝚛 𝚠𝚑𝚘 𝚎𝚗𝚓𝚘𝚢𝚜 𝚍𝚎𝚏𝚒𝚗𝚒𝚗𝚐 𝚊 𝚙𝚛𝚘𝚋𝚕𝚎𝚖. 🇰🇷👩🏻‍💻
이전 포스트

1. JS(자바스크립트) 언어의 특징 그리고 역사

다음 포스트

조건문,객체,배열

0개의 댓글