TIL #7 JS 기본 문법 정리

DO YEON KIM·2024년 4월 23일

TIL frontend 부트캠프 스파르타코딩클럽 자바스크립트 프론트엔드

부트캠프

목록 보기

7/72

하루 하나씩 작성하는 TIL #7

이번 TIL은 예전에 정리해두었던 JS문법을 병합하여 간단하게 다시 한 번 정리하였다.

1. let, var, const 차이

let : 재할당 O, 재선언 X
- 선언 : 변수명을 JS 엔진에 알리는 것
- 할당 : 변수에 값을 저장 하는 것

let value = "value1"
console.log(value) // value1

value = "value2" // 재할당 가능
console.log(value) // value2

let value = "value3" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

var : 재할당, 재선언 O

var name = "name1"
console.log(name) // name1

var name = "name2"
console.log(name) // name2

const : 재할당, 재선언 X, 초기 값이 없으면 선언 불가능

const value; // 초기값 없이 선언 불가능, SyntaxError: Missing initializer in const declaration
---
const value = "value1"
console.log(value) // value1

value = "value2" // 재할당 불가능, TypeError: Assignment to constant variable.

const value = "value2" // 재선언 불가능, SyntaxError: Identifier 'value' has already been declared

2. 화살표 함수

function이나 return 키워드 없이 함수를 만드는 방법.

// ES5
function func() {
	return true
}

//ES6
const func = () => true
const func = () => {
	return true
}

() => {}
parm => {}
(parm1, parm2, ...parms) -> {}

// 익명 화살표 함수
() => {}

function은 호출을 할 때 this가 정해지지만, 화살표 함수는 선언할 때 this가 정해진다.

3. 구조분해 할당

배열[]이나 객체{}의 속성을 분해해서 그 값을 변수에 담을 수 있게 해주는 문법

// 배열의 경우
let [value1, value2] = [1, "new"];
console.log(value1); // 1
console.log(value2); // "new"

let arr = ["value1", "value2", "value3"];
let [a,b,c] = arr;
console.log(a,b,c) // value1 value2 value3

// let [a,b,c] = arr; 은 아래와 동일!
// let a = arr[0];
// let b = arr[1];
// let c = arr[2];

let [a,b,c,d] = arr
console.log(d) // undefined

let [a,b,c,d = 4] = arr
console.log(d) // 4

4. 단축 속성명

객체의 key와 value 값이 같다면, 생략 가능

const name = "nbc"
const age = "30"

const obj = {
	name,
	age: newAge
}

const obj = {
	name,
	age
}

5. 전개 구문(spread)

배열이나 객체를 전개하는 문법. 구조분해할당과 함께 정말 많이 사용됨.

// 배열
let arr = [1,2,3];

let newArr = [...arr, 4];
console.log(newArr) // [1,2,3,4]

// 객체
let user = {name: "nbc", age: 30};
let user2 = {...user}

user2.name = "nbc2"

console.log(user.name) // nbc
console.log(user2.name) // nbc2

6. 템플릿 리터럴 (Template literals)

여러 줄로 이뤄진 문자열과 문자 보간기능을 사용하게 만들어 주는 문자열 리터럴 표현식으로, 백틱과 ${}로 표현한다.

"string"
'string'
new String("string")

`string text`

`string text 
string text line2`

`string text ${value} text`

7. 일급 객체로서의 함수

자바스크립트에서 함수는 일급 객체(First-Class Object) (다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체) 라고 함. 그래서 함수를 객체처럼 여러가지 방식으로 다룰 수 있다. 일반 객체와 달리 함수는 특별한 능력을 가지고 있다.

1. 변수에 함수를 할당

함수는 변수에 할당할 수 있다. 함수는 값으로 취급되기 때문에, 다른 변수와 마찬가지로 변수에 할당할 수 있다. 변수에 할당된 함수는 나중에 사용할 수 있다.

const sayHello = function() {
  console.log('Hello!');
};

sayHello(); // "Hello!" 출력

2. 함수를 인자로 다른 함수에 전달

함수는 다른 함수에 인자로 전달될 수 있다. 함수가 값으로 취급되기 때문에, 다른 함수의 인자로 전달할 수 있다. 이것은 콜백(callback)이나 고차 함수(higher-order function)를 작성하는 데 사용된다.

콜백 함수: 어떠한 함수의 매개변수로 쓰이는 함수
고차 함수는 함수를 인자로 받거나 함수를 출력으로 반환하는 함수 (콜백 함수 = 고차함수)

function callFunction(func) {
  func();
}

const sayHello = function() {
  console.log('Hello!');
};

callFunction(sayHello); // "Hello!" 출력

3. 함수를 반환

함수는 다른 함수에서 반환될 수 있다. 함수는 값으로 취급되기 때문에, 다른 함수에서 반환할 수 있다. 이것은 함수 팩토리(factory)나 클로저(closure)를 작성하는 데 사용된다.

function createAdder(num) {
  return function(x) {
    return x + num;
  }
}

const addFive = createAdder(5);
console.log(addFive(10)); // 15 출력

4. 객체의 프로퍼티로 함수를 할당

함수는 객체의 프로퍼티로 할당될 수 있다. 객체의 메소드로 함수를 호출할 수 있다.

const person = {
  name: 'John',
  sayHello: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

person.sayHello(); // "Hello, my name is John" 출력

5. 배열의 요소로 함수를 할당

const myArray = [
  function(a, b) {
    return a + b;
  },
  function(a, b) {
    return a - b;
  }
];

console.log(myArray[0](5, 10)); // 15 출력
console.log(myArray[1](10, 5)); // 5 출력

8. Map

Map은 키-값 쌍을 저장하는 객체와 비슷
Map은 각 쌍의 키와 값을 저장하며, 객체와 달리 키로 사용할 수 있는 모든 유형을 사용할 수 있다.
Map은 키가 정렬된 순서로 저장되기 때문에, 추가한 순서대로 반복할 필요가 없다. Map을 사용하면 다음과 같은 작업을 수행할 수 있다.
- 키-값 쌍 추가 및 검색(set)
- 키-값 쌍 삭제(delete)
- 모든 키-값 쌍 제거(clear)
- Map 크기 및 존재 여부 확인(size)

new Map() – 맵을 생성
```
const myMap = new Map();
```


- `map.set(key, value)` – `key`를 이용해 `value`를 저장 (= 값 추가)

```js
myMap.set('key', 'value');

map.get(key) – key에 해당하는 값을 반환. key가 존재하지 않으면 undefined를 반환

console.log(myMap.get('key')); // 'value' 출력

map.has(key) – key가 존재하면 true, 존재하지 않으면 false를 반환

map.delete(key) – key에 해당하는 값을 삭제
map.clear() – 맵 안의 모든 요소를 제거
map.size – 요소의 개수를 반환
Map의 for of 반복문

var iterable = [10, 20, 30];

for (var valueof iterable) {
  console.log(value);// 10, 20, 30
}

const myMap = new Map();
myMap.set('one', 1);
myMap.set('two', 2);
myMap.set('three', 3);

for (const key of myMap.keys()) {
  console.log(key);
}

for (const value of myMap.values()) {
  console.log(value);
}

for (const entry of myMap.entries()) {
  console.log(`${entry[0]}: ${entry[1]}`);
}

특정 키가 Map에 존재하는지 확인

console.log(myMap.has('two')); // true 출력

9. Set

Map은 키-값 쌍을 저장하는 객체와 비슷하며, Set은 고유한 값을 저장하는 자료 구조.
Map 및 Set은 모두 값 추가, 검색, 삭제 및 모든 값 제거를 수행
Map 및 Set을 사용하여 효율적인 데이터 구성 및 검색을 수행

DO YEON KIM

프론트엔드 개발자를 향해서

이전 포스트

TIL #6 TMDB란?

다음 포스트