[Javascript] Inside Javascript 책 단어 뽀개기 (chapter 3/8)

 

 

3.1 자바스크립트 기본 타입

타입(data type)	프로그램에서 다룰 수 있는 값의 종류
기본(원시) 타입 (Primitive type)	자바스크립트에서는 여러 가지 형태의 타입을 미리 정의하여 제공하고 있으며, 이것을 기본 타입이라고 한다  자바스크립트에서 기본 타입은 숫자, 문자열, 불린값을 비롯해 null과 undefined라는 타입이 있다 이들 타입의 특징은 그 자체가 하나의 값을 나타낸다. 즉 값을 그대로 할당 (기본 타입을 제외한 모든 값은 객체) - 종류: 숫자(number), 문자열(string), 불리언(boolean), 심볼(symbol, ECMAScript 6부터 제공) , undefined, null 모든 원시 타입은 값을 표현하는 리터럴 형식이 있다. 리터럴이란 코드에 직접 입력된 이름이나 가격처럼 변수에 저장되지 않은 값 기본 타입 변수는 stack영역에 변수 선언과 동시에 초기화를 하게 되면 변수와 변수값이 stack영역에 저장된다
typeof 연산자	변수의 데이터 타입을 반환하는 연산자, 피연산자의 타입을 리턴 - 반환되는 값: undefined(변수가 정의되지 않거나 값이 없을 때), number, string, boolean, object(테이터 타입이 함수, 배열 등 객체일 때), function(변수의 값이 함수일때), symbol  primitive type구분할 때는 typeof 사용하고 클래스 타입을 구분할 때는 instanceof 사용하면 된다
예약어	이미 쓰임이 정해져 있는 키워드  자바스크립트에서 변수, 레이블, 함수의 이름을 정의할 때 예약어는 사용할 수 없다 - 종류 : break, case, switch, catch, continue, default, delete, do, abstract, typeof, instanceof, boolean, byte, char, short, float, int, double, long, class, var, const, debugger, function, while, for, in, if, else, return, true, false, finally, enum, import, export, final, goto, implements, new, null,  this, throw,  interface, native, package, private, protected, public, static, try, void, with, super, synchronized, throws, transient, volatile
부동 소수점	실수는 보통 정수부와 소수부로 나누지만 가수부와 지수부로 나누어 표현할 수 있다  정수부와 소수부로 표현하면 고정 소수점, 가수부와 지수부로 표현하면 부동 소수점 방식이다  부동 소수점 방식을 사용하면 고정 소수점 방식보다 훨씬 더 많은 범위까지 표현할 수 있지만, 부동 소수점 방식에 의한 실수의 표현은 항상 오차가 존재한다는 단점이 있다  컴퓨터에서 실수를 표현하는 방법은 정확한 표현이 아닌 언제나 근사치를 표현할 뿐이다
Math.floor()	Math.floor() : 소수점 이하를 버림한다 Math.ceil() : 소수점 이하를 올림한다 Math.round() : 소수점 이하를 반올림한다
문자열[ ]	문자열은 문자 배열처럼 인덱스를 이용해서 접근할 수 있다 ex) var str = 'test'; console.log(str[0]); // (출력값) t 한번 생성된 문자열은 읽기만 가능 (수정 X)
Undefined & Null	두 타입 모두 '값이 비어있음'을 나타낸다 기본적으로 값이 할당되지 않은 변수는 undefined 타입이고, (undefined 타입의 변수는 변수 자체의 값 또한 undefined이다. 즉 undefined는 타입이자 값이다.) null 타입의 변수는 개발자가 명시적으로 값을 비어있음을 나타내기 위해 사용한다 null타입 변수의 typeof 결과는 null이 아닌 object이기 때문에, null 타입 변수인지 확인할 때 typeof 연산자말고 일치연산자(===)를 사용해서 변수의 값을 직접 확인해야 한다

 

3.2 자바스크립트 참조 타입(객체 타입)

참조(객체) 타입(Object type)	참조 타입 데이터는 크기가 정해져 있지 않고 변수에 할당될 때 값이 직접 해당 변수에 저장될 수 없으며 변수에는 데이터에 대한 참조만 저장된다.  참조 = 참조 타입 데이터의 주소  참조 값 = 참조 타입의 인스턴스 = 객체  객체는 순서가 없는 프로퍼티(이름+값)로 이루어져 있다  참조타입 변수는 stack영역에 변수를 선언한 것이 생성, 저장이 되지만 변수에 저장된 참조타입인 객체는 heap영역에 생성이 되고 heap영역에 생성된 번지가 참조 변수의 값으로 들어간다.
정규표현식(정규식)	특정한 규칙을 가진 문자열의 집합을 표현하는 데 사용되는 형식 언어  문자열에 나타나는 특정 문자 조합과 대응시키기 위해 사용되는 패턴  주어진 패턴에 일치하는 문자열을 찾기 위해 허용되는 검색 패턴  자바스크립트에서 정규식 또한 객체  자바스크립트에서는 RegExp라는 내장 객체를 통해 정규표현식을 다룬다
해시(Hash), 해시함수, 해시 테이블	해시는 하나의 문자열을, 이를 상징하는 더 짧은 길이의 값이나 키로 변환하는 것  해시는 해시 함수의 결과물, 저장소에서 값과 매칭되어 저장된다  암호가 정보를 숨기기 위한 것이라면 해시는 정보의 위조나 변조가 이루어졌는 지를 확인할 수 있는, 즉 정보의 무결성을 확인할 수 있도록 데이터를 변환하는 것  이를 통해 우리는 전자상거래를 위한 전자서명, 전자봉투 와 전자화폐 등을 이용할 수 있다    해시함수는 키(다양한 길이)를 해시(일정한 길이)로 바꿔주는 역할 -> 저장소 효율적으로 운영  서로 다른 Key가 같은 Hash가 되는 경우를 해시 충돌이라고 하는데 해시 충돌을 일으키는 확률을 최대한 낮추는 함수를 만드는 것이 중요하다    해시 테이블은 연관배열 구조(키1:값1로 연관된 자료 구조)를 이용하여 Key에 Value를 저장하는 데이터 구조  해시 테이블  = 키 + 해시함수 + 해시 + 값 +저장소(Bucket, Slot) 참고: https://velog.io/@cyranocoding/Hash-Hashing-Hash-Table%ED%95%B4%EC%8B%9C-%ED%95%B4%EC%8B%B1-%ED%95%B4%EC%8B%9C%ED%85%8C%EC%9D%B4%EB%B8%94-%EC%9E%90%EB%A3%8C%EA%B5%AC%EC%A1%B0%EC%9D%98-%EC%9D%B4%ED%95%B4-6ijyonph6o
메소드(Method)	자바스크립트에서 기본 타입은 하나의 값만 가지는 데 비해, 참조 타입의 객체는 여러 개의 property를 포함할 수 있으며 이러한 객체의 property는 기본 타입의 값을 포함하거나 다른 객체를 가리킬 수 있다. 이러한 property의 성질에 따라 객체의 property는 함수로 포함할 수 있으며 자바스크릡트에서는 이러한 프로퍼티를 메소드라고 부른다  메소드는 객체가 가지고 있는 동작이다  동작을 실행한다는 점에서 함수와 같지만 메소드는 객체를 통해서 해당 메소드를 수행해야 하기 때문에 객체에게 동작을 수행하라고 명령해야 하지만 함수 스스로가 동작을 정의한 함수객체이기 때문에 객체에게 명령하지 않아도 된다  메소드는 동작을 수행하기 위해서 객체의 정보를 담고 있는 프로퍼티를 사용할 수 있다
클래스의 인스턴스 in 자바	어떤 클래스로부터 만들어진 객체 객체 = 모든 인스턴스를 대표하는 포괄적 의미 인스턴스 = "어떤 클래스"로부터 만들어진 것인지를 강조하는 구체적 의미
객체 리터럴	객체를 생성하는 표기법, 중괄호( { } ) 사용  객체를 따로 정의하지 않고 객체를 만드는 것
생성자 함수	객체를 생성하는 함수, 자바스크립트에서는 함수를 통해서 객체를 생성할 수 있다

 

	객체의 Property에 접근하는 2가지 방법
대괄호( [ ] ) 표기법	객체의 property를 문자열 형태로 만든 다음 대괄호를 둘러싼다 ( ex: foo['major'] )  property를 문자열 형태로 만들지 않으면 모든 자바스크립트 객체에서 호출 가능한 toString() 메소드를 자동으로 호출해서 문자열로 바꾸려는 시도를 한다. ( ex: console.log(foo[major]) //undefined ) 또한 객체에 없는 property에 접근하려는 경우도 undefined 출력된다  하지만 key가 숫자일 때 문자혈 형태( ' ' )로 적을 필요가 없다. 왜냐하면 자바스크립트 엔진이 [ ]연산자 내에 숫자가 사용될 경우, 해당 숫자를 자동으로 문자열 형태로 바꾸어주기 때문이다 * 대괄호 표기법만 사용해야 할 때 : property가 표현식이거나 예약어일 경우 ex) property가 full-name 일때 ' - ' 는 연산자가 있는 표현식 (이때, 마침표표기법을 사용하면 NaN값)
마침표( . ) 표기법	객체 다음에 마침표를 찍고 원하는 속성값을 적는다 ( ex: foo.major )

3.3 참조 타입의 특성

참조에 의한 호출	함수를 호출할 때 인자로 참조 타입인 객체를 전달할 경우, 객체의 property값이 함수의 매개변수로 복사되지 않고, 인자로 넘긴 객체의 참조값이 그대로 함수 내부로 전달된다 때문에 함수 내부에서 참조값을 이용해서 인자로 넘긴 실제 객체의 값을 변경할 수 있다
매개변수(Parameter)	전달받은 인수를 함수 내부로 전달하기 위해 사용하는 변수 참고: http://tcpschool.com/javascript/js_function_parameterArgument
인자 =인수(Argument)	함수가 호출될 때 함수로 값을 전달해주는 값

 

3.4 프로토타입

프로토타입 객체(Prototype)	모든 객체는 자신의 부모 역할을 하는 객체와 연결되어 있다. 이것은 마치 객체지향의 상속 개념과 같이 부모 객체의 property or method를 상속받아 사용할 수 있다. 자바스크립트에서는 이러한 부모객체를 Prototype(프로토타입) 객체 또는 줄여서 프로토타입이라고 부른다  Prototype 객체는 생성자 함수에 의해 생성된 각각의 객체에 공유 property를 제공하기 위해 사용한다  일단, 객체 리터럴 방식으로 생성된 객체의 경우 Object.prototype 객체가 Prototype 객체가 된다는 것만 기억하자 ( Chapter 4에서 다룰 예정 )  객체 -> (__proto__) -> Object.prototype 객체는 Array.prototype의 표준배열메서드 사용X, Object.prototype의 표준 메서드 사용O  배열 -> (__proto__) -> Array.prototype -> (__proto__) -> Object.prototype 배열는 Array.prototype의 표준배열메서드 사용O , Object.prototype의 표준 메서드 사용O
.__proto__	__proto__는 객체 부모인 Prototype 객체를 가리킨다  __proto__는 객체가 생성될 때 조상이었던 함수의 Prototype Object를 가리킨다  크롬 브라우저에서 __proto__ 는 숨겨진 [[Property] 를 의미한다  객체는 자신의 부모 객체를 __proto__ 라는 내부 property로 연결하고 있다 참고: https://medium.com/@bluesh55/javascript-prototype-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0-f8e67c286b67
ECMASript 명세서	ECMAScript 구현을 위한 요구사항의 집합   ECMA International에서 정의한 Script language에 대한 표준을 정의한 명세서  ECMASript 명세서에서 자바스크립트의 모든 객체는 자신의 prototype을 가리키는 [[Prototype]] 라는 숨겨진 property를 가진다라고 설명한다
ECMAScript	JavaScript의 표준화 버전
자바스크립트 기본 내장 메소드	자바스크립트 기본 내장 메서드는 모든 객체에서 호출 가능하다. toString(), valueOf() 등 굉장히 많으니 필요할 때 찾아 쓰자  w3schools의 자바스크립트 래퍼런스 : http://www.w3schools.com/jsref/default.asp

 

3.5 배열

배열	C, JAVA의 배열과 같은 기능을 하는 객체지만 덜 까다롭다.  크기 지정 필수X, 위치와 어떤 타입의 데이터를 저장해도 에러X - 특징 :  배열의 크기를 현재 배열의 인덱스 중 가장 큰 값을 기준으로 정한다 (이때, 할당되지 않은 인덱스의 요소는 undefined를 기본으로 가진다) - 배열 삭제
배열 리터럴	자바스크립트에서 새로운 배열을 만드는 데 사용하는 표기법, 대괄호( [ ] ) 사용  (ex: var something = ['a', 'b', '1', 2]; )  Array() 생성자 함수로 배열을 생성하는 과정을 단순화시킨 것  접근 방법 : 변수 뒤에 대괄호를 붙이고 대괄호 안에 접근하고자 하는 원소의 배열 내 위치 인덱스값을 넣어준다.  (ex: console.log( something[1] ); // (출력값) b
length( )	모든 배열은 length property를 가진다 (객체 X)  배열의 원소 개수를 나타낸다 (undefined 포함)  하지만, 실제로 배열에 존재하는 원소 개수(undefined 제외)와 일치하는 것은 아니다 ( 실제 메모리가 length 크기처럼 할당X )  lenth() property는 배열 내 가장 큰 index+1 의 값이다 -> 가장 큰 index 값이 변하면 length 값 또한 자동으로 그에 맞춰 변경된다
배열 표준 메서드	length( ) property를 기반으로 동작한다 ex) push( ) 메소드는 인수로 넘어온 항목을 배열 끝에 추가하는 표준 배열 메서드이다.
배열 프로토타입 메소드	모든 배열 인스턴스는 Array.prototype으로부터 method & property를 상속받는다.  이때 상속받은 Array.prototype 메소드는 3가지로 구분 된다.   1. 원본 배열을 변경하는 7가지 메소드 : push(), pop(), shift(), unshift(), reverse(), sort(), splice() 2. 원본 배열은 변경하지 않고 참조하는 4가지 메소드 : join(), slice(), concat(), toString() 3. 원본 배열을 반복적으로 참조하는 10가지 메소드 : forEach(), map(), filter(), every(), some(), reduce(), reduceRight(), entries(), keys(), values() 참고: http://tcpschool.com/javascript/js_standard_arrayMethod

 

	배열의 property 동적 생성, 열거, 삭제
배열의 property 동적 생성	배열도 자바스크립트 객체이므로, index가 숫자인 배열 원소 이외에도 객체처럼 동적으로 property를 추가할 수 있다 동적 property가 추가되어도 배열의 length값(3)에 영향이 없다 . arr[3]에 배열 원소 'red' 를 추가했을 때 length의 값(4)이 바뀌었음을 볼 수 있다. 즉, 배열의 length property는 배열원소의 가장 큰 index가 변했을 경우에만 변경된다. 배열 arr의 property 동적 생성 또한 arr 배열의 모든 property를 출력한 결과를 봤을 때, 결국 배열도 객체처럼 "key" : "value" 형태로 배열 원소 및 프로퍼티가 있음을 알 수 있다.
배열의 property 열거 = for문 사용	배열도 객체이므로 for in 문을 사용하여 열거할 수 있지만, 불필요한 property가 출력될 수 있으므로 for문을 사용하는 것이 좋다 배열 arr의 property 열거  오른쪽 출력 결과를 보면 for in문은 0~3의 배열 요소와 color, name의 property까지 출력이 된 반면, for문은 배열의 요소만 정확히 출력한다. 그래서 for in문은 객체, for문은 배열에서 사용한다.
배열 요소 삭제 = splice( ) 사용	배열도 객체이므로, 배열 요소나 property를 삭제하기 위해 delete 연산자를 사용할 수는 있다.  하지만 delete 연산자는 해당 요소의 값을 undefined로 설정할 뿐 원소 자체를 삭제하지 않는다. ( length값 변화 X ) ( ex: delete 배열[index] )   때문에 배열에서 완전히 삭제할 경우 slice( ) 배열 메서드를 사용한다 ( length값 변화 O ) splice ( start, deleteCount, item... )  start: 배열에서 시작 위치  deleteCount: start에서 지정한 시작 위치부터 삭제할 요소의 수  item: 삭제할 위치에 추가할 요소 splice()로 배열arr 요소 삭제

Array( ) 생성자 함수	배열은 일반적으로 배열 리터럴로 생성하지만, 배열 리터럴도 결국 자바스크립트 기본 제공 Array() 생성자 함수로 배열을 생성하는 과정을 단순화시킨 것 생성자 함수로 배열, 객체를 생성할 때 반드시 new 연산자를 사용한다 * Array() 생성자 함수는 호출할 때 인자 개수에 따라 동작이 다르다 호출할 때 인자가 1개이고, 숫자일 경우 : 호출된 인자를 length로 갖는 빈 배열 생성 그 외의 경우 : 호출된 인자를 요소로 갖는 배열 생성 Array()생성자 함수가 호출하는 인자 개수가 1개일때와 여러 개일 때 차이
유사 배열 객체	자바스크립트에서 배열의 legnth property를 가지는 일반 객체(배열 객체X) - 특징 : 객체임에도 불구하고, 자바스크립트 표준 배열 메소드를 사용하는 것이 가능하다 배열 객체 arr & 유사 배열 객체 obj   유사 배열 객체가 length property를 가졌어도 당연히 배열이 아니므로 push() 메서드를 호출할 경후 아래와 같이 오류가 발생한다 ( push() 메소드는 표준 배열 메소드이기 때문이다 )   하지만,  apply() 메소드를 사용하면 일반 객체더라도 표준 배열 메소드를 활용하는 것이 가능하다  객체 obj에 '1'이라는 property에 'baz'의 값이 추가되고, length의 값은 2로 증가하였다. 간단하게 유사 배열 객체도 배열 메서드를 사용하는 것이 가능하다 정도만 숙지하자 (apply() 메소드는 Chpater 4에서 다룰 것이다)

 

3.6 기본 타입과 표준 메서드

기본 타입과 표준 메서드	기본 타입은 객체가 아니지만 기본 타입을 위해 정의된 표준 메소드들이 있다. 그래서 기본 타입도 객체처럼 이들을 위한 메소드를 호출할 수 있다 그럼 어떻게 메서드를 호출할 수 있을까?  기본값 -> 메소드 처리 순간에 객체로 변환 -> 각 타입별 표준 메소드를 호출 -> 메소드 호출이 끝나면 다시 기본값으로 복귀  각 타입별 표준 메소드는 무엇이 있을까?
각 타입별 메소드

 

3.7 연산자

동등 연산자(==)	비교하려는 피연산자의 타입이 다를 경우에 타입 변환을 거친 후 비교
일치 연산자(===)	피연산자의 타입이 다를 경우에 타입을 변경하지 않고 비교
!! 연산자	!!의 역할은 피연산자를 불린값으로 변환 !!연산자 활용을 통한 불린값 변환 결과  * 객체, 값이 비어있는 객체는 true로 변환된다