JavaScript 문법

binary·2021년 12월 29일

JavaScript node.js 일팔공캠프

일팔공

목록 보기

12/20

JavaScript 문법

변수를 선언하는 방법

var : 똑같은 변수를 선언할 수 있다.
let : 이미 선언한 변수를 또 선언할 수 없다.
const : 변수를 const로 선언하면 값을 바꿀 수 없다.

var는 또 변수를 선언할 수 있지만, let과 const는 그럴 수 없다. var와 let은 변수의 값을 수정할 수 있지만, const는 변수의 값을 수정할 수 없다.

var와 let은 지정된 초기값 없이 선언할 수 있고, 그 값은 undefined가 된다. const는 불가능하다.

자료형, 데이터형

Boolean : true와 false
null : null 값을 나타내는 특별한 키워드. undefined와 다르다. typeof 값이 object로 반환된다.
JavaScript는 대소문자를 구분하므로, null은 Null, NULL 혹은 다른 변형과도 다르다.
undefined : 변수를 선언한 후 값을 할당하지 않은 변수 혹은 값이 주어지지 않은 인수에 자동으로 할당된다.
Number : 1, 3.14, 22와 같은 정수 또는 실수형 숫자이다.
String : "hello"와 같은 문자열이다.
Symbol : (ECMAScript 6에 도입) "심볼" 데이터 형식은 값으로 익명의 객체 속성(object property)을 만들 수 있는 특성을 가진 원시 데이터 형식(primitive data type)이다. - MDN 참조

데이터 형 변환

parseInt() : 문자열 인자를 파싱하여 특정 진수(수의 진법 체계에서 기준이 되는 값)의 정수를 반환
parseFloat() : 문자열로 변환한 후 부동소수점 실수로 파싱해 반환

console.log("== parseInt ==");
console.log(parseInt("1"));
console.log(parseInt(1));
console.log(parseInt("1.1"));
console.log(parseInt(1.1));

console.log("== parseFloat ==");
console.log(parseFloat("1"));
console.log(parseFloat(1));
console.log(parseFloat("1.1"));
console.log(parseFloat(1.1));

toString() : 객체의 문자열 표현을 반환
JSON.stringify() : JavaScript 값이나 객체를 JSON 문자열로 변환
JSON.parse() : JSON 문자열의 구문을 분석하고, 그 결과에서 JavaScript 값이나 객체를 생성

let foo1 = "1";
let foo2 = 2;

// 문자열로 변환
console.log(foo1.toString());  
console.log(typeof foo1.toString());
console.log(foo2.toString());
console.log(typeof foo2.toString());

let foo3 = {
  a: 1,
  b: 1,
};

// 문자열로 변환
console.log(JSON.stringify(foo3));
console.log(typeof JSON.stringify(foo3));

let foo4 = [1, 2, 3, 4, 5];
let boo = JSON.stringify(foo4);

console.log(boo);
console.log(typeof boo);

// 원래대로 변환
console.log(JSON.parse(boo));
console.log(typeof JSON.parse(boo));

비구조화 할당 === 구조 분해 할당

둘 다 destructuring assignment을 의미한다.
배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

let foo = [1, 2, 3];
let [one, two, three] = foo;
console.log(foo);

console.log("foo의 키 값");
console.log(one, two, three);

// 배열 요소를 순차적으로 선언
let foo1 = [1, 2, 3];
let [one1, ...two2] = foo1;
console.log(one1, two2);

let foo2 = {
  a: 1,
  b: null,
};
let { a, b, c = 10 } = foo2;
console.log(a);
console.log(b);
console.log(c);
console.log(foo2);

Array(배열) 고급 사용법

pop() : 배열의 마지막 요소 삭제하는 메소드
push() : 배열 가장 마지막 요소 추가
indexOf() : 배열에서 찾고 싶은 요소가 존재하면 인덱스를 반환하고, 존재하지 않다면 -1을 반환한다.

Object(객체) 고급 사용법

JavaScript는 배열, null, 함수 등 거의 대부분 객체로 취급한다.

전개 연산자

하나의 배열, 하나의 객체를 전달할 때 사용한다.
...를 사용한다.
배열이나 객체를 복사할 때 유용하게 사용된다.

let foo = {
  a: 1,
  b: 2,
};

let boo = {
  ...foo,
  c: 2,
  d: 3,
};

console.log(typeof boo);
console.log(boo);

함수

function() {} 을 ES6부터 ()=>{} 로 바꿔 쓸 수 있다.
화살표 함수라고 불리며 return 없이 간단하게 반환할 수 있다.

클래스, class

ES6부터는 class 키워드 사용할 수 있다.
get 키워드를 이용하면 속성처럼 사용할 수 있다.
constructor 는 constructor와 단짝친구로 항상 같이 쓰인다.

// 사각형의 넓이를 계산하는 클래스
class square {
  // 생성자, class를 활용하여 객체를 만들 때 최초로 실행되는 초기화 함수
  constructor(a, b) {
    this.weight = a;
    this.height = b;
  }

  // 계산된 값을 반환하는 함수지만, 프로퍼티로 사용
  get area() {
    return this.calcArea();
  }

  // 넓이를 계산하는 함수
  calcArea() {
    return this.weight * this.height;
  }
}

const foo1 = new square(1, 2);
const foo2 = new square(22, 33);
console.log(foo1);
console.log(foo2);

// 둘 다 사용 가능
console.log(foo1.area);
console.log(foo1.calcArea());

console.log(foo2.area);
console.log(foo2.calcArea());