190316 javascript

-리터럴

소스코드 안에서 직접 만들어 낸 상수 !값! 자체를 말하며 값을 구성하는 최소 단위

숫자 리터럴

1001

문자열 리터럴

'hello'

불리언 리터럴

true

null 리터럴

null

undefined 리터럴

undefined

객체 리터럴

{}

배열 리터럴

[]

정규 표현식 리터럴

ab+c

함수 리터럴

function(){}

*자바스크립트의 모든 값은 데이터 타입을 갖는다. 자바스크립트는 7가지 데이터 타입을 제공한다.

-원시타입

number

string

boolean

null

undefined

symbol (es6)

-객체타입

object {}

*자바스크립트는 c와 java와는 다르게 변수를 선언할 때 데이터 타입을 미리 지정하지 않는다.

다시 말해, 변수에 할당된 값의 타입에 의해 동적으로 변수의 타입이 결정된다. 이를 "동적 타이핑"이라 하며

자바스크립트가 다른 프로그래밍 언어와 구별되는 특징 중 하나이다.

-키워드

키워드는 수행할 동작을 규정한 것이다.

예를 들어 var 키워드는 새로운 변수를 생성할 것을 지시한다.

var 변수의 선언

function 함수의 선언

return 함수 종료 및 값의 반환

while 반복문

break 반복문 탈출

-표현식

표현식은 하나의 값으로 평가된다.

값(리터럴), 변수, 객체의 프로퍼티, 배열의 요소, 함수 호출, 메소드 호출, 피연산자와 연산자의 조합은

모두 표현식이며 하나의 값으로 평가된다.

표현식은 결국 하나의 값이 되기 때문에 다른 표현식의 일부가 되어 조금 더 복잡한 표현식을 구성할 수도 있다.

-문과 표현식의 비교

문이 마침표로 끝나는 하나의 완전한 문장이라고 한다면

표현식은 문 안에 문을 구성하는 요소이다.

표현식은 그 자체로 하나의 문이 될 수도 있다.

-함수

함수란 어떤 작업을 수행하기 위해 필요한 문들의 집합을 정의한 "코드 블록"이다.

함수는 이름과 매개변수를 갖으며 필요한 때에 호출하여 코드 블록에 담긴 문들을 일괄적으로 실행할 수 있다.

함수는 여러번 호출할 수 있다.

동일한 작업을 반복적으로 수행해야 한다면 중복작성하는 것이 아니라 미리 정의된 함수를 재사용하는 것이 효율적이다.

-객체 {}

자바스크립트는 객체 기반의 스크립트 언어이며 자바스크립트를 이루고 있는 거의 '모든 것'이 객체이다.

원시타입(단순 값)을 제외한 나머지 값들(함수, 배열, 정규표현식 등)은 모두 객체이다.

자바스크립트 객체는 키(이름)과 값으로 구성된 프로퍼티의 집합이다.

프로퍼티의 값으로 자바스크립트에서 사용할 수 있는 모든 값을 사용할 수 있다.

*자바스크립트의 함수는 일급 객체이므로 값으로 취급할 수 있다.

따라서 프로퍼티의 값으로 함수를 사용할 수도 있으며 프로퍼티의 값이 함수일 경우, 일반 함수와 구분하기 위해 메소드라 부른다.

이과 같이 객체는 데이터를 의미하는 프로퍼티와

데이터를 참조하고 조작할 수 있는 동작을 의미하는 메소드로 구성된 집합이다.

객체는 데이터(프로퍼티)와 그 데이터에 관련되는 동작(메소드)를 모두 포함할 수 있기 때문에

데이터와 동작을 하나의 단위로 구조화할 수 있어 유용하다.

자바스크립트의 객체는 객체지향의 상속을 구현하기 위해 "프로토타입"이라고 불리는 객체의 프로퍼티와

메소드를 상속받을 수 있다.

-배열

배열은 1개의 변수에 여러 개의 값을 순차적으로 저장할 때 사용한다.

자바스크립트의 배열은 객체이며 유용한 내장 메소드를 포함하고 있다.

*변수의 타입

변수의 타입 지정없이 값이 할당되는 과정에서 자동으로 변수의 타입이 결정된다.

즉, 변수는 고정된 타입이 없다.

따라서 같은 변수에 여러 타입의 값을 자유롭게 할당할 수 있다.

예를 들어 숫자타입 1과 문자열 타입 '1'은 비슷하게 보이지만 다른 타입의 값이다.

숫자 타입의 값은 주로 산술 연산을 위해 만들지만 문자열 타입의 값은 주로 텍스트로 출력하기위해 만든다.

이처럼 개발자는 명확한 의도를 가지고 타입을 구별하여 값을 만들 것이고 자바스크립트 엔진은 타입을 구별하여 값을 취급할 것이다.

-원시타입

원시타입의 값은 "변경 불가능한 값"이며 값에 의한전달이다.

C나 Java의 경우, 정수와 실수를 구분하여 int, long, float, double 등과 같은 다양한 숫자 타입이 존재한다.

하지만 자바스크립트는 독특하게 하나의 숫자 타입만 존재한다.

자바스크립트는 2진수, 8진수, 16진수 데이터 타입을 제공하지 않기 때문에 이들 값을 모두 참조하면 모두 10진수로 해석된다.

자바스크립트의 숫자 타입은 정수만을 위한 타입이 없고 모든 수를 실수로 처리한다.

정수로 표시된다해도 사실은 실수다. 따라서 정수로 표시되는 수 끼리 나누더라도 실수가 나올 수 있다.

추가적으로 3가지 특별한 값들도 표현 할 수 있다.

infinity

양의 무한대

-infinity

음의 무한대

NaN (Not a number)

산술 연산 불가

수학적 의미의 실수는 허수가 아닌 유리수와 무리수를 통틀은 말이지만 프로그래밍 언어에서 실수는 일반적으로 소수를 가리킨다.

-string

문자열의 가장 일반적인 표기법은 작은 따옴표를 사용하는 것이다.

c와 같은 언어와는 다르게, 자바스크립트의 문자열은 원시 타입이며 변경 불가능하다.

이것은 한 번 문자열이 생성되면, 그 문자열을 변경할 수 없다는 것을 의미한다.

문자열은 배열처럼 인덱스를 통해 접근할 수 있다. 이와 같은 특성을 갖는 데이터를 "유사배열"이라한다

str[0] = 's'처럼 이미 생성된 문자열의 일부 문자를 변경해도 반영되지 않는다. (이때 에러가 발생하지 않음)

한번 생성된 문자열은 read only로서 변경할 수 없다. 이것을 변경 불가능이라 한다.

그러나 새로운 문자열을 재할당하는 것은 물론 가능하다.

이는 기존 문자열을 변경하는 것이 아니라 새로운 문자열을 새롭게 할당하는 것이기 때문이다.

-boolean

불리언 타입의 값은 논리적 참, 거짓을 나타내는 true와 false 뿐이다.

불리언 타입의 값은 참과 거짓으로 구분되는 조건에 의해 프로그램의 흐름을 제어하는 조건문에서 자주 사용한다.

*비어있는 문자열과 null, undefined, 숫자 0은 false로 간주된다.

-undefined

undefined 타입의 값은 undefined가 유일하다. 선언 이후 값을 할당하지 않은 변수는 undefined 값을 가진다.

즉 선언은 되었지만 값을 할당하지 않은 변수에 접근하거나 존재하지 않는 객체 프로퍼티에 접근할 경우 undefined가 반환된다.

이는 변수 선언에 의해 확보된 메모리 공간을 처음 할당이 이루어질 때까지 빈 상태로 내버려두지 않고

자바스크립트 엔진이 undefined로 초기화 하기 때문이다.

이처럼 undefined는 개발자가 의도적으로 할당한 값이 아니라 자바스크립트 엔진에 의해 초기화된 값이다.

변수를 참조했을 때 undefined가 반환된다면 참조한 변수가 선언 이후 값이 할당된 적이 없는 변수라는 것을 개발자는 간파할 수있다.

그렇다면 개발자가 의도적으로 undefined를 할당해야하는 경우가 있을까?

자바스크립트 엔진이 변수 초기화에 사용하는 이 값을 만약 개발자가 마음대로 할당한다면

undefined의 본래의 취지와 어긋날 뿐더러 혼란을 줄 수 있으므로 권장하지 않는다.

그럼 변수의 값이 없다는 것을 명시하고 싶은 경우 어떻게 하면 좋을까?

그런 경우는 undefined를 할당하는 것이 아니라 null을 할당한다.

-null

null 타입의 값은 null이 유일하다.

*자바스크립트는 대소문자를 구별 하므로 Null, NULL등과 다르다.

프로그래밍 언어에서 null은 의도적으로 변수에 값이 없다는 것을 명시할 때 사용한다.

*변수가 기억하는 메모리 주소의 참조 정보를 제거하는 것을 의미하며

자바스크립트 엔진은 누구도 참조하지 않는 메모리 영역에 대해 가비지 콜렉션을 수행할 것이다.

또는 함수가 호출되었으나 유효한 값을 반환할 수 없는 경우, 명시적으로 null을 반환하기도 한다.

예를 들어, 조건에 부합하는 html요소를 검색해 Document.querySelector()는 조건에 부합하는 html요소를 검색할 수 없는 경우, null을 반환한다.

타입을 나타내는 문자열을 반환하는 typeof 연산자로 null값을 검색해보면 null이아닌 object가 나온다.
이는 *자바스크립트의 설계상의 오류이다

따라서 null타입을 확인할때 typeof 연산자를 사용하면 안되고 일치연산자 (===)를 사용하여야한다.

-symbol

심볼은 es6에서 새롭게 추가된 7번째 타입으로 변경 불가능한 원시 타입의 값이다.

심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다.

*심볼은 symbol "함수"를 호출해 생성한다.

이때 생성된 심볼 값은 다른 심볼 값들과 다른 유일한 심볼 값이다.

obj[key] = 'value' 구문 해석 :

Obj 객체에 값이 value인 프로퍼티(심볼 =key)를 넣는다, 프로퍼티에 접근한 것

-property

프로퍼티는 "어떤 값"을 나타냅니다.

그런데 이 값이 "다른 값과 연관을 가지고 있을때" property라고 부릅니다.

*메모

객체에 속한 변수들 = object에 속한 var 변수

객체의 속성 = object의 속성

예를 들어 문자열에는 length라는 property가 있는데

이 프로퍼티는 문자열 안에 있는 문자의 양을 정수로 나타낸 값을 담고 있습니다.

property는 보통 데이터 구조와 연관된 속성을 나타냅니다.

프로퍼티에는 2가지 종류가 있습니다.

-인스턴스 property들은 특정 object 인스턴스의 특정한 데이터를 가지고 있습니다.

-static property들은 모든 object 인스턴스들에게 공유된 데이터를 가지고 있습니다.

보통 프로퍼티가 object를 가지고 있다. 라고 말하는 것은

property가 object reference를 가지고 있다는 것을 줄여서 말한 것이라는 것을 기억하세요.

Java에서 객체 안의 멤버 변수를 필드라고 부르는 것과 비슷하네요.

*property는 object를 위해서 데이터를 저장한다.

*메소드는 object가 요청 받을 수 있는 액션이다. (함수)

*프로퍼티 = 데이터 구조와 연관된 속성

*함수를 담은 프로퍼티 = 메소드 = 동작

프로퍼티에 접근하는 방법은 2가지가 있습니다.

대괄호로 접근하거나 점 표기법을 이용합니다.

-npm 

Node Packaged Manager의 약자

node.js로 만들어진 패키지(모듈)을 관리해주는 툴

node.js로 만들어진 모듈을 웹에서 받아서 설치하고 관리해주는 프로그램 입니다.

npm은 node.js를 설치하면 내장되어있다고 합니다.

node.js는 npm을 사용하기 위해서 꼭 필요합니다.

여기서 중요한 부분은 "scripts" 와  "dependencies" 입니다.
script는 우리가 run 명령어를 통해서 실행할 것들을 적어두는 것이고
dependencies의 경우는 설치할 모듈들을 의미합니다.

-객체타입

객체는 데이터와 그 데이터에 관련한 동작을 "모두 포함할 수 있는 개념적 존재"이다.

이름과 값을 가지는 데이터를 의미하는 프로퍼티와 동작을 의미하는 메소드를 포함할 수 있는 독립적인 주체이다.

자바스크립트는 객체 기반의 스크립트 언어로서 자바스크립트를 이루고 있는 거의 모든 것이 객체이다.

*원시 타입을 제외한 나머지 값들은(배열, 함수, 정규표현식) 모두 객체이다. 객체는 참조에 의한 전달 방식으로 전달된다.

-변수

프로그램에서 사용되는 데이터를 일정기간동안 기억하여 필요한 때에 다시 사용하기 위해

데이터에 고유의 이름인 식별자를 명시한 것이다.

변수에 명시한 고유한 식별자를 변수명이라 하고 변수로 참조할 수 있는 데이터를 변수값이라 한다.

변수는 var, let, const 키워드를 사용하여 선언하고 할당 연산자를 사용해 값을 할당한다.

그리고 식별자인 변수명을 사용해 변수에 저장된 값을 "참조" 한다

사람을 고유한 이름으로 구별하듯이 변수도 사람이 이해할 수 있는 언어로

지정한 고유한 식별자(변수명)에 의해 구별하여 참조할 수 있다.

데이터는 메모리에 저장되어 있다. 메모리에 저장된 데이터를 참조하려면 데이터가 저장된 "메모리 상의 주소"를 알아야한다.

식별자는 데이터가 저장된 메모리 상의 주소를 기억한다.

따라서 식별자를 통해 메모리에 저장된 값을 참조할 수 있다.

또한 변수명을 통해 데이터의 의미를 명확히 할 수 있어 코드의 가독성이 좋아지는 효과도 있다.

그 다음.

-----

[Reference, origin]
PoiemaWeb

[JavaScript] property란 무엇인가?
[JavaScript] npm이란?
| 작성자 AIdev