728x90
console.log('안녕하세요')
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../Javascript/init.js"></script>
</head>
<body>
</body>
</html>
- 화면에 출력되는 것은 없어도, console 창에 정상적으로 출력되는 것을 보면 js 가 html 과 성공적으로 연결된 것을 확인할 수 있다.
- 웹 브라우저의 콘솔창에 자바스크립트 코드를 바로 실행할 수 있다.
다만 엔터키로 줄바꿈이 되지 않기 때문에 복잡한 코드를 작성하기 어렵다.
- 웹 브라우저의 Sources 탭에서는 디버깅도 가능하다. 기존 디버깅 도구처럼 브레이크 포인트를 거렁가면서 변수들을 확인해나갈 수 있다.
- 브레이크 포인트를 걸어준 다음 디버깅 도구들을 활용해서 디버그를 진행할 수 있다.
- Watch 를 사용하면 변수의 변화 상황을 살펴볼 수 있다.
이클립스에서 디버깅하는 것과 완벽히 같은 역할을 수행한다.
- 모든 언어의 시작은 변수이다.
js 도 변수부터 배우게 된다.
변수란 데이터를 저장하기 위해 공간을 생성하는 것인데, 프로그램을 구성하는데 필수적이다.
js 의 변수에는 재밌는 것이 있다. 자료형을 따로 지정하지 않는다는 것인데, 자료가 대입될 때 자료형이 자동으로 지정되는 특성 때문이다.
const a =12;
console.log(a);
// a = 999; 는 에러가 발생한다. 상수에 값을 새로 대입하는 것은
// 불가능하기 때문이다.
let b = 12;
console.log(b);
b = 999; // 오류가 발생하지 않는데, 변수에는 새로운 값을 대입하는 것이 가능
console.log(b);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../Javascript/const_let.js"></script>
</head>
<body>
</body>
</html>
- 상수를 생성하는 const 와 변수를 생성하는 let 을 사용해 보았다.
// 변수 var 를 사용하지 않는 이유
// console.log(puppy);
let puppy = "cute";
{
let puppy = "so cute";
}
console.log(puppy);
// console.log(cat);
var cat = "cute";
{
var cat = "so cute";
}
console.log(cat);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="../Javascript/var.js"></script>
</head>
<body>
</body>
</html>
- var 로 생성한 변수는 { } 블록을 무시하기 때문에 지역 변수의 개념이 도입되지 않는다.
또한 중복된 이름의 변수가 생성되어서도 안되는데, 블록 스코프를 무시하고 똑같은 이름이 다시 만들고 초기화된다.
이 말은 결국 var 변수는 1개만 생성되었다는 것을 의미한다.
이러한 이유로 var 변수는 잘 사용하지 않는다. - 위의 코드에서 눈여겨 봐야 하는 js 의 또다른 특징으로는 변수가 프로그램이 실행되면서 메모리에 생성되는 것이 아니라 코드가 진행되면서 생성되기 때문에 변수가 생성되기도 전에 변수를 사용하면 오류가 발생해야 하는데, var 변수를 사용하면 오류가 출력되는 것이 아니라 호이스팅 현상이 발생합니다. (undefined 메시지가 출력된다. var 변수 선언 문구가 제일 위로 올라간다)
문제는 var 의 이런 특징이 오류를 유발할 수 있어서 var 변수를 사용하는 것은 자제되고 있다.
- 특이한 것이 하나 보이는데, 함수가 보인다.
js 는 함수도 자료형으로 처리하는 특징이 있다.
또 다른 특징으로는 js 는 변수를 선언할 때 자료형을 같이 선언하지 않는다.
대신 값을 대입하는 순간 js 는 동적으로 변수의 자료형이 정해진다.
- Java 와 다른 점을 보자.
char 와 String 을 구분하지 않는 것을 볼 수 있다.
또한 문자데이터는 큰따옴표, 작음따옴표, 백틱을 사용할 수 있다.
백틱 기호는 안의 변수를 감쌀 때 사용한다. 무슨말이냐면 `Hello ${myName}` 은 js 는 Hello + 둘리 로 인식한다.
즉, `` 백틱 기호를 사용하면 문자열에 변수를 포함하여 사용할 수 있게 된다.
let a; 라고 변수를 선언만 하면 초기화가 되지 않았기 때문에 undefined 상태가 된다.
null 은 우리가 직접 let a = null; 로 직접 상태를 넣어주어야 한다. undefined 와 null 상태는 분명히 다른 것임을 알고 있어야 한다.
const myName = "둘리";
const email = 'user@naver.com';
const hello = `Hello ${myName}`;
console.log(myName);
console.log(email);
console.log(hello);
const number = 123;
const opacity = 0.57;
console.log(number);
console.log(opacity);
let checked = true;
let isShow = false;
console.log(checked);
console.log(isShow);
let undef; //undefined
console.log(undef);
let name = null;
console.log(name);
- 객체 자료형 종류에는 Object 와 Array 가 있다.
Array 는 익숙하다. Java 에서 배웠던 배열과 동일하기 때문이다.
js 의 Array 의 특징은 Java 와는 다르게 같은 형태의 데이터가 아니더라도 배열에 함께 넣어줄 수 있다. 자료형을 정해주면서 변수를 생성한 것이 아니기 때문이다.
Object 는 약간 다르다. 자바의 Class 와 구조가 비슷하다. 그런데, Class 는 설계도 였던데 반해 js 의 Object 는 프로퍼티 여러 개를 저장하는 구조이다. 여기서 말하는 프로퍼티란 key 와 value 쌍으로 이루어진 구조를 의미한다.
{
name: '둘리',
age: 10
}
위의 구조가 Objcet 를 선언하는 방법이다. 이 형태를 Json 형태라고 부른다.
프로퍼티 간 구분은 , 콤마를 사용하고 마지막 프로퍼티는 아무것도 적지 않는다.
const user = {
name: '둘리',
age: 10,
get_name: function() {
console.log(this.name);
}
};
console.log(user.name);
console.log(user.age); // 도트 연산자 사용
console.log(user["name"]);
console.log(user["age"]); // 대괄호 사용
console.log(user.get_name); // 함수 코드 자체를 보기
user.get_name(); // 함수 사용하기
- object 자료형에는 다양한 자료형을 넣어줄 수 있고, 함수자료형도 넣어줄 수 있다.
objcet 자료형을 대입받은 변수를 사용하여 변수 안에 있는 값들을 사용할 수 있다. - 위의 코드에서 주의해야할 점이 하나 더 있다. 대괄호 사용을 할 경우 user[age] 이렇게 사용해도 오류가 발생하지 않는다. 그런데 이렇게 하면 age 를 변수로 인식을 하기 때문에 분명히 다른 코드가 된다.
let age = 'name';
const user = {
name: '둘리',
age: 10,
get_name: function() {
console.log(this.name);
}
};
console.log(user[age]); // 대괄호 사용
- 둘리가 출력된 것을 볼 수 있다. 즉 user[age] -> user['name'] -> '둘리'
가 되었다는 것이다.
user["age"] 와는 전혀 다른 코드라는 것을 알 수 있다.
const arr1 = ['Apple', 'Banana', 'Cherry'];
console.log(arr1[0]);
console.log(arr1[1]);
console.log(arr1[2]);
arr1[0] = 'Orange';
console.log(arr1[0]);
const arr2 = ['a', 'b', 1, 2, true];
console.log(arr2);
arr2.push(3); // 배열의 push 메소드로 새로운 요소 추가
console.log(arr2);
// const 변수인데 왜 값을 변경할 수 있을까?
// const arr2 에는 주소 값이 저장되어 있다.
// 실제로 값이 변경되는 그 안의 변경사항은 주소값의 변화를 가져오지 않기
// 때문에 const arr2 변수에 대입된 배열의 값이 변경되도 오류가 발생하지 않는다.
const objArr = [];
objArr.push({ name: 'Americano' });
objArr.push({ name: "Latte" });
console.log(objArr);
console.log(objArr[0]);
console.log(objArr.length);
- Array 자료형을 생성하고 초기화하고, 값을 변경하고, 추가하는 프로그램이다.
js 배열에는 자료형에 상관 없이 다 넣어줄 수 있다. object 자료형(json 형태)도 넣어줄 수 있는 것을 확인할 수 있다.
Java 와 다르게 [ ] 대괄호를 사용하여 초기화를 시키는 것을 볼 수 있다.
JSON 구조와 XML 구조
- 개발자라면 기본지식 중 하나가 JSON 과 XML 구조이다.
JSON과 XML 은 프로그래밍 언어가 아니라 통신을 할 때 사용되는 형식이다. 다른 언어끼리 통신을 하거나 다른 컴퓨터끼리 통신을 해야할 때 꼭 필요한 것이다.
예를 들어, java 와 c 언어로 만든 프로그램이 통신 해야 한다면, 꼭 정해진 형식으로 데이터를 정제하여 통신을 해야 통신이 가능해진다.
그럴 때 사용하는 것이 JSON 과 XML 구조이다.
const person = {
age: 30,
name: "둘리",
address: "서울"
}
person.age = 10;
person.name = '또치';
person.address = '인천';
console.log(person)
const foodList = ['Pizza', 'Hanburger', 'Chickeh', 'Steak'];
console.log(foodList[0] + " " + foodList[3]);
- 프로그램을 위와 같이 출력한다면, 마지막 번호를 자료가 변동됨에 따라 계산을 해야하는 아주 창피한 프로그램이 된다. (프로그래머는 로직이 변경되는 것을 창피한 일이라고 생각한다)
const foodList = ['Pizza', 'Hanburger', 'Chickeh', 'Steak'];
console.log(foodList[0] + " " + foodList[foodList.length-1]);
- 위와 같이 foodList.length -1 을 하면 마지막 요소를 크기 변동 상관없이 잘 출력할 수 있다.
'[그린컴퓨터] 클라이언트 > Javascript' 카테고리의 다른 글
| 동기(Sync)와 비동기(Async) { 일반함수와 콜스택메모리, 비동기함수(setTimeout) 처리과정 } (0) | 2023.06.30 |
|---|---|
| DOM API { DOM API 기본, defer 속성, addEventListener, forEach, textContent } (0) | 2023.06.30 |
| 프로토타입과 상속 { prototype, __proto__ } (0) | 2023.06.30 |
| 일반함수, 익명함수, 화살표함수, this (0) | 2023.06.29 |
| 연산자, 조건문 (0) | 2023.06.29 |