[자바스크립트] 01. 변수

ㅁ vscode에서 shift tab하면 뒤로 들여쓰기

ㅁ vscode 켜서 html 파일 작성하고 live server 열고 할 필요 없이

개발자 도구 콘솔 f12 창에서 자바스크립트 구문을 써서 바로 테스트해볼 수 있다.

- 쓰고 엔터.

ㅁ < 자바스크립트 타입(자료형) >

(1) string

- 단일 문자와 문자열의 구분이 없음. 작은 따옴표, 큰 따옴표 모두 사용 가능.

(2) number

- 정수와 실수 구분이 없음. 123과 123.0은 같은 타입이다.

- 추가로 NaN(Not a Number : 숫자간의 연산을 하다가 숫자가 아니게 된 경우) , Infinity(무한대 숫자), -Infinity가 존재한다.

(3) boolean

- true / false 값을 가진다.

(4) object

- 객체자료형으로 메소드(method)와 속성(property)을 가지는 데이터.

- string, number, noolean은 원시자료형으로 메소드나 속성이 없다. 그냥 값 자체를 담고 있는 것을 원시자료형이라 함.

object는 메소드와 속성을 가진다.

- 배열, 중괄호블럭({}), 요소

중괄호블럭으로 직접 객체를 만들수 있다. 이것도 오브젝트 타입.

요소도 다 객체다.왜냐면 다 메소드, 속성을 가지고 있어서.

(5) function

- 함수자료형. 자바는 메소드를 자료형으로 취급하지 않는데 자바스크립트는 함수도 하나의 자료형으로 취급한다.

즉 함수도 하나의 데이터처럼 쓸 수 있다.

(6) undefined

- (변수 같은거) 선언 후 값을 할당하지 않은 변수를 undefined 타입이라고 한다.

즉 초기화가 되어있지 않은 변수.

- 함수 호출시 매개변수에 전달된 값이 없다면 그것도 undefined. 값이 전달되지 않은 매개변수를 undefined라고 함.

※ 자바스크립트에서 string과 String은 비슷하지만 중요한 차이가 있습니다.

1. string (원시 자료형)

원시 자료형: 자바스크립트에서 string은 원시 자료형입니다. 이는 문자열을 직접 다루는 기본 데이터 타입입니다.
문자열 리터럴: "Hello, world!"와 같은 문자열 리터럴을 사용하여 문자열을 표현합니다.
불변성: 문자열은 불변(immutable)으로, 문자열의 값을 변경할 수 없으며 새 문자열을 생성합니다.

2. String (객체 자료형)

객체 자료형: String은 문자열을 객체로 감싸는 래퍼 객체입니다. 즉, 문자열을 객체처럼 다룰 수 있도록 해줍니다.
생성자 함수: String은 생성자 함수로, new String("Hello, world!")와 같은 방식으로 객체를 생성할 수 있습니다.
속성 및 메서드: String 객체는 문자열에 메서드와 속성을 추가할 수 있도록 해줍니다. 예를 들어, String 객체에는 length, toUpperCase(), substring() 등의 메서드가 있습니다.

주요 차이점

원시형과 객체: string은 원시형으로 값 자체를 다루고, String은 객체로 메서드와 속성을 사용할 수 있습니다.
성능: 원시형 string이 일반적으로 더 성능이 좋습니다. String 객체는 원시형 문자열을 감싸는 것이기 때문에 메모리와 성능 측면에서 오버헤드가 있을 수 있습니다.

ㅁ < 자바스크립트 타입 특징 >

(1) 동적 타입 dynamic type

- 변수 선언시 자료형을 지정할 필요가 없다.

어떤 값이 대입되냐에 따라서 자료형이 지정된다.

(2) 약 타입 weak type

- 처음 대입되면 자료형이 지정되는데, 거기에 또 새로운 타입의 값 재대입 가능.

일치하지 않는 타입의 값이 대입될 경우 타입이 자동으로 변경된다.

(3) primitive(method와 property가 없는 데이터) 값이 마치 메소드와 속성이 있는 것처럼 동작한다.

- ex) 'hello'.length // 이런 메소드를 가지고 있지 없음에도 정상수행

ex) 'hello'.charAt(0) // 이런 메소드를 가지고 있지 없음에도 정상수행

- 자동으로 string 타입의 primitive 값이 String 객체로 변환되기 때문에.

ㅁ

var name; // 변수 선언. var는 변수 선언을 위한 키워드지 자료형이 아니다.

var name = '홍길동';

var age = 10;

var flag = true; // boolean 타입이 된다.

var obj1 = [10, 20]; // object 타입이 된다.

var obj2 = {name:"로아", rank:1}; // name, rank 하나하나가 속성이다. 객체는 속성을 가질 수 있다.

var fn = function() { // 함수를 담는다.

document.write("대재학");

};

var nodata;

// typeof 변수명 : 해당 변수틔 타입을 알려준다.

console.log(name, typeof name);

console.log(age, typeof age);

console.log(flag, typeof flag);

console.log(obj1, typeof obj1);

console.log(obj2, typeof obj2);

console.log(fn, typeof fn);

console.log(nodata, typeof nodata);

</script>

- 자바 스크립트에서 배열 작성시 대괄호로 감싸면 된다.

- 중괄호 블럭도 객체. 대신 키-값으로 작성해야한다.

- 어딘가에 대입되는, 어딘가에 전달되는 함수를 작성할 때는 이름을 안써야 한다. 익명 함수다.

- 정확히는 0이라는 속성의 값으로 10이 있다. 이걸 우리는 편하게 인덱스로 하는 거고.

- name이라는 속성의 값으로 로아, rank라는 속성의 값으로 1

ㅁ 동적 타입의 특징

- 내가 대입하는 것에 따라서 그에 맞는 타입으로 지정된다.

<body>

console.log(nodata + 1, typeof (nodata + 1));

</script>

</body>

- nodata가 숫자였으면 제대로된 연산결과가 나왔을 것.

타입은 number인데 연산이 제대로 안된 것.

- 초기 타입과 다른 타입의 값을 담으면 변수의 타입이 변경된다.

<body>

age = "10살"

console.log(age, typeof age);

</script>

</body>

ㅁ < 자바스크립트 변수 선언 방법 >

(1) 총 3가지의 키워드 존재

(2) 종류와 특징

스코프 재선언 할당전 재할당 용도

var 함수 스코프 가능 undefined 가능 함수 변수

let 블럭 스코프 불가능 undefined 가능 지역 변수

const 블럭 스코프 불가능 사용 불가능 불가능 상수

- ocnst는 무조건 초기화를 진행해줘야 사용 가능하다.

- ocnst는 상수다. 항상 동일한 값. 재할당 불가능.

- var는 함수 스코프. 이 함수내에서는 var를 다 사용가능.

- var는 자유롭게 변수선언 및 사용할 수 있다는 장점이 있지만

var로 선언된 변수는 재선언이 가능해서, 협업하다가 내가 이 변수이름으로 선언했는데 다른 사람도 같은 변수 이름으로 선언해서 중복된 변수가 남발되어 의도치 않게 데이터가 변질될 수 있다. 그래서 var로 선언하는게 좋진 않다.

- 보완되서 나온게 let, const이다. 사실 이게 권장사항이지만 많은 회사에서 let, const 잘 안쓰고 거의 var 쓴다.

ㅁ var 변수

<body>

function fnVarTest() {

var userId; // 할당 전 : 이 변수는 undefined 상태다.

var userId; // 재선언 가능.

console.log(userId, typeof userId);

userId = 'user01';

console.log(userId, typeof userId);

userId = 1000; // 재할당 가능

console.log(userId, typeof userId);

if(true) {

var userPwd = 'pass01'; // 스코프 : 함수 스코프(선언된 함수 내에서 다 사용 가능)

}

// 자바는 블럭 내에서 선언한 변수는 블럭 내에서만 사용가능했다.

// 자스는 var로 선언한 변수는 블럭내에서 선언해도 블럭 바깥쪽에서 함수 안이라면 다 사용가능.

console.log(userPwd, typeof userPwd) // if 블럭 내에서 선언했음에도

// var로 선언하면 함수스코프라 얘ㅖ가 위치한 함수안이라면 사용 가능하다.

}

fnVarTest();

</script>

</body>

ㅁ let 변수

<body>

function fnLetTest() {

let userName; // 할당 전 : undefined 상태. (let도 초기화 없이 선언만 가능)

// let userName; 재선언 : 불가능. (빨간줄. vscode가 알려줌)

console.log(userName, typeof userName);

userName = '홍길동';

console.log(userName, typeof userName);

userName = '고길동'; // 재할당 : 가능

console.log(userName, typeof userName);

if(true) {

let userAge = 20;

}

console.log(userAge, typeof userAge); // 빨간줄은 안떴지만 콘솔창에 오류 발생

}

fnLetTest();

</script>

</body>

- let으로 선언한 변수는 이 변수를 사용할 수 있는 범위가 블럭 안에서만 사용 가능한 블럭 스코프다.

ㅁ const 변수

<body>

function fnConstTest() {

// const hobby; 할당전 : 사용불가 (선언만 하면 안되고 초기화한 채로 선언해야)

const hobby = "요리";

// const hobby = "등산"; 재선언 : 불가능(let과 동일)

console.log(hobby, typeof hobby);

// hobby = "등산"; 재할당 : 불가능(상수)

if(true) {

const dream = "요리사";

}

// console.log(dream, typeof dream);

// 블럭 스코프. let과 비슷한데 상수다.

}

fnConstTest();

</script>

</body>

ㅁ 전역변수와 지역변수

(1) 전역 변수

- 함수 밖에 선언된 변수

- 전역(현재 html내의 script 영역 전체)에서 해당 변수 사용 가능.

- 전역변수로 선언한 순간, window 객체의 속성(property)으로 추가된다.

script 태그 내에 전역변수로 name, age 선언.

console.log(name);

console.log(age); 콘솔창에 결과 나옴.

사실

console.log(window.name);

console.log(window.age); 에서 window.이 생략된거다.

(2) 지역 변수

- 특정 영역(함수, if 블럭 등)에 선언된 변수

- 선언된 영역에서만 사용할 수 있다.

= 스크립트 태그를 여러개 둬도 사실 하나로 묶여있음.

ㅁ < 호이스팅 hoisting > <- 이런 기본개념도 많이 물어봄

- 해석하면 끌어올린다.

- JavaScript 인터프리터가 해당 코드를 실행하기 전에 var로 선언된 변수나 선언적함수 등을 해당 범위의 맨 위로 끌어올려주는 현상.

- 예시

(1) 자바스크립트는 변수 선언문 위쪽에 변수 사용할 수 있다.

특정 범위 내에서 변수가 선언된 줄 이전에 해당 변수값을 사용 및 참조할 수 있다.

(2) 함수가 선언된 줄 이전에 해당 함수를 호출할 수 있다.

(3) 변수 선언과 동시에 초기화 하는 구문은 실제로는 변수선언문만 따로 분리해서 먼저 처리됨.

ㅁ

- 위의 7줄이 내부적으로

var x;

var y;

console.log(x);

x=10;

console.log(x);

console.log(y);

y=20;

console.log(y);

ㅁ 함 수 호이스팅

-함수 선언 전에 사용

<body>

fnTest(); // 실행순서 2

function fnTest() { // 실행순서 1

console.log("함수 호이스팅");

}

</script>

</body>

'03. 웹 표준 기술 > JavaScript' 카테고리의 다른 글

[자바스크립트] 04. DOM - (2) 동적인 효과 주기 (0)	2024.08.09
[자바스크립트] 04. DOM (0)	2024.08.09
[자바스크립트] 실습문제 (0)	2024.08.08
[자바스크립트] 02. 연산자, 03. 제어문 (0)	2024.08.08
[자바스크립트] 00. 개요 (2)	2024.08.08