javascript 핵심 기초

• 참조문서 : https://developer.mozilla.org/ko/docs/A_re-introduction_to_JavaScript
• 참고서적 : 자바스크립트 핵심가이드(더글라스 크락포드)

 

 

 

JS는 매우 경량화되어있고 표현적이다. 함수형 프로그래밍도 가능하다.

• 장점 : 함수, 느슨한 타입체크, 동적 객체, 강력한 객체 리터럴 표기법
• 단점 : 프로그래밍 모델이 전역변수에 근간(최상위 레벨의 변수들은 모두 전역객체라 불리는 namespace에 위치함)

자바스크립트는 문장 끝에 세미콜론이 없어도 행을 바꾸면 실행에 지장이 없다. 그러나 관례상 세미콜론을 붙인다.

1. 식별자

• 키워드를 사용하면 안된다
• 특수문자는 _ , $ 만 가능
• 숫자로 시작하면 안됨
• 공백안됨

2. 명명관례

낙타표기법 사용, 생성자 함수의 이름은 항상 대문자로 시작, 일반 함수는 소문자로 시작

3. 기초문법

3-1. 주석

• 1행: //주석
• 여러행: /* 주석 */
  • 정규표현식에서 나타날 수도 있으므로 비추 ex. var rm_a = /a*/.match(5);

3-2. 변수 : 모든 타입을 var에 저장가능

• 선언과 초기화 : var 식별자 = 값;
• 변수선언없이도 쓸 수 있다.
• 함수 내부에서의 var는 함수의 private 변수를 정의한다.

var v = 1;

위 코드에서 변수 v는 먼저 undefined로 정의되고, 코드를 실행하는 런타임 단계에서 다시 1로 초기화 된다.

• 변수영역(Scope) : 중괄호( { } )로 결정되는 것이 아니라 함수 단위로 결정된다. 따라서 블록 안에서 정의하는게 아니라 함수의 첫 부분에서 정의하는게 좋다.

3-3. 문장

하나의 컴파일 단위에는 실행을 위한 문장들이 포함돼 있다. 브라우저는 태그마다 각각 컴파일한다. 다른언어와 다르게 링커가 없기 때문에, JS는 모든 문장을 namespace에 넣는다.

3-4. 조건문 : if, switch(case에 조건문을 쓴다)

switch문에서 default는 선택사항이다.

false에 해당하는 값들(이외 값은 모두 참)

• false
• null
• undefined
• 빈 문자열 ' '
• 숫자 0
• NaN

3-5. 반복문 : for, while

for in 문

// 사용법
for (variable in [object | array]) {
    statements 
}

// 예제
a = {"a" : "hello" , "b" : "naver", "c" : "world"}

var s = ""
for (var key in a) {
    s += key + ": " + a[key];
    s += "<br />";
}

3-6. 예외처리 : try-catch-finally

3-7. 예외발생 : throw 예외객체

• throw문이 try문에 있으면 실행의 제어가 catch절로 이동한다.
• 예외객체는 name과 message 속성을 갖고 있어야한다.

3-8. return문 : 표현식 지정하지 않으면 undefined 반환, 줄바꿈 불가능

4. 자료형

6가지가 있다. 숫자, 문자열, 불리언, 함수, 객체(배열 포함), 미정의

4-1. 숫자(number)

내부적으로 숫자는 64bit 부동소수점 형식을 지닌다. 따라서 정수와 실수를 구분하지 않음.

사칙연산, 나머지연산 지원

• Infinity : 최대값 오버플로우, 반대는 -Infinity
• NaN : Not A Number

4-2. 문자열

작은따옴표로 감싸거나 큰따옴표로 감싼다. 문자열 안에 따옴표를 넣고싶으면 이스케이프 문자(\)를 쓰면된다. + 로 문자열 연결 연산을 지원한다. immutable이다.

모든 문자는 16비트 유니코드이다. 문자가 1개여도 문자열이다.

4-3. boolean

비교연산자, 논리연산자 사용가능, true 나 false 반환

4-4. 객체

여러개의 자료형을 저장하는 자료형으로 변형 가능한 속성들의 집합이라 할 수 있다. 함수, 배열, 정규표현식 등이 객체다. 자바스크립트의 객체는 클래스가 필요없다.

4-4-1. 함수

함수는 1급 객체(대입, 파라미터, 반환, 연산 등 제약 없음)이고 람다 언어(익명 함수나 클로저 등을 정의하기 위한 표현식)이다.

코드의 집합을 나타내는 자료형(함수의 prototype이 객체), return은 필요할때 붙이면 된다.

4-4-1-1. 익명 함수 : function () {};

4-4-1-2. 선언 함수 : function 함수명() {};

4-4-1-3. 콜백함수 : 매개변수로서 전달되는 함수, 익명함수로도 가능

function callTenTimes(callback) {
    for(var i=0; i<10; i++) {
        callback();
    }
}

var callback = function () {
    alert('함수 호출');
}

callTenTimes(callback);

4-4-2. 배열 : 배열 내부에는 다양한 자료형을 마음대로 선언 가능

• 선언 : var array=[원소, 원소, 원소];
• 접근 : array[인덱스]

4-4-3. 이외에는 객체라고 부른다

핵심적인 부분은 별도로 정리할 예정이다. 개복잡;;

• 배열과 차이 : 배열은 인덱스(number)를 기반으로 자료를 저장, 객체는 키(string)를 기반으로 자료를 저장(빈 문자열도 가능)
• 선언 : var 객체명={ 키: 속성, 키: 속성 }; 속성은 undefined 제외하고 모두 된다. 키는 유효이름이면 큰따옴표를 생략해도 좋다. -같은거 쓸려면 큰따옴표를 써야한다. 중첩 객체도 가능.
• 접근 : 객체명['키'] 또는 객체명.키
  • 객체에 존재하지 않는 속성을 읽으면 undefined를 반환
  • || 연산자를 이용하여 기본값 지정 : var value = empty.status || "none"
• 메소드 : 객체의 속성 중 자료형이 함수인 것을 특별히 메소드라고 불러준다
• null : 객체가 없음을 나타내며, 코드를 통해 명시적으로 할당하는 값으로서 undefined와는 구분되는 값

• 객체는 참조 방식으로 전달(복사X)

  //예제
  var a = b = {} // 같은 빈 객체를 참조 var a = {}, b = {} 이렇게 해야 각각 다르게 참조
  
  a.name = "aaa";
  b.name = a.name;
  b.name = "bbb";
  console.log(a.name); // bbb를 출력한다. 같은 곳을 참조하기 때문이다.
  

• 프로토타입 : 모든 객체는 상속하는 프로토타입 객체에 연결되어 있음. 객체를 생성할 때, 해당 객체의 프로토타입이 될 객체를 선택할 수 있다. create는 넘겨받은 객체를 프로토타입으로 하는 새로운 객체를 생성하는 메소드이다. 프로토 타입 관계는 동적관계이다.

  if (typeof Object.create !== 'function') {
      Object.create = function (op) {
          var fc = function () {};
          fc.prototype = op;
          return new fc();
      };
  }
  var bb = Object.create(aa);
  

• 프로토타입 체인 : 해당 속성이 해당 객체에 없으면 프로토타입 객체에서 찾으려고 시도. 계속 타고 올라가서, Object.prototype 까지 건드린다. 어디에도 존재하지 않으면 undefined를 반환한다.

• 리플렉션 : typeof 연산자 혹은 hasOwnProperty() 메소드를 이용한다. hasOwnProperty()는 프로토타입 체인안된다.

• for in을 이용한 열거

  var text;
  for (text in 객체) {
      if (typeof 객체.text !== 'function') {
          document.writeln(text + ': ' + 객체.text);
      }
  }
  

• 키:속성 제거 : delete 연산자를 이용
• 최소한의 전역변수 사용 권장 : 전역변수 하나 만들고 컨테이너로 써버리자

※ undefined == null : true, undefined === null : false

4-5. 미정의(undefined)

값이 할당되지 않음, 값이 할당되지 않은 변수, 할당되지 않음 함수 매개변수, 그리고 할당되지 않은 객체의 멤버는 undefined로 초기화

5. 기타 연산자

5-1. 전치연산자

• typeof : 자료형이 뭔지 반환한다
• + : 피연산자가 숫자일땐 큰 의미가 없지만, 숫자가 아니면 숫자로 바꿔준다. ex. +"1"+2 은 3을 반환