210130_TIL
함수 선언식 vs 함수 표현식
함수 선언식 (함수라고 대놓고 선언!)
처음부터 봐온 함수라 익숙하다.
function func() {
logic
}호이스팅이 적용된다는 점이 특징.
개발자의 의도와 다르게 작동 할 수 있어 주의해야한다.
함수 표현식 (함수를 변수에 표현)
let func = function() {
logic
}
호이스팅이 적용되지 않고 클로저, 콜백을 사용할때 사용된다.
버그, 오류를 줄일 수 있고 예측이 더 쉽다.
호이스팅?
호이스팅이란 함수안에 있는 선언을 모두 끌어올려 함수 유효범위 최상단에 선언하게 끔 만들어주는 자바스크립트의 기능? 중 하나이다.
내부족으로 실제 메모리에는 영향을 주지 않는다.
들올린다는 hoist에서 가져온 말이며 선언 키워드 var에 적용되며 let, const에는 적용되지 않는다. 여기서 왜 var을 쓰지말고 let을 추천하는 이유가 호이스팅이 적용될 경우 개발자의 의도와 다르게 코드가 실행 될 수 있기 때문이다.
결국 호이스팅은 최대한 일어나지 않게 하는 것이 코드 작성할 때 좋다!
클로저를 사용하는 이유?
클로저가 이해하기 너무 복잡해서 이걸 도대체 왜 쓸까 궁금했었다. 결론은 당연하게도 조금 더 간단하고 효율이 좋은? 코딩을 하기 위해서 사용된다. 주로 내부 함수를 리턴해서 사용할 때 쓰여진다. 주로 함수를 공장처럼(Function Factory) 찍어내고 싶을 때 사용한다. 그리고 개발자의 가장 큰 고민 중 하나는 '변수명 정하기'라고 한다. 이런 고민을 해결해주기 위해 사용된다. 자바스크립트는 선언 키워드 없이 선언을 하게 되면 전역변수로 취급되어 오류가 발생 할 수 있다. 이러한 오류를 줄이고 변수가 겹치지 않게 자세한 정보를 주는 개념(Name Spacing)이다. 솔직히 이 두개가 완벽하게 이해되지 않는다. 관련 자료를 찾아봐도 내가 아직 배우지 못한 메서드나 정보가 너무 많아서 이해하기 어려웠다. 그래도 다급해하지 않고 천천히 알아 나가보려고 한다.
210131_TIL
주말동안 여자친구랑 열심히 놀아서 이틀 분량을 몰아쓰게 되었다. 그래서 전에 썼던 TIL보다 더 간략하게 쓴건 아니다..
this
이 this를 공부하기 전에 Office Hour(전체적인 질문 타임)나 Review에서 'this 어려워요', 'this 이해가 안가요', 'this 어떻게 쓰는거죠?' 라는 질문이 엄청 많아서 바짝 긴장했었다. 내가 이해하는데 쉬웠다는 건 아니지만 그래도 정말 어려운 편은 아니었다. (더 파고들면 정말 어렵지만 일단 내 수준에선..)
this가 가지고 있는 특징을 쭉 나열해보자면
가변적이다
함수를 호출하는 맥락
함수 안에서 사용
함수를 호출하는 방법 등..이 있다.
가변적이고 함수를 호출하는 맥락을 읽어야 한다는건 결국 같은 말이다. 우리가 영어를 해석할 때 '이건 단어의 뜻을 보지말고 문장의 맥락을 봐라'라는 말을 많이 들어 봤을 것이다. JS에서 this의 맥락을 보라는 말도 같은 의미로 사용되는데 언제 어떻게 호출하느냐에 따라 달라지기 때문이다.
JS에는 window라는 전역객체가 있다. 모든 걸 아우르는 조상님, 장로 같은 느낌이다. 그럼 그냥 크롬에서 콘솔창 키고 this를 찍으면 어떻게 될까? window가 호출된다. 그럼 객체 안에서 호출되면? 그 객체가 호출된다. 말 그대로 this가 소속되어 있는 객체 = this 이다.
let obj = {
num1: 1,
num2: 2,
plusnum: function() {
return this.num1 + this.num2;
},
}
console.log(obj.plusnum()) // 3여기서 this는 자신이 소속되어 있는 객체 obj가 된다!
그러뭍기 (흩어진 것을 한데 모으다)
객체는 길이를 구할 때 obj.length를 하면 안나온다
Object.keys(obj).length를 쓰자
in 연산자
명시된 속성이 명시된 객체에 존재하면 true
let arr = [1, 2, 3]
1 in arr // true
4 in arr // false
let obj = {
a: 1,
b: 2,
c: 3
}
'a' in obj // true
1 in obj // falsenew 연산자
객체를 하나 만들고 계속 다른 값을 넣어주고 싶을 때 사용한다
function whoAreYou(name, age) {
this.name = name;
this.age = age;
}
let myName = new whoAreYou('Jay', 18)
console.log(myName.name) // 'Jay'여기서도 this가 쓰였는데 이건 생성자 안에서 쓰였기 때문에 this는 생성자 함수로 생성된 인스턴스를..도대체 뭐가 뭔지 모르겠다. 구글링을 하던 도중 나의 콩만한 뇌도 이해시켜 주는 그림이 있어서 가져와 봤다.
(출처: https://victorydntmd.tistory.com/51)
new 연산자가 비어있는 객체를 하나 생성하고 그 객체에 this가 들어가서 this.property 즉 비어있는 객체의 값이 나온다..
Date(): 현재 날짜, 연도, 시간이 출력된다
new Date().getFullYear(): 현재 연도가 나온다
그런데 getFullYear()만 실행하면 ReferenceError가 뜬다
왜일까?
그 이유는 dateObj.getFullYear() 이렇게 사용해야하는 메서드이기 때문이다!
