시베리안 허숙희의 자바스크립트 비기닝 4 (변수동작: 복사와 참조)

자바스크립트

by e7e 2023. 6. 1. 17:29

정적 웹서버를 맹글었으닝 이제 브라우져에서 자바스크립트 공부를 시작해보장!

정적 웹서버 맹근 부분은 잘 이해 안되면 사용만 하고, 이해는 뒤로 미루장.

(편하게 XAMPP 를 사용해도 된당!)

브라우져에서의 자바스크립트를 먼저 공부하는 이유는 재밌기 때문이당!

자 vs code 폴더 열기롱 public 폴더를 연당.(XAMPP나 APACHE를 쓴다면 당신 맘대롱..^-^)

변수.html으로 아래 내용 저장하고, 브라우져에서 실행 결과를 온 몸으로 확인한당!

<!-- 아래 라인이 없으면 HTML 버젼 설정이 안되서, 희한한 동작을 볼 수 있당 -->
<!DOCTYPE html>
<!--아래 라인이 없으면 한글이 깨진당-->
<meta charset="UTF-8">
<script>
    // 자바스크립트는 동적언어당
    // 변수 선언 var , ES6버젼 이상에서는 let, const도 사용가능(요건 나중엥)
    // 변수타입 -> 원시(primitive)타입 vs 객체(Object)타입 구분은 아주 중요하당!
    var merong;            // 선언만 했지 변수 타입이 정해지지 않았음;
    var roze = "로제";     
    alert(typeof(roze));   // string
    var rozeAge = 26;      
    alert(typeof(rozeAge)); // number
    var rozeIsCute = true;  
    alert(typeof(rozeIsCute)); // boolean

    var blackpink = ["로제","제니","리사","지수"];  // 배열
    alert(typeof(blackpink));

    var rozeInfo = {                                // JSON(배열포함이라 생각해야 정신건강 GOOD!)
        name:"로제",
        age: 26,
        alias:"로지",
        home:"호주"
    }
    alert(typeof(rozeInfo));
</script>

먼저 웹 응용프로그램 개발자로서 가장 먼저 인식해야 할 것은 자바스크립트는 동적언어란 사실이당!

선언시에 변수타입을 정하지 않고 값 할당시 = 오른쪽에 오는 값에 의해서 동적으로 변수타입이 정해진당

var superMan = 272 ; // 변수 타입 number
superMan = "중호쌤";  
alert(typeof(superMan)); // 변수 타입이 string으로 바뀌었음

원시타입(primitive) 과 객체(Object)타입을 구분하는 것은 엄청나게 중요한디

number,string,boolean (null,NaN,undefined는 무시하장)은 원시(primitive)타입이당!

배열([값1,값2,,]) 과 JSON({키1:값1,키2:값2,....})는 객체(Object) 타입임을 기억하장!

원시타입과 객체타입은 어떤식으로 기억하면 좋을깡?

원시타입은 낱개(더 쪼갤 수 없는) 상품,

객체타입은 낱개 상품을 여러개 담아 박스 단위로 파는 상품으로 일단 생각하장!

뽀인토는 박스(객체) 안에 박스(객체)가 들어 갈 수 있다는 것이다.

(현실에서도 흔히 볼 수 있는 패턴이당, 상품 박스 안에 박스 그리고 박스, 마지막 낱개 사탕1개!)

원시타입과 객체타입 구분이 왜 중요하냐면 동작이 다르기 때문이당!

복사와참조.html로 아래 내용 저장하고, 브라우져에서 실행 결과를 온 몸으로 체감하장!

<!DOCTYPE html>
<meta charset="UTF-8">
<script>
    // 원시타입 call by value (복사방식 동작)
    var myStar = "로제";
    var yourStar = myStar;             // 복사, 별도 존재
    yourStar = "제니";
    alert("myStar에 영향? " + myStar); // 영향 없음

    // 객체타입 call by reference (참조방식 동작)
    var myRoze = {name:"제니",song:"솔로"};
    var myJenni = myRoze;              // 참조, 별명으로 동작 같은 곳을 가리킴
    myJenni.name = "로제";
    myJenni.song = "Gone";
    alert("myRoze에 영향?",myRoze.name);  // 영향 있음 
    alert("myRoze에 영향?",myRoze.song);  // 영향 있음
</script>

원시타입 변수는 새로운 변수에 그 변수를 할당하면 똑같은 값(복사)을 가진 새로운 변수가 1개

더 존재하여 이후 값 변경이 서로 간에 전혀 영향을 주지 않지만,

객체타입 변수를 새로운 변수에 할당하면 새로운 변수도 똑같은 객체를 가리키는

별명(참조)처럼 동작하게 되어서 2개 중 어떤 변수를 이용해도 해당 객체를 제어할 수 있당!

자바스크립트는 내게 첫사랑 같은 언어당!

아마 99년쯤 일거당! 처음 만났는뎅,

C언어 경험만 있던 내게 이거 뭐얌?, 재밌당!, 자유롭당!, 신기만땅! 짧당!

주변에서 자바스크립트는 언어도 아니야라고, 그걸로 할 수 있는 건

별로 없엉!, 의미 없다니깡! 라고 들 이야기 했지만,

이상하게 눈과 손이 그 쪽으로 향했고, 쪼메식 즐겼당!

그런 자바스크립트가 20년을 자라서 이제 시대의 메인 언어의 한 축으로 자리 잡았다니

감개무량이당! ~~ ㅋㅋ

울 모두 자라고 또 자랍시당!~~^-^

https://www.youtube.com/watch?v=3w5iMGSHvsE

'자바스크립트' 카테고리의 다른 글

시베리안 허숙희의 자바스크립트 비기닝 6 (반복문) (0)	2023.06.03
시베리안 허숙희의 자바스크립트 비기닝 5 (조건 & 자동 형변환) (0)	2023.06.02
시베리안 허숙희의 자바스크립트 비기닝 3 (0)	2023.05.30
시베리안 허숙희의 자바스크립트 비기닝 2 (3)	2023.05.29
시베리안 허숙희의 자바스크립트 비기닝 1 (0)	2023.05.28