함수표현식
:
const add = function (x, y){
return x + y
}화살표 함수
:
const add = (x, y) => {
return x + y;
}
: const subtractor = x => y => {
return x - y
}
:htmlMaker = tag => textContent => `<${tag}>${textContent}</${tag}>`
Const divMaker = htmlMaker(div)
divMaker(codestates)
Const liMaker = htmlMaker(li)
liMaker(hello)
liMaker(hello, world)화살표 함수를 이용해 클로저를 표현
:
const adder = x => {
return y => {
return x + y;
}
}
adder(50)(10)SCOPE
: Scope는 변수의 값(변수에 담긴 값)을 찾을 때 확인하는 곳을 말한다.
자바스크립트 함수 호이스팅(hoisting)
: 함수 선언식으로 선언된 함수가 함수실행코드보다 밑에 있으면 그 밑에 있는
함수 선언식으로 선언된 함수가 '호이스팅'되어 실행되고,, 함수 표현식으로 선언
된 함수가 함수 실행코드보다 밑에 있으면 그 밑에 있는 함수 표현식으로 선언된
함수는 '호이스팅'되지 않아서 실행되지 않는다.
Ex)
Let funcExpressed = 'to be a function';
Console.log(typeof(funcDeclared())); // 'function'
Console.log(typeof(funcExpressed())); // 'string'
Function funcDeclared(){
return 'this is a function declaration';
}
FunctionExpessed = function() {
return 'this is a function expression';
}구글 크롬 개발자도구 콘솔에서 아무것도없이 console.log(this)를 적고
실행을 하면 Window {window: Window, self: Window, document: document, name: "", location: Location, …}
이런 코드가 나온다. This는 내가 배운 범위에서는 내부함수가 외부함수에 있는
변수를 쓰기위해 'this.위부함수의 변수이름' 이렇게 사용한다. '그렇게 this로
선언 안해도 잘 내부함수에서 외부함수변수 잘쓰던데요..?' 라는 의문이 생겼었다.
맞다. 사실 이 this는 객체안의 키의 값이 함수일때, 객체의 키 값을 사용하기 위해
만들어진 문법이다.(내가 배운 범위 안에서의 사용범위)
예를 들면..
const megalomaniac = {
mastermind: 'Joker',
henchwoman: 'Harley',
getMembers: function () {
return [this.mastermind, this.henchwoman];
},
relations: ['Anarky', 'Duela Dent', 'Lucy'],
twins: {
'Jared Leto': 'Suicide Squad',
'Joaquin Phoenix': 'Joker',
'Heath Ledger': 'The Dark Knight',
'Jack Nicholson': 'Tim Burton Batman',
},
};에서 getMembers란 키의 값이 return [this.mastermind, this.henchwoman];
을 하는 함수인데, 여기서 megalomaniac이란 객체의 키의 값을 사용하기 위해서
this를 사용한 것을 볼 수 있다...
다른 예시 2..
const megalomaniac = {
mastermind: 'James Wood',
henchman: 'Adam West',
birthYear: 1970,
calculateAge: function (currentYear) {
return currentYear - this.birthYear;
},
changeBirthYear: function (newYear) {
this.birthYear = newYear;
},
};다른 예시 3...
const megalomaniac = {
mastermind: 'Brain',
henchman: 'Pinky',
getFusion: function () {
return this.henchman + this.mastermind;
},
battleCry(numOfBrains) {
return `They are ${this.henchman} and the` + ` ${this.mastermind}`.repeat(numOfBrains);
},
};오답
1.
객체는 .length 못쓴다.. 쓰면 undefined 나옴(오로지 배열에서만..)
-
객체3 = Object.assign(객체1, 객체2)
(객체1 = 객체3) // true 즉, 객체1 과 객체3은 서로 같은 객체의 주소를 가지고 있음
(객체3 = 객체2) // false slice()랑 같은 효과, 즉 얇은 복사로 값만 복사해줌.. 새로운객체로 만들어준다는 얘기임.. 하지만 객체에서는 slice 못씀.. 오로지 배열에서만..
function getAllParamsByArgumentsObj() {
return arguments;
}
const argumentsObj = getAllParamsByArgumentsObj('first', 'second', 'third');
argumentsObj; // {0: 'first', 1: 'second', 2: 'third'} 가 출력됌만약 아무 매개변수가 함수에 선언이 안되있어도, 만약 인자로 값을 받고, 리턴값이 arguments라면
임의로 객체의 키를 0부터 시작해 값을 할당하여 저런 반환값이 나오게 된다.
- Array.from()
Array.from() 메서드는 유사 배열 객체(array-like object)나반복 가능한 객체(iterable object)를 얕게 복사해새로운Array 객체를 만듭니다. (Man 참조)
ex(mdn참조)
console.log(Array.from('foo'));
// expected output: Array ["f", "o", "o"]
console.log(Array.from([1, 2, 3], x => x + x));
// expected output: Array [2, 4, 6]구조 분해 할당(Destructing Assignment)
: 구조 분해 할당은 Spread 문법을 이용하여 값을 해체한 후, 개별 값을 변수에 새로 할당하는 과정을 말합니다.
EX) 배열
const [a, b, ...rest] = [10, 20, 30, 40, 50];
[a] // 10
[b] // 20
[...rest] // [30, 40, 50]EX) 객체
const {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40}
{a} //{a: 10}
{b} //{b: 20}
{...rest} //{0: 30, 1: 40, 2: 50}EX) 함수에서 객체분해
function a ({name, age, ...rest}){
return {...rest};
}
const aPerson = {
name: '아무개',
age: 23,
city: '엘에이',
finance: '10억'
};
console.log(a(aPerson)); // {city: "엘에이", finance: "10억"}단순복제는 완전히 동일한 객체,
얕은복사(shallow copy)는 복합객체(껍데기)만 복사, 그 내용은 동일한 객체
깊은복사(deep copy)는 복합객체 복사 + 그 내용도 재귀적으로 복사
