자바스크립트 소개 2 - 자바스크립트의 변수

새벽에는 무척 열정적이었는데 아침을 먹고 나니 기운이 떨어져 졸음이 몰려왔다. 그리고 낮잠을 조금 자고 일어났음에도 기분이 나아지지 않고 만사가 귀찮아졌다. 영어 공부를 1시간 하고 다시 개발 공부를 해야 하는데 손에 잘 잡히지 않는다.

그래도 조금이라도 공부를 해야겠다. 오늘 마쳐야 할 분량이 상당히 많다.

---

 

 

 

 

이론 2 - 자바스크립트의 변수

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

변수명을 작성하는 것은 어떤 언어에서나 반복하는 내용이니 모두 아는 것들이다.

 

 

 

 

 

 

변수 데이터는 콘솔창에서 확인할 수 있다.

---

 

 

 

 

퀴즈 2 - 변수 생성 방법

 

 

 

 

변수 초기화는 조금 생소했다. 변수 안의 데이터를 전달하는 것을 말한다고 한다.

---

 

 

 

 

실습 1 - 변수 생성

 

 

---

 

 

 

문제 풀기

 

 

하지만 값을 변경했지만 왜 바로 뒤에 출력이 되는지 궁금했다.

---

 

 

질문 : 변수 box의 값을 변경했는데 왜 이전의 값 다음에 출력이 될까?

 

작성한 코드를 보면 변수 box의 값은 분명히 변경되고 있다. 코드를 실행할 때 각각의 document.write() 함수가 호출되는 시점에 변수의 현재 값이 출력되기 때문에, 이전 값이 출력되는 것이 아니다. 아래에서 동작 방식을 설명하겠다.

 

코드의 동작 순서

1. var fruit;
   • 변수를 선언했지만 값을 할당하지 않음.
2. fruit = "apple";
   • fruit 변수에 "apple" 값을 할당.
3. document.write(fruit);
   • 현재 fruit의 값 "apple"을 HTML에 출력.
4. var box = "banana";
   • 새로운 변수 box를 선언하고 "banana"를 할당.
5. document.write(box);
   • 현재 box의 값 "banana"를 HTML에 출력.
6. box = "tomato";
   • 변수 box의 값을 "tomato"로 변경.
7. document.write(box);
   • 변경된 값 "tomato"를 HTML에 출력.

---

출력 순서

1. "apple" (fruit의 값)
2. "banana" (box의 초기 값)
3. "tomato" (box의 변경된 값)

---

오해의 원인

document.write는 코드의 실행 흐름에 따라 순차적으로 값을 출력한다. 이전 값은 HTML에 이미 출력되었으므로, 이후 값이 출력될 때에도 독립적으로 추가된다. HTML이 재작성되지 않고 연달아 출력되므로, 마치 값이 덮어쓰기 되지 않는 것처럼 보일 수 있다.

 

해결 방법 (수정)

값이 덮어써진 결과만 보고 싶다면, 이전 내용을 지우고 다시 출력하도록 만들어야 한다. 예를 들어, innerHTML을 사용하여 내용을 덮어쓰는 방식으로 구현할 수 있다.

var fruit;
fruit = "apple";
document.body.innerHTML = fruit; // 기존 내용을 지우고 "apple" 출력

var box = "banana";
document.body.innerHTML += box; // "applebanana" 출력 (이전 내용 뒤에 추가)

box = "tomato";
document.body.innerHTML = box; // 기존 내용을 지우고 "tomato" 출력

 

이 코드는 document.body.innerHTML을 이용하여 출력 내용을 덮어쓰므로, 최종적으로 box의 값만 남게 된다. document.write는 단순히 HTML에 추가할 뿐, 기존 내용을 지우지는 않는다.

---

 

 

 

출력 값 사이에 공백 넣기

이 부분도 수업 시간에 설명해주지 않았지만 따로 실습해보고 싶었다.

 

 

 

이제 띄어쓰기가 잘 되어 출력되었다.

 

 

 

 

제출이 잘 되었다.

 

---

 

 

 

 

학습을 마치고

정말 공부하기 싫었는데 이 마음을 이기고 해보니 나름 할만했다. 내용도 어렵지 않고 충분히 잘할 수 있겠다는 생각이 들었다. 오후에도 나머지 내용을 학습해볼 것이다.

요즘 글 발행수가 좀 적었는데 주말에 15개 이상씩 발행하려고 한다. 아마 오늘 10개 이상의 학습일지를 더 올리게 될 것 같다. 그리고 넘어가는 글은 다음날 공개하면 될 테니까. 미리 공부를 해두어야 학습량이 적은 날에도 충분한 일지를 올리게 될 것이다.