TIL #230404

객체타입(Object Types)

• 프로퍼티와 메서드를 가짐
  -> 프로퍼티 : 객체의 상태, 메서드 : 객체의 동작
• 값을 변수에 저장할 때 값 자체가 아닌 값의 위치가 저장됨

배열(Array)

데이터를 순서대로 저장하는 객체
원시타입과 달리 여러 개의 데이터를 한 변수에 저장할 수 있기 때문에 데이터를 추가하거나, 제거, 정렬, 검색 등 다양한 작업을 수행할 수 있도록 여러가지 메소드를 제공

배열의 특징

• 배열은 빈 배열로 생성하거나 요소가 포함된 배열로 생성할 수 있음
• 배열은 숫자를 사용하여 값에 접근할 수 있음
• 배열이 가지고 있는 원소의 길이를 나타내는 length 프로퍼티를 가지고 있음
• 배열 안에 다른 배열을 포함할 수 있음 -> 다차원 배열

배열의 메소드

• push() : 배열의 끝에 요소를 추가

• pop() : 배열의 마지막 요소를 제거

• unshift() : 배열의 첫번째 요소를 추가

• shift() : 배열의 첫번째 요소를 제거

• splice() : 배열의 요소 추가, 제거 또는 교체
  

• slice() : 배열에서 요소들을 추출하여 새로운 배열로 반환
  

• sort() : 배열의 요소 정렬
  ❗ 숫자 정렬이 제대로 되지 않는데 이유는 sort의 정렬 방식이 원소를 문자열로 전환한 후에 포인트의 순서대로 변환하기 때문이다.

• forEach() : 배열의 각 요소에 대해 주어신 함수 실행
  

• map() : 배열의 각 요소에 대해 주어진 함수를 실행하고, 그 결과를 새로운 배열로 반환

• filter() : 기존의 배열에서 특정 조건을 만족하는 요소들만 추출하여 새로운 배열 만듬
  
  
  
  
  

객체(Object)

여러개의 데이터를 한 변수에 저장할 수 있는 자료형
특별한 키를 통해 원하는 값에 접근 할 수 있는 키-값 쌍으로 이루어져 있음

객체의 특징

• 객체의 리터럴 표현은 {} 중괄호를 사용하여 생성, 각 key와 value는 : 콜론으로 구분, 그리고 키 값 쌍을 합쳐서 속성이라 표현
• 객체의 속성값에 접근하기 위해서는 객체 이름 + 점 연산자 + 접근하고자 하는 값의 key를 입력
• 객체의 속성을 추가하기 위해 객체 이름 뒤에 . 점과 새로운 속성 이름을 입력하고, 새로운 값 할당

객체의 메소드

• hasOwnProperty() : 객체가 특정 프로퍼티를 가지고 있는지를 나타내는 불리언 값 반환
• keys(), values() : Object.keys() 메소드 -> 객체의 속성 이름(key)들을, Object.values() 메소드 -> 객체의 속성 값(value)들을 배열로 반환

함수

함수의 구조

function 함수이름(parameter1, parameter2...) { // 함수의 선언
    // 실행코드...
    return 반환값
}

함수이름(argument1, argument2...) // 함수의 호출

파선아실

❗ 파라미터는 선언, 아규먼트는 실제 값

함수 사용 이유

• 재사용성이 높아짐
• 유지보수 용이
• 구조파악 용이

함수를 선언하는 여러가지 방법

• 함수 선언문과 함수 표현식

// 함수 선언문
function sum(x, y){
  return x + y;
}

// 함수 표현식
let sumXY = function(x, y){
  return x + y;
};
console.log(sum(10, 20));
console.log(sumXY(10, 20));

• 화살표함수

function 함수1(x, y) {
    return x + y
}
// 위 함수를 화살표 함수로 작성하면 아래와 같습니다.
let 함수1 = (x, y) => x + y

// 만악 함수 실행시 전달하는 인자가 한 개라면 소괄호를 생략할 수 있습니다.
let 함수2 = x => x + 10

// 화살표 함수 내부에서 한 줄 표현식만 반환한다면 return 키워드를 생략해도 됩니다.
let 함수3 = x => x + 10

let 결과 = 함수3(2);

console.log(결과);

• 즉시실행함수

(function() {
  console.log('이 함수는 만들어지자마자 바로 실행됩니다!');
})();


(function() {
	document.querySelector(".btn").addEventListener("click", function(){ 
	console.log('click!')
	});
})();