01 자바스크립트 필수지식

1. 템플릿문자열 (Template literals)

JavaScript에서 문자열을 작성할 때 더 유연하고 편리하게 사용하기 위한 문법

1
const name = "망고";
2
const template = `10+20,${name}`;
3
console.log(template);

2. 함수

자바스크립트의 함수는 3가지 방식 선언식,표현식,람다식 으로 작성할수 있다.

2-1-선언식

1
function fn(){}
2
fn();

2-2-표현식

2-2-1-기명함수

1
//1
2
const fnPointer = function fn() {
3
  console.log('fnPointer');
4
};
5
fnPointer();
6

7
//2
8
const fnPointer = function fn(arg) {
9
  console.log(arg);
10
};
11
fnPointer('fnPointer');

2-2-2-익명함수

1
const fnPointer = function (arg) {
2
  console.log(arg);
3
};
4
fnPointer('fnPointer');

2-3-람다함수(화살표함수)

1
//1
2
const fnPointer = (arg)=> {
3
  console.log(arg);
4
};
5
fnPointer('fnPointer');
6

7
//2
8
const fnPointer = (arg)=> console.log(arg);
9
fnPointer('fnPointer');

3. 비구조화할당(Destructuring)

배열이나 객체의 값을 쉽게 꺼내어 사용할수 있는 문법

3-1-배열

1
const likeFoods = ["apple", "banana", "orange"];
2
const food1 = likeFoods[0];
3
const food2 = likeFoods[1];
4
const food3 = likeFoods[2];
5
console.log(food1, food2, food3);
6
//비구조화 할당
7
const [f1, f2, f3] = likeFoods;
8
console.log(f1, f2, f3);
9
const [food, ...f] = likeFoods;
10
console.log("🚗",food, f);

3-2-객체

1
const userObj = {
2
  uname: "빨라",
3
  age: 20,
4
};
5
//const uname = userObj.uname;
6
//const age = userObj.age;
7
console.log(userObj.uname, userObj.age);
8
//비구조화할당
9
const { uname, age } = userObj;
10
console.log(uname, age);
11

12
//매핑연산자
13
const { uname: n, age: a } = userObj;
14
console.log(n, a);
15

16
//어려운객체
17
const user = ({
18
  mname = "망고", //기본값 할당
19
  age1 = 5,
20
  id,
21
  money,
22
  address: { city: cityName, street: streetName },
23
  contact: { email: emailName, phone: phoneName },
24
} = {
25
  id: "man",
26
  money: 20,
27
  address: { city: "서울", street: "강남대로" },
28
  contact: { email: "badman@gmail.com", phone: "010-222-6544" },
29
});
30
console.log(id, money, cityName, streetName, emailName, phoneName);
31

32
function printuser({ id, money, cityName, streetName }) {
33
  console.log(id, money, cityName, streetName);
34
}
35

36
printuser(user);

4. 나머지구문(Spread syntax)

전개연산자라고도 불리우는 … 문법은 반복이 가능한 객체를 하나씩 펼쳐서 전개해주는 문법 앝은복사, 깊은복사 알아보기

1
//spred
2
//...
3
const x = [1, 2, 3];
4
const a = [...x];//얕은복사
5
const b = x;//값참조
6

7
a[0] = 100;
8
console.log(x === a, a, x);
9

10
b[0] = 500;
11
console.log(x === b, b, x);
12

13

14

15
// 배열병합
16
const merge = [...x, ...a];
17
console.log(merge);
18

19
// 객체병합
20
const user1 = { name: "댕댕이", age: 80 };
21
const u={...user1}
22
console.log(u === user1);//얕은복사
23
console.log(u['name'] === user1['name']);//알맹이는 같다
24

25
const user2 = { name: "이댕댕", skill: "front" };
26

27
const mergeUser = { ...u, ...user2 };
28
console.log(mergeUser);  //name키의 데이터 변경됨[그림참조]

1
// spread 연산자는 인수의 갯수가 가변적인 함수에도 사용할수 있다.
2
function spread(...args) {
3
  console.log(`args:${args}`);
4
}
5
spread(10,3,4)
6
spread(10,)

Spread Operator 와 Reduce 함수를 사용한 누산기

1
function spread(...args) {
2
  //console.log(`args:${args}`);
3
  return args.reduce((a, b) => a + b);
4
}
5

6
const acc = spread(19, 30, 5);
7
console.log(acc);

reduce()

5. 객체

1
//변수명 변경하여 구조분해할당
2
{const user = {
3
  name: '망고',
4
  age: 5,
5
};
6

7
const {name: userName, age: userAge} = user;
8

9
console.log(userName); // '망고'
10
console.log(userAge); // 5}
11

12
//중첩객체 구조분해할당
13
{
14
  const userList = {
15
    id: 'idid',
16
    age: 20,
17
    address: {city: '서울', street: '강남'},
18
  };
19
  const {
20
    id,
21
    age,
22
    address: {city, street},
23
  } = userList;
24
  console.log(id, age, city, street);
25
}
26
//중첩객체의 변수명을 바꿔서 구조분해할당
27

28
{
29
  const {
30
    id: user_id,
31
    age: user_age,
32
    address: {city: user_city, street: user_street},
33
  } = userList;
34

35
  console.log(user_id, user_city);
36
}
37
// 객체의 초기값 할당
38
{
39
  const userObj = {name: 'abc'};
40
  const {name, age = 20} = userObj;
41
  console.log(name, age);
42
}