2023. 02. 14) 항해 9일차

오늘도 자바스크립트에 대해 공부했다. 이번에는 함수와 객체에 대해 공부하였는데

자바스크립트에서 함수가 중요한 만큼 내용도 많고 어렵거나 모르는 것도 많았다.

그렇기에 오늘도 새롭게 알게 된 것이 많다.

 

 

1) 병합 연산자

병합연산자인 ??를 사용하면 0처럼 falsy로 평가되는 값들을 일반 값처럼 처리할 수 있다.

// 매개변수 'count'가 `undefined` 또는 `null`이면 'unknown'을 출력해주는 함수
function showCount(count) {
  alert(count ?? "unknown");
}

showCount(0); // 0
showCount(null); // unknown
showCount(); // unknown

 

2) 본문이 여러줄인 화살표 함수

화살표 함수를 사용할 때 return을 적지 않아도 return을 하지만

본문이 여러 줄이라면 return을 적어주어야 한다.

let sum = (a, b) => {  // 중괄호는 본문 여러 줄로 구성되어 있음을 알려줍니다.
  let result = a + b;
  return result; // 중괄호를 사용했다면, return 지시자로 결괏값을 반환해주어야 합니다.
};

alert( sum(1, 2) ); // 3

화살표 함수 간단해 보이지마 아직은 뭔가 헷갈리는 듯......

 

 

3) 나머지 매개변수

여분의 매개변수는 그 값들을 담을 배열 이름을 마침표 세 개 ...뒤에 붙여주면 함수 선언부에 포함시킬 수 있다.

이때 마침표 세 개 ...는 "남아있는 매개변수들을 한데 모아 배열에 집어넣어라."는 것을 의미한다.

function showName(firstName, lastName, ...titles) {
  alert( firstName + ' ' + lastName ); // Bora Lee

  // 나머지 인수들은 배열 titles의 요소가 됩니다.
  // titles = ["Software Engineer", "Researcher"]
  alert( titles[0] ); // Software Engineer
  alert( titles[1] ); // Researcher
  alert( titles.length ); // 2
}

showName("Bora", "Lee", "Software Engineer", "Researcher");

위의 코드처럼 작성하면

앞부분의 매개변수는 변수로, 남아있는 매개변수들은 배열로 모인다.

이 전에는 모든 매개변수를 배열에 담거나 변수에 할당했는데

이렇게 나누어서 나머지를 배열에 모으는게 처음이라 신기했다.

 

 

 

4) 스프레드 문법

메서드 Array.from은 이터러블 객체인 문자열을 배열로 바꿔주기 때문에 Array.from을 사용해도 동일한 작업을 할 수 있다.

• Array.from(obj)와 [...obj]의 미묘한 차이

• Array.from은 유사 배열 객체와 이터러블 객체 둘 다에 사용할 수 있다.
• 스프레드 문법은 이터러블 객체에만 사용할 수 있다.

=> 결론: 스프레드 문법보다 Array.from을 사용하는 것이 좋다!

let str = "Hello";

alert( [...str] ); // H,e,l,l,o


let str = "Hello";

// Array.from은 이터러블을 배열로 바꿔줍니다.
alert( Array.from(str) ); // H,e,l,l,o

 

5) 객체 복사

기존에 있던 객체와 같으면서 독립적인 객체를 만들 수 있다!

let user = {
  name: "John",
  age: 30
};

let clone = {}; // 새로운 빈 객체

// 빈 객체에 user 프로퍼티 전부를 복사해 넣습니다.
for (let key in user) {
  clone[key] = user[key];
}

// 이제 clone은 완전히 독립적인 복제본이 되었습니다.
clone.name = "Pete"; // clone의 데이터를 변경합니다.

alert( user.name ); // 기존 객체에는 여전히 John이 있습니다.

이렇게 key 값을 복사할 수도 있고,

let user = { name: "John" };
Object.assign(user, { name: "Pete" });
alert(user.name); // user = { name: "Pete" }


let user = {
  name: "John",
  age: 30
};

let clone = Object.assign({}, user);

이렇게 Object.assign을 사용할 수도 있다.

 

 

 

6) this

let user = { name: "John" };
let admin = { name: "Admin" };

function sayHi() {
  alert( this.name );
}

// 별개의 객체에서 동일한 함수를 사용함
user.f = sayHi;
admin.f = sayHi;

// 'this'는 '점(.) 앞의' 객체를 참조하기 때문에
// this 값이 달라짐
user.f(); // John  (this == user)
admin.f(); // Admin  (this == admin)

admin['f'](); // Admin (점과 대괄호는 동일하게 동작함)

obj.f()를 호출했다면 this는 f를 호출하는 동안의 obj이고,

위 예시에선 obj가 user나 admin을 참조한다고 한다.

this 값은 런타임에 결정되므로, 동일한 함수라도 다른 객체에ㅓ 호출했다면 'this'가 참조하는 값이 달라진다.

 

 

7) 반복문

let fruits = ["사과", "오렌지", "자두"];

// 배열 요소를 대상으로 반복 작업을 수행합니다.
for (let fruit of fruits) {
  alert( fruit );
}

for..of를 사용하여 현재 요소의 값만 얻을 수 있다.

위의 코드를 실행하면 사과, 오렌지, 자두 순으로 창이 띄워진다.

 

 

 

 

 

함수 부분은 언제봐도 새롭게 느껴진다.

분명히 알고 있었던 내용이라해도 다시 보면 헷갈린다...

이 부분은 여러번 반복하여 사용해보면 익혀야겠다고 생각했다.