![]()
리액트를 하면서 map을 쓸 일이 있어서 검색해보는데 뭔 놈의 =>가 잔뜩 있어서 뭐가 뭔지 알아볼 수가 없었다. 이게 뭔가 알아봤더니 화살표 함수라고! 이번 글에서는 화살표 함수에 대해 잘 알아보려고 한다. 화살표 함수(arrow function)의 기본 사용법 let func = (arg1, arg2, ...argN) => expression 위의 코드는 인자 arg1...argN를 받는 함수 func이다. let func = function(arg1, arg2, ...argN) { return expression; }; 이 코드랑 같은 기능을 하는데 길이를 확! 줄여놓은 거라고 보면 된다. func은 화살표(=>) 우측의 표현식을 평가하고, 평가 결과를 반환한다. 사실 이렇게만 보면 뭔 소린지 하나..
![]()
가비지 컬렉션 원시값, 객체, 함수 등 우리가 만드는 모든 것은 메모리를 차지한다. 더 쓸모 없어지게 된 애들은 당연히 지워야 함. 자바스크립트 엔진은 어떻게 쓸 데 없는 애들을 지워주는 걸까? 가비지 컬렉션 기준 도달 가능성(reachablility) : 어떻게든 접근 하거나 사용할 수 있는 값 간단한 예시 // user엔 객체 참조 값이 저장됩니다. let user = { name: "John" }; 화살표 : 객체 참조 여기서 user의 값을 다른 값으로 덮어쓰면 참조(화살표)가 사라진다. user = null; 이제 John은 사용하지 않는 쓰레기 값이 되었으므로, 가비지 컬렉터는 이제 John에 저장된 데이터를 삭제하고, John을 메모리에서 삭제한다. * 외부로 나가는 참조는 도달 가능한 상태..
![]()
객체 : 기본 자바스크립트의 여덟 가지 자료형 중, 일곱 개는 오직 하나의 데이터(문자열, 숫자 등)만 담을 수 있어 '원시형'이라고 부른다. 객체형은 원시형과 달리 다양한 데이터를 다룰 수 있다. 객체는 중괄호 {..} 를 이용해 만들 수 있다. 중괄호 안에는 '키(key):값(value)' 쌍으로 구성된 프로퍼티(property)를 여러 개 넣을 수 있는데, 키에는 문자형 값에는 모든 자료형이 허용된다. 객체 만들기 1. 객체 생성자 문법 let user = new Object(); 2. 객체 리터럴 문법 let user = {}; 주로 객체 리터럴 문법을 사용한다. 리터럴과 프로퍼티 중괄호 {...} 안에는 ‘키: 값’ 쌍으로 구성된 프로퍼티가 들어간다. let user = { // 객체 name:..
함수 선언문 function 함수이름(매개변수, 여러개면, 콤마로, 구분) { 기능 } 함수 표현식 자바스크립트는 함수를 특별한 종류의 값으로 취급한다. 함수 표현식으로도 함수를 만들 수 있다. let sayHi = function() { alert( "Hello" ); }; sayHi라는 변수에 함수가 할당된 것이다. 함수는 값이기 때문에 alert를 이용하여 함수 코드를 출력할 수도 있다. function sayHi() { alert( "Hello" ); } alert( sayHi ); // 함수 코드가 보임 마지막 줄에서 sayHi 옆에 괄호가 없기 때문에 함수는 실행되지 않는다. 콜백 함수 매개변수가 3개 있는 함수, ask(question, yes, no)를 작성해보자. question 질문 y..
반복문은 다른 언어를 배울 때 진짜 지긋지긋하게 했을 것이고,, 문법이 거의 동일하므로 굳이 다시 정리할 필요성을 못 느낀다!!! 생략! 여러 개의 중첩 반복문을 한 번에 빠져나와야 하는 경우가 있다. i와 j를 반복하면서 프롬프트 창에 (0,0)부터 (2,2)까지를 구성하는 좌표 (i, j)를 입력하게 해주는 예시를 살펴보자. for (let i = 0; i < 3; i++) { for (let j = 0; j < 3; j++) { let input = prompt(`(${i},${j})의 값`, ''); // 여기서 멈춰서 아래쪽의 `완료!`가 출력되게 하려면 어떻게 해야 할까요? } } alert('완료!'); 사용자가 cancel 버튼을 눌렀을 때 반복문을 중단시킬 방법이 필요하다. input 아..
if, if-else, if-else if-else 등 기본적인 조건문에 대해서는 생략하겠읍니다. 조건부 연산자 '?' 조건에 따라 다른 값을 변수에 할당해줘야 할 때가 있다. 예를 들어, 술을 마시는 게 가능한 나이인지 아닌지를 판별하는 프로그램을 만든다고 생각해보자. let accessAllowed; let age = prompt('나이를 입력해 주세요.', ''); if (age > 18) { accessAllowed = true; } else { accessAllowed = false; } alert(accessAllowed); 나이가 18살이 넘으면 true를, 아닌 경우에 false를 accessAllowed에 할당해준다. 근데 조건문을 보면 딱 보기에도 겹치는 게 많아보인다. if 어쩌고 e..
![]()
alert 메서드는 매개변수로 문자형을 받기 때문에, alert(value)에서 value는 문자형이어야 한다. 만약, 다른 형의 값을 전달 받으면 이 값은 문자형으로 자동 변환된다. 숫자형으로 변환 주어진 값을 숫자형으로 바꾸기 위해서는 다음과 같은 명시적 형변환이 이용된다. Number(value) 함수 : 주어진 값(value)을 숫자형으로 명시해서 변환할 수 있다. let str = "123"; alert(typeof str); // string let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다. alert(typeof num); // number 숫자 이외의 글자가 들어가 있는 문자열을 숫자형으로 변환하려고 하면, 그 결과는 NaN이 된다. let ag..
:: 최소한의 사용자 인터페이스 기능 alert, prompt, confirm 알아보기 alert 이 함수가 실행되면 사용자가 '확인(OK)' 버튼을 누를 때까지 메시지를 보여주는 창이 떠있게 된다. alert('Hello'); 이 코드를 실행 시키면 아래와 같은 창이 뜨게 된다. 용어) 모달 창(modal window) 메시지가 있는 작은 창을 부르는 말. 페이지의 나머지 부분과 상호 작용이 불가능하다는 의미 내포. 사용자는 확인 버튼을 누르기 전까지 모달 창 바깥에 있는 버튼을 누른다든가 하는 행동을 할 수 없다. (진짠가 궁금해서 실험 해봤는데 사실임) prompt 입력 필드와 확인, 취소 버튼이 있는 모달 창을 띄워주는 함수 result = prompt(title, [default]); title..
