하위^^
왕초보를 위한 자바스크립트 es6 공부 주머니 1주차입니다.
제가 참고 및 공부하고 있는 책인
"한빛미디어 - 러닝 자바스크립트"를 소개합니다.
주로 이 책에서 다룬 내용을 정리 및 요약을 할 예정입니다.
이 포스팅은 자바스크립트를 처음 시작하는 분과
자바스크립트 es6를 처음시작하는 분들께 추천드립니다.
(프로그래밍을 처음 시작하는 분들은 조금 어려울 수도 있습니다.)
즉 저를 포함 왕초보분들을 위한 글이니 나머지분들은 가볍게 읽어주시길 바랍니다.
Anyway
시작해보도록 하겠습니다.
텍스트 에디터의 종류는 참 다양하지만
저같은 경우 Atom을 사용하겠습니다.
1. 변수와 상수
변수(variable)란 언제든 바뀔 수 있는 값입니다.
예를 들어 자기소개에 대한 프로그램을 만든다면 name이라는 변수를 사용할 수 있습니다.
이 문은 변수 name을 선언하고 초깃값을 할당하는 두 가지 일을 합니다.
name의 값은 언제든 바꿀 수 있습니다.
그렇다고해서 변수를 선언할 때 꼭 초깃값을 지정해야하는 것은 아닙니다.
초깃값을 할당하지 않으면 암시적으로 특별한 값 "undefined"가 할당됩니다.
변수를 선언하고 alert이라는 함수를 써서 name의 값을 브라우저에 띄워보도록 하겠습니다.
초기값을 설정하지 않으면 undefined라는 값이 나오는 것을 볼 수 있습니다.
let 문 하나에서 변수 여러 개를 선언할 수 있습니다.
(위 nation 옆의 파란색 세로줄은 마우스 스크롤입니다)
상수(constant) : 변수와 마찬가지로 값을 할당받을 수 있지만, 한 번 할당한 값을 바꿀 수 없습니다.
절대적인 규칙은 아니지만, 상수 이름에는 보통 대문자와 밑줄만 사용합니다.
상수를 선언하고 초기값을 할당했습니다.
선언한 상수값을 브라우저에 띄워보도록 하겠습니다.
2. 식별자와 리터럴
식별자(identifier) : 변수와 상수, 함수 이름을 식별자라고 합니다.
식별자 표기법은 여러가지이지만 제가 선호하는 표기법은
"카멜케이스(Camel Case)"입니다.
여기서 targetTempC 표기를 카멜 케이스라고 합니다.
문자열의 중간중간의 대문자가 낙타의 혹처럼 보인다고해서 붙였다고 합니다.
리터럴(literal) : 우리는 이미 리터럴을 사용했습니다. 위의 targetTempC에 값을 할당할 때
사용한 숫자 6이 "숫자형 리터럴"입니다.
즉 리터럴은 값을 프로그램 안에서 직접 지정한다는 의미입니다.
3. 원시 타입
자바스크립트의 값은 원시 값(primitive) 또는 객체(object)입니다.
먼저 원시 타입에 대해 알아보도록 하겠습니다.
원시타입에는 숫자, 문자열, 불리언, null, undefined, 심볼(Symbol)타입이 있습니다.
원시 타입 중 숫자와 문자열, 불리언에는 각각 대응하는 객체 타입인
Number, String, Boolean이 있습니다.
es6에서 도입한 새 데이터 타입인 심볼타입에 대해 알아보도록 하겠습니다.
심볼은 유일한 토큰을 나타개니 위해 es6에서 도입한 새 데이터 타입입니다.
심볼은 항상 유일합니다. 다른 어떤 심볼과 일치하지 않습니다.
이런면에서 심볼은 객체와 유사합니다.
항상 유일하다는 점을 제외하면 심볼은 원시 값의 특징을
모두 가지고 있으므로 확장성 있는 코드를 만들 수 있습니다.
심볼은 Symbol() 생성자로 만듭니다.
결과값으로 false가 나타나는걸 볼 수 있습니다.
사실 저도 Symbol에 대해서 완벽하게 이해하진 못했습니다.
책에서 또한 한 번 더 설명을 해준다고하니 저 또한 Symbol에 대해서 한 번 더 설명하도록 하겠습니다.
2) null과 undefined
null이 가질 수 있는 값은 null 하나뿐이며,
undefined가 가질 수 있는 값도 undefined 하나뿐입니다.
null과 undefined는 모두 존재하지 않는 것을 나타냅니다.
일반적인 규칙으론 대부분 null값을 사용하라는 것을 의미합니다.
4. 객체
원시 타입은 단 하나의 값만 나타낼 수 있고 불변이지만, 이와 달리 객테는 여러 가지 값이나 복잡한 값을 나타낼 수 있으며, 변할 수도 있습니다.
객체의 본질은 컨테이너입니다. 컨테이너의 내용물은 시간이 지나면서 바뀔 수 있지만, 내용물이 바뀐다고 컨테이너가 바뀌는 건 아닙니다. 즉, 여전히 같은 객체입니다. 객체를 선언할때 중괄호를 사용합니다. 중괄호는 한 쌍이므로 객체가 어디에서 시작하고 어디에서 끝나는지 나타낼 수 있습니다.
빈 객체를 선언해보았습니다. 객체의 콘텐츠는 프로퍼티(property) 또는 멤버(member)라고 부릅니다. 프로퍼티는 이름(키)과 값으로 구성됩니다. 프로퍼티 이름은 반드시 문자열 또는 심볼이어야 하며, 값은 어떤 타입이든 상관없고 다른 객체여도 괜찮습니다. obj에 name 프로퍼티를 추가해보겠습니다.
프로퍼티 이름에 유효한 식별자를 써야 멤버 접근 연산자(member access operator)인 " . " 를 사용할 수 있습니다. 프로퍼티 이름에 유효한 식별자가 아닌 이름을 쓴다면 계산된 멤버 접근 연산자(computed member access operetor " [] "를 써야 합니다. 프로퍼티 이름이 유효한 식별자여도 대괄호로 접근할 수 있습니다.
(위의 사진은 계산된 멤버 접근 연산자의 예시입니다)
심볼 프로퍼티에 접근할때 또한 대괄호를 사용합니다.
이제 obj에는 name(유효한 식별자 문자열) , not an identifier(유효한 식별자가 아닌 문자열) , SIZE(심볼) 세 가지 프로퍼티가 있습니다.
*여기서 잠깐
원시 값과 객체의 차이, 우리는 변수 obj에 저장된 객체를 수정했지만, obj는 항상 같은 객체를 가리키고 있었습니다. obj에 저장한 것이 문자열이나, 숫자, 기타 다른 원시값이었다면 수정할 때 마다 다른 값을 가리켰을 겁니다. 달리 말해 obj는 계속 같은 객체를 가리키고, 바뀐 것은 객체의 프로퍼티입니다.
obj는 빈 객체로 만들었지만, 객체 리터럴 문법에서는 객체를 만드는 동시에 프로퍼티를 만들 수 있습니다.
중괄호 안에서 각 프로퍼티를 쉼표로 구분하고, 프로퍼티 이름과 값은 콜론으로 구분합니다.
5. 배열
자바스크립트에서 배열은 특수한 객체입니다. 일반적인 객체와 달리 배열은 순서가 있고, 키는 순차적인 숫자입니다.
1) 자바스크립트 배열의 특징
- 배열 크기는 고정되지 않습니다.
- 요소의 데이터 타입을 가리지 않습니다.
- 배열 요소는 0으로 시작합니다.
2) 배열 예시
3) 인덱스
length프로퍼티는 배열 요소 갯수를 반환한다.
array[0]은 첫번째 요소를 가져옵니다
array[array.length-1]은 array의 마지막 요소를 가져온다.
배열의 메소드는 나중에 다시 한번 더 정리햅도록 하겠습니다.
* 참고
실행결과를 확인하기 위해서 저같은 경우 alert이라는 함수를 사용했습니다.
하지만 또 다른 방법이 있습니다.console.log함수를 이용하여
크롬의 개발자도구에 들어가서 결과값을 확인 할 수 있습니다.
댓글
댓글 쓰기