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

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

이전 글: [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(): 인수의 배열

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

목차 

00. 자바스크립트 기초

01. var, let, const

02. 화살표 함수

03. 함수 기본값 인수

04. 템플릿 리터럴

05. 문자열 메서드

06. 디스트럭처링 

07. 루프

08. 배열 매서드

09. 스프레드 연산자와 레스트 매개변수

10. 객체 리터럴의 업그레이드

11. 심벌

12. 클래스

13. 프로미스

14. 제너레이터

15. 프록시

16. 세트, 위크셋, 맵, 위크맵

17. ES2016의 새로운 기능

18. ES2017: 문자열 패딩, Object.entries(), Object.values() 등

19. ES2017: async와 await

20. ES2018의 새로운 기능

21. ES2019의 새로운 기능

22. ES2020의 새로운 기능

23. 타입스크립트 기초

오늘은 자바스크립트의 실행컨텍스트(Execution contexts)와 콜스택(Call Stack)에 대해서 알아볼 것이다.

[Keyword]

#전역컨텍스트 #함수컨텍스트 #함수호이스팅 #클로저 #스코프 #콜스택 #이벤트루프

컨텍스트의 순서

전역 컨텍스트 → 변수객체, scope chain, this

컨텍스트 원칙 4가지

1. 먼저 전역 컨텍스트 하나 생성 후, 함수 호출 시마다 컨텍스트가 생긴다
2. 컨텍스트 생성시 컨텍스트 안에 변수객체(argument, variable), scope chain, this 가 생성된다.
3. 컨텍스트 생성 후 함수가 실행되는데, 사용되는 변수들은 변수 객체 안에서 값을 찾고, 없다면 스코프체인을 따라서 올라가며 찾는다.
4. 함수 실행이 마무리되면 해당 컨텍스트는 사라진다(단, 클로저 제외). 페이지가 종료되면 전역컨텍스트가 사라진다.

1. 전역컨텍스트(Global Execution Context)

자바스크립트 엔진이 코드를 실행할 때 처음으로 생성되는 실행 컨텍스트(★생성시점)

[구성요소]

: 아무런 코드가 없어도 두 가지 요소를 가진다.

• global object
• this ( 브라우저: Window, Node: global )

브라우저(크롬)에서의 this

[실행 컨텍스트의 2가지 단계 — 생성, 실행]

1–1 생성단계

• global object 생성
• this변수 object 생성
• 변수와 함수를 위한 메모리공간 확보
• 변수 선언 부분에 undefined(기본값)로 초기화, 선언식 함수를 메모리 공간에 올림

1–2 실행단계
: 실질적으로 자바스크립트 엔진이 코드를 한 줄씩 읽고 실행하는 단계

• 엔진이 코드를 한 줄씩 실행
• 실제 값을 메모리 공간에 저장

실행단계 전 후로 담긴 값이 달라지는 모습 (getUser는 선언식 함수이므로 함수 전체가 메모리에 올라감)

2. 함수 실행컨텍스트

함수가 호출될 때마다 생성되는 컨텍스트(★생성시점)

1–1 생성단계

• argument object 생성(★글로벌 실행컨텍스트와의 차이점, global object 아님!)
• this 변수 object 생성
• 변수와 함수를 위한 메모리 공간 확보
• 변수 선언 부분에 undefined로 초기화, 선언식 함수를 메모리 공간에 올림

➡️ 함수 실행컨텍스트는 함수가 호출되면 실행 스택에 쌓였다가, 실행을 마치면 콜스택에서 제거된다.

함수호출 ➡ 새로운 함수 실행 컨텍스트가 콜스택에 쌓임 ➡ 생성단계 ➡ 실행단계 ➡ 콜스택에서 제거

function foo() {
var bar = "Declared in foo"
}

foo()

console.log(bar) //VM191:7 Unaught ReferenceError: bar is not defined at <anonymous> 제거된 이후이기 때문

- 힙 : 객체가 저장되는 곳 (여기서는 선언한 함수 func1, func2, func3 가 저장됨)

- Web API: Web API는 브라우저에서 제공하는 API들이다. 위의 그림에서는 자바스크립트의 런타임환경을 설명하고 있기 때문에 web API가 등장했다. 만약 node js 런타임 환경을 설명했다면 다른 API로 표시했을 것이다. 대표적인 예시로는 setTimeout 함수가 있다.

- 콜백 큐: Callback Queue는 함수를 저장하는 자료구조이다. Call stack과 다르게 가장 먼저 들어온 함수를 가장 먼저 처리한다. 특정 이벤트에 따른 콜백 함수를 정의하면, 콜백 함수는 Callback Que에 저장된다.

- Event Loop: Event Loop는 call stack이 다 비워지면 callback que에 존재하는 함수를 하나씩 호출 스택으로 옮기는 역할을 한다.

- Event Loop: Event Loop는 call stack이 다 비워지면 callback que에 존재하는 함수를 하나씩 호출 스택으로 옮기는 역할을 한다.

var func1 = () => {
func2();
console.log('Call Func1');
}
var func2 = () => {
func3();
console.log('Call Func2');
}
var func3 = () => {
console.log('Call Func3');
}
func1();//결과
//Call Func3
//Call Func2
//Call Func1

함수 호이스팅(hoisting)

hoisting 의 뜻은 “끌어올리다” 이지만, 의미그대로 상단에 선언이 된다고 생각하면 NO

생성단계에서 변수가 undefined로 값이 초기화되는 것을 의미한다.

작성자: Caffè mocha (Yasmin) ☕️

참고링크 1, 참고링크 2, 참고링크 3, 참고링크 4

By. Team Coffee Study (medium)

web developers, knowledge sharing, javascript