병아리의 좌충우돌 개발이야기

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

이전 글: [JS 핵심 가이드] 06. 디스트럭처링(Destrcturing)

1. for of 루프

: 배열의 각 원소에 대해 반복하는 방법

const fruits = ['apple', 'banana', 'orange']
for(const fruit of fruits) {
	console.log(fruit);
}
//apple
//banana
//orange

2. 객체에 대한 반복

: 객체는 interable이 아님

Q. 키/값 쌍에 대한 반복은 어떻게 구현? 

A. Object.keys()를 사용하여 객체의 모든 키를 가져온 후, 키에 대해 반복을 수행하면서 값에 접근

const car = {
	maker: "BMW",
    color: "red",
    year: "2021",
};

for(const prop of Object.keys(car)) {
	const value = car[props]
    console.log(props, value)
}

// maker: BMW
// color: red
// year: 2021

=> ES6에서 Object.entries()로 객체의 key, value를 모두 가져올 수 있음. 

3. for in 루프

: 순서없이 객체의 모든 열거 가능한 속성을 반복

const car = {
	maker: "BMW",
    color: "red",
    year: "2021",
};

for(const prop in car) {
    console.log(props, car[props])
}

//maker BMW
//color red
//year 2021

4. for of와 for in의 차이

let list = [4, 5, 6]

// for...in은 키의 목록을 반환한다.
for(let i in list) {
	console.log(i); //"0", "1", "2"
}

//for ...of는 값을 반환한다.
for(let i of list) {
	console.log(i); // 4, 5, 6
}

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

이전 글: [JS 핵심 가이드] 05. 문자열 메소드

06. 디스트럭처링(Destrcturing)

: 디스트럭처링 할당 문법배열의 값 또는 객체의 속성을 풀어서 별개의 변수로 쓸 수 있게 해주는 자바스크립트 표현식이다. (by, MDN정의)

6.1 객체 디스트럭처링

: 객체에서 변수를 생성할 때 

[ ES6 이전 ]

var person = {
	first: "Yasmine",
    last: "Kim",
};
var first = person.first;
var last = person.last;

[ ES6 이후 ]

const person = {
	first: "Yasmine",
    last: "Kim",
};

const {first, last} = person;

=> 디스트럭처링을 이용하여 person이 가진 속성에 접근함과 동시에 해당 속성 이름으로 변수 선언이 가능함을 알 수 있다.

[ 중첩된 사례 ]

const person = {
	first: "Yasmine",
    last: "Kim",
    links: {
    	social: {
        	facebook: "http://www.blablabla.com"
        }
        website: "http://websites.com"
    },
};

const {facebook} = person.links.social;

// 변수를 fb로 명명하고, 기본값을 다시 설정한다.
const {facebook: fb = "http://facebook.com"} = person.links.social;

6.2 배열 디스트럭처링

: 배열 디스트럭처링 [] ( cf, 객체 디스트럭처링 {} )

const person = ["Alberto", "Montalesi", 25]
const [name, surname, age] = person;

레스트 연산자(rest operator, ...)

const person = ["yangha", "kim", "pizza", "coconut water", "coffee"];

//레스트 연산자를 이용하여 나머지 값 전체를 얻는다.
const [name, surname, ...food] = person;
console.log(food) // ["pizza", "coconut water", "coffee"]

6.3 디스트럭처링을 이용하여 변수 교체하기

: 디스트럭처링을 이용해서 swap을 쉽게 할 수 있다.

let hungry = "yes";
let full = "no";

//swap
[hungry, full] = [full, hungry];
console.log(hungry, full) // no yes

공식문서(mdn): https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

이전 글: [JS 핵심 가이드] 04. 템플릿 리터럴( 부제: 백틱(`)을 사용하여 문자열을 삽입하는 여러가지 방법 )

05. 문자열 메소드

5.1 기본적인 문자열 메서드

- indexOf()

: 문자열에서 지정된 값이 처음 나타나는 위치를 반한다.

- slice()

: 문자열의 지정된 부분을 새 문자열로 반환한다.

- toUpperCase()

: 문자열 내의 모든 문자를 대문자로 바꾼다.

- toLowerCaswe()

: 문자열 내의 모든 문자를 소문자로 바꾼다.

5.2 새로운 문자열 메서드

: ES6에서 도입된 새로운 문자열 메서드 4개

- startsWith()

: 이 메서드는 매개변수로 받은 값으로 문자열이 시작하는지 확인한다.(*대소문자 구분함)

- endsWith()

: 이 메서드는 매개변수로 받은 문자열이 매개변수로 받은 값으로 끝나는지 확인한다.

- includes()

: 매개변수가 문자열에 포함되어있는지 확인한다.

- repeat()

: 문자열을 반복하며 횟수를 인수로 받는다.

공식문서 참고: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/startsWith

알고리즘 문제 풀면서 string다루는 문제가 나오면 메소드를 되기 많이쓰는데, 이중에서는 indexOf(), slice(), includes()를 많이 써본듯하다. (includes()가 es6문법에서 추가된 메서든지 처음 알았슴,,,)

mdn 문서 보면서, 메서드의 작동방식, 어떤 매개변수가 어떤 역할을 위해 들어가는지 그리고 리턴값까지 확실히 알아야 메서드를 제대로 쓸 수 있을 것이다. 

예시

//slice()

const str = 'The quick brown fox jumps over the lazy dog.';

console.log(str.slice(4, 19));
// expected output: "quick brown fox"

slice()는 Array 메서드에도 있음.. 

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

이전 글: [JS 핵심 가이드] 03. 함수 기본값 인수

04. 템플릿 리터럴 

: ES6이전에 템플릿 문자열(template string)이라고 부르던 것을  ES6에서는 템플릿 리터럴(template literal) 이라고 부릅니다.

4.1 문자열 삽입, 4.2 표현식 삽입

: 문자열이나 표현식을 삽입하기위해 백틱(`)을 사용할 수 있게 되었다.

- 백틱을 사용하면, 여러 줄로 이루어진 문장을 표현할 때, 백슬래시 삽입없이 손쉽게 해결할 수 있다.

- 템플릿 중첩(html 태그를 백틱 안에 담을 수 있음)

4.5 삼항 연산자

: ? 앞의 조건이 true이면, 첫 번째  값이  반환되고, 그렇지 않으면 : 뒤에 있는 값이 반환된다.

4.7 태그된 템플릿 리터럴

: 함수를 태그하여 템플릿 리터럴을 실행하면 템플릿 내부에 있는 모든 항목이 태그된 함수의 인수로 제공된다.

사용 방식

: 함수이름을 가져다 실행할 템플릿 앞에 쓰기만 하면 된다 ( 아래에서는 myTag`That ${person} is a ${age}!`; 부분에 해당)

let person = "Alberto"
let age = 25;

function myTag(strings, personName, personAge) {
	//strings: ["That ", " is a ", "!"]
    let str = strings[1];
    let ageStr;
    
    personAge > 50 ? ageStr = "grandpa" : ageStr = "youngster";
    
    return personName + str + ageStr;
}

let sentence = myTag`That ${person} is a ${age}!`;
console.log(sentence) // Alberto is a youngster

템플릿 리터럴 사용 사례 참고: https://codeburst.io/javascript-es6-tagged-template-literals-a45c26e54761 

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

이전 글: [JS 핵심 가이드] 02. 화살표 함수( => )

03. 함수 기본값 인수

 3.2 ES6에서는 함수 기본값 인수를  매우 쉽게 설정할 수 있다.

function calculatePrice(total, tax=0.1, tip=0.05) {
	retrun total + (total * tax) + (total * tip);
}

중간 인수를 전달하고 싶지 않은 경우

//tip에 0.15를 할당하고 tax에는 아무것도 할당하고 싶지 않을 때
calculatePrice(100, undefined, 0.15)

//디스트럭처링(destructuring)을 사용한 방법
function calculatePrice({total = 0, tax = 0.1, tip=0.05,} = {}) {
	return total + (total * tax) + (total * tip);
}

const bill = calculatePrice({tip: 0.15, total: 150}); // tax에는 기본값(0.1)이 할당됨.

객체를 인수로 전달하게끔 코드를 수정하고, = {} 코드를 통해 기본값을 할당해준다.

이렇게 되면, 함수에 매개변수를 어떻게 전달하든상관없이 인수는 객체가 된다.

ES6이전에는 함수 기본값을 할당하는 방법이 마땅치 않았다고한다.

매번 undefined의 경우를 if문으로 묶어서 해결하는 방법보다 훨씬 깔끔하게 해결되는 ES6의 함수 기본값 인수 기능에 감사하며 유용하게 사용해보자 !

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

이전 글: [JS 핵심 가이드] 01. var, let, const

02. 화살표 함수

2.4 화살표함수와 this 키워드

: 화살표 함수를 사용할 때 this 키워드는 상위 스코프에서 상속된다.

- 활용할 수 있는 경우

// HTML
<div class="box open">
	This is a box
</div>

//CSS
.opening {
	background-color: red;
}

// Javascript w/ function()
const box = document.querySelector(".box")
box.addEventListener("click", function() {
	this.classList.toggle("opening") // ① this
    setTimeout(function() {
    	this.classList.toggle("opening") // ② this
    }, 500)
 });

=> 이 때, 첫 번째 ① this 은 const box에 할당되었지만, setTimeout 내부의 두 번째 ② this 는 Window 객체로 설정되어 오류가 발생한다.(Uncaught TypeError: cannot read property "toggle" of undefined)

Javascript의 setTimeout을 화살표 함수로 바꾸어 작성했을 때

// Javascript setTimeout w/ arrow function
const box = document.querySelector(".box")
box.addEventListener("click", function() {
	this.classList.toggle("opening") // ① this
    setTimeout(() => {
    	this.classList.toggle("opening") // ② this
    }, 500)
 });

=> 두 번째 ② this 는 부모로부터 상속되므로 const box로 설정된다.

2.5 화살표 함수를 피해야 하는 경우

const button = document.querySelector(".btn")
button.addEventListener("click", () => {
	this.classList.toggle("on"); // Error!
});

이 경우는 코드의 의도대로라면 this가 const button을 가리켜서 정상적으로 해당 클래스("on")가 button이 가리키는 html 태그에 토글로 동작하는 것일 것이다.

하지만, 여기서 this는 화살표함수로 작성되었기 때문에, Window객체를 가리키게 된다. 따라서 에러가 발생한다.

- 화살표 함수와 일반함수의 또다른 차이점: arguments 객체에 대한 접근 방식

( arguments 객체: 함수 내부에서 접근할 수 있는 배열 객체 )

this 키워드와 비슷하게, 화살표 함수에서 arguments 객체는 부모 스코프의 값을 상속함

arguments를 받는 기초 예시

function example() {
	console.log(arguments[0];
}

example(1, 2, 3)

오류가 나는 코드 ( ReferenceError: arguments is not defined )

const showWinner = () => {
	const winner = argument[0];
    console.log(`${winner} was the winner`);
};

showWinner("Kim", "Lee", "Park")

=> 함수에 전달된 모든 인수에 접근하려면, 기존 함수 표기법이나 스프레드 문법을 사용하면 된다.

화살표 함수로 arguments에 접근하는 예

const showWinner = (...args) => {
	const winner = args[0]
    console.log(`${winner) is the winner`)
};
showWinner("Kim", "Lee", "Park") // Kim is the winner

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

이전 글: [JS 핵심 가이드] 00. 자바스크립트 기초

01. var, let, const

• ES6부터 등장한 let과 const
• 기존에 var로 변수를 선언할 때와의 차이점
  • let과 const는 블록스코프에 종속된다.
• let과 const의 차이점
  • let: 재할당 (O), 다시 선언(O)
  • const: 재할당 (X), 다시 선언(X)
    • 이 때, const로 선언된 변수가 불변이라는 의미는 아니다.=> 이 경우, 변수 전체(person)를 재할당하는 것이 아니라 그 속성 중 하나만 재할당하는 것이므로 문제가 없다!

//const에 객체가 담겼을 때 
const person = { 
    name: 'Alberto', 
    age: 25 
}; 

person.age = 26; 
console.log(person.age); // 26

                    => 이 경우, 변수 전체(person)를 재할당하는 것이 아니라 그 속성 중 하나만 재할당하는 것이므로 문제가 없다!

• 정리

본 게시물은 한빛미디어의 "모던 자바스크립트 핵심 가이드"(알베르토 몬탈레시 지음)를 공부하면서 작성되었습니다.

이전 글: [JS 핵심 가이드] 0. 목차 소개

00.  자바스크립트 기초

- 자바스크립트는 동적언어이다

   : 즉, 정적언어와 달리 변수를 정의할 때 자료형을 정의할 필요가 없다. ( ► 협업에 문제가 될 수 있어, 강타입언어로 탈바꿈한 TS가 등장)

- 변수에 저장된 키를 통해 객체의 속성에 접근하려면 대괄호 표기법을 사용해야한다

const cars = {
	hyundai: "grendeur",
    kia: "k9",
};

const key = "hyundai";
console.log(cars.key); // undefined
console.log(cars[key]; // grenduer

- 객체 복사: 참조 방식

    즉, 두 객체를 항등 연산자(==), 완전 항등 연산자(===)를 사용하여 비교했을 때, true, true 가 반환된다.

    이는 두 객체가 동일함을 의미한다.(동일한 속성을 가진 두 객체를 비교하더라도 false가 나옴)

    * 객체의 복사본 만들기: Object.assign()

- 배열은 객체와 다르게 key가 아닌 index로 항목에 접근하는 방식, 배열은 원시 자료형이 아니라 객체다!

    *원시 자료형: 객체가 아닌 자료형으로, 메서드를 가지지 않음. ex) string, number, boolean, null, undefined, symbol

-  this의 값을 설정할 수 있는 3가지 방법.

    1. bind(): 객체 지정

    2. call(): 인수의 목록

    3. apply(): 인수의 배열