[Front-end🦁] #24 Array method, Object, 함수 / 13~14장

0. 어떤 공부를 해야할까

공통 : github / 정규표현식 / HTTP(BE에서 더 중요) / SEO (FE에 가까움)

FE : HTML / CSS / JS(AJAX) / REACT / (SASS) / (JQery) / WebPack
BE : JS / tailwind or bootstrap / Node / DB / Server

정답은 아니지만 이 정도로 나눠보면 좋을 것 같다.

1. 멋사 수업

배열 관련 method, object, function에 대해 나갔다.

딥다이브 책에서 다음 장에서 알아봐요~ 하고 넘어간걸 알려주셨다. 완전히 자바 느낌이다.

1. 배열

배열 선언 방법

let 과일 = ['사과', '수박', '복숭아', '딸기', '바나나'];
let 과일2 = new Array(5);
let 과일3 = new Array('사과', '수박', '복숭아', '딸기', '바나나');
let 제주과일 = ['귤', '한라봉', '천혜향'];

배열 method

// 원 배열에 영향 X
과일.toString(); // '사과, 수박, ...'
과일.join('!!*'); // 배열을 합치는데 요소 사이에 !!*
과일.concat(제주과일); // 합침.
제주과일.concat(과일);
// 원 배열에 영향
과일.push('메론'); 과일.pop(); // 진짜 Stack 함수라서 파이썬처럼 인자 넘겨주는거 안됨.
과일.slice(start, end+1); // - indexing 허용, end 안주면 start 부터 끝까지 잘림.
//
과일.shift(); // index 0 을 꺼내옴.
과일.unshift('귤'); // index 0 에 들어감.
string.split('.'); // .을 기준으로 나눠서 배열 만들어줌.
과일.splice(start, count); // start부터 count 개를 꺼내옴. 원래 배열에 영향.
과일.splice(1, 3, 'apple'); // 원 배열의 1부터 3개를 잘라오고, 원 배열의 해당 부분에 apple을 한개 넣음.
과일.sort(); // 사전식 기준 (아스키코드) 안에 함수를 넣어주면 그 순서대로 정렬됨.
과일.sort((a, b) => a - b); // 오름차순
과일.sort((a, b) => b - a); // 내림차순
과일.reverse(); // 배열 그냥 뒤집음

배열의 형변환

let 행렬 = [[1,2,3], [4,5,6], [7,8,9]];
행렬[0] + 행렬[0]; // '1,2,34,5,6' 문자열로 계산이 되어버림.
행렬[0] + ''; // 행렬 전체를 문자열로 만들고 싶을 때.

2. Object

Object

// key, value, property 를 array로 뽑아준다.
Object.keys(person);
Object.values(person);
Object.entries(person); 
// 반복문으로 접근 가능. 이런식의 반복문은 거의 안쓰긴 한다.
for (let [i, j] of [[1, 2], [3, 4]]) {
  console.log(i, j);
}
for (let [[i, j], k] of [[1, 2], 2], [[1, 2], 4]]) {
  console.log(i, j, k);
}
// 특정 property 정보를 가져옴.
Object.getOwnPropertyDescriptor(person, 'name'));

3. 함수

함수를 사용하는 이유
1. 재사용성
2. 아키텍처 파악
3. 유지보수

• 캡슐화 : 함수 내의 변수에 접근 불가능
• 추상화 : 안에 있는 코드를 보지 않고 함수만 보고도 어떤 작업을 하는지 알 수 있게.

parameter에 default argument 설정.

function add(a = 100, b = 200) {
  if (a == 100) {
    return
  }
  return a + b;
}

// 매개변수를 첫번째껀 안주고 두번째만 주는건 안됨. 한개만 주면 앞에꺼에 들어가니까.
add(undefined, 200); // NaN
add(null, 200); // 200 
// 그렇게 쓰고 싶을 때는 구조 분해 할당으로 object로 넘겨준다.
function add({ a = 100, b = 200 }) { 
  // { a = 100, b = 200 } 은 피연산자이므로 object literal이다.
  console.log(a+b);
}
add({b: 300}); // 400

구조 분해 할당

//  구조 분해 할당
var o = {p: 42, q: true};
var {p, q} = o;
console.log(p); // 42
console.log(q); // true
// 원래 위의 p, q 처럼 구조 분해할당을 하려고 a, b를 선언한건데,
var { a, b } = { a: 400 }; // b 를 안주면 b가 undefined
//  초기값을 줄 수 있어서 준 것 임.
var { a = 100, b = 200 } = { a: 400 }
// 결국 위의 함수는 object type ( 구조 분해 할당을 위한 ) 을 파라미터로 하고, object 를 인자로 받아서 분해한 후 사용하는 것. 

호이스팅의 차이.

mul(); a(); mul2(); // 가능 불가능 불가능
function mul (a, b) {
  return a*b;
} // 호이스팅 된다
let a = function(a, b) {
  return a*b;
} // 변수 호이스팅 시점에 호이스팅 된다.
let b = function mul2 (a, b) {
  return a*b;
} // 변수 호이스팅 시점에 호이스팅 된다.
// 함수 표현식은 런타임 전까지 변수에 undefined가 선언되어 있기 때문에 위에서 부를 수 없다.
// 가명함수도 마찬가지다 아직 표현식 계산도 안됐고, 변수에 할당도 안됐으니깐.

화살표 함수

// swift 에서 closure 사용 시 축약문법 하는 그런 느낌.
let a = (a,b) => return a-b;

어제 읽었는데 수업에서 나온 것들!

• String 은 primitive type 이라 immutable
• 함수 선언과 함수 표현식의 호이스팅 시점 근데 어제 대충 읽었는지 오늘 보는데 처음 보는듯한 기분이었다

3. Deep Dive

13. Scope 링크
14. 전역 변수의 문제점 링크

에 대해서 공부했다. 저작권 문제가 생길 수 있어서 해당 내용은 개인 글로 옮긴다.

3. 작은 회고

• 오늘은 js array method, Object, 함수에 대해 배웠다. 구조 분해 할당이라는 것에 대해서도 공부해보았다.
• scope 관련 부분을 읽었다. 위험하고 자원관리에 안좋은건 알겠는데, 해결책을 실무에서 어떻게 사용하는지 볼 수 있었으면 좋겠다.

• js에 빠져서 자꾸 다른 할 일을 미루는데 마크업 해야된다. 마크업해야돼!!!! 해야돼!!!!!!!!