자바스크립트 공부에 앞서
크롬을 사용한다면 다음과 같은 방법으로 자바스크립트를 간단하게 실행해 볼 수 있다.
Ctrl+Shift+J (윈도우), 커멘트+Alt+J (OSX) 키를 누르면
콘솔 탭이 선택된 상태로 개발자 도구가 실행된다.
✅ 동적언어
자바스크립트는 동적언어이다.
동적언어라는 것이 무슨 말일까?
바로 한 변수에 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 및 재할당이 가능하다는 뜻이다.
let item = 42 // item은 숫자타입이다
item = 'thing' // item은 이제 문자열타입이다
item = true // item은 이제 불리언타입니다
이런 식으로 한 변수가 여러 타입으로 사용될 수 있다.
이제 각가의 타입에 대해 알아볼텐데
자바스크립트 언어는 크게 원시값과 객체로 나뉜다.
☑ 원시값(기본 데이터타입)
언어의 가장 낮은 단계에서 직접 표현되는 불변의 데이터이며 객체를 제외한 모든 타입은 불변 값(변경할 수 없는 값)을 정의한다.
원시값에는 아래와 타입이 속한다
(1) Boolean타입
- true, false
(2) Null타입
- null
(3) Undefined타입
- 값이 할당되지 않은 변수는 undefined 값을 가짐
(4) Number타입
- 범위-(2^53-1) ~ 2^53-1 까지의 부동소수점 외에도 +Infinity,-Infinity, NaN(Not a Number) 세개의 값을 가짐
(5) BigInt타입
-
임의 정밀도로 나타낼 수 있는 숫자 원시 값으로, Number타입의 안전 한계를 넘어서는 큰 정수도 안정하게 저장하고 연산할 수 있다.
-
호출하는 방법은 정수 끝에 n을 추가하거나 생성자를 호출해 생성할 수 있다.
(6) String타입
- 텍스트 데이터를 나타낼 때 사용. 16비트 부호가 없는 정수 값으로 구성된 집합으로, 각각의 요소가 String의 한 자리를 차지한다. 첫 번째 요소는 인덱스 0에, 그 다음 요소는 인덱스 1, 그 다음은 2순서다. String의 길이는 그 안의 요소 수와 같다.
(7) Symbol타입
- Symbol은 고유하고 변경 불가능한 원시값이며 유일한 식별자(unique identifier)를 만들고 싶을 때 사용한다. Symbol()을 사용하면 심볼값을 만들 수 있다.
let id = Symbol();
심볼을 만들 때 심볼 이름을 붙일 수 있다.
이것은 디버깅할 때 유용하다.
led id = Symbol("id");
☑ 객체(참조 데이터타입)
자바스크립트에서는 배열과 같은 기능부터 자바스크립트 위에 구축된 API들에 이르기까지 대부분의 것들이 객체이다.
객체는 관련된 데이터와 함수를 속성으로 가지는 집합니다.
또한, 객체 리터럴 구문을 사용해서 그 속성을 추가하거나 제거할 수도 있다.
속성 값으로는 다른 객체를 포함해 모든 타입을 사용할 수 있어서 복잡한 자료구조 구축이 가능하다.
속성은 키 값으로 식별하며, 키 값으로는 문자열 값이나 심볼을 사용할 수 있다.
📌 객체의 생성
여타 자바스크립트의 요소들과 마찬가지로, 객체를 생성하는 것은 변수를 정의하고 초기화하는 것으로부터 시작한다.
var person = {};
var person = new Object();
이렇게 중괄호를 사용하여 생성하면 된다.
객체를 생성할 때는 아래와 같은 방법으로 key(name)/value 값을 설정하면 된다.
var objectName = {
member1Name: member1Value,
member2Name: member2Value,
member3Name: member3Value
};
📌 객체의 특징
- 객체를 구성하는 키의 값은 어떤 것이라도 될 수 있다.
- 객체의 Key는 문자열 또는 기호여야 한다.
- Value는 모든 유형이 될 수 있다.
- 객체는 한 쌍의 key/value 뒤에 ,를 사용하여 그 다음에 오는 쌍과 구분해야 한다.
- 객체에서 key가 함수인 경우 그 것을 객체의 메소드라하고, 나머지를 객체의 프로퍼티라고 부른다.
📌 객체 접근
-
점 표기법
우리는 객체의 프로퍼티와 메소드에 점 표기법을 통해 접근할 수 있는데, 객체이름 person은 네임스페이스처럼 동작한다. 객체 내에 캡슐화 되어있는 것에 접근하려면 먼저 점을 입력해야한다.person.age
person.interest[1]
person.bio() -
하위스페이스
또한 우리는 다른 객체를 객체 멤버의 값으로 갖는 것도 가능하다.
예를 들어, 다음 person의 name: ['Bob', 'Smith']을
아래와 같이 바꿔보자.name: {
first: 'Bob'
last: 'Smith'
}
이렇게 우리는 하위 네임스페이스를 만들었다.
접근하는 방법은 person.name,first 와 같은 방법으로 가능하다.
- 괄호 표기법
객체의 프로퍼티에 접근하는 다른 방법으로 괄호 표기법을 사용하는 것이 있는데
점표기법 사용하는 대신 아래와 괄호를 사용할 수 있다.person['age']
person['name']['first']
이런 방식은 배열 속에 있는 항목에 접근하는 방법과 유사한데 실제로도 이것은 기본적으로 동일한 것이다. 한 항목을 선택하기 위해 인덱스 숫자를 이용하든 대신에 각 멤버의 값들과 연결된 이름을 이용한다.
📌 객체 멤버 설정하기
person.age = 45;
위처럼 객체 멤버를 설정하는 것은 기존에 존재하는 프로퍼티나 메소드로 값을 설정할 뿐만아니라 아래처럼 완전히 새로운 멤버를 생성할 수도 있다.
person.farewell = function() { alert("Bye everybody!"); }
📌 this는 무엇인가?
this는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킨다.
아래 예문을보자
val persion1 = {
name: 'Chris',
greeting: function() {
alert('Hi! I/'m ' + this.name + '.');
}
}
person1.greeting()은 "Hi! I'm Chris"를 출력한다.
이처럼 this는 실행중인 코드가 속해있는 객체를 의미하는데, 객체 리터럴을 직접 지정해서 사용하는 경우라면 유용하지 않겠지만, 동적으로 객체를 생성하는 경우에는 매우 유용하다.
참고
-https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures
-https://developer.mozilla.org/ko/docs/Learn/JavaScript/Objects/Basics
