200928 TIL Object Display in JS

journey·2020년 10월 4일
0

Object의 값을 보고 싶다면 아래의 경우, 원하는 결과를 얻지 못할 것이다.

<h2>JavaScript Display Object</h2>

<p id="demo"></p>

<script>
var person = {name:"John", age:30, city:"New York"};

document.getElementById("demo").innerHTML = person;
</script>

아래는 loop를 이용해서 object 의 properties를 불러내는 방법이다.
space, br의 쓰임에 주의하며 3가지 경우를 살펴보자.

<h2>JavaScript Display Object Properties</h2>

<p id="demo"></p>

<script>
var x, txt = "";
var person = {name:"John", age:50, city:"New York"};

for (x in person) {
  txt += person[x] + " ";
};

document.getElementById("demo").innerHTML = txt;
</script>
<h2>JavaScript Display Object Properties</h2>

<p id="demo"></p>

<script>
var x, txt = "";
var person = {name:"John", age:50, city:"New York"};

for (x in person) {
  txt += person[x] + "                 ";
};

document.getElementById("demo").innerHTML = txt;
</script>
<h2>JavaScript Display Object Properties</h2>

<p id="demo"></p>

<script>
var x, txt = "";
var person = {name:"John", age:50, city:"New York"};

for (x in person) {
  txt += person[x] + "<br>";
};

document.getElementById("demo").innerHTML = txt;
</script>

이번에는 위의 코드에서 변수값이 for in loop를 지나기 전후에 어떻게 변하는 지 살펴보자.

<script>
var x, txt = "";
var person = {name:"John", age:50, city:"New York"};

alert(x);
alert(txt);

for (x in person) {
  txt += person[x] + " ";
};
alert(x);
alert(txt);
</script>

Object를 Array로 변환한 뒤, 기존 object properties의 값을 얻는 방법도 있다.

<h2>JavaScript Display Objects</h2>
<p>Object.values() converts an object to an array.</p>

<p id="demo"></p>

<script>
var person = {name:"John", age:50, city:"New York"};
var myArray = Object.values(person);
var testArray = ['let', 'see', 'what', 'happens']
alert(testArray);
document.getElementById("demo").innerHTML = myArray;
</script>

참고> 어느 종류의 JS Objects든 Array의 형태로 전환이 가능하다.

잠깐 짧게 JS 에서 변수를 한 번에 여러 개 선언하는 방법을 배워보자.

  1. 서로 다른 변수명에 각각 다른 값을 지정하고 싶을 때
<h2>JavaScript Variables</h2>

<p>You can declare many variables in one statement.</p>

<p id="demo"></p>

<script>
let [a, b, c, d] = [1, 4, 'this is a string', d];

document.getElementById("demo").innerHTML = d;
</script>
  1. 서로 다른 변수명에 같은 값을 지정하고 싶을 때
    흔히 하는 실수
>>> var a = b = c = [];
>>> c.push(1)
[1]
>>> a
[1]

They all refer to the same object in memory, they are not "unique" since anytime you make a reference to an object ( array, object literal, function ) it's passed by reference and not value. So if you change just one of those variables, and wanted them to act individually you will not get what you want because they are not individual objects.

아래 두 경우를 비교해보자

//note you can only do this with Numbers and Strings

//you could do...

var a, b, c; 
a = b = c = 0; 
//but why?

c++;
// c = 1, b = 0, a = 0;
var a = b = c = 0;
a = 10;
alert(c);

이게 조금 더 좋은 방법이다.

var a = <someLargeExpressionHere>, b = a, c = a, d = a;

이런 방법도 있다.

<div id="test2"></div>
<script>
let [x, y, z] = Array(3).fill('hjhjhj');
document.getElementById("test2").innerHTML = x + y + z;
</script>
profile
J for Journey

0개의 댓글