JINBOK LEE·2022년 5월 16일
0
post-thumbnail

함수

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 대체)

  1. forEach()
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 함께 출력 가능
  1. map()
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']
  1. filter() (map과 비슷하다) - 조건에 true 인 값을 모두 반환한다.
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']
  1. some() (filter와 비슷하다) - 조건에 하나라도 true이면 true 결과값을 반환한다.
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
  1. every() (some과 비슷하다) - 조건에 모두 true이면 true 결과값을 반환한다.
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
  1. find()
    (filter와 비슷하지만,
  • array로 결과를 반환하는 filter와는 다르게, 결과를 string 타입으로 반환하고
  • 조건에 만족하는 값을 찾는 순간 해당 값을 return한다)
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은 출력되지 않고 끝난다.
  1. findIndex() (find에서 index 번호를 찾아준다)
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
profile
깔끔한 비즈니스 로직 설계를 위해 공부하는 FE 개발자

0개의 댓글