비구조화할당-js
JS

비구조화할당-js

javascript는 대표적인 객체지향 프로그래밍 언어 중에 하나입니다. 객체를 이용하는 방법이 es6에 오면서 좀더 간결해 졌는데요. 비구조화할당이라는 부분이 있습니다. 말이 상당이 어려워 보이는데요. 사실 프로그래밍의 발전에 가장 중요한 키워드는 바로

‘정리’

라는 생각을 하게됩니다. 객체라는 것도 사실 정보를 좀더 잘 관리하기 위해서 고안된 발명품이지 않나 싶습니다. 비구조화할당은 이 객체를 조금더 정리하기 위해서 만들어진 발명품입니다.( 요건 제생각 ) 여튼 일반적으로 사용했던 객체 사용법과 어떻게 달라졌는지 1~3번의 과정을 통해서 비교해 보세요.

1

*일반적으로 사용하는 객체 사용방법
*nomal_man, super_man 두개의 객체를 만들어서 객체의 value값을 콘솔에 뿌려보도록 할게요
**``을 이용하면 문자를 쉽게 조합할수 있다

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

const nomal_man = {
    name: 'kindbear',
    year: '1984',
    color: 'yellow'
};

const super_man = {
    name: 'superman',
    year: '1600',
    color: 'red'
};

function print(man) {
    const context = `저는 ${man.name}입니다. ${man.year}에 태어났고 ${man.color}(?)색깔 옷을 좋아합니다`;
    console.log(context);
}

print(nomal_man);
print(super_man);

2

**사용할 객체를 변수에 담아서 코드를 정리

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const nomal_man = {
    name: 'kindbear',
    year: '1984',
    color: 'yellow'
};

const super_man = {
    name: 'superman',
    year: '1600',
    color: 'red'
};

function print(man) {
    const man = { name, year, color }
    const context = `저는 ${name}입니다. ${year}에 태어났고 ${color}(?)색깔 옷을 좋아합니다`;
    console.log(context);
}

print(nomal_man);
print(super_man);

3

**사용할 객체를 파라미터에 담아서 코드를 또한번 정리 ( 맞아요 .. 그 생소한 코드들이 이렇게 줄인거였습니다 -_- ) 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

const nomal_man = {
  name: "kindbear",
  year: "1984",
  color: "yellow"
};

const super_man = {
  name: "superman",
  year: "1600",
  color: "red"
};

function print(man) {
  const { name, year, color } = man;
  const context = `저는 ${name}입니다. ${year}에 태어났고 ${color}(?)색깔 옷을 좋아합니다`;
  console.log(context);
}

print(nomal_man);
print(super_man);

이게 과정을 모르고 변화된 최신 문법들을 보면 이게 뭔가 .. 하는 생각이 들더라구요 실제로 저도 그럤구요.
이런걸 점점 없애는 과정도 코딩에 즐거움 중에 하나인것 같습니다.
:)

오늘도 즐거운 코딩하세요~ ㅎ
kindfamily

팔로우

링크

카테고리

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×