[자바스크립트 JavaScript] 화살표 함수, 조건부 실행, 객체와 배열 메서드

• 화살표 함수
• 조건부 실행
• 객체
• 배열
• 콜백함수를 이용한 배열 메서드

 

 

화살표 함수

• 익명함수로만 사용이 가능하기 때문에 함수 표현식으로 작성된다.
• 함수 몸체 구문이 한 줄이라면 중괄호 생략이 가능하고 암묵적으로 return이 된다.
• 매개변수도 한 개일 경우 소괄호 생략이 가능하다

let arrowFunc01 = (x, y) => {
  return x + y;
}

let arrowFunc02 = (x, y) => x + y;

let arrowFunc03 = x => x;

 

 

조건부 실행

 

AND(&&) 조건

• 1번과 2번은 같은 로직이다

let x = 10;

// 1.
if (x > 0) {
  console.log("x는 양수입니다");
}

// 2.
x > 0 && console.log("x는 양수입니다");

 

 

OR(||) 조건 

• z에 y값 또는 20을 할당한다
• y는 할당된 값이 없으므로(undefined) 20이 출력된다.

let y;
let z = y || 20;

console.log(z);

 

 

---

객체

• key , value로 이루어진 데이터 묶음
• 하나의 변수에 여러 값을 넣을 수 있다

 

생성자 함수를 이용한 객체 생성 방법

 function Person(name,age,gender){
  this.name=name;
  this.age=age;
  this.gender=gender;
 };

 let person1= new Person("홍길동",30,"남자");
 let person2= new Person("홍길순",20,"여자");

console.log(person.name);

 

 

객체의 메서드

 

• Object.key() : key 를 가져오는 메서드

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자",
};

let keys = Object.keys(person); // 소괄호에는 접근할 객체명을 입력
console.log("keys => ",keys);
// 배열형태로 값이 출력된다

 

 

• Object.values() : value 를 가져오는 메서드

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자",
};

let values = Object.values(person);
console.log("values => ",values);
// 배열형태로 값이 출력된다

 

 

• entries : key와 value 를 묶어서 배열로 만든 배열(2차원 배열)

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자",
};

let entries = Object.entries(person);
console.log("entries => ", entries);

 

 

• assign : 객체 복사

let person = {
  name: "홍길동",
  age: 30,
  gender: "남자",
};

let newPerson = {}; // 객체를 복사해서 넣을 공간
Object.assign(newPerson, person); // 복사할 곳, 복사할 객체
console.log("assign => ", assign);

// 객체의 형태는 그대로 복사하되, 값을 변경하고싶은 경우
let newPerson1 = {};
Object.assign(newPerson1, person, { gender: "여자" });
console.log("assign => ", assign);

 

 

• ... ( spread operator  ) :  객체의 key:value 를 개별 요소로 분리해준다

let person5 = {
  name: "홍길동",
  age: 30,
};

let person6 = {
  gender: "남자",
};

let perfectMan = { ...person5, ...person6 };
console.log(perfectMan);

 

 

---

배열

 

• 배열 크기 지정 

let number = new Array(5);
console.log(number.length);

 

 

배열의 메서드

 

• push : 배열 마지막에 요소 추가

let fruit = ["사과", "바나나", "키위"];

fruit.push("오렌지");
console.log(fruit);

 

• pop : 배열 마지막 요소 삭제 

let fruit = ["사과", "바나나", "키위"];

fruit.pop();
console.log(fruit);

 

• shift : 배열 첫 번째 요소 삭제

let fruit = ["사과", "바나나", "키위"];

fruit.shift();
console.log(fruit);

 

• unshift : 배열 첫 번째에 요소 추가

let fruit = ["사과", "바나나", "키위"];

fruit.unshift("포도");
console.log(fruit);

 

• splice : 시작 위치, 삭제할 개수, 추가할 요소

let fruit = ["사과", "바나나", "키위"];

fruit.splice(0, 2, "대추");
console.log(fruit);

 

• slice : 시작위치, 마지막 위치(ex : 0번부터 2번 전(1번)까지) 요소를 추출하여 새로운 배열을 반환

let fruit = ["사과", "바나나", "키위"];

sliceFruit = fruit.slice(0, 2);
console.log(sliceFruit);

 

---

 

콜백 함수를 이용한 배열의 메서드

 

• 콜백 함수 : 매개변수 자리에 함수를 넣는것

let numbers = [1, 2, 3, 4, 5];

numbers.forEach(function (item) {
  console.log(item);
});

 

• map : 원본 배열을 변경하지 않고, 각 요소에 대해 주어진 콜백 함수를 적용한 새로운 배열을 반환한다.(원본 배열의 길이만큼) 반드시 return이 있어야한다.

let numbers = [1, 2, 3, 4, 5];

let newNumbers = numbers.map(function (item) {
  return item * 2;
});

console.log(newNumbers);

 

• filter : 함수가 true를 반환하는 요소들로 이루어진 새로운 배열을 생성한다.

let numbers = [1, 2, 3, 4, 5];

let filteredNumbers = numbers.filter(function (item) {
  return item === 5;
});
console.log(filteredNumbers);

 

• find : 함수가 true를 반환하는 첫 번째 요소를 찾아 반환한다(조건을 만족하는 요소가 없으면 undefined를 반환한다.)

let numbers = [1, 2, 3, 4, 5];

let result = numbers.find(function (item) {
  return item > 3;
});
console.log(item);