[JS] 자바스크립트 기본 (2) - 함수, 객체

thirty·2022년 4월 7일
0

JavaScript

목록 보기
10/11
post-thumbnail

🔷 함수

함수는 JavaScript에서 기본적인 구성 블록 중의 하나입니다. 함수는 작업을 수행하거나 값을 계산하는 문장 집합 같은 자바스크립트 절차입니다. 함수를 사용하려면 함수를 호출하고자 하는 범위 내에서 함수를 정의해야만 합니다.


🔸 함수 선언 방법

  1. 일반적인 함수 선언문
function func() { }
  1. 메서드로 생성
const obj = {
	prop: function() {}
}
  1. 생성자 함수
function MyObj() {}
  1. 익명 함수
const func = function() {
	return 'func';
};
  1. 화살표 함수 (ES2015+)
const arrowFunc = () => {}

  • 함수의 반환문 생략 가능하지만 undefined 는 계속 리턴되고 있다.
  • 함수는 중복으로 선언할 수 있다. 이 때, 마지막에 선언된 함수가 작동한다.
  • 따라서 만든 함수를 변수명에 저장한 함수 표현식으로 함수를 작성하는 것이 더 안전하다.
  • 화살표 함수는 function이라는 키워드가 빠지고 중괄호로 함수의 바디를 만들 수 있다.
  • 화살표 함수는 일반적인 함수와 생긴 것만 다른 게 아니라, 동작 방식 (this, argument) 를 처리하는 방식이 다르다.

(화살표 함수나 익명 함수는 더 깊게 공부했을 때 세부적으로 포스팅 할 것!)

🔸 구조 분해 할당

배열이나 객체의 속성을 해체해 그 값을 개별 변수에 담을 수 있게 하는 표현식.

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// expected output: 10

console.log(b);
// expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// expected output: Array [30,40,50]

// MDN

구조 분해 할당은 함수에 값을 넘길 때도 사용할 수 있다.

function func({ p1, p2, p3, p4 }) {
	console.log(p2, p4);
}

const result = func({
	p2: 'p2',
    p4: 'p4'
})

func 라는 함수에 선택적으로 p2, p4 값만 집어 넣어 사용할 수 있다. 원래 함수 전달이었다면 빠짐 없이 전달해주어야 했거나, 혹은 없는 값은 굳이 undefined 를 전달해줘야 했는데 구조 분해 할당을 이용하면 필요한 값만을 전달할 수 있다.

🔸 argument 객체

함수에 전달된 인수에 해당하는 Array 형태의 객체이다.

function func1(a, b, c) {
  console.log(arguments[0]);
  // expected output: 1

  console.log(arguments[1]);
  // expected output: 2

  console.log(arguments[2]);
  // expected output: 3
}

func1(1, 2, 3);

// MDN

함수에 전달된 매개변수에 argument[{index}] 인자로 접근할 수 있다.

  • 매개변수를 선언하지 않아도 사용할 수 있다.
  • 화살표 함수에는 argument 객체가 없어 사용이 불가하다.
  • 가변 인자를 넘길 때 편하게 사용할 수 있다.
  • 배열이 아니기 때문에 배열 메서드를 사용할 수 없다. (사용하고 싶다면 Array.from() 형 변환!)
  • 불안정하기 때문에 지양하라고 하셨다…!

🔸 나머지 매개변수

함수가 정해지지 않은 수의 매개변수를 배열로 받을 수 있다.

const func = (...nums) {
	return nums.reduce((prev, curr) => prev + curr)
}

console.log(func(1, 2, 3, 4, 5, 6, 7));
  • 위는 console.log 의 1부터 7까지 값들을 func에서 받아 덧셈 연산을 수행하는 코드이다.
  • 함수 정의에는 하나의 ... 만 존재할 수 있다.
  • 나머지 매개변수는 배열로 동작할 수 있어, 배열로 변환할 필요가 없다.
  • 화살표 함수에서 사용할 수 있다.
  • 다른 매개변수와 조합해 사용할 수 있다. 이 때, 나머지 매개변수는 반드시 함수 정의의 마지막 매개변수여야 한다.
    const func = (first, second, ...nums) => {}

🔷 객체

객체는 관련된 데이터와 함수(일반적으로 여러 데이터와 함수로 이루어지는데, 객체 안에 있을 때는 보통 프로퍼티와 메소드라고 부릅니다)의 집합입니다.


🔸 객체 생성

  1. 일반적인 객체 생성
const object = {
	property: 'value',
    // 객체가 속성을 함수로 가질 때 메서드라 한다.
    method: function() {}
}
  1. 생성자 함수로 객체 생성
function NewObject(name) {
	this.name = name
}
  • 생성자 함수에는 파스칼 케이스를 사용한다.
  • 객체로 사용할 때는 new 와 조합해 사용해야 한다.
    const new = new NewObject('name')

🔸 Object.create()

지정된 프로토타입 객체 및 속성을 갖는 새 객체를 만든다.

const newObject2 = Object.create(proto[, propertiesObject] {
      name: {
         value: 'jang',
         writable: true, // 덮어쓸 수 있는지
         enumerable: false, // 열거할 수 있는지
         configurable: true, // 객체 서술자 수정이 가능한지
      },
});

🔸 프로퍼티 열거

const obj = {
   prop1: 'value1',
   prop2: 'value2',
   prop3: 'value3',
   prop4: 'value4',
};

위의 열거된 프로퍼티의 값과 키를 가져와 열거할 수 있다.

  • 값을 가져올 때
for (const key in obj) {
   console.log(obj[key]);
}
  • 키를 가져올 때
for (const key in obj) {
   console.log(key);
}
  • 상속되거나 확장되서 사용할 변수의 위 변수를 가져오는 체이닝을 막기 위해 obj.hasOwnProperty(key) 를 사용해 이 객체가 key 를 가지고 있는 게 맞는 지 확인하는 작업을 거치기도 한다.

🔸 프로퍼티 접근자

접근자 프로퍼티에는 getter(획득자) 와 setter(설정자) 가 있다. 객체 리터럴 안에서 getter와 setter 메서느는 get과 set 으로 나타낸다.

const person = {
   _firstName: 'jang',
   location: 'korea',

   get firstName() {
      return this._firstName.toUpperCase();
   },

   set firstName(newFirstName) {
      if (typeof newFirstNaem === 'string') {
         this._firstName = 'undefined name';
         return;
      }

      this._firstName = newFirstName;
   },

   get fullName() {
      return (
         this._firstName + '' + this.lastName + ' ' + '입니다.'
      );
};

  • get 메서드
    get 메서드는 프로퍼티를 읽으려 할 때 실행된다. 직접적으로 내부 프로퍼티에 접근하는 것이 아니라, 메서드를 사용해 내부 변수를 안전하게 보호할 수 있다. 위의 이름에 접근할 때는, person.firstName() 으로 접근해 값을 가져올 수 있다.

  • set 메서드
    set 메서드는 프로퍼티의 값을 변경할 때 사용된다. person.firstName('이름') 으로 '이름' 값을 firstName() 메서드에 넣어 값을 설정하고 값을 반환할 수 있다.


🔸 프로퍼티 조작

  • 프로퍼티 추가
    person.lastName = 'name'

  • 프로퍼티 수정
    person.lastName = 'namename!'

  • 프로퍼티 삭제
    delete person.location;


🔷 this?

this… 인스턴스 느낌으로 어렵다! 간단하게는, 생성될 인스턴스라고 생각하면 된다. '생성된' 도 아니고 '생성될' 인스턴스를 가리킨다는 뜻은 다음과 같다.

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

const me = new Person('jang', 10, 'Korea');

위의 예제에서 this 는 즉, me 를 가리킨다고 생각하면 된다. Person 이라는 생성자 함수를 이용해 객체를 생성, me 라는 인스턴스를 만들었다. 이렇게 새로이 생성될 me 라는 인스턴스를 this 가 가리키고 있다고 생각하면 된다.

profile
thirty
이전 포스트

[JS] 자바스크립트 기본 (2) - 배열

다음 포스트

[JS] 22.04.24 TIL

0개의 댓글

관련 채용 정보