this는 자바스크립트 객체 내부에서 자기 자신을 가리킬때 사용하는 키워드이다.

지금 콘솔창에 console.log(this)를 입력하면 window객체가 출력되는것을 확인할 수 있을것이다.

다음 코드를 살펴보자.

1
2
3
4
5
6
7
8
let elephant = {
    name : 'jane',
    gender : 'female',
    yearOfBirth : 2010,
    calculateAge : function(){
    console.log(2019 - this.yearOfBirth);
    }
}
 cs

elephant.calculateAge()를 실핼하면 9가 출력된다.

그렇다면 메소드 함수의 this.yearOfBirth가 elephant.yearOfBirth라는것을 알 수 있다.

위 객체와 같은 메소드를 가진 eagle 객체가 있다고 가정하자.

eagle.calculateAge = elephant.calculateAge 후 eagle객체의 함수를 실행시켜보면 eagle 객체의 메소드가 적용되어 작동하는것을 확인 할 수 있을것이다.

주의할 점은 객체 내부에 선언되었더라도 메소드로 선언되지 않을 경우, this는 window 객체를 가리키게 되므로 반드시 메소드로 선언했을 경우에 사용 가능하다.

'웹 > JavaScript' 카테고리의 다른 글

-JavaScript- Hoisting이란?  (0) 2019.03.22
-JavaScript- Execution Context와 Execution Stack  (0) 2019.03.20
-JavaScript- 배열(array)  (0) 2019.03.13
JavaScript 문자열 기초 사용  (0) 2019.01.24
-JavaScript- 비교연산자 '=='과 '==='의 차이  (0) 2019.01.04

Hoisting은 코드를 읽을 때 변수와 함수가 먼저 선언되는것을 말한다.


자바스크립트 코드는 크게 두 단계를 거쳐 읽힌다.

1. Creation Phase

2. Execution Phase


Creation Phase에서는 변수/객체, 스코프 체인 생성과 'this' 변수의 값을 결정한다. 

Execution Phase에서는 현재 Execution Context를 생성한 함수의 코드들을 한줄 한줄 읽어낸다.


다음 코드를 보며 이해해보자.

1
2
3
4
5
foo();
function foo(){
    console.log(x);
}
var x = 'hello!';
cs

위 코드는 undefined를 출력한다.

c언어였다면 1번라인부터 오류가 출력되었을것이다.

하지만 자바스크립트에서는 변수와 함수를 Hoisting해 현재 Execution Context의 함수 내부 코드와 변수 할당을 실행하기 전에 변수와 함수를 먼저 선언한다.

따라서 실제로는 1번라인이 실제로 싫행되기 전에 foo함수와 x변수의 선언이 완료된 후 나머지 코드를 실행 하는것이다. 





'웹 > JavaScript' 카테고리의 다른 글

-JavaScript- this  (0) 2019.03.27
-JavaScript- Execution Context와 Execution Stack  (0) 2019.03.20
-JavaScript- 배열(array)  (0) 2019.03.13
JavaScript 문자열 기초 사용  (0) 2019.01.24
-JavaScript- 비교연산자 '=='과 '==='의 차이  (0) 2019.01.04

Execution Context와 Execution Stack에 대해 간단하게 알아보자.

모든 자바스크립트 코드가 작동되는 환경을 Execution Context라 한다.

간단히 말해 Execution Context는 변수 등의 정보를 저장하고, 우리가 작성한 코드들을 계산/실행하는 저장소와 같다고 보면 된다. 

다음 코드를 참고해보자.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var name = 'JellyBear';
 
function first(){
    var a = 'Hello!';
    second();
    var x = a + name;
}
 
function second() {
    var b = 'Hi';
    third();
    var z = b+ name;
}
 
function third(){
    var c = 'Hey!';
    var z = c + name;
}
 
first();
 
cs

첫번째 Execution Context는 전역 컨텍스트이고, 두번째는 first 함수, 세번째는 second 함수, 네번째는 third 함수이다.

이를 스택으로 쌓은것이 Execution Stack이다.

전역컨텍스트-> first -> second -> third -> (top) 순이다.

이를 third - second -first 순으로 pop해서 처리한다.

 


'웹 > JavaScript' 카테고리의 다른 글

-JavaScript- this  (0) 2019.03.27
-JavaScript- Hoisting이란?  (0) 2019.03.22
-JavaScript- 배열(array)  (0) 2019.03.13
JavaScript 문자열 기초 사용  (0) 2019.01.24
-JavaScript- 비교연산자 '=='과 '==='의 차이  (0) 2019.01.04

자바스크립트의 배열은 c언어와는 사뭇 다른 느낌이다.

자바스크립트의 배열에 대해 살펴보자.


1
2
let array = [1, 2, 3];
let ARRAY = Array(1, 2, 3);
cs

배열은 두가지 방법을 통해 생성할 수 있다.

1번 라인처럼 대괄호 안에 배열의 요소를 넣는 방법,

2번 라인처럼 Array() 안에 배열의 요소를 넣는 방법이 있다.

배열의 인덱스는 0부터 시작한다.(위 예시의 경우 array[0] === 1, array[1] === 2 ...)


그리고 자바스크립트의 배열의 경우 c언어의 배열보다는 c++의 벡터 클래스와 유사하다.

인덱스를 통해 엘리먼트에 접근할수 있고, 서로 다른 타입의 요소가 들어갈 수 있으며, 배열이 동적이다.

1
let array = [1, '한글', null];
cs


현재 배열의 크기를 넘어서는 인덱스에 새로운 요소를 추가한다면 어떻게 될까?

1
2
3
let array = [1, '한글', null];
 
array[5] = 'english';

cs



이와 같은 경우, array[3]과 array[4]가 undefined가 되고, array[5]에 새로운 값이 들어가게 된다.


'웹 > JavaScript' 카테고리의 다른 글

-JavaScript- this  (0) 2019.03.27
-JavaScript- Hoisting이란?  (0) 2019.03.22
-JavaScript- Execution Context와 Execution Stack  (0) 2019.03.20
JavaScript 문자열 기초 사용  (0) 2019.01.24
-JavaScript- 비교연산자 '=='과 '==='의 차이  (0) 2019.01.04

처음 c언어를 배울 때 가장 어려움을 느꼈던 부분이 문자열 부분이었는데, 자바스크립트에서는 상대적으로 문자열을 관리하기 간편하게 되어있다.


1
2
3
4
5
6
7
8
"string" + "test"
"stringtest"
 
"string" + "5"
"string5"
 
"string" + 5
"string5"
cs

기본적으로 자바스크립트에서는 문자열을 합칠 떄 +연산자를 지원한다.

이 때, "string" + 5 와 같이 문자열과 숫자를 +연산할 경우에는 숫자를 문자열로 형변환해 결과가 "string5"가 되는것을 알 수 있다.


1
2
3
4
5
6
7
8
let string = "문자열"
undefined
 
string[2]
"열"
 
string.length
3
cs



다음은 문자열의 특정 문자에 접근하는 방법이다.

특정 문자에 접근하려면 위 코드와 같이 "문자열"[num]형식을 사용하면 된다.

문자열의 길이를 받아오려면 "문자열".length를 사용하면 문자열의 길이를 구할 수 있다.



'웹 > JavaScript' 카테고리의 다른 글

-JavaScript- this  (0) 2019.03.27
-JavaScript- Hoisting이란?  (0) 2019.03.22
-JavaScript- Execution Context와 Execution Stack  (0) 2019.03.20
-JavaScript- 배열(array)  (0) 2019.03.13
-JavaScript- 비교연산자 '=='과 '==='의 차이  (0) 2019.01.04

프로그래밍 언어를 c/c++로 처음 접한 나로서는 '===' 연산자는 굉장히 생소했다.



기본적으로 ==과 ===의 기능은 동일해 보인다. 


다음 코드를 참고해보자.



1
2
3
4

5
6
7
8

9
10
11
12
//동일한 type간의 비교연산
1 == 1
true
1 === 1
true

'hello' == 'hello'
true
'hello' === 'hello'
true

'hello' == 'goodbye'
false
'hello' === 'goodbye'
false
cs


여기까지는 ==과 ===의 차이는 드러나지 않는다.


하지만 다음 코드에서 다른 점을 알 수 있다.



1
2

3
4
//다른 type간의 비교연산
1 == '1'
true

1 === '1'
false
cs

왼쪽 항은 숫자 오른쪽 항은 문자열을 넣고 비교연산을 수행해보았다.

'=='연산자는 true를 반환하고 '==='연산자는 false를 반환한다.

그렇다면 이 차이는 왜 발생하는것일까?



기본적으로, JavaScript에서 지원하는 비교연산자에는

1.strict equality comparison operator(===, !==)과 

2.type-converting equality comparison operator(==, !=)가 있다.


'==='연산자(strict comparison)는 각 피연산자가 반드시 같은 type이어야 하고, 문자열에서는 각 문자열의 문자, 위치, 순서가 완전히 일치할 경우에만 true가 리턴된다.


반면에 '=='연산자(type-converting comparison) 는 각 피연산자가 다른 type이더라도 비교를 시도하고 일치하면 true를 리턴한다.

이 때문에 '=='연산자는 의도치 않은 오류를 불러올 수 있는 문제를 갖고있다.



그렇기 때문에 비교연산이 필요한 대부분의 상황에서 '==='연산자 사용을 권장한다. 




아래 코드에서 '=='연산자의 특성을 확인할 수 있다.


1
2

3
4

5
6

7
8

9
10

11
12

13
14

15
16
'' == '0'
false

0 == ''
true

0 =='0'
true

false == 'false'
false

false == '0'
true

false == undefined
false

false == null
false

null == undefined
true

cs


아직 입문 단계이기때문에 여기까지만 이해하고 넘어가지만 추후에 조금 더 깊이있게 공부해보고싶은 내용이다.


'웹 > JavaScript' 카테고리의 다른 글

-JavaScript- this  (0) 2019.03.27
-JavaScript- Hoisting이란?  (0) 2019.03.22
-JavaScript- Execution Context와 Execution Stack  (0) 2019.03.20
-JavaScript- 배열(array)  (0) 2019.03.13
JavaScript 문자열 기초 사용  (0) 2019.01.24

+ Recent posts

티스토리툴바