[TIL#7] Java Script 기초 문법 Remind하기 (#1)

이트루·2024년 1월 5일
Java Script
0

🌵TIL

목록 보기
7/17

[머리말]
이 게시글에서는 가볍게 JS문법만 훑을 예정이며, CS 지식이 필요한 딥한 부분은 MDN 문서 나 JavaScript.info, 동아리 스터디 자료 등을 통해 다시 공부하며 다루어볼 예정이다. 빠르게 JavaScript 문법을 remind 해야할 때 읽도록 하자.

[목차]

  1. Declaration of Identifiers
  2. Data Type
  3. Operator
  4. Control flow (Branch와 Loop)
  5. Function
  6. Data structure
  7. Prototype
  8. Class

1. Declaration of Identifiers

1-1. 선언

변수 및 상수는 다음과 같이 선언할 수 있다.
var let const

  • 변수 선언 : var let
  • 상수 선언 : const

1-2. Scope

변수의 scope는 다음 3가지로 나뉜다.

  • 전역 스코프 : 파일 전체
  • 함수 스코프 : 함수
  • 블록 스코프 : 블록

var let const 의 특징은 다음과 같다.

  • var
    : 블록 스코프가 아니므로, 블록 내에 쓰인 변수가 블록 외부에서 사용될 수 있다. 또한, 같은 scope 내에서 같은 이름으로 변수 재선언이 가능하다.
  • let
    : 선언 후 초기 값 설정 이전까지는 undefined를 가진다. 블록 스코프를 가지며, 같은 scope 내에서 같은 이름으로 변수 재선언이 불가능하다.
  • const
    : 선언과 동시에 초기화가 필수적이다. 블록 스코프를 가지며, 같은 scope내에서 같은 이름으로 상수 재선언이 불가능하다.
키워드 값 재할당 가능 변수 재선언 가능 (같은 scope 내) 블록 스코프
var O O X (function-scope)
let O X O
const X X O

1-3. Hoisting

var 이 ES6부터 지양된 이유 중 하나인 hoisting에 대해 알아보자.

Java Script는 프로그램 실행 시 모든 변수 및 함수의 선언을 해당 스코프의 최상단에서 선언하는데, 이것이 hoisting이다. MDN에서 정의한 hoisting은 다음과 같다.

JavaScript 호이스팅은 인터프리터가 코드를 실행하기 전에 함수, 변수, 클래스 또는 임포트(import)의 선언문을 해당 범위의 맨 위로 끌어올리는 것처럼 보이는 현상을 뜻합니다.
- MDN web docs -

그럼, 다음과 같은 상황을 가정해 볼 수 있다.

console.log(x);
var x = 1;

console.log(y);
let y=2;

위 코드의 실행 결과로 console.log(x); 는 undefined가 출력되며, console.log(y) 에서는 Error가 발생한다.

일반적으로 선언 이전의 변수 사용은 엄격히 금지되어 있다. 그러나 var의 경우, 선언과 동시에 undefined로 초기화가 이루어진다.

let의 경우, 선언과 undefined의 초기화가 동시에 이루어지지 않으므로 Error가 발생하게 된다. (변수 초기화 이전에 변수의 사용이 금지되는 기간을 Temporal Dead Zone 이라고 한다.)

이러한 var의 특성으로 인해, 어쩔 수 없이 var를 쓸 수 밖에 없는 경우를 제외하고는 var의 사용을 최대한 지양하자.

2. Data Type

2-1. 다양한 data type

Java Script에서 제공하는 data type(typeof return value)은 아래와 같다.
[Tip] null은 object로 포함된다.

  • number
    : Infinity와 NaN(not a number) 포함
  • bigint
  • string
  • boolean
  • undefined
  • object
  • function
  • symbol

2-2. null과 undefined

null과 undefined 모두 값의 부재를 의미한다. 큰 의미는 비슷하지만, 정확한 의미는 다음과 같다.

  • null
    : 주로 의도적으로 값이 없음을 나타낼 때 사용한다.

  • undefined
    : 의도적이지 않은 상황에 나타난다.
    Ex) 변수의 초기화를 깜빡한 상황

따라서 undefined보다는 null을 권고한다.

2-3. Truthy와 Falsy

Java Script의 모든 값은 암묵적으로 true나 false로 변환될 수 있다. 암묵적으로 true로 변환되는 값들을 truthy, flase로 변환되는 값들을 falsy하다고 한다.
주로 조건문 등에서 참/거짓을 확인할 때 유용하게 사용되는 특성이다. Falsy한 변수는 false, Truthy한 변수는 true 처럼 사용된다.

Falsy한 값은 undefined null -0 0n 0 '' NaN false 의 총 8개가 존재하며, 나머지는 Truthy하다.

Truthy, Falsy한 값은 앞에 !!를 붙여 true/false로 변환할 수 있다.

2-4.Type Conversion

Java Script는 Dynamic Type, Week Typing으로 타입에 대해서 굉장히 유연한 언어이다. 해당 특성을 잘 나타내는 상황은 다음과 같다.

  • 변수의 값을 다른 타입의 값으로 재할당 할 수 있다.
  • 서로 다른 타입에 대해 연산이 가능한 경우가 존재한다.
    Ex1 ) 10 + "objects"; // "10 objects" -> string
    Ex2) "7" + "4"; // 28 -> number

3. Operator

JavaScript에서 제공하는 기본적인 연산자는 다음과 같다.
[Tip] + 연산자의 경우, 문자열을 붙이는 용도로도 사용 가능하다.

  • 산술 연산자 : +, -, *, /, %, **
  • 증감 연산자 : ++, --
  • 논리 연산자 : !, &&, ||
  • 비교 연산자 : ==, ===, !=, !==, >, >=, <, <=
  • 삼항 연산자 : (boolean) ? (true일 때 식) : (false일 때 식)

4. Control flow (Branch와 Loop)

4-1. Conditional branch

조건에 따라 분기하는 제어문에는 if-else if-else 문과 switch-case 문이 있으며, 사용 예제는 다음과 같다.

//	if 사용 예제
let x = 3;
if(x < 1) { console.log("if문 실행"); }
else if(x < 5) { console.log("else if 실행"); }
else { console.log("else 실행"); }
//	switch 사용 예제
let x = 2;
switch(x) {
	case 1 :
    	console.log("31");
        break;
    case 2 :
    	console.log("28");
    	break;
  	case 3:
    	console.log("31");
    	break;
  default:
    	console.log("tired");
}

4-2. Loop

반복문에는 for 문과 while 문이 있으며, 사용 예제는 다음과 같다.

//	for 사용 예제
for (초기식; 조건식; 증감식) {
  	...body
}

for (let i = 0; i < 5; ++i) {
  console.log(i);
}
//	while 사용 예제
while (조건식) {
  	...body
}

let i = 0;
while (i < 5){
  console.log(i);
  ++i;
}

5. Function

함수는 일반적으로 function 키워드로 선언되고, return 키워드로 값을 반환한다. 사용 방법은 다음과 같다.

function 함수명(argument1 [, argument2, ...]) {
	return 반환값;
}

함수를 선언하는 방법에는 function 외에 화살표 함수 가 존재하며, 다음과 같이 사용한다.
[Tip] 화살표 함수의 경우, return문 한 줄만 존재한다면 중괄호를 생략해 사용할 수 있다.

const 함수명 = (argument 1 [, argument2, ...]) {
  return 반환값;
}

6. Data structure

JavaScript에서 제공하는 자료 구조에는 `object`, `array`, `map`, `set` 등이 존재한다. ### 6-1. Object 객체(Object)는 하나의 변수에 여러 종류의 값을 넣을 수 있는 자료구조이며, 데이터 속성과 접근자 속성을 가진다.

데이터 속성은 key-value 형태로 구성되어 있는데, key는 string 또는 symbol만 가능하며, value로 다양한 data type을 가질 수 있다.

접근자 속성은 key를 두 개의 접근자 함수(get, set) 중 하나와 연결하여 값을 가져오거나 저장한다.

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

// Getter, Setter
const getter_setter_object = {
  _a: 1,
  _b: 2,
  sum: 3,
  calc() {
    this.sum = this._a + this._b;
	},
  get a() {
    return this._a;
  },
  get b() {
    return this._b;
  },
  set a(value) {
    this._a = value;
    this.calc();
  },
  set b(value) {
    this._b = value;
    this.calc();
  } 
};

[Tip] Object의 다양한 method 들이 궁금하다면 MDN 문서(Object)를 참조하거나, 이 게시물에서 확인하자. 참고로 Object는 Class이다.

6-2. Array

배열(Array)는 하나의 변수에 같은 data type을 가지는 요소 여러개를 넣을 수 있는 자료구조이다. 

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

[Tip] Array의 다양한 method 들이 궁금하다면 MDN 문서(Array)를 참조하거나, 이 게시물에서 확인하자. 참고로 Array는 객체이다.

6-3. Map

Map은 Object와 굉장히 유사하다. 차이점은 key값에 모든 data type이 올 수 있다는 것과 iterable하다는 것이다. 자세한 차이점이 궁금하면 여기에서 더 알아보도록 하자.

Map의 사용 예시는 아래와 같다.

let map = new Map();

map.set('1', 'str1');   // 문자형 키
map.set(1, 'num1');     // 숫자형 키
map.set(true, 'bool1'); // 불린형 키

// 객체는 키를 문자형으로 변환하지만,
// 맵은 키의 타입을 변환시키지 않고 그대로 유지한다. 
alert( map.get(1)   ); // 'num1'
alert( map.get('1') ); // 'str1'

alert( map.size ); // 3

[주의]
map[key] = 2로 값을 설정하는 것 같이 map[key]를 사용할 수 있긴 합니다. 하지만 이 방법은 map을 일반 객체처럼 취급하게 됩니다. 따라서 여러 제약이 생기게 되죠.
map을 사용할 땐 map전용 메서드 set, get 등을 사용해야만 합니다.
- javascript.info -

[Tip] Map의 다양한 method, Object와의 차이가 무엇인지 궁금하다면 MDN 문서(Set)를 참조하거나, 이 게시물에서 확인하자.

6-4. Set

Set은 수학의 집합 개념과 유사하다. Set에는 중복된 값이 들어갈 수 없다. Set 내부의 값들은 해당 set collection 내에서 고유성을 지니며, 삽입된 순서에 따라 iterate할 수 있다.

Set의 사용 예시는 아래와 같다.

let set = new Set();

let john = { name: "John" };
let pete = { name: "Pete" };
let mary = { name: "Mary" };

// 어떤 고객(john, mary)은 여러 번 방문할 수 있다.
set.add(john);
set.add(pete);
set.add(mary);
set.add(john);
set.add(mary);

// set collection 내부의 값들은 unique하다.
alert( set.size ); // 3

for (let user of set) {
  alert(user.name); // // John, Pete, Mary 순으로 출력된다.
}

[Tip] Set의 다양한 method 들이 무엇인지 궁금하다면 MDN 문서(Set)를 참조하거나, 이 게시물에서 확인하자.

7. Prototype

7-1. Object Constructor

7-2. Prototype

7-3. Inheritance of Object Constructor

8. Class

Class는 ES6부터 생긴 문법이며, 사용 방법은 타 언어와 비슷하다.

[참고 자료 및 문헌]

[정리되지 않은 정보]
entries, constructor, …
shif, unshif, splice
map, filter (PL)
property shorthand
spread operator
rest parameter
object, map(set, get ; keys, values, entries-> iterator (for-of); size, has-key기반 검색) 차이
Set(값 중복이 없다; add, has, values, )
각 자료구조의 method (객체 지향형) 정리

profile
이트루
내 꿈은 세계정복🧐
이전 포스트

[TIL#6] Python으로 웹 스크래핑 찍먹하기

다음 포스트

[TIL#8] Java Script 정규 표현식

0개의 댓글