javascript 식별자 (identifier)
식별자는 javascript 코드 내에서 사용되는 각각의 단어를 의미한다.
1. 식별자 종류 2가지
- 시스템 정의 식별자
javascript가 필요에 의해서 먼저 정의한 식별자.
보통 '예약어', 'keyword'라고 부른다.
ex) break, case, catch, continue, default, delete, do, else, finally, for, function, if, in, instanceof, new, return, switch, this, throw, try, typeofvar, void, while, with - 사용자 정의 식별자
javascript 개발자가 필요에 의해서 정의한 식별자.
변수, 함수, 생성자, 객체 정의시 사용할 이름을 의미함.
2. 식별자 정의 및 명명 규칙
- 첫 문자는 반드시 "영문자 , _ , $" 문자로 시작되어야한다. 그 다음 부터는 숫자와 영문자를 혼합해서 사용가능.
- javascript는 대소문자를 구분한다
- 예약어는 사용 불가
- 권장되는 표기법
| 기술방법 | 개요 | 예시 |
| camelCase | 앞단어 첫문자는 소문자, 그 이후의 단어 첫 문자는 대문자 | lastName |
| Pascal | 모든 단어의 첫 문자는 대문자 | LastName |
| 언더스코프 기법 | 모든 단어의 첫 문자는 소문자, 단어 간은 '_'로 연결 | last_name |
변수 (variables)
- 프로그램에서 사용하는 데이터(literal)를 저장하기 위한 용도로 사용함.
(값을 저장할 수 있는 이름 지어진 기억공간) - 저장된 data는 언제든지 변경이 가능하기 때문에 '변경가능한 수'
즉, '변수'라고 부른다
(변경이 불가능한 수는 '상수'라고 부른다.) - 기본형 변수 : 기본형 데이터 저장한 경우, '기본형 변수'라고 부름
참조형 변수 : 참조형 데이터를 저장한 경우, '참조형 변수'라고 부름
| 변수 사용 방법 | |
| 변수 선언 | var 변수명; //parsing단계에서는 undefined 값이 할당된다. |
| 초기화 | 변수명=걊; //런타임시에 지정된 값으로 할당된다. |
변수의 특징
1. data type을 지정하지 않는다.
- 실행단계에서 데이터형이 지정되기 때문에 데이터 종류에 상관없이 저장가능하다.
2. 함수단위로 scope가 정해진다. (block 단위 scope 아님)
var를 지정하지 않으면 전역scop(전역객체:window)에 동적으로 변수가 정의된다.
즉, var가 없으면 변수가 정의되는 것은 파싱 단계가 아니고 런타임에 동적으로 정의됨.
3. data type을 철저하게 검사하지 않기 때문에 data type 변환이 자유롭다.
즉, 변수에 할당되는 값에 따라서 변수의 type이 결정된다.
(실행시 변수에 저장되는 데이터형에 의해서 결정된다.)
ex) var test=10; //number type
var test="홍길동"; //string type
var test=true; //boolean type
변수의 종류(global, local variable)
Global variabel(전역변수)
- page가 로딩되는 시점에 실행되는 영역에서 만들어진 변수.
- 전역에서 사용 가능하다
Local variabel(지역변수)
- 함수가 call될때 만들어지는 변수.
- 해당 함수 내부에서만 사용 될 수 있다
<body>
<h1>function type 테스트 중</h1>
<script>
/*
Global variable(전역변수)
page가 로딩되는 시점에 실행되는 영역에서 만들어진
myName이라는 변수는 전역에서 사용 가능하다
*/
var myName="김구라";
var test=function(){
/*
Local variable (지역변수)
이 함수가 call될때 만들어지는 yourName이라는 변수는
이 함수 내부에서만 사용 될 수 있다.
*/
var yourName="해골";
};
var printName=function(){
//함수 바깥 영역에 정의된 myName 변수 사용 가능
console.log(myName);
};
</script>
</body>
Javascript Data Type
- DataType은 Javascript 언어가 처리할 수 있는 데이터 종류를 의미한다.
- Javascript Data Type 2가지
| 분류 | 데이터형 | 개요 | 예시 |
| 기본형 | number |
- 정수(int)와 실수(float)로 구성 |
1. 정수(int)와 실수(float)로 구성 2. 산술연산 var result3=result+result2; |
| string | 문자와 문자열 |
1. string quotaion (작은따옴표) 2. double quotation (큰따옴표) |
|
| boolean |
- true, false를 직접 작성하거나 - boolean type이 들어가는 변수의 이름은 대화식으로 지어주는게 일반적이다.(가독성이 좋음)
|
1. 직접작성 2. 비교연산 또는 논리연산의 결과 var isGreater=10 > 5; |
|
| null /undefined |
1. undefined 2. null |
1. 명시하지 않고 데이터 타입 설정 2. 명시적으로 데이터타입 설정 var b=undefined; |
|
| 참조형 | object (객체) |
- 객체 리터럴{}을 이용해서 만들 수 있다. - 순서가 중요하지 않고, 여러개의 데이터 타입이 섞여있는 경우 Object로 관리한다.
1. 작성 방법 key(저장소이름):데이터, key(저장소이름):데이터, ... };
(2) var 변수명={}; 변수명.key=data; 변수명.key=data; 변수명.key=data;
(3) 이미 만들어져 있는 변수를 참조해서 object만들 수 있다.
var 변수명1=data; var 변수명2=data; var 변수명3=data;
var new변수명4={ new변수1:변수명1, new변수2:변수명2, new변수3:변수명3, };
2. 참조방법 (1) object 참조 : 변수명 (2) 각각의 데이터 참조 : 변수명.key(저장소이름)
3. 저장소 삭제하기 - 예약어 delete를 사용한다. delete 변수명.key; |
1. 작성방법 (2) var mem3={}; mem3.num=3; mem3.name="원숭이"; mem3.addr="상도동";
(3) 이미 만들어져 있는 변수를 참조해서 object만들 수 있다.
var myNum=2; var myName="해골"; var myAddr="행신동";
var mem2={ num:myNum, name:myName, addr:myAddr };
2. 참조방법 (1) 함수 참조 : mem //작성한 object가 나옴 (2) 각각의 데이터 참조 : mem.name //"김구라"가 나옴
3. 저장소 삭제하기 delete mem3.name; |
| array (배열) |
-순서가 중요한 경우 arry로 관리한다. 1. 작성 방법
2. 참조방법 (1) arry 참조 : 변수명 (2) 각각의 데이터 참조 : 변수명[index] |
1. 작성방법 2. 참조방법 (1) 함수 참조 : mem2 // (2) 각각의 데이터 참조 : mem2[2] |
|
| function (함수) |
-여러개의 javascript를 모아 놓고 필요한 시점에 불러와서 사용할 수 있는 기능 - javascript를 모아 놓은 데이터
- 웹브라우저에서 기본제공되는 함수를 참조 할 수 도 있다.
1. 작성방법 var 변수명=function(){특정 시점에 실행할 javascript를 모아놓는 곳. 실행순서가 들어 오지 않음};
2. 참조방법 (1) 함수 참조 : 변수명 (2) javascript 참조 : function() (3) 웹브라우저에서 기본제공되는 함수 참조 : 함수명 |
1. 작성방법 alert("하나"); alert("두울"); alert("세엣"); };
2. console 출력 f(); 예) <a href="javascript: f();">알림세번 보기</a> <button onclick="f();">눌러보셈</button>
2. 참조방법 (1) 함수 참조 : f (2) javascript참조 : function() (3) 기본제공되는 함수 참조 : alert |
Data type 변환
- data가 필요에 의해서 자동으로 형변환 된다.
(1) *, /, - 기호를 사용하는 경우 (+기호는 제외)
ex) var test="100"*2; → 200으로 출력됨
(2) boolean 값으로 변환
다음과 같은 5가지 데이터는 필요에 의해서 false값으로 변환된다.
역으로 5가지 이외의 데이터는 필요에 의해 true값으로 변환된다.
ex) 0, '', NaN, null, udefined
Data type 검사
typeof(변수이름) 또는 typeof 변수
//typeof (변수명)
//typeof 변수명
//예시
var name="홍길동"; -> typeof name //string type
var age=20; -> typeof age //number type
var obj={}; -> typeof {}; //object type
var a=false; -> typeof a; //boolean type
var b=null; -> typeof b; //null type
var c; -> typeof c; //undefined type
var k=function() -> typeof k; //function type
연습문제
변수 a와 b의 차이 인지하기
var a={num:1}; // data type : object(객체)
var b="{num:1}"; // data type : string(문자)
boolean type의 data 비교
//숫자열 비교
var num1=10;
var num2=10;
var result1=10==10; //true
var result2=num1==num2; //true
//문자열 비교
var name1="김구라";
var name2="김구라";
var result3=name1==name2; //true. 문자열 비교시 문자열의 내용이 같은지 비교한다.
object type의 data 비교
var obj1={name:"김구라"};
var obj2={name:"김구라"};
var obj3=obj1;
var result4=obj1==obj2; //false. 객체의 key값을 비교하기 때문에 false.
var result5=obj1==obj3; //true. obj3변수를 obj1과 같다고 선언 해줬기 때문에 key 값이 같음.
'Javascript' 카테고리의 다른 글
| Number (수치형) (0) | 2019.11.04 |
|---|---|
| Boolean type (논리형) (0) | 2019.11.04 |
| 내장객체 (Built-in) (0) | 2019.11.01 |
| 연산자 (0) | 2019.11.01 |
| javascript (0) | 2019.10.30 |
