2장) 자바스크립트 기본 학습 (1)

변수, 함수, 객체와 같은 자바스크립트 언어의 기본 내용 학습.

[ 변수 선언 ] - 파일 데이터를 일시적으로 저장하고 접근 가능

숫자, 문자열, 단순한 데이터 형식 및 객체 등 다양한 데이터 형식을 가리킬 수 있다.

변수명은 반드시 문자, $, _로 시작해야하며 공백이 없어야한다. (변수명은 대소문자 구분한다.)

자바스크립트 데이터 형식

변수에 대입된 데이터를 어떻게 처리할지 결정하기 위해 Data type을 사용. (해당 변수가 어떤 작업 수행할지 결정)

 

• 문자열 : 문자 데이터 (작은 따옴표 / 큰 따옴표로 명시 )
• 숫자 : 숫자 데이터
• 불린 : true / false -> 단일 비트 저장 (플래그로 사용된다.)
• 배열 : 인덱스로 분리 구분된 일련의 데이터 요소들
  var arr = ["one", "two", "three"]
• 객체 리터럴 : object.property 문법을 사용해서 객체 안의 값과 함수에 접근 가능var obj = {"name": "Brad", "occupation": "Hacker", "age": "Unknown"};
• 널 : 생성되지 않았거나 사용하지 않아 변수에 저장할 값이 없는 경우 Null 값 저장.0 이나 ""(빈 문자열)보다는 null을 써야 변수에 유효 값이 안될 수 있다 ⇒ 인터프리터가 자동적으로 변수의 데이터 형식을 알아낼 것이다.
• 비교 연산자
  == & != -> 값만 같거나 다른 경우와 === & !== 형식과 값 모두 같거나 다른 경우

익명 함수 (anonymous function)

다른 함수 호출 할 때 인자 집합 안에 직접 정의 가능.

예제 코드

1. function doCalc(n1, n2, calcFunction) {

  return calcFunction(n1, n2);

}

 

2. function addFunc(n1, n2) {

  return n1+n2;

}

doCalc(5, 10, addFunc);

 

3.

doCalc(5, 10, function(n1, n2) { return n1 + n2 });

변수 범위

지역 변수와 전역 변수로 정의할 수 있다.

var myVar = 1;
function writeIt() {
	myVar = 2;
    console.log("Variable = " + myVar);
    writeMore();
}

function writeMore() {
	console.log("Variable = " + myVar);
}

writeIt();

결과 값 :

Variable = 2

Variable = 1

 

=> 4번 줄은 3번 줄의 지역변수 값을 9번 줄은 1번 줄의 전역 변수 값을 출력하게 된다.

 

자바스크립트 객체 사용

> Number, Array, String, Date, Math 등의 내장 객체가 있다. -> 각 내장 객체들은 멤버 속성과 메소드를 갖고 있다

 

객체 문법 사용

객체 - 여러 값과 함수들을 함께 담아 놓는 곳

객체의 값 -> 속성 / 함수의 값 -> 메소드

 

[ 자바스크립트 객체 사용 ]

1. 객체 인스턴스 생성

2. 객체 생성자 이름과 함께 new 키워드 사용해 객체 인스턴스 생성

 

재사용이 필요없는 간단한 객체에 쓰기 좋은 방법

var user = new Object();
user.first = "Brad";
user.last = "Dayley";
user.getName = function() { return this.first + " " + this.last; }

 

재사용을 위한 코드

function User(first, last) {
	this.first = first;
    this.last = last;
    this.getName = function () { return this.first + " " + this.last; }
}

var user = User("Brad", "Dayley");

 

# 객체 프로토타입 패턴 사용

객체를 생성하는 고급 방법 - 프로토타입 패턴 사용

함수를 객체 자신 내부가 아니라 객체의 프로토 타입 속성 내부에 정의함으로써 패턴 구현

 

프로토 타입 내부에 정의된 함수는 새로운 객체가 생성될 때마다가 아닌 자바스크립트가 로드됐을 때 한번만 생성된다.

 

function UserProto(first, last) {
	this.first = first;
    this.last = last;
}

UserProto.prototype = {
	getFullName: function() {
    	return this.first + " " + this.last;
	}
};