JavaScript - 문법 정리

해당 포스팅에서는 JavaScript 문법을 정리해 보고자 한다.

변수와 상수

변수는 값을 담을 수 있는 공간이다. (let 사용)

let bag = '물건';
console.log(bag);

상수는 변수와 같이 값을 담을 수 있는 공간이지만, 변수와 달리 값을 변경할 수 없다. (const 사용)
따라서 값이 바뀔 일이 없는 데이터는 상수로 선언하는 것이 좋다.

// 선언과 동시에 초기화 해야 함.
const PI = 3.14;
console.log(PI);

// 선언만 하는 것은 불가
const PI;
PI = 3.14;

// 상수에 담긴 값 변경 시 에러 발생
const PI = 3.14;
PI = 3.14159

함수

JavaScript의 함수는 작업을 수행하거나 값을 계산하는 명령문의 집합이다.
함수를 사용하려면 함수를 호출 할 스코프 내에서 함수를 정의해야 한다.

함수 선언

function 함수명 (입력값) {
  // 수행할 일
  return 반환값 // 있을 시
}

함수명(입력값);

함수 특징

함수의 특징은 아래와 같다.

1. 함수는 같은 종류의 작업이 반복될 때, 해당 작업을 정의해 두어 이를 간단하게 반복 실행할 수 있도록 한다.

function allArithemics (x, y) {
  console.log(`${x} + ${y} = ${x + y}`);
  console.log(`${x} - ${y} = ${x - y}`);
  console.log(`${x} * ${y} = ${x * y}`);
  console.log(`${x} / ${y} = ${x / y}`);
}

let a = 3, b = 4;
allArithemics(a, b);

let c = 10, d = 2;
allArithemics(c, d);

let e = 7, f = 5;
allArithemics(e, f);

2. 함수는 입력 값을 받아 출력 값을 반환한다. 반드시 인자를 받거나 값을 반환하는 것은 아니다. (return 문이 정의되어 있지 않으면 undefined 반환)
3. return 문은 반드시 마지막에 적어야 한다.

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

let output = add(2, 3);
console.log(output);

4. 호이스팅 : 함수는 실행문보다 나중에 정의하는 것이 가능하다. (변수나 상수는 불가능 - var 제외)

console.log(add(2, 7));

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

함수 정의 방법

함수 선언

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

console.log(add(2, 7));

상수나 변수에 함수 대입 (함수도 값)

const subt = function (x, y) {
  return x - y;
}

console.log(subt(7, 2));

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

// 기존의 함수를 재정의하는 것도 가능
add = function (x, y) {
  console.log('내용 추가')
  return x + y;
}

console.log(add(2, 7));

화살표 함수

// 한 줄 안에 값만 반환시
const add = (x, y) => x + y;

// 두 줄 이상의 작업이 있을 시
const add = (x, y) => {
  console.log('1줄');
  console.log('2줄');
  return x + y;
};

// 인자가 하나일 때는 괄호 없이 선언 가능
const add = x => x + 2;

+) 2번과 3번 방법으로 선언한 함수는 호이스팅되지 않는다.

객체

객체 생성과 프로퍼티 접근

const member = {
  name: '홍길동',
  age: 26,
  married: false
};

console.log(
  member.name, // 마침표 프로퍼티 접근 연산자
  member['age'] // 대괄호 프로퍼티 접근 연산자
);

// 빈 객체 생성
const member = {};

// 프로터피 추가
member.name = '홍길동';
member.age = '26';
member['married'] = true;

// 프로터피 수정
member['age'] = '27';
member.married = false;

프로퍼티 삭제

delete 연산자를 통해 프로퍼티를 삭제할 수 있다.

const member = {
  name: '홍길동',
  age: 27,
};

delete member.name;
delete member['age'];

// 오류가 발생하지는 않음
delete member.sdasfsadas;

ES6 추가 문법

객체 선언 시 프로퍼티 키와 대입할 상수/변수명이 동일할 시 코드를 더 간결하게 작성할 수 있다.

const x = 1, y = 2;
const obj1 = { 
  x: x,
  y: y
}

const obj2 = { x, y }
console.log(obj2);

function createMember (name, age) {
  return { name, age };
}

const member1 = createMember('민수', 12);
const member2 = createMember('철수', 15);

생성자 함수

new 연산자와 생성자 함수를 이용하여 여러 개의 유사한 객체를 쉽게 만들 수 있다.

// 생성자 함수 
function CreateMember (name, age) {
  this.name = name;
  this.age = age;
  this.introduce = function () {
    return `안녕하세요, 제 이름은 ${this.no} 이고, 나이는 ${this.name}살 입니다.`;
  }
}

// 인스턴스 생성
const member1 = new CreateMember('민수', 12);
const member2 = new CreateMember('철수', 15);

생성자 함수 특징

• 생성자 함수명은 일반적으로 대문자로 시작한다.
• 생성자 함수로 만들어진 객체를 인스턴스 instance라 부른다.
• 생성자 함수는 new 연산자와 함께 사용한다.
• 생성자 함수에는 메서드 정의가 불가하다. (객체 리터럴과 클래스에서는 가능)

클래스(class)

클래스는 특정 객체를 생성하기 위해 변수와 메서드를 정의하는 일종의 틀이다. 객체를 정의하기 위한 변수와 메서드(함수)로 구성된다.

class Member {
  // 필드
  name;
  age;
  
  // 생성자
  constructor (name, age) {
    this.name = name;
    this.age = age;
  }
  
  // 메서드
  introduce () { 
    return `안녕하세요, 제 이름은 ${this.name}이고, 나이는 ${this.age}살 입니다.`;
  }
}

const member1 = new Member('철수', 15);
const member2 = new Member('민수', 17);

배열 (작성中)

작성中

스프레드(spread)

스프레드는 완벽한 복사는 아니지만, 일종의 복사라고 생각해도 좋다.

기본 문법

const class1 = {
  x: 1, y: 'A', z: true
};

const class2 = { ...class1 };

// 아래의 참조복사 코드와 다름!
// const class2 = class1;

console.log(class2);

특징

1. 특정 객체의 프로퍼티를 포함하는 다른 객체 생성에 유용

const class1 = {
  a: 1, b: 'A', c: true
};
const class2 = {
  d: { x: 10, y: 100 }, e: [1, 2, 3]
};
const class3 = {
  ...class1, z: 0
}
const class4 = {
  ...class2, ...class3, ...class2.d
}

console.log(class3);
console.log(class4);

2. 중복되는 프로퍼티는 뒤의 것이 덮어씀

const class1 = {
  ...{ a: 1, b: 2 },
  ...{ b: 3, c: 4, d: 5 },
  ...{ c: 6, d: 7, e: 8 }
}

console.log(class1);

3. 원시 값을 복사하는 경우 단순히 값을 복제하는 것 이어서 서로 별도의 값을 가리킨다.
4. 참조 값을 복사하는 경우 참조 값의 주소를 가리키는 것 이어서 서로 같은 값을 가리킨다.

const class1 = {
  x: 1,
  y: { a: 2 },
  z: [3, 4]
};

const class2 = { ...class1 };
class1.x++;
class1.y.a++;
class1.z[0]++;

console.log(class1);
console.log(class2);

디스트럭쳐링(destructuring)

디스트럭쳐링 사용 전

const obj1 = {
  x: 1, y: 2, z: 3
};

const x = obj1.x;
const y = obj1.y;
const z = obj1.z;

console.log(x, y, z);

디스트럭쳐링 사용 후

const obj1 = {
  x: 1, y: 2, z: 3
};

const {x, y, z} = obj1;

console.log(x, y, z);

+) 일부만 가져오는 것도 가능

const obj1 = {
  x: 1, y: 2, z: 3
};

const {x, z} = obj1;

console.log(x, z);

활용

1. 필요한 프로퍼티 값을 짧은 코드로 변수/상수에 담을 때에도 활용할 수 있다.

const array1 = [1, 2, 3, 4, 5];

// const length = array1.length;
const { length } = array1;

console.log(length);

2. 함수 인자값의 가독성을 위해 객체를 사용할 때에도 활용할 수 있다.

// 인자를 하나의 객체로 묶어 받음 
function introduce(person) {
  console.log(`제 이름은 ${person.name}, `
    + `나이는 ${person.age}세구요. `
    + `직업은 ${person.job}, `
    + `${person.married ? '기혼' : '미혼'}입니다.`
  )
}

// 가독성 좋음, 프로퍼티명만 제대로 입력하면 순서 무관
const person1 = {
  job: '개발자',
  age: 28,
  married: false,
  name: '김철수',
  blood: 'O' // 추가 인자 무관
};

introduce(person1);