Javascript 객체, 메서드, 배열, 화살표 함수, this

Stella·2023년 11월 27일

Javascript

목록 보기
1/2

객체란?

객체는 프로퍼티의 집합이다.
자바스크립트는 객체 기반의 프로그래밍 언어이다. 원시 값을 제외한 나머지 값은 객체이다.

  • 원시 값 : 변경 불가능한 값
  • 참조 값 : 참조하여 값을 조작한다. 메모리에 객체로 저장됨
let myInfo={age: 10};
myInfo.age=20;
myInfo.name="sran";
  • 객체 타입의 값 : 변경 가능한 값

객체는 0개 이상의 프로퍼티로 구성된 집합이며, 프로퍼티는 키와 값으로 구성된다.

자바스크립트에서 사용할 수 있는 모든 값은 프로퍼티 값이 될 수 있다.
프로퍼티 값이 함수일 경우, 일반 함수와 구분하기 위해 메서드라 부른다.

  • 프로퍼티 : 객체의 상태를 나타내는 값
  • 프로퍼티 키 : 빈 문자열을 포함하는 모든 문자열 또는 값
  • 프로퍼티 값 : 자바스크립트에서 사용할 수 있는 모든 값
  • 메서드 : 프로퍼티를 참조하고 동작할 수 있는 동작이다

var person = {
name: 'Lee',
sayHello: function(){
console.log(Hello! My name is ${this.name}.);
}
};

console.log(typeof person);
console.log(person);

  • 빈 객체
    const car = new Object();
    car.color = 'red'; // 새 속성을 추가할 수 있다.
    const str = {};
    console.log(typeof empty);

  • 객체 속성에 접근
    console.log(car.wheels);
    console.log(car['color']);
    console.log(car[key]);

  • 객체의 복사 

Object.assign()을 사용한다.

const secondCar = Object.assign({}, car);
car.wheels = 4;
console.log(car);
// {color: 'red', wheels: 4}

메서드

프로퍼티 값이 함수일 경우 일반 함수와 구분하기 위해 메서드라 부른다. 메서드는 객체에 묶여 있는 함수를 의미한다.

배열

// {}, [], () -> 리터럴
const array = ['orange', ]; // 배열 리터럴 방식으로 배열 객체 생성

    1. concat() : 두 개 이상의 배열을 합쳐 새로운 배열을 반환.
    1. join() : 모든 배열 요소들을 string으로 변환한다.
    1. slice() : 일부 요소를 일부 요소들을 잘라서(가져다가) 새로운 요소로 반환한다.
      let slicedFishArr = fish.slice(2); // 2번 인덱스부터 끝까지
      slicedFishArr = fish.slice(2, 4); // 2번 인덱스부터 4번 인덱스까지

  • console.groupEnd() 메서드는 웹 콘솔 로그의 현재 인라인 그룹에서 나오는 것이다.

    1. indexOf() : 배열에서 찾고자 하는 요소의 가장 첫 번째 인덱스 위치만 반환한다.(찾고자 하는 요소가 중복이어도)
    1. push : 배열 끝에 추가
    1. unshift : 배열 시작에 값을 추가
    1. pop(); : 배열 끝에서 값 하나 제거
    1. shift() : 배열 시작에서 값 하나 제거
console.group('indexOf()'); // 웹 콘솔 로그에 새로운 인라인 그룹을 만든다. 
fish = ['shark', 'whale', 'koi', 'whale', 'nemo', 'hanchi'];

console.log(`fish array에서 'whale'의 가장 첫 번째 인덱스 위치 : ${fish.indexOf('whale')}`);
console.log(`한치가 있냐? 한치는 오징어임! ${fish.indexOf('hanchi')}`);
console.groupEnd();

- typeof 자료형 확인하기

const str = "hello";
typeof(str); // string이 출력된다.
typeof(null); // object

동일한 인덱스가 있을 경우 가장 첫 번째 인덱스 값을 반환한다.
찾고자 하는 인덱스가 없을 경우 -1를 반환

  • group 웹 콘솔 로그에 새로운 인라인 그룹을 만든다.

- literation

  • forEach() : 배열에 활용이 가능한 메서드, 파라미터로 주어진 함수를 배열 요소 각각에 대해 실행하는 메서드이다. return하는 값이 없다.

  • map() : 배열의 각 요소들을 순차적으로 특정한 연산을 진행한 후 새로운 배열 반환.

  • filter() : 배열의 각 요소들을 주어진 조건을 통과한 요소들만 모아다가 새로운 배열로 반환

  • reduce() : 주어진 배열을 하나의 결과값으로 반환한다.

  • find() : 주어진 테스트를 통과하는 첫 번째 값을 반환한다.

  • findIndex() : 주어진 테스트를 통과하는 첫 번째 값의 인덱스 반환한다.

- mutator

  1. pop() : 원본 배열의 가장 끝 요소를 제거하고, 해당 값을 반환, 추가 파라미터 없음.
  2. shift() : 원본 배열의 가장 첫 번째(앞) 요소 제거
  3. push() : 원본 배열의 가장 끝에 새로운 요소 추가한다.
  4. unshift() : 원본 배열의 가장 앞에 요소 추가

문자열

  1. 문자열 리터럴로 생성
const stringPrimitive = 'A new String';
console.log(stringPrimitive);
  1. 생성자를 통해 생성

//

  • trimming whitespace

함수

  • 어떤 목적을 가진 작업들을 수행하는 코드들이 모인 블럭이다.
    함수 선언을 위해 Keyword, name, parameter, body가 필요하다.

  • 함수 선언문 방식

1. ES6이전의 함수

1) 일반적인 함수
2) new 연산자와 함께 호출하여 인스턴스를 생성하는 일반적인 함수
3) 객체에 바인딩되어 메서드

const a = function(){
return 'a';
};

a() // 일반적인 함수이다.

new a();
const obj { a: a};
obj.a();

  • 콜백함수
    어떤 함수의 인자값으로 보내지는 함수로써, 무언가 발생했을 때 실행되는 함수이다.
    매개변수로 함수 객체를 전달해서 호출 함수 내에서 매개변수 함수를 실행하는 것을 말한다.

1) 콜백함수 사용

function sayHello(name, callBack) {
    console.log(`안녕 내 이름은 ${name}`);
    callBack()
}

sayHello('배고파', function nameing(name){
    console.log(name);
})

https://ui.dev/javascript-visualizer

2) 익명의 함수 사용
콜백 함수는 일회성으로 사용하는 경우가 많기 때문에, 코드의 간결성을 위해 이름이 없는 '익명 함수'를 사용한다.

3) 화살표 함수 모양의 콜백
자바스크립트의 화살표 함수를 통해 '익명 화살표 함수'형태로 정의해서 사용할 수 있다.

function hello(callBack){
    let name = "Sondol";
    callBack(name);
}

hello((name)=>{
    console.log("안녕 나는 " + name);
})

4) 함수의 이름 넘기기

  • 동기 vs 비동기
    1) 동기 : 한 번에 하나의 작업을 수행한다. 한 작업이 실행되는 동안 다른 작업은 멈춘 상태를 유지하고 자신의 차례를 기다리는 것을 말한다.
    2) 비동기 : 어떠한 요청을 보내면 그 요청이 끝날 때까지 기다리는 것이 아니라, 응답에 관계없이 바로 다음 동작이 실행되는 방식이다.

  • forEach :

함수 기본값 인수

function calculatePrice(total, tax = 0.1, tip = 0.05) {
	// tax나 tip에 값을 할당하지 않으면 기본값으로 0.1과 0.05가 쓰인다.
    return total + (total * tax) + (total * tip);
}

function calculatePrice(total, arg1, arg2) {
	return total + (total * tax) + (total * tip);
}

calculatePrice(10);
// 예상 결과 : 11.5

(${groceryList(groceries.others)} 부분이다.
groceryList를 호출하여 다른 모든 others를 인수로 전달했다.

4-1
let result = ${a} ${c} ${d} ${b} ${e};

4-2
let result = ${a} ${c} ${b} ${e} ${d};
console.log(result);

4-3
console.log(`this is a ver long text a ver

- 스코프

변수에 접근할 수 있는 위치를 제어한다. 전역 스코프를 가지는 변수는 어느 곳에서나 접근할 수 있다. 블록 스코프를 가지는 변수는 변수가 선언된 블록 내부에서만 접근할 수 있다.

  • 스코프 체인
    일종의 리스트로서 전역 객체와 중첩된 함수의 스코프의 레퍼런스를 차례로 저장하고, 의미 그대로 각각의 스코프가 어떻게 연결(chain)되고 있는지 보여주는 것을 말한다.

.apply() 인수 목록이 담긴 배열을 받는다. 배열을 전달할 수 있고

- var, let, const 차이

var : 함수 스코프에 종속된다.
let : 블록 스코프로 종속된다.
const : 블록 스코프로 종속된다. 재할당을 통해 값이 변경될 수 없고, 선언될 수 없다.

TDZ

일시적 비활성 구역

기본적으로 const 사용
재할당이 필요한 경우에만 let을 사용
var는 ES6에서 절대 사용하지 않는다. 

let x=100;
if(x>50) {
	let x = 10;
}

console.log(x);
console.log(constant); // ReferenceError 발생한다.
const constant = 1;

객체

  • Object() : 객체

  • 리터럴 방식 : 주로 사용하는 방식이다.
    literal : 표기법 또는 값 그 자체를 의미
    객체 리터럴 : 객체를 생성하는 표기법

  • 배열 디스트럭처링 (Array destructuring)
    ES5에서 배열의 각 요소를 배열로부터 추출하여 변수 리스트에 할당한다. 

let arr = [1, 2, 3];
let one = arr[0];
let two = arr[1];
let three = arr[2];

console.log(one, two, three);
  • 객체 디스트럭처링 (Object destructuring)
    객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식이다.
const person = {
	first: "Alberto",
    last: "Montalesi",
};

const {first, last} = person;

화살표 함수

var greeting = (name) =>{
	return `hello ${name}`;
};

var greeting = name => {
	return `hello ${name}`;
};

var greeting=()=>{
	return "hello";
}; // 매개변수가 전혀 없을 경우
  • 화살표 함수는 익명 함수이다. 참조할 이름이 있다면 함수를 변수에 할당하면 된다.

Web API

응용 프로그램을 개발할 때 빠르고 편리하게 개발할 수 있도록 작성된 코드의 묶음

이벤트

웹 페이지가 사용자와의 상호작용을 위해 활용되는 개념
특정 동작에 따라 웹 페이지의 동적인 처리를 가능하게 할 때 사용하는 개념이라고 본다.

profile
Stella
공부 기록
다음 포스트

Javascript3

0개의 댓글