[220127] 변수와 프로퍼티의 차이, 구조 분해 할당

목록

1.   프로퍼티

2.   변수와 프로퍼티의 차이점

3.   구조 분해 할당

 

---

 

 

자바스크립트는 객체지향언어

 

제일 먼저 알아야할 개념이다. 간단하게, 객체로 이루어진 프로그램이라고 생각하면 되겠다.

그 안에서 객체끼리 상호작용을 하고, 만들어지고, 사라지며 서로 관계를 맺으며 만들어지는 생태계다.

그러므로 앞으로 설명할 단어들의 간단한 기준은 무조건 객체로 나뉘어진다.

한마디로, 객체 내부에 있느냐 vs 없느냐.

(기억 안나서 이 게시물을 찾아온 바쁜 나를 위해 메모 : 맨 밑에 2줄 정리 해놨다.)

 

---

 

구분의 기준점 : 객체

객체는 프로퍼티로 구성되어 있고, 프로퍼티 값이 함수일 경우는 일반함수와 구분하기 위해 메서드라고 부른다.

일반함수와 메서드가 뭐가 다르길래 구분을 하는거지?했는데,

class가 존재하는 다른 언어의 경우, class에 속하면 메서드, 속하지 않으면 함수라고한다.

근데 자바스크립트는 class가 없는데?

 

 

 

그렇다면 프로퍼티가 뭔지부터 차근차근 살펴보자.

프로퍼티는 보통 객체 내 속성이라고도 한다. 여기서 포인트는 객체 내에 존재한다는 것이다.

키(key)와 값(value)으로 구성되어있으며, 키는 값에 접근할 수 있는 식별자 역할을 한다.

 

 

 

⚠️잠깐⚠️ : 그럼 변수랑 다른게 뭐지?

간단히 말하자면 프로퍼티는 객체를 이루는 블럭이라고 할 수 있다. 즉, 객체 내부에 있으며 객체에 종속되어 있다.

변수는 특정 객체에 속해있지 않다. 하지만 자바스크립트는 객체지향언어로 이루어져있기 때문에 변수도 어딘가에 속해있는 프로퍼티긴하다. 바로, 프로그램 전체를 이루고있는 window라는 전체에서 실행되는 속성을 기본적으로 갖고있기때문이다.

더 깊게 들어가면 10쪽짜리 글이 되어버릴것 같으니 여기서는 간단히만 알자.

요약하자면 객체 내에 속해있거나 선언되어있으면 프로퍼티! 그렇지 않으면 변수!

 

 

다시 내용으로 돌아와서 다음 코드를 보자.

let a={
    b:10,
    c:{e:40},
    d: function(){}
}

 

b프로터티와 c프로퍼티와, d프로터티와 이루어져있는 a 객체를 보고있다.

특히 d프로터티는 값으로 함수를 가지고있다. 객체에 속해있는 함수이므로 메서드라고 한다.

프로퍼티와 변수의 구분점과 같다. 객체 내에 속해있거나 선언되어있으면 메서드! 그렇지 않으면 함수!

 

임의로 value값을 바꿀때도 사용하지만 그렇게 많이 사용하지는 않는다

let {a,c:result,b} = obj

 

 

물론 빈 함수를 만들 수 있는 것처럼, 프로퍼티가 없는 객체를 만드는 것도 가능하다.

let list={}

 

 

 

console.log로 돌려보았다.

//1.
let a,b = obj
console.log(a,b)

//2.
let a,b,c = obj
console.log(a,b,c)

//3.
let {a,b} = obj
console.log(a,b)

//4.
let a,b,c = obj
console.log(a,b,c)

번호 순서대로의 출력값

---

 

프로퍼티에 접근하기 위해서는 2가지 방법이 있다.

let fruit = {
    apple:10,
    pear:20,
}

let box = fruit.apple
let basket = fruit['pear']

key값 뒤에 점을 찍고 뒤에 value값을 넣는 점 접근법.

key값 뒤에 대괄호 안에 따옴표를 넣고 value값을 넣는 대괄호 접근법.

대괄호 접근법에서 따옴표를 써주지 않으면 pear라는 변수를 찾아서 값을 내놓기 때문에 잊지말고 꼭 써주어야 한다.

 

---

 

속성값으로 한방에 값을 꺼내는 구조분해할당

이야.. 이거 설명하려고 참 먼 길을 돌아왔다.

위에서부터 프로퍼티에 대해 알았고, 프로퍼티에 접근하려면 새로운 변수를 선언하고 속성을 선언하는 방법을 알았다.

하지만 프로그래머들은 언제나 더 빠르고 간단한 방법을 찾는 사람들이란걸 기억해야한다.

변수명을 고민할 필요도 없이! 직관적이고 단순하게 객체 내의 값을 꺼내는 방법을 만들어냈다.

 

let obj = {
    a:10,
    b:20,
    c:{ d:30, },
}

우리가 이러한 객체 내에서 값을 꺼내야할때는 let first = obj.a라고 선언을 했어야했다.

하지만, 구조분해할당을 쓰면 다르다.

 

 

 

let {a,b,c} = obj

쨔쟌. 이렇게하면 출력결과가 귀신같이 10, 20, {d:30}이 나온다.

순서도 상관없다. 가져오고 싶은 속성값만 적으면 그 속성만 변수로 빠지면서 빼올 수 있다.

값이 전부 필요 없다고? a값만 필요하다고?

 

 

 

let {a} = obj

쨘. 이렇게하면 a 값만 꺼내서 쓸 수 있다.

객체 내에 있는 key값을 꺼내서 변수명으로 쓰기때문에 변수명을 고민하지 않아도 되고, 뭘 꺼내오는지 직관적으로 볼 수 있다.

물론, 중괄호는 필수다.

 

 

 

let a,b,c = obj

귀찮다고 이렇게 썼다가는 a랑 b는 그저 변수만 선언한것처럼 값이 undefined로 나오고, c에만 객체 obj가 할당된다.

앞으로 자주 쓰일 코드작성법이니까 꼭꼭 익혀두자.

 

 

---

 

마무리

사실 잘 몰라도 느낌적인 느낌으로, 사자와 같은 감으로 사용할 수 있는 객체다.

근데 몰라도 쓸 수 있긴한데, 설명하거나 다른 코드를 공부할때 이론을 보면 헷갈리긴 하더라.

알아둬서 나쁠건 없으니까.

 

---

 

두줄 정리

객체 내부에 있다? 객체에 선언을 했다? 프로퍼티, 메서드

객체 내부에 없다? 객체에 선언을 안했다? 변수, 함수