1. 함수
함수란?
- 일반적으로 반복되는 코드를 하나로 묶거나, 의미를 부여하고 역할을 나누기 위해 사용하는 것을 함수라고 한다.
// 예시)
function 함수이름(인자1, 인자2, 인자3) {
// 명령문
}
console.log(함수이름(인수1, 인수2, 인수3)); // 명령문에 있는 내용을 실행한다.// 예시2)
function add(a, b) {
return a + b;
}
console.log(add(3, 5));// 예시3) 19이상의 성인에게만 맥주를 건네주는 방법
function adult(person) {
return person.age >= 19;
}
function orderBeer(person) {
if (adult(person)) {
console.log("맥주 나왔다! " + person.name + " 와서 마셔라.");
} else {
console.log("나이 더 먹고 와라 " + person.name);
}
}
let persons = [
{ name: "한동욱", age: 19 },
{ name: "김청년", age: 15 },
];
for (const person of persons) {
orderBeer(person);
}// Function keyword (함수 선언식)
function sayHello () {
return "hello, world!"
}// Function keyword (함수 표현식)
const sayHello = function(){
return "hello, world!"
}// 화살표 함수 이용
const sayHello = () => {
return"Hello, World !!"
}
sayHello();2. 객체와 배열 구조분해 할당
(1) 구조 분해 할당이란?
- 객체나 배열을 구조분해하여 나타내는 것
(2) 객체 구조분해 할당 코드 비교
// 예시1) 객체 구조분해 할당 사용 X
const user = {name: "손석구", age: 10};
console.log(user.name) // 손석구
console.log(user.age) // 10// 예시2) 객체 구조분해 할당 사용 O
const user = {name: "손석구", age: 10};
const { name, age } = user
console.log(name) // 손석구
console.log(age) // 10 (3) 배열 구조분해 할당 코드 비교
// 예시3) 배열 구조분해 할당 사용 X
const games = ['배틀그라운드', '리그오브레전드'];
console.log(games[0]) // 배틀그라운드
console.log(games[1]) // 리그오브레전드// 예시4) 배열 구조분해 할당 사용 O
const games = ['배틀그라운드', '리그오브레전드'];
const [battleGround, Lol] = games;
console.log(battleGround); // 배틀그라운드
console.log(Lol); // 리그오브레전드(4) 함수 내 구조분해 할당 코드 비교
// 예시5) 구조분해 할당을 사용 X
// user가 객체일 때
const getUserName = (user) => {
return user.name
}
// user가 배열일 때
const getUserName = (user) => {
return user[0]
}// 예시6) 구조분해 할당을 사용 O
// 객체일 때
const getUserName = ({name, age}) => {
return name;
};
// 배열일 때
const getUserName = ([name, age]) => {
return name
};(5) 호이스팅
- 자바스크립트가 코드를 읽어올 때 각 Scope(구역)에 들어있는
var,function과 같은 키워드로 선언된 코드는 아래와 같이 동작한다.
console.log(name); // undefined
var name = '강승현';
// 코드를 실행했을때 선언되지 않은 변수를 미리 참조했기 때문에
// 첫번째 줄에서 참조 에러가 발생해야 하는데 실제로는 발생하지 않는다.- 바로 Hoisting 이라고 불리우는 동작 때문인데,
var,function키워드로 선언하면 아래와 같이 동작한다.
// Hoisting 예시
var name;
console.log(name); // undefined
name = '이범규';- 이렇게 선언된 변수나 함수가 함수의 스코프 최상단으로 끌어올려진다는 의미
- 사실은 var, function 뿐만 아니라 let, const, class도 내부적으로는 모두 호이스팅된다.
그러나 다른 사람들이let,const가 호이스팅되지 않는다고 말하는 이유는, 자바스크립트 내부에 TDZ라는 (개념)영역이 존재하며 TDZ 영역에 존재하는 변수는 접근이 불가능한데, 실제 변수 선언이 실행되는 구문이 실행되기 전에는const,let,class로 선언된 이름은 모두 TDZ에 존재하여 참조 에러를 발생하기 때문
- 사실은 var, function 뿐만 아니라 let, const, class도 내부적으로는 모두 호이스팅된다.
3. spread operator (전개 구문)
// 기존에 있는 객체나 배열의 내용을 그대로 가져오거나 새로운 값을 덧붙여서 새로운 객체나 배열을 생성 가능
// 기존의 데이터 (객체나 배열)에는 전혀 영향을 주지 않고 복사
const box = {size: "big", color: "red"};
const newBox = { ...box}; // {size: "big", color: "red"}
const newBlueBox = {...box, color: "blue" }; // {size: "big", color: "blue"}4. 자주 쓰이는 메소드
(1) map()
- map 함수는 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환해준다.
// 예시1)
const array= [1,4,9,16];
//map 사용
const arr = array.map(x=>x*2);
//함수가 적용된 결과로 새로운 배열을 반환합니다.
console.log(arr); //[2, 8, 18, 32]// 예시 2)
let users = [
{firstName : "수잔", lastName: "알포트"},
{firstName : "다니엘", lastName: "롱바텀"},
{firstName : "제이콥", lastName: "블랙"}
];
let userFullname = users.map(function(element){
return `${element.firstName} ${element.lastName}`;
})
console.log(userFullname);
// ["수잔 알포트", "다니엘 롱바텀", "제이콥 블랙"](2) filter()
- filter 함수는 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
// 예시)
const fruits= ['사과', '귤', '배', '감', '바나나', '키위'];
//filter 사용
const result = fruits.filter(fruit => fruit.length < 2); // 한자릿수 과일
//함수가 적용된 결과로 새로운 배열을 반환합니다.
console.log(result); //['귤', '배', '감']
TIL