함수
a. 과거 방식
function foo () {
console.log("Hello")
} // Hello
------------------------------------------------
b. 새로운 방식. 변수 안에 함수를 선언하여 사용할 수 있다.
let foo = () => {
console.log("Hello")
} // Hello
또는, 단일 문장 및 return 값이 하나 일때 아래처럼 생략하여 표현할 수 있다.
let foo = () => "Hello"
console.log(foo()) // Hello
! 화살표 함수는, 옛날의 function 의 문법을 대체할 수는 없다.
! function 문법에서는 this 사용이 가능하다.
------------------------------------------------
예를 들어,
let age = 100
let person = {
name:"jinbok",
age:29,
getInfo:function() {
console.log(age)
}
}
person.getInfo() // 29가 출력되어야 할 것 같지만, 전역변수인 100이 출력되어버린다
------------------------------------------------
let age = 100
let person = {
name:"jinbok",
age:29,
getInfo:function() {
console.log(this.age) // this를 추가해 주어야 한다.
}
}
person.getInfo() // 위의 this를 통해 29가 출력된다.
------------------------------------------------
let age = 100
let person = {
name:"jinbok",
age:29,
getInfo:() => {
console.log(this.age)
}
}
person.getInfo() // undifined
// 화살표 함수의 경우 스스로 this를 생성할 수 없기 때문이다.
------------------------------------------------
let age = 100
let person = {
name:"jinbok",
age:29,
getInfo:() => {
console.log(this)
}
}
person.getInfo()
// window를 출력해버린다. (lexical scope) person이 포함된 this가 window이기 때문이다.
배열함수 (array function > for loop 대체)
let names = ["a","b","c","d","e","f","g"]
------------------------------------------------
a. 이전의 방식
for (let i=0; i<names.length; i++) {
console.log(names[i])
}
------------------------------------------------
b. 새로운 방식
names.forEach (function(item) {
console.log(item)
}
)
// forEach 라는 array function을 이용하여 알아서 alphabet을 출력 가능
------------------------------------------------
c. ES6 문법으로 표현하는 방식 (1회성 function 일때)
names.forEach((item)=>{console.log(item)})
// ES6의 새로운 문법으로 간략하게 표현 가능
names.forEach((item,index)=>{console.log(item,index)})
// 추가로, index 매개변수를 추가하여 출력값에 index 함께 출력 가능
let names = ["a","b","c","d","e","f","g"]
------------------------------------------------
let data1 = names.map((item)=>{return item})
// map function의 경우, 반드시 return을 해야 한다
console.log(data1) // ['a','b','c','d','e','f','g'] array를 출력함
// 또는,
let data2 = names.map((item)=>{return item+"man"})
// return 되는 값에 string 추가 등이 가능하다.
console.log(data2) // ['aman','bman','cman','dman','eman','fman','gman']
------------------------------------------------
------------------------------------------------
let ceoList = [
{name: "Larry Page", age:23, ceo:true},
{name: "Tim Cook", age:40, ceo:true},
{name: "Elon Musk", age:55, ceo:false},
]
------------------------------------------------
// 배열로 선언된 변수에서 특정 조건으로 객체를 출력하고 싶을 때
let data1 = ceoList.map((item)=>{return item.name})
console.log(data1) // ['Larry Page', 'Tim Cook', 'Elon Musk']
let data2 = ceoList.map((item)=>{return item.age})
console.log(data2) // ['23', '40', '55']
let ceoList = [
{name: "Larry Page", age:23, ceo:true},
{name: "Tim Cook", age:40, ceo:true},
{name: "Elon Musk", age:55, ceo:false},
]
------------------------------------------------
let data = ceoList.filter((item)=>{return item.age==23})
// return 하는 조건을 입력한다. 즉 필터링 하는 값을 입력한다.
console.log(data) // ['Larry Page']
let ceoList = [
{name: "Larry Page", age:23, ceo:true},
{name: "Tim Cook", age:40, ceo:true},
{name: "Elon Musk", age:55, ceo:false},
]
------------------------------------------------
let data1 = ceoList.some((item)=>{return item.age==23})
console.log(data1) // true
------------------------------------------------
let data2 = ceoList.some((item)=>{return item.age==100})
console.log(data2) // false
let ceoList = [
{name: "Larry Page", age:23, ceo:true},
{name: "Tim Cook", age:40, ceo:true},
{name: "Elon Musk", age:55, ceo:false},
]
------------------------------------------------
let data1 = ceoList.every((item)=>{return item.age==23})
console.log(data1) // false
------------------------------------------------
let data2 = ceoList.every((item)=>{return item.age==100})
console.log(data2) // false
------------------------------------------------
let data3 = ceoList.every((item)=>{return item.age > 1})
console.log(data3) // true
let ceoList = [
{name: "Larry Page", age:23, ceo:true},
{name: "Tim Cook", age:40, ceo:true},
{name: "Elon Musk", age:55, ceo:false},
{name: "Lee Jinbok", age:29, ceo:false}
]
------------------------------------------------
let data = ceoList.find((item)=>{return item.startswith("L")})
console.log(data) // Larry Page // Lee Jinbok은 출력되지 않고 끝난다.
let ceoList = [
{name: "Larry Page", age:23, ceo:true},
{name: "Tim Cook", age:40, ceo:true},
{name: "Elon Musk", age:55, ceo:false},
{name: "Lee Jinbok", age:29, ceo:false}
]
------------------------------------------------
let data = ceoList.findIndex((item)=>{return item.startswith("L")})
console.log(data) // 0