[Javascript 기초] 1. 변수와 객체

Javascript 변수

 

변수 선언 :: 크게 3가지 방법으로 선언을 할수 있다.

<script>
var num = 10; // var 키워드 사용
let name = "TeddyCho"; // let 키워드 사용
const pi = 3.14159; // const 키워드 사용
</script>

 

 var 를 사용했을떄 문제점.

 

호이스팅 문제 :: undefined  로  예측 불가능한 결과 발생

    <script>
    console.log(x); // undefined 출력
    var x = 10;
    </script>

 

레벨스코프

    <script>
    let isBlock = true;

    if (isBlock) {
        var x = 10;
        console.log("In Block" + x)
    }
    console.log("Out Block" + x)

    </script>

 

전역변수 오염

    <script>
    let isBlock = true;
    var x = 10;
    if (isBlock) {
        var x = 20;
        console.log("In Block" + x)
    }
    console.log("Out Block" + x)

    </script>

 

가독성 저하.

 

 

 

변수 이름 규칙

• 문자, 숫자, 언더바(_)로 시작해야 합니다.
• 대소문자를 구분합니다.
• 예약어는 사용할 수 없습니다. (예: if, for, function 등)
• 띄어쓰기는 허용되지 않습니다.

O age, userName, isStudent

X 1stNum, my-name, function, my Teacher

 

자료형 변환

let Name = "조현준";

console.log(Name);
console.log( typeof(Name) );

Name = 34;
console.log(Name);

Name = String(34);
console.log(Name);

age = "123";

age = Number(age);
console.log(age);
console.log( typeof(age) );

 

객체

var person = {
	"name" : "Teddy. Cho",
	"age" : 25
}


console.log( person );
console.log( typeof( person ) );


console.log( person.name );
console.log( typeof( person.name ) );


console.log( person['name'] );
console.log( typeof( person['name'] ) );

 

key 는 반드시 문자열 "" or '' 로 표기

person.name   O

person.age  O

person['name'] O

person[name]   X

 

프로퍼티 값 수정

var person = {
            "name" : "TeddyCho",
            "age" : 25
}

person.name = "JonadanPark"

 

프로퍼티 동적 생성

person.address = "Seoul Korea"

 

프로퍼티 동적 생성

 delete person.age

 

메서드

<script>
var person = {
	"name" : "Teddy. Cho",
	"age" : 25,

	"hello" : function (){
		console.log( "Hello, My Name is Teddy. Cho" );
    },
    
    "addAge" : function (){
		this.age = age + 1;
		console.log( age );
		//this.age += 1;
    }
}


// 호출방법
// person.hello();


console.log( person );
person.hello();


person.addAge();

console.log( person );
person.addAge();


</script>

 

## 축약표현

addAge() {
	document.write(this.age+1)
}

 

 

Javascript 객체와 JSON 의 차이

const myObject = { name: "Teddy.Cho", age: 25 };

const jsonString = '{"name": "Mr.Park", "age": 30}';

 

 

Javascript 객체	JSON
data type	String
변수에 할당	데이터 전달
동적 수정	직접수정불가능

 

Javascript 객체를 JSON 으로 

const myObject = { name: "Teddy.Cho", age: 25 };
const jsonString = JSON.stringify(myObject);
console.log(jsonString); // {"name":"Teddy.Cho","age":25}

 

JSON 을  Javascript 객체로

const jsonString = '{"name": "Mr.Park", "age": 30}';
const jsonObject = JSON.parse(jsonString);
console.log(jsonObject.name); // Mr.Park

 

## 우리가 원하는 화면의 요소를 객체화 연습

 

## 과제 각자 사이트에서 프로그램요소부분을 객체로 만들어 보기

 

## 다음시간에는 객체로 화면을 만드는 방법.