Javascript 기본

1. Javascript 특징

• 동적타이핑 --> 타입유추를 통해서 타입이 정해진다.
• 호이스팅 --> var, 함수 선언문이 해당 scope의 선두로 옮겨진 것처럼 동작하는 것. 자바스크립트는 모든 선언문이 선언되기 이전에 참조가 가능하다. 실행 컨텍스트와 관련있는데 선언단계와 초기화단계가 한번에 이뤄지면서 실행텍스트의 변수객체에 변수가 존재하게 되어 참조가 가능해진다. let, cont, 함수표현식(var f = function(){~~~} )에서는 발생 X
• 암묵적형변환
• 프로토타입 기반 객체지향 프로그래밍언어
• 객체 기반 언어
• 7가지 데이터타입이 존재

 

2. 데이터 타입

원시형타입: number string boolean null undefined symbol --> 변경이 불가능하다. 값으로서의 전달

그외 : Object(객체) -> 참조에 의한 전달

 

3. 변수

변수는 let, var const키워드를 사용하여 선언하고 할당 연산자를 사용해 값을 할당한다. 식별자인 변수명을 사용해 변수에 저장된값을 참조한다.

자바스크립트의 변수는 함수레벨 스코프이다. 하지만 let,const를 사용하면 블록레벨 스코프를 사용할수있다.

(함수내에서 선언된 변수는 함수 내에서만 유효하며 외부에서 참조할수없다. 함수내부에서 선언한 변수는 지역변수, 함수외부에서 선언한 변수는 모두 전역변수이다.)

 

* var변수의 문제점

1) 함수레벨스코프

2) var 키워드 생략허용 : 의도치않은 변수의 전역화

3) 중복 선언 허용: 의도하지않은 변수값 변경

4) 변수 호이스팅: 변수 선언전 참조 가능

--> 이러한 단점을 보완하기 위해 let과 const 키워드를 도입하였다. 

 

4. 표현식

표현식은 하나의 값으로 평가될수 있는 statement : 표현식은 값처럼 사용될수있다.

statement는 검퓨터에게 내리는 명령 -> 표현식인 문과 표현식이 아닌 문이 있다 (ex 선언문)

 

5. 연산자

삼항조건연산자

조건식 ? 조건식이 true일때 반환할 값: 조건식이 false일때 반환할값

 

6. 데이터 타입변환

1) 암묵적 타입변환

2) 명시적 타입변환

2)-1 문자열 타입으로 변환

1. String 생성자 함수를 new 연산자 없이 호출하는 방법
2. Object.prototype.toString 메소드를 사용하는 방법
3. 문자열 연결 연산자를 이용하는 방법

2)-2 숫자 타입으로 변환

1. Number 생성자 함수를 new 연산자 없이 호출하는 방법
2. parseInt, parseFloat 함수를 사용하는 방법(문자열만 변환 가능)
3. • 단항 연결 연산자를 이용하는 방법
4. • 산술 연산자를 이용하는 방법

2)-3 불리언 타입으로 변환

1. Boolean 생성자 함수를 new 연산자 없이 호출하는 방법
2. ! 부정 논리 연산자를 두번 사용하는 방법

 

7. 객체

자바스크립트는 객체기반 스크립트 언어로 객체는 프로퍼티의 집합이다.

프로퍼티?

키와 값으로 구성되어있다.

프로퍼티의 값으로 자바스크립트에서 모든 값을 사용할수있으며 함수객체는 일급객체로 값으로 취급이 가능하다.

메소드?

프로퍼티의 값이 함수일 경우 일반함수와 구분하기 위해 메소드라고 부른다.

 

for-in 문

객체(배열 포함)에 포함된 모든 프로퍼티를 순회할 수 있다. 하지만 순서를 보장하지않는다. 또한 배열요소들만 순회하지않는다.

// 배열 요소들만을 순회하지 않는다.
var array = ['one', 'two'];
array.name = 'my array';

for (var index in array) {
  console.log(index + ': ' + array[index]);
}

/*
0: one
1: two
name: my array
*/

따라서 배열에는 사용하지않는것이 좋다.

 

이를 보완하기위해 배열만을 순회하는 for-of가 추가되었다.

const array = [1, 2, 3];
array.name = 'my array';

for (const value of array) {
  console.log(value);
}

/*
1
2
3
*/

 

 

불변 데이터 패턴(immutable data pattern)

의도하지 않은 객체의 변경이 발생하는 원인의 대다수는 “레퍼런스를 참조한 다른 객체에서 객체를 변경”하기 때문이다.

이 문제의 해결 방법은 아래 세가지가 있다.

• 객체의 방어적 복사(defensive copy) : Object.assign
• 불변객체화를 통한 객체 변경 방지: Object.freeze
• Immutable.js : Immutable.js는 List, Stack, Map, OrderedMap, Set, OrderedSet, Record와 같은 영구 불변 (Permit Immutable) 데이터 구조를 제공

 

8. 함수

함수를 정의하는 방법은 3가지

• 함수 선언문
• 함수 표현식
• 함수 생성자

함수 호이스팅

함수 선언문은 함수 선언의 위치와 상관없이 코드 내 어느곳이든 호출 가능

함수 표현식은 함수 호이스팅아니라 변수 호이스팅이 발생.

따라서 함수선언문보단 함수 표현식 사용을 권고한다.

 

일급 객체 ( First-class Object)

아래의 조건을 만족하면 일급객체.

함수는 일급객체이며 함수와 다른 객체를 구분짓는 특징은 호출할수있다는 것이다.

1. 무명의 리터럴로 표현이 가능하다.
2. 변수나 자료 구조(객체, 배열 등)에 저장할 수 있다.
3. 함수의 매개변수에 전달할 수 있다.
4. 반환값으로 사용할 수 있다.

함수객체의 프로퍼티

함수도 객체이므로 프로퍼티를 갖는다.

함수는 함수만의 프로퍼티를 갖는다.

• arguments 프로퍼티 : 함수 호출 시 전달된 인수(argument)들의 정보를 담고있다.
• caller 프로퍼티 : 자신을 호출한 함수를 의미
• length 프로퍼티: 함수 정의시 작성된 매개변수 갯수. arguments프로퍼티와 다름을 주의
• name 프로퍼티: 함수명을 의미
• _proto_접근자 프로퍼티: 
• prototype 프로퍼티: 함수 객체만이 소유하는 프로퍼티로 일반객체는 이 프로퍼티가 없다.

 

프로토타입 참고

자바,C++ 은 클래스 기반 객체지향 프로그래밍언어라면 자바스크립트는 프로토타입 기반 객체지향 프로그래밍언어이다.

객체지향의 상속 개념과 같이 부모객체를 프로토타입 객체라 한다.

 

자바스크립트의 모든 객체는 [[Prototype]] 인터널 슬롯을 가진다.

[[Prototype]]의 값은 프로토타입 객체이며 __proto__로 접근할수있다.

 

프로토타입은 constructor 프로퍼티를 갖는다.

이 constructor프로퍼티는 객체의 입장에서 자신을 생성한 객체를 가리킨다.

foo 를 Person생성자로 생성 -> foo의 constructor는 Person생성자 -> foo의 프로토타입객체는 Person.property -> foo 프로토타입객체의 constructor는 Person()생성자 함수를 가리킴

function Person(name) {
  this.name = name;
}

var foo = new Person('Lee');

// Person() 생성자 함수에 의해 생성된 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(Person.prototype.constructor === Person);

// foo 객체를 생성한 객체는 Person() 생성자 함수이다.
console.log(foo.constructor === Person);

// Person() 생성자 함수를 생성한 객체는 Function() 생성자 함수이다.
console.log(Person.constructor === Function);

 

 

9. strict mode

자바스크립트 언어의 문법을 보다 엄격히 적용하여 기존에는 무시되던 오류를 발생시킬 가능성이 높거나 자바스크립트 엔진의 최적화 작업에 문제를 일으킬 수 있는 코드에 대해 명시적인 에러를 발생

 

전역이나 함수단위에 strict모드 적용은 바람직하지않으며 즉시실행함수로 감싼 스크립트 단위로 적용하는 것이 바람직하다.

// 전역에 strict mode의 적용하는 것은 바람직하지 않다!
'use strict';

function foo() {
  x = 10; // ReferenceError: x is not defined
}
foo();

발생시키는 에러

• 암묵적 전역변수
• 변수,함수,매개변수의 삭제
• 매개변수 이름의 중복
• with문 사용
• 일반 함수의 this

 

 

10. this

자바스크립트의 함수는 호출될때, 매개변수로 전달되는 인자값 이외에, arguments 객체와 this를 암묵적으로 전달받는다.

함수 호출방식에 따라 this에 바인딩되는 객체가 달라진다. -> this 는 현재 실행 문맥이다!

함수의 호출하는 방식은 아래와 같이 다양하다.

1. 함수 호출 : 전역객체에 바인딩
2. 메소드 호출: 해당 메소드를 호출한 객체에 바인딩
3. 생성자 함수 호출
4. apply/call/bind 호출

ar foo = function () {
  console.dir(this);
};

// 1. 함수 호출 : 전역객체에 바인딩
foo(); // window
// window.foo();

// 2. 메소드 호출
var obj = { foo: foo };
obj.foo(); // obj

// 3. 생성자 함수 호출
var instance = new foo(); // instance

// 4. apply/call/bind 호출
var bar = { name: 'bar' };
foo.call(bar);   // bar
foo.apply(bar);  // bar
foo.bind(bar)(); // bar


// 메소드, 콜백함수 어디든 내부함수인 경우 this는 전역객체에 바인딩
var obj = {
  value: 100,
  foo: function() {
    console.log("foo's this: ",  this);  // obj
    console.log("foo's this.value: ",  this.value); // 100
    function bar() {
      console.log("bar's this: ",  this); // window
      console.log("bar's this.value: ", this.value); // 1
    }
    bar();
  }
};

 

3. 생성자 함수 호출시 바인딩이 다르게 동작한다.

 

3-1) 생성자 함수 동작 방식

new 연산자와 생성자 함수를 호출하면 다음과 같은 수순으로 동작한다

• 빈 객체 생성 및 this 바인딩 : 생성자 함수 코드 실행전 빈 객체 생성 -> 이때 this가 빈객체를 가리킨다
• this를 통한 프로퍼티 생성: 생성된 빈객체에 this를 사용하여 동적으로 프로퍼티나 메소드를 생성 할 수 있다. 
• 생성된 객체 반환

예제는 아래 코드를 보며 이해해보자

이때 new 없이 호출한다면 1과 같이 동작하여 전역객체가 바인딩됨.

function Person(name) {
  // 생성자 함수 코드 실행 전 -------- 1
  this.name = name;  // --------- 2
  // 생성된 함수 반환 -------------- 3
}

var me = new Person('Lee');
console.log(me.name);



// 일반 함수로서 호출되었기 때문에 객체를 암묵적으로 생성하여 반환하지 않는다.
// 일반 함수의 this는 전역객체를 가리킨다.
var me2 = Person('Lee');