자바스크립트란?
-자바스크립트는 브라우저에서만 쓸 목적으로 고안된 언어이지만, 지금은 다양한 환경에서 쓰이고 있습니다.
-오늘날 자바스크립트는 브라우저 환경에서 가장 널리 사용되는 언어로 자리매김하였습니다.
HTML/CSS와 완전한 통합이 가능합니다.
-자바스크립트로 '트랜스파일’할 수 있는 언어는 많습니다. 각 언어마다 고유한 기능을 제공하죠.
헬로우 월드
웹 페이지에 자바스크립트 코드를 추가하기 위해 <script> 태그를 사용합니다.
type 과 language 속성은 필수가 아닙니다.
외부 스크립트 파일은 <script src="path/to/script.js"></script>와 같이 삽입합니다.
alert, prompt, confirm을 이용한 상호작용
브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공합니다.
alert(message)
메시지를 보여줍니다.
prompt(message, default)
사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공합니다.
확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환합니다.
confirm(question)
사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여집니다.
사용자가 확인 버튼을 누르면 true를, 취소 버튼이나 Esc를 누르면 false를 반환합니다.
위 함수들은 모두 모달 창을 띄워주는데, 모달 창이 떠 있는 동안은 스크립트의 실행이 일시 중단됩니다.
사용자가 창을 닫기 전까진 나머지 페이지와 상호 작용이 불가능합니다.
지금까지 살펴본 세 함수엔 두 가지 제약사항이 있습니다.
모달 창의 위치는 브라우저가 결정하는데, 대개 브라우저 중앙에 위치합니다.
모달 창의 모양은 브라우저마다 다릅니다. 개발자는 창의 모양을 수정할 수 없습니다.
이런 제약사항은 간결성을 위해 치러야 할 대가입니다. 창을 더 멋지게 꾸미고 복잡한 상호작용을 가능하게 해주는
다른 방법도 있긴 하지만, '멋을 위한 부가 기능’이 필요하지 않다면 지금까지 소개해드린 기본 메서드만으로 충분합니다.
주석
주석을 보면 좋은 개발자인지 아닌지를 어느 정도 알 수 있습니다.
주석을 언제 쓰고 언제 쓰지 않는지를 보면 되죠.
주석을 잘 작성해 놓으면 시간이 지난 후 코드를 다시 살펴볼 때 효율적으로 정보를 얻을 수 있습니다.
코드 유지보수에 도움이 되죠.
-주석에 들어가면 좋은 내용
고차원 수준 아키텍처
함수 용례
당장 봐선 명확해 보이지 않는 해결 방법에 대한 설명
-주석에 들어가면 좋지 않은 내용
'코드가 어떻게 동작하는지’와 '코드가 무엇을 하는지’에 대한 설명
코드를 간결하게 짤 수 없는 상황이나 코드 자체만으로도 어떤 일을 하는지 충분히 판단할 수 없는 경우에만
주석을 넣으세요.
자료와 변수
값을 다루기 위해서는 정말 최소 두가지의 데이터를 위한 데이터가 필요합니다.
1.데이터를 저장해둔 공간의 주소
2.데이터의 타입 입니다.
자바스크립트가 "어떠한" "데이터를", "어디에", "어떻게" 저장해서 사용한다의 관점을 가지고 공부를 하면 좋습니다.
변수와 상수
var, let, const를 사용해 변수를 선언할 수 있습니다. 선언된 변수엔 데이터를 저장할 수 있죠.
let – 모던한 변수 선언 키워드입니다.
var – 오래된 변수 선언 키워드입니다. 잘 사용하지 않습니다.
const – let과 비슷하지만, 변수의 값을 변경할 수 없습니다.
변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 합니다.
자료형
자바스크립트에는 여덟 가지 기본 자료형이 있습니다.
숫자형 – 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용합니다. 정수의 한계는 ±253 입니다.
bigint – 길이 제약 없이 정수를 나타낼 수 있습니다.
문자형 – 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용합니다.
단일 문자를 나타내는 별도의 자료형은 없습니다.
불린형 – true, false를 나타낼 때 사용합니다.
null – null 값만을 위한 독립 자료형입니다. null은 알 수 없는 값을 나타냅니다.
undefined – undefined 값만을 위한 독립 자료형입니다. undefined는 할당되지 않은 값을 나타냅니다.
객체형 – 복잡한 데이터 구조를 표현할 때 사용합니다.
심볼형 – 객체의 고유 식별자를 만들 때 사용합니다.
typeof 연산자는 피연산자의 자료형을 알려줍니다.
typeof x 또는 typeof(x) 형태로 사용합니다.
피연산자의 자료형을 문자열 형태로 반환합니다.
null의 typeof 연산은 "object"인데, 이는 언어상 오류입니다. null은 객체가 아닙니다.
형 변환
문자, 숫자, 논리형으로의 형 변환은 자주 일어나는 형 변환입니다.
문자형으로 변환 은 무언가를 출력할 때 주로 일어납니다.
String(value)을 사용하면 문자형으로 명시적 변환이 가능합니다.
원시 자료형을 문자형으로 변환할 땐, 대부분 그 결과를 예상할 수 있을 정도로 명시적인 방식으로 일어납니다.
숫자형으로 변환 은 수학 관련 연산시 주로 일어납니다. Number(value)로도 형 변환을 할 수 있습니다.
숫자형으로의 변환은 다음 규칙을 따릅니다.
전달받은 값 형 변환 후
undefined NaN
null 0
true/false 1 / 0
string 전달받은 문자열을 “그대로” 읽되, 처음과 끝의 공백을 무시합니다.
문자열이 비어있다면 0이 되고, 오류 발생 시 NaN이 됩니다.
불린형으로 변환 은 논리 연산 시 발생합니다. Boolean(value)으로도 변환할 수 있습니다.
불린형으로의 형 변환은 다음 규칙을 따릅니다.
전달받은 값 형 변환 후
0, null, undefined, NaN, "" false
그 외의 값 true
형 변환 시 적용되는 규칙 대부분은 이해하고 기억하기 쉬운 편에 속합니다.
다만 아래는 예외적인 경우이기 때문에 실수를 방지하기 위해 따로 기억해 두도록 합시다.
숫자형으로 변환 시 undefined는 0이 아니라 NaN이 됩니다.
문자열 "0"과 " "같은 공백은 불린형으로 변환 시 true가 됩니다.
기본 연산자와 수학
이항 연산자 +를 사용할 때는 피연산자 중 하나가 문자열이면 다른 하나도 문자열로 변환된다는 점에 주의해야 합니다.
다른 산술 연산자가 오직 숫자형의 피연산자만 다루고, 피연산자가 숫자형이 아닌 경우에 그 형을 숫자형으로 바꾸는 것
단항 덧셈 연산자(+)를 사용해 피연산자를 숫자형으로 변화
할당(assignment) 연산자 (=), 우선순위는 3으로 아주 낮습니다.
let n = 2;
복합할당 연산자 : 우선순위는 할당 연산자와 동일
n += 5; // n은 7이 됩니다(n = n + 5와 동일).
n *= 2; // n은 14가 됩니다(n = n * 2와 동일).
증가감소 연산자
값을 증가시키고 난 후, 증가한 값을 바로 사용하려면 전위형 증가 연산자를 사용하면 됩니다. ++i
값을 증가시키지만, 증가 전의 기존값을 사용하려면 후위형 증가 연산자를 사용하면 됩니다. i++
비교 연산자
비교 연산자는 불린값을 반환합니다.
문자열은 문자 단위로 비교되는데, 이때 비교 기준은 ‘사전’ 순입니다. (유니코드)
서로 다른 타입의 값을 비교할 땐 숫자형으로 형 변환이 이뤄지고 난 후 비교가 진행됩니다(일치 연산자는 제외).
( null은 0 / undefine은 NaN으로 변환된다.)
null과 undefined는 동등 비교(==) 시 서로 같지만 다른 값과는 같지 않습니다.
null이나 undefined가 될 확률이 있는 변수가 > 또는 <의 피연산자로 올 때는 주의를 기울이시기 바랍니다.
null, undefined 여부를 확인하는 코드를 따로 추가하는 습관을 들이길 권유합니다.
if와 '?'를 사용한 조건 처리
if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행됩니다.
조건이 true일 때 복수의 문을 실행하고 싶다면 중괄호로 코드 블록을 감싸야 합니다.
숫자 0, 빈 문자열"", null, undefined, NaN은 불린형으로 변환 시 모두 false가 됩니다.
이런 값들은 ‘falsy(거짓 같은)’ 값이라고 부릅니다.
if문엔 else 절을 붙일 수 있습니다. else 뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행됩니다.
평가 대상인 condition이 truthy라면 value1이, 그렇지 않으면 value2가 반환됩니다.
ex) let result = condition ? value1 : value2;
return = (age > 18) ? ture : false;
논리 연산자
OR연산자(||)는 주어진 조건 중 하나라도 참(true)인지 테스트 하는 용도로 사용된다.
OR연산자(||)는 첫번째 truthy의 원래값(value)을 반환한다.
(첫번째 truthy를 찾는 용도로 사용된다. 만약 모두 falsy라면 마지막 피연산자를 반환한다.)
변수 또는 표현식으로 구성된 목록에서 첫 번째 truthy 얻기
단란평가란, 왼쪽부터 시작해서 오른쪽으로 단위별 평가하는 것 ex) true || alert("not printed");
AND연산자(&&)는 주어진 조건이 모두 참(true)인지 테스트하는 용도로 사용된다.
AND연산자(&&)는 첫번째 falsy의 원래값을 반환한다.
(첫번째 falsy를 찾는 용도로 사용된다. 만약 모두 true라면 마지막 피연산자를 반환한다.)
&&의 우선순위가 ||보다 높다. ex) a && b || c && d 는 (a && b) || (c && d)와 같음.
NOT연산자(!)는 인수를 불린형으로 반환한뒤, 그 값의 역을 반환한다.
alert( alert(1) || 2 || alert(3) ); 은 어떻게 될까? // 1, 2
alert()은 반환값이 없다. undefined를 반환한다.
NOT 연산자의 우선순위는 모든 논리 연산자 중에서 가장 높기 때문에 항상 &&나 || 보다 먼저 실행됩니다.
swich (if문)
switch (a) {
case 3:
alert( '비교하려는 값보다 작습니다.' );
break;
case 4:
alert( '비교하려는 값보다 큽니다.' );
break
default:
alert( "어떤 값인지 파악이 되지 않습니다." );
switch-case 문의 인수에는 어떤 표현식(변수나 연산자 처리한)이든 올 수 있음.
switch문은 동등연산자(==)가 아닌, 일치연산자(===)로 비교함.
break가 없을 떈 밑의 코드들도 모두 실행됨.
while과 for 반복문
while(condition) – 각 반복이 시작하기 전에 조건을 확인합니다. while(i)는 값이 0일 때 멈춘다.
condition(조건)이 truthy 이면 반복문 본문의 코드가 실행됩니다.
do..while – 각 반복이 끝난 후에 조건을 확인합니다. 무조건 한 번은 반복을 원할 때
for (;;) – 각 반복이 시작하기 전에 조건을 확인합니다. 추가 세팅을 할 수 있습니다.
‘무한’ 반복문은 보통 while(true)를 써서 만듭니다.
무한 반복문은 여타 반복문과 마찬가지로 break 지시자를 사용해 멈출 수 있습니다.
현재 실행 중인 반복에서 더는 무언가를 하지 않고 다음 반복으로 넘어가고 싶다면 continue 지시자를 사용할 수 있다.
레이블을 붙이고(ex.labelName: for (...) {), break/continue에 이 레이블을 함께 사용할 수 있습니다.
레이블은 중첩 반복문을 빠져나와 바깥의 반복문으로 갈 수 있게 해주는 유일한 방법입니다.
표현식이 아닌 문법 구조(syntax construct)는 삼항 연산자 ?에 사용할 수 없다.
함수
"함수는 자바스크립트 프로그램의 기본적인 구성 요소이며 대부분의 프로그래밍 언어에 있는 공통 기능입니다. 함수는 한 번 정의하면 몇 번이고 호출할 수 있는 자바스크립트 코드 블록입니다. 자바스크립트 함수는 매개변수화 됩니다. 함수 정의에는 매개변수라고 불리는 식별자 리스트가 있는데, 이들은 함수 바디에서 로컬 변수처럼 동작합니다. 함수를 호출할 때는 매개변수에 값을 전달하는데 이를 인자라고 합니다. 함수는 보통 인자를 사용해 반환 값을 도출하며, 이 값이 함수 호출 표현식의 값이 됩니다. 매개변수 외에도 각 호출에는 호출 컨텍스트가 존재하며 이것이 this 키워드의 값입니다. 객체 프로퍼티로 할당된 함수를 객체의 메서드라고 부릅니다. 객체를 통해 함수를 호출하면 그 객체가 호출 컨텍스트, 즉 함수의 this 값입니다. 객체를 새로 만들 목적으로 설계한 함수를 생성자라고 부릅니다. "
"자바스크립트 함수는 객체이며 프로그램에서 조작할 수 있습니다. 자바스크립트는 함수를 변수에 할당하거나 다른 함수에 전달할 수 있습니다. 함수는 객체이므로 프로퍼티를 정의할 수 있고 함수의 메서드를 호출하는 것도 가능합니다."
"자바스크립트 함수는 다른 함수 안에서 정의할 수 있으며, 이렇게 정의된 함수는 자신이 정의된 스코프의 변수에 접근할 수 있습니다. 이런 의미에서 자바스크립트 함수는 클로저 입니다."
문자열이나 숫자 등의 일반적인 값들은 데이터를 나타냅니다.
함수는 하나의 *동작(action)*을 나타냅니다.
동작을 대변하는 값인 함수를 변수 간 전달하고, 동작이 필요할 때 이 값을 실행할 수 있습니다.
function 함수이름(복수의, 매개변수는, 콤마로, 구분합니다) {
/* 함수 본문 */
}
함수에 전달된 매개변수는 복사된 후 함수의 지역변수가 됩니다.
함수는 외부 변수에 접근할 수 있습니다(수정 가능).
하지만 함수 바깥에서 함수 내부의 지역변수에 접근하는 건 불가능합니다.
함수는 값을 반환할 수 있습니다. 값을 반환하지 않는 경우는 반환 값이 undefined가 됩니다.
매개변수에 값을 전달하지 않아도 그 값이 undefined가 되지 않게 하려면 함수를 선언할 때 =를 사용해 '기본값(default value)'을 설정해주면 됩니다.
깔끔하고 이해하기 쉬운 코드를 작성하려면 함수 내부에서 외부 변수를 사용하는 방법 대신 지역 변수와 매개변수를 활용하는 게 좋습니다.
개발자는 매개변수를 받아서 그 변수를 가지고 반환 값을 만들어 내는 함수를 더 쉽게 이해할 수 있습니다.
매개변수 없이 함수 내부에서 외부 변수를 수정해 반환 값을 만들어 내는 함수는 쉽게 이해하기 힘듭니다.
함수 이름을 지을 땐 아래와 같은 규칙을 따르는 것이 좋습니다.
함수 이름은 함수가 어떤 동작을 하는지 설명할 수 있어야 합니다. 이렇게 이름을 지으면 함수 호출 코드만 보아도 해당 함수가 무엇을 하고 어떤 값을 반환할지 바로 알 수 있습니다.
함수는 동작을 수행하기 때문에 이름이 주로 동사입니다.
create…, show…, get…, check… 등의 잘 알려진 접두어를 사용해 이름을 지을 수 있습니다. 접두어를 사용하면 함수 이름만 보고도 해당 함수가 어떤 동작을 하는지 파악할 수 있습니다.
소수판별함수 함수분리, 알고리즘 순서 이해 도움이 됐음
function showPrimes(n) {
for (let i = 2; i < n; i++) {
if (!isPrime(i)) continue;
alert(i); // a prime
}
}
function isPrime(n) {
for (let i = 2; i < n; i++) {
if ( n % i == 0) return false;
}
return true;
}
함수 표현식
함수는 값입니다. 따라서 함수도 값처럼 할당, 복사, 선언할 수 있습니다.
“함수 선언(문)” 방식으로 함수를 생성하면, 함수가 독립된 구문 형태로 존재하게 됩니다.
function sayHi() {
alert( "Hello" );
}
“함수 표현식” 방식으로 함수를 생성하면, 함수가 표현식의 일부로 존재하게 됩니다.
let sayHi = function() {
alert( "Hello" );
};
함수 선언문은 코드 블록이 실행되기도 전에 처리됩니다. 따라서 블록 내 어디서든 활용 가능합니다.
함수 표현식은 실행 흐름이 표현식에 다다랐을 때 만들어집니다.
함수 선언문은 함수가 선언되기 이전에도 함수를 활용할 수 있기 때문에 함수 선언 방식은 코드를 유연하게 구성할 수 있도록 해주고, 가독성도 좋습니다.
함수 표현식은 함수 선언문을 사용하는게 부적절할 때에 사용하는 것이 좋습니다.
자바스크립트는 괄호가 있어야만 함수가 호출됩니다. 함수명()
콜백함수, 익명함수
function ask(question, yes, no) {
if (confirm(question)) yes()
else no();
}
ask(
"동의하십니까?",
function() { alert("동의하셨습니다."); },
function() { alert("취소 버튼을 누르셨습니다."); }
);
함수를 함수의 인수로 전달하고, 필요하다면 인수로 전달한 그 함수를 "나중에 호출(called back)"하는 것이 콜백 함수의 개념입니다.
익명 함수는 (변수에 할당된 게 아니기 때문에) ask 바깥에선 접근할 수 없습니다.
화살표 함수 기본
화살표 함수는 본문이 한 줄인 함수를 작성할 때 유용합니다.
본문이 한 줄이 아니라면 다른 방법으로 화살표 함수를 작성해야 합니다.
원래 코드
let func = function(arg1, arg2, ...argN) {
return expression;
};
중괄호 없이 작성: (...args) => expression – 화살표 오른쪽에 표현식을 둡니다.
함수는 이 표현식을 평가하고, 평가 결과를 반환합니다.
중괄호와 함께 작성: (...args) => { body } – 본문이 여러 줄로 구성되었다면 중괄호를 사용해야 합니다.
다만, 이 경우는 반드시 return 지시자를 사용해 반환 값을 명기해 주어야 합니다.
나머지 매개변수와 스프레드 문법
"..."은 나머지 매개변수나 스프레드 문법으로 사용할 수 있습니다.
나머지 매개변수와 스프레드 문법은 아래의 방법으로 구분할 수 있습니다.
...이 함수 매개변수의 끝에 있으면 인수 목록의 나머지를 배열로 모아주는 '나머지 매개변수’입니다.
...이 함수 호출 시 사용되거나 기타 경우엔 배열을 목록으로 확장해주는 '스프레드 문법’입니다.
Array.from은 유사 배열 객체와 이터러블 객체 둘 다에 사용할 수 있습니다.
스프레드 문법은 이터러블 객체에만 사용할 수 있습니다.
사용 패턴:
인수 개수에 제한이 없는 함수를 만들 때 나머지 매개변수를 사용합니다.
다수의 인수를 받는 함수에 배열을 전달할 때 스프레드 문법을 사용합니다.
둘을 함께 사용하면 매개변수 목록과 배열 간 전환을 쉽게 할 수 있습니다.
객체
객체는 복합된 값입니다.
객체는 여러 가지 값(기본 값이나 다른 객체)를 모아서 이름을 통해 값을 저장하고 가져올 수 있게 합니다.
객체는 프로퍼티의 순서 없는 집합이며 각 프로퍼티에는 이름과 값이 있습니다.
프로퍼티 이름은 보통 문자열이므로 객체가 문자열에 값을 연결한다고 볼 수 도 있습니다.
이렇게 문자열과 값을 연결하는 동작을 표현하는 이름은 다양합니다.
다른 언어에서 기본적인 데이터구조를 '해시', '해시 테이블', '딕셔너리', '연관 배열'같은 이름으로 부르는 데 이미 익숙할 수도 있습니다.
하지만 객체는 단순히 문자열과 값을 연결한 것이 아닙니다.
자바스크립트 객체는 자신만의 프로퍼티를 가지는 것 외에도, '프로토타입'으로 불리는 다른 객체에서 프로퍼티를 상속하기도 합니다.
객체의 메서드는 일반적으로 상속된 프로퍼티이며 이 '프로토타입 상속'이 자바스크립트의 중요한 기능입니다."
"자바스크립트에서 문자열, 숫자, 심벌, true, false, null, undefined가 아닌 값은 전부 객체입니다.
또한 문자열, 숫자, 불은 객체가 아니지만 불변인 객체처럼 행동할 수도 있습니다."
"객체는 가변이며 값이 아닌 참조로 조작한다고 설명했습니다.
변수 x가 객체를 참조하고, let y = x라는 코드를 실행한다면, 변수 y는 그 객체의 사본이 아니라 같은 객체를 참조합니다.
변수 y를 통해 객체를 수정하면 그 결과는 변수 x에도 똑같이 적용됩니다."
"객체를 통해 하는 일은 생성, 검색, 삭제, 테스트, 프로퍼티 열거로 나눌 수 있습니다.
이런 기본적인 동작은 이 장 초반에서 설명합니다."
"모든 프로퍼티에는 이름과 값 외에도 다음과 같은 세 가지 프로퍼티 속성이 있습니다. (쓰기 가능, 열거 가능, 변경 가능)"
객체는 몇 가지 특수한 기능을 가진 연관 배열(associative array)입니다.
객체는 프로퍼티(키-값 쌍)를 저장합니다.
프로퍼티 키는 문자열이나 심볼이어야 합니다. 보통은 문자열입니다.
값은 어떤 자료형도 가능합니다.
아래와 같은 방법을 사용하면 프로퍼티에 접근할 수 있습니다.
점 표기법: obj.property
대괄호 표기법 obj["property"]. 대괄호 표기법을 사용하면 obj[varWithKey]같이 변수에서 키를 가져올 수 있습니다. 여러 단어의 조합에서 사용할 수 있습니다. obj["likes birds"]
단축 프로퍼티 프로퍼티의 이름과 변수명이 동일하면 축약해서 쓸 수 있다.
객체엔 다음과 같은 추가 연산자를 사용할 수 있습니다.
프로퍼티를 삭제하고 싶을 때: delete obj.prop
해당 key를 가진 프로퍼티가 객체 내에 있는지 확인하고자 할 때: "key" in obj
프로퍼티를 나열할 때: for (let key in obj)
지금까진 '순수 객체(plain object)'라 불리는 일반 객체에 대해 학습했습니다.
자바스크립트에는 일반 객체 이외에도 다양한 종류의 객체가 있습니다.
Array – 정렬된 데이터 컬렉션을 저장할 때 쓰임
Date – 날짜와 시간 정보를 저장할 때 쓰임
Error – 에러 정보를 저장할 때 쓰임
기타 등등
참조에 의한 객체 복사 ???
객체와 원시 타입의 근본적인 차이 중 하나는 객체는 ‘참조에 의해(by reference)’ 저장되고 복사된다는 것입니다.
객체는 참조에 의해 할당되고 복사됩니다. 변수엔 ‘객체’ 자체가 아닌 메모리상의 주소인 '참조’가 저장됩니다.
따라서 객체가 할당된 변수를 복사하거나 함수의 인자로 넘길 땐 객체가 아닌 객체의 참조가 복사됩니다.
그리고 복사된 참조를 이용한 모든 작업(프로퍼티 추가·삭제 등)은 동일한 객체를 대상으로 이뤄집니다.
객체의 '진짜 복사본’을 만들려면 '얕은 복사(shallow copy)'를 가능하게 해주는 Object.assign이나 '깊은 복사’를 가능하게 해주는 _.cloneDeep(obj)를 사용하면 됩니다.
이때 얕은 복사본은 중첩 객체를 처리하지 못한다는 점을 기억해 두시기 바랍니다.
매서드와 this ??
객체 프로퍼티에 저장(할당)된 함수를 '메서드’라고 부릅니다.
object.doSomthing()은 객체를 '행동’할 수 있게 해줍니다.
메서드는 this로 객체를 참조합니다.
this 값은 런타임에 결정됩니다.
함수를 선언할 때 this를 사용할 수 있습니다. 다만, 함수가 호출되기 전까지 this엔 값이 할당되지 않습니다.
함수를 복사해 객체 간 전달할 수 있습니다.
함수를 객체 프로퍼티에 저장해 object.method()같이 ‘메서드’ 형태로 호출하면 this는 object를 참조합니다.
화살표 함수는 자신만의 this를 가지지 않는다는 점에서 독특합니다.
화살표 함수 안에서 this를 사용하면, 외부에서 this 값을 가져옵니다.
new 연산자와 생성자 함수 ??
생성자 함수(짧게 줄여서 생성자)는 일반 함수입니다.
다만, 일반 함수와 구분하기 위해 함수 이름 첫 글자를 대문자로 씁니다.
생성자 함수는 반드시 new 연산자와 함께 호출해야 합니다.
new와 함께 호출하면 내부에서 this가 암시적으로 만들어지고, 마지막엔 this가 반환됩니다.
생성자 함수는 유사한 객체를 여러 개 만들 때 유용합니다.
function User(name) {
// this = {}; (빈 객체가 암시적으로 만들어짐)
// 새로운 프로퍼티를 this에 추가함
this.name = name;
this.isAdmin = false;
// return this; (this가 암시적으로 반환됨)
}
-------------
let user = {
name: "보라",
isAdmin: false
};
-------------
let user = new User("보라"); // let user과 동일하게 작동
alert(user.name); // 보라
alert(user.isAdmin); // false
자바스크립트는 언어 차원에서 다양한 생성자 함수를 제공합니다.
날짜를 나타내는 데 쓰이는 Date, 집합(set)을 나타내는 데 쓰이는 Set 등의 내장 객체는 이런 생성자 함수를 이용해 만들 수 있습니다.
배열
배열은 특수한 형태의 객체로, 순서가 있는 자료를 저장하고 관리하는 용도에 최적화된 자료구조입니다.
객체 - 순서가 없는 프로퍼티로 구성
선언 방법:
// 대괄호 (가장 많이 쓰이는 방법임)
let arr = [item1, item2...];
// new Array (잘 쓰이지 않음)
let arr = new Array(item1, item2...);
new Array(number)을 호출하면 길이가 number인 배열이 만들어지는데, 이 때 요소는 비어있습니다.
배열 요소에 여러 가지 제약이 없습니다.
let arr = [ '사과', { name: '이보라' }, true, function() { alert('안녕하세요.'); } ];
배열 arr의 요소를 arr[0]처럼 대괄호를 사용해 접근하는 방식은 객체 문법에서 왔습니다.
다만 배열은 키가 숫자라는 점만 다릅니다.
length 프로퍼티는 배열의 길이를 나타내줍니다. 정확히는 숫자형 인덱스 중 가장 큰 값에 1을 더한 값입니다.
배열 메서드는 length 프로퍼티를 자동으로 조정해줍니다.
length 값을 수동으로 줄이면 배열 끝이 잘립니다. 삭제 되어 복구 불가합니다.
다음 연산을 사용하면 배열을 데큐처럼 사용할 수 있습니다.
push(...items) – items를 배열 끝에 더해줍니다.
pop() – 배열 끝 요소를 제거하고, 제거한 요소를 반환합니다.
shift() – 배열 처음 요소를 제거하고, 제거한 요소를 반환합니다. (시간걸림)
unshift(...items) – items를 배열 처음에 더해줍니다. (시간걸림)
아래 방법을 사용하면 모든 요소를 대상으로 반복 작업을 할 수 있습니다.
for (let i=0; i<arr.length; i++) – 가장 빠른 방법이고 오래된 브라우저와도 호환됩니다.
for (let item of arr) – 배열 요소에만 사용되는 모던한 문법입니다.
인덱스는 얻을 수 없고, 값만 얻을 수 있습니다.
for (let i in arr) – 배열엔 절대 사용하지 마세요(객체 사용에 최적화).
반복문은 모든 프로퍼티를 대상으로 순회합니다.
키가 숫자가 아닌 프로퍼티도 순회 대상에 포함됩니다. 배열에 사용하면 10배 이상 느립니다.
다차원 배열(multidimensional array) 배열 역시 배열의 요소가 될 수 있습니다.
다차원 배열은 행렬을 저장하는 용도로쓰입니다.
toString 메서드 쉼표로 구분한 문자열로 반환
let arr = [1, 2, 3];
alert( arr ); // 1,2,3
alert( String(arr) === '1,2,3' ); // true
배열과 메서드 ??(많음, 쓰려면 더 공부)
-요소를 더하거나 지우기
push(...items) – 맨 끝에 요소 추가하기
pop() – 맨 끝 요소 추출하기
shift() – 첫 요소 추출하기
unshift(...items) – 맨 앞에 요소 추가하기
splice(pos, deleteCount, ...items) – pos부터 deleteCount개수(갯수)의 요소를 지우고, items 추가하기
slice(start, end) – start부터 end 바로 앞까지의 요소를 복사해 새로운 배열을 만듦
concat(...items) – 배열의 모든 요소를 복사하고 items를 추가해 새로운 배열을 만든 후 이를 반환함.
items가 배열이면 이 배열의 인수를 기존 배열에 더해줌
-원하는 요소 찾기
indexOf/lastIndexOf(item, pos) – pos부터 원하는 item을 찾음.
찾게 되면 해당 요소의 인덱스를, 아니면 -1을 반환함
includes(value) – 배열에 value가 있으면 true를, 그렇지 않으면 false를 반환함
find/filter(func) – func의 반환 값을 true로 만드는 첫 번째/전체 요소를 반환함
findIndex는 find와 유사함. 다만 요소 대신 인덱스를 반환함
filter는 조건에 맞는 요소 전체를 담은 배열을 반환함
-배열 전체 순회하기
forEach(func) – 모든 요소에 func을 호출함. 결과는 반환되지 않음
-배열 변형하기
map(func) – 모든 요소에 func을 호출하고, 반환된 결과를 가지고 새로운 배열을 만듦
sort(func) – 배열을 정렬하고 정렬된 배열을 반환함
reverse() – 배열을 뒤집어 반환함
split/join('', number) – 문자열을 배열로, 배열을 문자열로 변환함. number만큼 요소를 반환함
reduce(func, initial) – 요소를 차례로 돌면서 func을 호출함.
반환값은 다음 함수 호출에 전달함. 최종적으로 하나의 값이 도출됨
-기타
Array.isArray(arr) – arr이 배열인지 여부를 판단함
sort, reverse, splice는 기존 배열을 변형시킨다는 점에 주의하시기 바랍니다.
지금까지 배운 메서드만으로 배열과 관련된 작업 99%를 해결할 수 있습니다.
이 외의 배열 메서드도 있긴 한데 잠시 언급하고 넘어가겠습니다.
arr.some(fn)과 arr.every(fn)는 배열을 확인합니다.
두 메서드는 map과 유사하게 모든 요소를 대상으로 함수를 호출합니다. some은 함수의 반환 값을 true로 만드는 요소가 하나라도 있는지 여부를 확인하고 every는 모든 요소가 함수의 반환 값을 true로 만드는지 여부를 확인합니다. 두 메서드 모두 조건을 충족하면 true를, 그렇지 않으면 false를 반환합니다.
arr.fill(value, start, end)은 start부터 end까지 value를 채워 넣습니다.
arr.copyWithin(target, start, end)은 start부터 end까지 요소를 복사하고, 복사한 요소를 target에 붙여넣습니다. 기존 요소가 있다면 덮어씁니다.
Object.keys, values, entries
일반 객체엔 다음과 같은 메서드를 사용할 수 있습니다.
Object.keys(obj) – 객체의 키만 담은 배열을 반환합니다.
Object.values(obj) – 객체의 값만 담은 배열을 반환합니다.
Object.entries(obj) – [키, 값] 쌍을 담은 배열을 반환합니다.
구조 분해 할당 ???
구조 분해 할당을 사용하면 객체나 배열을 변수로 연결할 수 있습니다.
객체 분해하기:
let {prop : varName = default, ...rest} = object
object의 프로퍼티 prop의 값은 변수 varName에 할당되는데, object에 prop이 없으면 default가 varName에 할당됩니다.
연결할 변수가 없는 나머지 프로퍼티들은 객체 rest에 복사됩니다.
배열 분해하기:
let [item1 = default, item2, ...rest] = array
array의 첫 번째 요소는 item1에, 두 번째 요소는 변수 item2에 할당되고, 이어지는 나머지 요소들은 배열 rest 저장됩니다.
할당 연산자 좌측의 패턴과 우측의 구조가 같으면 중첩 배열이나 객체가 있는 복잡한 구조에서도 원하는 데이터를 뽑아낼 수 있습니다.
