프론트 js 처음부터 뿌시기 4월 - 2 <JavaScript 기본 문법과 함수 정리>

1. 오늘 배운 내용

• 자바스크립트 기본 문법
• 함수
  • 함수 스코프 (스코프란 영향을 미칠 수 있는 범위)

2. Code Snippets

화살표 함수

// 일반 함수
function name() { ... }

// 화살표 함수
let arrowfun = (x, y, ...) => { ... }

// 한 줄로 표현 가능
let arrowfun = (x, y) => x + y 

// 매개변수가 하나면 괄호 생략 가능
let arrowfun = x => x

문자열 길이 구하기

let a = "Hello"
console.log(a.length) // 5

객체

// 객체 리터럴
let person = {
  name: "name",
  age: 30,
  gender: "Male",
};

// 생성자 함수
function Person(name, age, gender) {
  this.name = name;
  this.age = age;
  this.gender = gender;
}
let person1 = new Person("name", 30, "Male"); // 생성자 사용

// key, value 접근 (함수가 파이썬과 같다)
let keys = Object.keys(person)

// Object.assign()
Object.assign(newP, person);
let newPerson = Object.assign({}, person, { age: 35 }); // 특정값 수정

배열

// 배열 생성
let numbers = new Array(5);
console.log(numbers.length); // 5

// push: 배열 끝에 요소 추가
let fruits = ["사과", "바나나"];
fruits.push("오렌지"); // ["사과", "바나나", "오렌지"]

// pop: 마지막 요소 삭제
fruits.pop(); // ["사과", "바나나"]

// shift: 맨 앞 요소 삭제
fruits.shift(); // ["바나나"]

// unshift: 맨 앞에 요소 추가
fruits.unshift("포도"); // ["포도", "바나나"]

// splice: 요소를 삭제하고 새 요소 추가
fruits.splice(1, 1, "포도"); // ["사과", "포도", "오렌지"]

// slice: start부터 end 전까지 잘라냄

배열 메서드

// forEach: 각 요소에 대해 함수 실행
numbers.forEach(function(number) {
  console.log(number);
});

// map: 각 요소에 함수를 적용하고 새 배열 반환
let squaredNumbers = numbers.map(function(number) {
  return number * number;
});

// filter: 조건에 맞는 요소만 필터링하여 새 배열 반환
let evenNumbers = numbers.filter(function(number) {
  return number % 2 === 0;
});

// reduce: 배열의 모든 요소를 하나의 값으로 줄임
let sum = numbers.reduce(function(accumulator, currentValue) {
  return accumulator + currentValue;
}, 0);

// find: 조건에 맞는 첫 번째 요소 반환
let foundNumber = numbers.find(function(number) {
  return number > 3;
});

ES6 기능

// let 변수, const 상수
let variable = "변수";
const constant = "상수";

// 구조 분해 할당
let [value1, value2] = [1, "new"]
console.log(value1); // 1
console.log(value2); // "new"

// 단축 속성명 -> key-value 명이 같으면 key 생략 가능
const name = "nbc";
const age = 30;
const obj = {
  name,
  age
}

// 전개 구문 (Spread)
let arr = [1, 2, 3];
let newArr = [...arr, 4]; // [1, 2, 3, 4]

let user = {name: "nbc", age: 30};
let user2 = {...user}

user2.name = "nbc2"
console.log(user.name) // nbc
console.log(user2.name) // nbc2

// 나머지 매개변수 (Rest parameters)
function func(a, b, ...args) {
  console.log(...args)
}

// 템플릿 리터럴
const name = "nbc";
const greeting = `안녕하세요, ${name}님!`;

함수의 특징

// 일급객체 함수
const name = function() { ... }
const name = () => { ... }

// 함수를 인자로 전달
function callFun(func) { func() } 
callFun(name) // name함수 매개변수로 넘겨줌

// 콜백함수: 매개변수로써 쓰이는 함수
// 고차함수: 함수를 인자로 받거나 return하는 함수

주의: 객체 안에서 화살표 함수 사용 시 this.name이 undefined가 된다. (화살표 함수는 자신만의 this를 가지지 않음)

// 배열에도 함수 넣기 가능
const Arr = [
  function() { ... },
  function() { ... }
]

Map과 Set

// Map
const myMap = new Map();

myMap.set('key', 'value');
myMap.get('key');

// 반복 - keys, values, entries
for (const key of myMap.keys()) { console.log(key); }
for (const value of myMap.values()) { console.log(value); }
for (const entry of myMap.entries()) { console.log(`${entry[0]}: ${entry[1]}`); }

// 메서드
console.log(myMap.size);
console.log(myMap.has('key')); // true/false

// Set - 고유한 값만 저장
const mySet = new Set();

mySet.add("value1");
mySet.has("value1"); // true

// Set 반복 (무조건 values)
for (const value of mySet.values()) { console.log(value); }

console.log(mySet.size);

3. 학습하며 어려웠던 점과 배운 점

• 배운점: 자바스크립트에도 함수 형태로 생성자가 존재한다.
• filter 안에 람다함수로 .filter((item) => (item % 2 === 0)) 으로 해도 되는지 궁금했는데, 이는 올바른 문법이고 사용 가능하다!
• 객체 안에 함수 작성 시 화살표 함수(() => {})를 사용하면 this를 사용할 수 없다.
• 배열에도 함수를 요소로 넣을 수 있다.