1. This
1-1. 그냥 쓰거나 함수 안에서 쓰면 this는 window를 뜻한다.
console.log(this)를 그냥 출력해보면 window{어쩌구} 이런 값이 나온다.
비슷하게 일반 함수 내애서 this라는 값을 불러보면 똑같은 window라고 출력된다.
1-2. strict mode 일 때 함수 안에서 쓰면 this는 undefined 이다.
'use strict'라는 키워드를 페이지 최상단에 추가하면 strict mode로
자바스크립트를 작성가능하다.trict mode에선 var 키워드 없이 변수를 선언하거나,
변수를 arguments라는 이상한 키워드로 선언하거나 그런 실수를 방지해준다.
strict mode에선 this 키워드를 일반함수 안에서 불렀을 때 undefined라는 값으로 강제로 지정해준다.
1-3. object 자료형내의 함수에서 this를 사용하면 '주인님'이라는 뜻이다.
메소드안에서 this를 쓰시면 this는 메소드를 가지고 있는 오브젝트를 뜻합니다.
1-4. constructor 안에서 사용하면 constructor로 새로 생성되는 오브젝트를 뜻한다.
자바스크립트에서 오브젝트를 비슷한걸 여러개 만들고 싶을 경우
오브젝트를 복사하는게 아니라 constructor라는걸 만들어서 사용한다.
쉽게 말하면 constructor는 오브젝트 복사해서 생성해주는 기계이다.
여기서의 this는 기계로부터 새로 생성될 오브젝트들을 의미합니다.
this.이름 = 'Kim' 이건
새로생성되는 오브젝트의 이름 key값에 'Kim'이라는 value를 집어넣어주세요
라는 뜻이다.
4. eventlistener 안에서 쓰면 this는 e.currentTarget이라는 의미이다.
여기서 this를 소환하면 이것은 바로 e.currentTarget이라는 뜻과 똑같은 의미이다.
e.currentTarget은 지금 이벤트가 동작하는 곳을 뜻한다.
5. arrow function은 내부의 this값을 변화시키지 않는다.
함수가 쓰인 위치에 따라서 내부의 this값이 변하지만
arrow function은 어디서 쓰든간에 내부의 this값을 변화시키지 않는다.
그러니까 바깥에 있던 this의 의미를 그대로 내부에서도 사용하는 함수가 바로 arrow function 이라는 함수이다.
2. var, let, const와 선언, 할당, 범위
2-1. 변수 문법
변수는 자료를 임시로 저장하는 공간이다.
1. var이라는 키워드 오른쪽에 작명을 하시고, 변수에 저장할 자료를 등호로 집어넣으면 된다.
2. 오브젝트, 어레이, 함수 등 모든 자료들을 담을 수 있다.
3. 그리고 var 이름이라는 부분은 선언, 이름 = Kim 이라는 부분은 값 할당이라고 전문 용어로 표현한다.
2-2. 변수의 선언
이렇게 var,let,const 키워드를 이용해 변수를 만들겠다고 선언할 수 있다.
그런데 var키워드는 재선언이 가능하고,
let,const키워드는 재선언이 불가능하다.
let, const로 만들면 이렇게 같은 이름의 변수를 두번 이상 재선언할 수 없다.
나중에 변수 이름을 실수로 중복해서 만드는 실수를 방지해줄수 있다.
2-3. 변수의 값 할당
선언과 할당은 동시에 할 수 있다.
그런데 변수를 var,let으로 만들면 재할당이 가능하고 const로 만들면 값 재할당이 불가능하다.
const로 변수 만들면 나중에 등호를 이용해 값 변경이 불가하다는 소리다.
바뀌면 안되는 값을 저장하고 싶을 때 사용하면 좋다.
const 변수에 오브젝트를 담으면 오브젝트 내의 데이터는 변경 가능하다
완전 변경불가능한 오브젝트를 만들고 싶다면
Object.freeze()라는 자바스크립트 기본함수가 있습니다.
Object.freeze() 소괄호에 오브젝트를 담으시면 불변의 Object가 완성됩니다.
(하지만 오브젝트 내의 오브젝트까지 freeze해주진 않습니다)
2-4. 변수의 범위
변수를 만들면 존재범위가 잇다.
var변수는 존재범위가 function이다.
let,const 변수는 존재범위가 거의모든 {중괄호}이다..(for,if,function 등)
▲ 위의 예제처럼 var 변수는 function 내에서 만들면 function 내에서만 쓸 수 있다
function 바깥에서 부르면 없다고 나온다.
▲ 위의 예제처럼 let 변수는 {} 중괄호 내에서 만들면 중괄호 내에서만 쓸 수 있다.
중괄호 바깥에서 부르면 없다고 나온다
함수, 변수의 Hoisting 현상
자바스크립트는 변수나 함수를 선언하면 Hoisting이라는 현상이 일어난다.
자바스크립트는 변수나 함수의 선언부분을 변수의 범위 맨 위로 강제로 끌고가서 가장 먼저 해석하는데
그게 Hoisting 입니다.
3. Tagged Literals
3-1.
ES6는 tagged literals라고 해서 함수로 문자 해체분석기능을 만들어줄 수도 있다.
문자 중간중간에 있는 단어 순서를 바꾸거나 변수를 제거하거나 할 때 유용하다.
▲ 맨 마지막줄에서 함수를 실행시킬 때 소괄호가 아니라 문자를 이용해서 함수를 실행시킬 수 있다.
실행할 함수이름을 쓰고 소괄호 대신 백틱 문자를 붙여주면 된다.
위의 코드에서는 해체분석기()라는 함수가 실행되고 있다.
▲함수에 파라미터 두개를 추가해준다.
이제 이 함수는 막줄처럼 문자열을 이용해서 실행시키면 그 문자열 해체분석역할을 할 수 있다.
첫째 파라미터 문자들은 백틱 내의 순수 문자만 골라서 Array로 만들어놓은 파라미터이고,
둘째 파라미터 변수들은 백틱 내의 ${} 변수를 담는 파라미터이다. (백틱 내에 변수가 2개 3개다 그러면 파라미터를 뒤에 더 추가해주면 된다.)
4. Spread Operator
4-1. spread operator 문법
마침표를 연달아서 3개 ... 찍으면 그게 spread operator라는 문법이다.
한글로는 펼침연산자 이렇게 번역가능하고
쉽게 설명하자면 괄호제거 해주는 연산자 이다.
Array에 붙여보도록 하자
그럼 어레이라는 array에 붙어있던 괄호를 제거해준다
▲ 3번줄처럼 spread operator를 붙여서 출력해보시면 괄호가 제거된 'hello', 'world'만 콘솔창에 출력된다.
문자에 붙이면 문자에 붙은 괄호를 제거해준다
문자를 이런식으로 array처럼 출력할 수 있다.
문자에 spread를 붙이면 대괄호를 제거해 준다.
위 코드의 셋째줄을 출력해보면 콘솔창에 h e l l o 라는 문자들이 출력된다.
console.log('h', 'e', 'l', 'l', 'o') 이렇게 한거랑 똑같다고 보면된다.
그래서 spread를 문자에 붙이면 알파벳을 하나씩 펼쳐준다.
4-2. Array 합치기/복사
-
array 두개를 합치고 싶다면?
spread operator를 사용하면 매우 쉽다.
이렇게 한 뒤에 c라는 어레이를 출력해보면 [1,2,3,4,5]가 되어있다.
...연산자를 이용해서 괄호를 없앤 a와 b를 집어넣는다는 소리이다. -
array를 복사하고 싶다면?
▲등호 = 를 이용하시면 쉽게 a에 있던 값을 b에 집어넣을 수 있다. ( [1,2,3] 복사완료!)그런데 자바스크립트에선 복사를 이렇게 하시면 큰일난다.
등호로 복사를 하면 a와b변수는 [1,2,3]을 각각 따로 하나씩 가진게 아니라 값 공유가 일어난다.
그래서 a를 array를 수정하면 b도 똑같이 바뀌게 된다.
그래서 값을 공유하지않고 각각 독릭적인 값을 저장하도록 하려면
spread를 이용하면 된다.
▲spread를 이용해서 a값의 괄호를 제거해준 다음에 다시 괄호를 씌우면
a와b변수의 값공유가 일어나지 않는다.
4-3. Object 합치기/복사
object 두개를 합치고 싶다면?
o2를 만들고 싶은데 o1에 있던 내용들을 그대로 가져다가 추가하고 싶다면spread operator를 이용하면 된다.
이 연산자는 대괄호 뿐만아니라 중괄호도 제거해준다.
그래서 이렇게 쓰시면
o2라는 오브젝트를 출력해보면 a, b, c키값이 다 들어있다.
왜냐면 o1오브젝트를 spread 연산자를 이용해 괄호를 벗겨서 추가했기 때문이다.
오브젝트의 key값 중복이 발생한다면?
오브젝트 key값 중복이 발생하면 무조건 뒤에오는 key값이 이긴다.
spread의 사용장소
spread 연산자는 함수소괄호, 오브젝트 중괄호내, 어레이 대괄호내에서 사용하여야한다
다른 곳에서 썼다가는 에러가 날 수있다.
4-4. array를 파라미터 형태로 집어 넣고 싶을 때 사용 가능하다.
▲ 출력했을 때 10, 20, 30을 더해준 결과가 잘 출력된다.
5. REST 파라미터
5-1. ...rest
함수를 만들때...이라는 기호를 파라미터 왼쪽에 추가 가능하다
위 코드를 실행하보면 파라미터들이라는 변수를 출력해준다.
파라미터들이라는 변수는 모든 파라미터를 []array 안에 담고있는데
이게바로 rest 파라미터이다.
원하는 파라미터 왼쪽에 ...기호를 붙여주면
이 자리에 오는 모든 파라미터를 [] 대괄호로 감싸준 파라미터 라는 뜻이다.
그래서 출력해보면 [1,2,3,4,5,6,7]이 나온다.
5-2. ...을 다른자리에 사용한다면
그 자리에 있는 파라미터를 [] 안에 감싸준다고했는데
다른 자리에 쓰면 어떻게 될까?
▲ 위 코드를 실행해보면 [3,4,5,6,7]이 출력된다.
첫 두개의 파라미터는 a,b로 사용하는데
a,b 그뒤에 나오는 모든 파라미터는 대괄호에 감싸서 파라미터들이라는 array가 된다.
파라미터 종류가 많을 경우 arguments 문법보다 다루기 쉽고 간단해서 자주 사용한다.
쓰기전 주의사항
rest(나머지) 파라미터라는 뜻대로 나머지 부분에만 사용가능하다
그니까 항상 파라미터가 여러개면 rest는 항상 마지막 파라미터로 넣어야한다.
함수를 선언할 때 ...은 rest 파라미터
함수를 사용할 때 ...은 spread 연산자 6. class
6-1. class 키워드로 구현하는 constructor 기계 만들기
▲ 'new' 키워드를 이용해서 부모라는 기계에서 오브젝트를 새로 생성할 수 있다.
6-2. Prototype
기계가는 constructor가 가진 name,age 속성들을 그대로 물려받아서 오브젝트를 하나 뽑아주는걸
재산 물려주는 상속과 비슷하다고해서 상속이라고 부른다.
(그래서 상속해주는 것은 부모, 상속받는 오브젝트들은 자식이라고도 부른다.)
근데 자바스크립트엔 constructor말고도 상속기능을 구현할 수 있는 장치가 하나 더있는데,
바로 prototype이다.
6-3. 기계를 만들면 prototype이라는 항목이 기계안에 몰래 생성된다.
prototype이라는 비밀 공간은 왜 존재하고 어디에 쓰는 거냐면..
이것이 바로 부모의 유전자역할 을 해주는 일종의 비밀 공간이라고 보면 된다.
기계.prototype은 기계의 유전자이다.
기계.prototype에 뭔가 변수나 함수가 들어가있다면
기계로부터 생성되는 새로운 오브젝트(자식들)은 그걸 그대로 물려받아 쓸 수 있다.
참조
- prototype에는 값을 여러개 부여할 수도 있고 심지어 함수도 집어넣으실 수 있습니다.
object 자료처럼 다뤄주시면 됩니다.- prototype에 추가된 데이터들은 자식들이 직접 가지는게 아니라 부모만 가지고 있습니다.
Q.prototype으로 상속시키는거랑 constructor로 상속시키는거랑 차이가뭐죠?
A.자식들이 값을 직접 소유하게 만들고 싶으면 constructor로 상속시키면되고
부모만 가지고 있고 그걸 참조해서 쓰게 만들고 싶으면 prototype으로 상속시키면된다.
보통은 상속 할 수 있는 함수 같은 것들은 prototype으로 많이 만든다.
7. extend/super
7-1. class를 상속한 class를 만들고 싶을 때 쓰는 extend.
할아버지라는 class를 하나 만들었다고 치자.
할아버지 class는 성과 이름이라는 속성을 가지고 있다.
그런데 이 class가 너무나 유용한 나머지 이것과 유사한 class를 하나 더 만들고 싶다면
class를 하나 더 만들어서 내용을 복붙하면 된다.
하지만 class안에 복사할 내용이 너무나도 많으면 코드도 길어진다.
그래서 extend라는 문법을 만들었는데
이걸 이용해서 class를 만들면 기존에 있던 class의 내용을 그대로 복붙해서 만들어낼 수 있다.
extend는 이렇게 사용하면 된다.
그럼 이제 할아버지라는 class를 그대로 복붙한 아버지라는 class가 생성된다.
new 아버지('만수'); 이렇게 하시면 성과 이름을 가진 object 자료가 하나 생성된다.
7-1. 아버지라는 class에는 새로운 속성을 추가하고 싶으면?
당연히 아버지 constructor안에 내용을 추가하면된다.
super()라는 함수는
"extend로 상속중인 부모 class의 constructor()"를 의미한다.
쉽게 말하면 할아버지 class의 constructor()랑 똑같다는 소리이다.
그래야 에러없이 this.나이 이런걸 추가할 수 있다.
근데 할아버지 class의 constructor()에는 name 파라미터를 입력할수 있었는데
그것도 똑같이 따라서 명시해줘야지 할아버지가 가진 속성들을 정확히 상속 받을 수 있다.
7-2. class간에 함수를 상속시키고 싶다면?
이 때도 super를 사용하면 된다.
super라는걸 저렇게 prototype 함수안에서 쓰면
아까의 super와 약간 다른의미가 된다.
여기서의 super는 부모 class의 prototype을 의미한다
super는 뜻이 두개이다.
1.constructor 안에서 쓰면 부모 class의 constructor
2.ptrototype 함수 안에서 쓰면 부모 class의 prototype
8. getter/setter
자바스크립트 getter 와 setter를 알아보자.
얕게말하자면 오브젝트 내의 함수들을 괄호없이 쓸 수 있게 만들어주는 키워드인데
깊숙히 들어가면 데이터의 무결성을 보존하기 위해 쓰는 키워드라고 보면 된다.
8-1. get/set 키워드
▲ setAge() 함수 만들 때 왼쪽에 set이라는 키워드를 추가하시면
이제 등호로 데이터를 입력할 수 있다
보기도 쉽고 직관적이기 때문에
set을 사용합니다. 그리고 set 붙은 함수들은 setter라고 부른다. (데이터를 set 하는 (수정하는) 함수라는 뜻)
▲ nextAge()라는 함수를 만들 때는 get 키워드를 사용가능하다.
그러면 이제 소괄호 없이 nextAge를 사용해서 데이터를 꺼낼 수 있다.
보기도 쉽고 직관적이기 때문에
get을 사용한다. 그리고 get 붙은 함수들은 getter라고 부른다. (데이터를 get하는 (가져오는) 함수라는 뜻)
8-2. get/set 사용하는 기준은
그냥 데이터를 뽑아주는, 가져와주는, get 해주는 함수들은 get을 사용하면되고,
데이터를 입력해주는,수정해주는,set해주는 함수들은 set을 사용하면된다.
그리고 규칙도 있는데
set함수는 데이터를 입력해서 수섲ㅇ해주는 함수니까 파라미터가 한개 꼭 존재해야하고
get함수는 파라미터가 있으면 안되고 함수 내에 return을 가져야합니다.
잘못쓰면 에러가 난다.
8-3. class에서 사용하는 get/set
class 안에서 함수 만들 때 get/set 키워드를 이용해서 getter/setter식으로 함수를 만들 수 있다.
class 안의 함수들을 getter/setter로 만들어 쓰고 싶으면 이렇게 하면 된다.
이제 새로 뽑인 object인 사람1은
사람1.nextAge;
사람1.setAge = 50;
이렇게 사용하실 수 있겠다!
9. 틀린그림 찾기능력이 향상되는 Destructuring 문법
array,objct 자료형에 있는 중요한 자료들을 변수로 꺼내고 싶으면 어떻게 할까
한두개면 모르겠는데 여러개의 자료를 뽑아서 변수 만들려면 코드가 너무 길어질 것이다.
그럴 때 destructoring 문법을 사용하면 변수를 쉽게 만들 수 있다.
9-1. Array 안에 있는 데이터를 변수에 담는 방법
[2,3,4]라는 array가 있는데
여기안에있는 3개의 데이터를 전부 밖으로 꺼내서 변수에 담고 싶으면 어떻게 할까?
이런식으로 할 수 있는데 더 쉬운 방법이있다.
[2,3,4]라는 자료랑 비슷한 모양으로 변수를 선언해주시면 된다.
변수 이름은 아무렇게나 해주시면 되는데,
그럼 a,b,c 변수가 세개 생성되는데 각각 2,3,4라는 자료를 가집니다.
9-2. Object 안에 있는 데이터를 변수에 담는 방법
object도 좌우를 똑같이 맞춰주면 변수가 생성된다.
그럼 a, b라는 변수가 생성되고 Kim과 30이라는 자료를 각각 할당해 준다.
이런식으로 할 수 있는데 더 쉬운 방법이있다.
name : name을 name 이렇게 하나로 생략이 가능하다.
