JS 오늘 공부한 내용
유데미 - 완벽 자바스크립트 가이드 중 섹션2의 내용 중 필요한 대본만 스크랩.
강의 길이만 3시간 20분짜리인데
강사분이 설명하기전
미리 생각해보면서 하니 반나절로도 부족했다.
18. 웹사이트에 JavaScript 추가하기
모든 스크립트와 HTML이 한 파일 내에 있다면, 파일이 매우 방대해질 것이고
JavaScript가 됐든 HTML이 됐든 뭔가를 수정할 필요가 있는 경우
수정할 부분을 찾기 위해 모든 내용을 스크롤 해야 하겠죠
따라서 여기에 스크립트를 넣는 건 대게 최적의 방식은 아닙니다
굉장히 짧은 스크립트가 아니라면 말이죠
그 대신, 보통은 스크립트를 가져오는 게 좋습니다
이를 위해 script 태그에 source 속성, 즉 src를 추가합니다
그 후 큰따옴표 사이에 스크립트 파일의 위치를 적으면 되죠
작은따옴표를 쓰거나 따옴표가 없어도 작동하긴 하지만
통상적으로는 스크립트 파일의 위치엔 큰 따옴표를 사용합니다
assets을 입력해 assets 폴더를 가리킨 뒤 /를 붙여 브라우저에게 해당 폴더로 이동하거나
해당 폴더 내부를 찾아보도록 지시합니다
그 다음에는 그 안에 있는 폴더인
여기에서 한 가지 문제점은 스크립트가 완료되기 전까지는
페이지가 렌더링되지 않는다는 점입니다
페이지가 먼저 로드되도록 하려면 한 가지 간단한 작업만 해주면 됩니다
스크립트를 여기의 head로부터
body 끝 부분으로 옮겨서
브라우저가 스크립트를 실행하기 전에 먼저 모든 HTML 코드를
분석하고 렌더링을 끝내도록 하는 것이죠
19. 변수 & 상수 소개
변수는 일종의 데이터 컨테이너 또는 저장소라고 볼 수 있습니다
let userName = “Max”;
.JavaScript에서는 표시된 것처럼 let 키워드를 사용해
변수를 생성하고, 그 다음에는 정한 이름이 오는데
그 다음으로 =와 변수에 저장할 값을 입력합니다
일단 변수가 생성되면 언제든지 새로운 값을
변수에 재할당할 수 있습니다
const 키워드를 사용해 생성된 상수의 특별한 점은
값을 변경할 수 없다는 것이죠, 바꾸려고 하면 오류가 발생할 겁니다
20. 변수 선언 & 정의
camelCase라고 불리는 작명 방식을 따르는 건데요
이름이 소문자로 시작되고 한 단어로만 이루어지는 방식입니다
따라서 변수의 이름으로는 변수 내에 어떤 종류의
데이터가 저장되는지를 묘사해 주는 이름이 좋습니다
또 하나 중요한 점은 JavaScript가 대소문자를 구분한다는 것인데요
즉, 대소문자 처리 여부가 실제로 중요합니다
변수 이름에는 어떤 글자나 숫자도 사용이 가능합니다
특수 문자 $도 사용할 수 있죠
비슷하게, 변수 이름의 맨 처음 또는 어느 위치에라도
_를 사용할 수 있습니다
21. 변수 & 연산자로 작업하기
연산자란 뭘까요?
연산자는 값을 조종할 수 있도록 해주는
JavaScript의 구문 기능입니다
여러분에게도 익숙한 전형적인 수학 연산자들이 있죠
+, -, * 등의 연산자가 있는데 *는 두 숫자를 곱하는데 사용하며
/는 두 숫자를 나누는 데에 사용합니다
계수 연산자도 있는데 %는 두 숫자를 나누되
나눗셈의 결과가 아니라 값이 나누어 떨어지지 않고
소수점이 남는 경우의
나머지를 구하는 연산자입니다
** 연산자도 있는데요
이 연산자는 숫자를 거듭제곱해 주는 연산자입니다
23. 자료형: 숫자 & 문자열 (텍스트)
‘(’ + currentResult + ‘ 10) * 3 / 2 – 1 ’ ;
여기에 값을 사용하고자 한다면
문자열 접합이라는 작업을 하셔야 합니다
이는 다수의 서브 문자열을 결합시켜 하나의 문자열을 만드는 작업이죠
즉 여기의 ( 괄호의 경우 문자열에 포함이 되고
그 다음에 + 연산자와 currentResult를 추가합니다
따옴표로 감싸지 않은 채로 입력하는 거죠
그럼 이제 JavaScript는 가서 해당 변수를 찾아 볼 겁니다
그 뒤에는 이 문자열을 결합합니다 다시 말씀드리지만
따옴표 사이의 내용은 문자열이 됩니다
여기의 이 + 연산자는 문자열이 아니라 일반적인 연산자로 취급하기 위해서
+를 따옴표 사이에 넣지 않았습니다
기존 상단의 코드에서는 +를 숫자와 함께 사용했는데요
JavaScript에서는 이렇게 문자열을 다룰 때에도 +를 사용할 수 있습니다
그러면 수학적인 방식으로 +를 사용하는 것이 아니라
다수의 문자열 즉 텍스트 조각을 결합시켜서
더 긴 텍스트로 만드는 역할을 합니다
이 괄호를 currentResult 내에 있는 실제 값과 결합시키고
그 다음에 이 부분을 연결하여 더 긴 문자열을 만들죠
최종적으로 생성된 텍스트에서 +와 currentResult에 저장된 값 사이에
공란을 추가하기 위해서
여기에도 공란을 추가하겠습니다
25. 문자열 더 보기
템플릿 리터럴
: 백틱을 사용하면 특별한 구문을 사용할 수 있게 되는데요
` $ {｝｀여기에 $를 사용한 후에 중괄호를 열고 닫습니다
그리고 그 사이에 변수, 또는 텍스트 출력으로 결과값을 내는
표현식을 적을 수 있습니다
템플릿 리터럴의 편리한 점 중 하나는
여러 행으로 된 문자열을 쉽게 작성할 수 있다는 건데요
white-space: pre;
개발자 도구의 h2 요소에 스타일링을 다시 추가하면
줄 바꿈과 여분의 공란이 실제로 존재함을 화면에서 확인이 가능해지죠
작은따옴표 또는 큰따옴표 사이에 포함된 문자열에
실제로 줄 바꿈을 추가하기 위해서는
특수 문자, 또는 특수 문자의 조합을 사용하시면 됩니다
바로 ＼n(백슬래시n)을 추가하는 것이죠
그러면 화면상에 렌더링이 이루어질 때
＼n을 출력하는 것이 아니라 줄 바꿈으로 인식합니다
첨부된 이스케이프 문자 목록을 한 번 살펴보세요
단 제가 생각하기에는 ＼n, ＼＼, 그리고 ＼'가
가장 중요하고 가장 자주 사용하는 것들입니다
26. 함수 소개
27. 사용자 정의 함수 추가하기
여기서 계산기 + 값부터 시작
let a = b;
한 줄로 된 표현식 뒤에는 세미콜론을 붙이지만
function add ( num1. num2 ) {
}
이 함수와 같이 중괄호가 있는 함수 선언문 뒤에는
세미콜론을 붙이지 않습니다
이 코드는 함수의 내용과 작동 방법을 정의하고
function add (num1, num2) {
const result = num1 + num2 ;
alert ('The result is' + result);
}
이제 alert의 텍스트를 출력할 텐데요
저장하고 새로 고침을 하면 아무 일도 일어나지 않네요
이는 우리가 아직 함수를 호출하지 않았기 때문입니다
앞에서 말씀 드렸듯 함수를 실행하기 위해서는, 호출을 하셔야 합니다
함수는 어떻게 호출할까요?
함수의 이름을 사용하면 됩니다
add ( ); 이 부분은 함수를 호출하는 거죠
여기에는 세미콜론을 추가할 텐데요
표현식으로 함수를 실행하는 것이기 때문입니다
이 함수가 제대로 작동하려면 인자인 매개변수 두 개가 필요한데요
num1과 num2입니다
add (num1, num2 );
함수가 실행에 사용하게 될
구체적인 값을 넣으셔야 합니다
28. 코드 스타일, 컨벤션 & 구문
다음은 유효하지 않아 구문 오류가 뜰 겁니다.
let someLongString = 'Hi, this is going to be a bit longer,
so maybe split it across multiple lines by
concatenating multiple strings!';
그 이유는 무엇일까요? JavaScript는 첫 번째 줄 문자열의 끝을 찾을 수 없고 - 다른 줄에서는 찾지 않기 때문입니다. 문자열은 항상 한 줄에 있어야 합니다. (또는 여러 문자열로 분할되어 +을 통해 연결되어야 합니다).
세미콜론은 어떨까요?
일반적으로 작성한 모든 표현식 뒤에 배치해야 합니다. 예외는 {} 을 사용하는 함수와 비슷한 코드 스니펫입니다(이 규칙의 예외: 객체!).
함수 뒤에 세미콜론을 추가하는 것에는 문제가 없으며, 오류가 발생하지 않습니다. 그러나 함수에는 세미콜론을 추가하지 않는 것이 일반적입니다.
29. 값 반환하기
이때 alert를 하거나, 함수 내에서 작업을 하는 것이 아니라
return result;로 JavaScript에 내장된
return 키워드를 사용하시면 됩니다
이제 return이 나왔는데 이름 그대로의 키워드입니다
이 함수는 result에 저장된 값을 반환하는데
바로 해당 함수 호출의 결과로써 저장된 값이죠
30. 코드 순서의 (비)중요성
즉 JavaScript에서 let이나 const 키워드를 사용할 때
변수와 상수는 사용하기 전에 먼저 선언을 하셔야 합니다
그리고 선언이란 let이나 const로 변수를 생성하는 부분을 의미하죠
말씀드렸듯, 같은 이름에 대한 선언은 한 번만 해야 합니다
값은 늘 재할당할 수 있지만 let과 const의 경우는
한 번만 선언할 수 있습니다 그리고 값을 읽으려 하거나
할당하려 하기 전에 선언이 먼저 이루어져야 합니다
그런데 함수의 경우는 조금 다릅니다
이 함수를 가져다 파일의 맨 하단으로 옮겨도 상관이 없습니다
이는 함수에 대해서는 JavaScript에서 특별한 행동 방식을 갖추기 때문인데요
JavaScript, 즉 브라우저는
스크립트를 로드할 때 위에서부터 아래로 실행을 하는데
전체 스크립트를 구문 분석하되 이를 바로 실행하는 것이 아니라
위에서부터 아래로 읽기를 합니다
그리고 파일 내에서 함수를 찾게 되면 함수를 자동으로 맨 위로 끌고 가서
인식을 한다고 표현할 수 있습니다
즉 스크립트를 실행하기 전에 자동으로 모든 함수를 등록부터 하는 거죠
제 개인적으로는, 대부분의 경우 함수를 파일 시작 부분에 두는 걸 선호합니다
31. 전역 & 로컬 범위 소개
변수와 상수에서는 순서가 중요하지만
함수에게는 중요하지 않습니다
함수에서 또 하나 기억해 두어야 할 것은
함수 외부에 정의된 변수 및 상수에 액세스할 수 있어서
전역적으로 정의된 변수나 상수를 읽을 수 있다는 점입니다
함수 내부에 상수나 변수를 정의하는 것을
로컬 혹은 블록 스코프(block scope)라고 합니다
즉 해당 블록 내에서만 사용이 가능하다는 뜻으로
중괄호로 포함된 부분을 블록이라고 하는데요
블록 내에서는 어디든 가능하지만 외부에서는 사용할 수 없습니다
방금 말씀을 드렸듯, 전역 변수와 상수 및 함수를 함수 내에서 사용할 수는 있지만
로컬 변수나 상수, 함수
즉 함수 내부에 정의된 변수, 상수 또는 함수는
외부에서 사용이 불가능합니다
이런 데이터들은 함수 외부에서 사용할 수 없습니다 (함수 내부에 선언된 로컬/블록 스코프 변수를 외부에서 사용할 수 없음)
32. “그림자(Shadow) 변수”
만약 변수가 전역적으로 정의되고
함수 내부에서 지역적으로도 생성을 하면 어떻게 될까요?
즉 let이나 const를 사용해 전역적으로 선언하고
함수 내에서 let이나 const로 똑같이 정의를 하면 어떻게 되냐는 거죠
기존의 것을 덮어쓰지 않고 새로 생성하는 경우인 겁니다
그게 가능할까요?
네, 가능합니다 이는 섀도잉 과정(shadowing)이라고 하는데
33. “반환” 문장 더 보기
return 문은 함수에서 데이터를 가져올 때 유용합니다
return 문은 함수 실행을 종료합니다
나중에 오는 코드가 실행되지 않도록 하는 겁니다
그리고 return 문은 하나만 있어야 합니다
두 번째를 만들 수도 있었지만
첫 번째 return 문 다음에는 함수 실행이 종료되기 때문에
두 번째를 만들 이유가 없습니다
34. 함수를 “간접적으로” 실행하기
addBtn.addEventListener("click", add);
하지만 여기서 기억해 두셔야 할 점은 브라우저와 JavaScript 엔진에게
이 함수를 바로 실행하는 것이 아니라
이 버튼을 클릭해야 함수가 실행되게끔 지시를 하고자 한다는 거죠
이 문제는 괄호를 가진 함수 전체를 전달하는 게 아니라
함수 이름만 전달하는 것으로 해결을 할 수 있습니다
그렇게 하면 JavaScript 엔진에게 버튼을 클릭할 때에
그 이름을 가진 함수를 찾아 실행하라고 지시를 하게 됩니다
결국 전역적인 상수 및 변수로 작동을 할 수도 있는
명확한 함수를 생성하시되 내부 데이터나 일부 반환 값들과
과도하게 혼합해 사용해서는 안 되는 거죠
function add () {
const result = currentResult + userInput.value ;
return result;
}
일반적인 규칙으로, 함수가 일부 전역 변수를 조작하는 건 괜찮지만
이런 함수가 무언가를 반환해서는 안 됩니다
함수가 뭔가를 반환한다는 건 함수가 일종의 신호를 보내는 것으로
특정 작업을 해 결과를 낼 뿐 그 외의 작업은 하지 않는 겁니다
이 함수가 다른 것들도 바꾸기 시작하면 혼란을 초래하는 거죠
이제 저장하고 페이지를 새로 고침한 뒤
5를 넣고 더하기를 클릭했는데도 이런, 바뀌는 것이 없네요
왜 그럴까요?
이제 거의 완성했는데 명심하셔야 할 점은
outputResult (currentResult, calculationDescription) ;
outputResult를 script 끝에서 호출하고 있다는 점입니다
앞서 언급했었듯, 스크립트는 위에서부터 아래로 읽기 때문에
읽기가 끝나고 나면 끝입니다 다시 실행을 하지 않죠
버튼을 누를 때마다 유일하게 재실행이 되는 건 이 함수인데요
addBtn.addEventListener("click", add);
스크립트를 실행했을 때 브라우저에게 클릭 리스너를
인식하도록 지시했기 때문입니다 그럼 클릭 리스너를 등록하고
스크립트가 완료된 후에도 이 함수가 메모리 및 필요한 주변 데이터
모두에 저장되어 있기 때문에 버튼이 클릭될 때마다
항상 함수를 실행하는 겁니다
하지만 outputResult는 버튼 클릭으로 실행되는 게 아니라
스크립트가 처음 실행될 때 실행됩니다
따라서 이제 우리의 페이지에 버튼이 클릭되어
currentResult가 바뀔 때가 아니라
스크립트가 처음으로 실행될 때만 일어나도록 작성을 할 겁니다
이는 outputResult 코드 부분을 복사해
add 함수에 추가하면 해결되는데요
function add () {
const result = currentResult + userInput.value ;
outputResult (currentResult, '') ;
}
35. “간접적” vs “직접적” 함수 실행 – 요약
function add() {
something = someNum + someOtherNum;
}
add() vs add
add()
이게 바로 코드의 함수를 실행하는 방법입니다. JavaScript는 이 문장이 나올 때마다 함수의 코드를 실행합니다. 이상입니다!
하지만 가끔은, 함수를 바로 실행하고 싶지 않을 때가 있습니다. JavaScript에 미래의 어느 시점에(예: 일부 이벤트가 발생할 때) 어떤 기능이 실행되길 원할 수도 있습니다.
이 경우에 함수를 직접 호출하는 대신 JavaScript에 함수 이름을 제공합니다.
=> someButton.addEventListener('click', add);
이 스니펫은 JavaScript에게 이렇게 지시합니다. "이 버튼이 클릭되면 add를 실행해.".
=> someButton.addEventListener('click', add);
someButton.addEventListener('click', add()); 는 이 경우에는 오답이 될 겁니다.
그 이유는 무엇일까요? JavaScript는 스크립트를 분석/실행하고 이벤트 리스너를 등록하는 즉시 add를 실행하기 때문입니다 - 괄호를 추가했기 때문이죠 => 위를 참조해 주세요. "함수를 실행해!".
36. 자료형 변환하기
바로 문자열이죠 userInput은 사용자 입력인데
<input type="number" id="input-number" />
여기 숫자를 입력하더라도
HTML 코드 상 userInput이 숫자 유형으로 되어 있다 하더라도
사용자의 JavaScript 코드 HTML 입력에서 무엇을 가져오든 간에
이건 항상 문자열이 됩니다 기억해 두셔야 하는 내용이죠
입력 요소의 값을 읽으면, 이는 문자열을 제공합니다
브라우저에서 JavaScript는 이렇게 작동하죠
값이 숫자가 되어야 하는지 아닌지는 확인하려 하지도 않고
추정을 하지도 않습니다
그저 문자열, 즉 텍스트를 제공하는 겁니다
parseInt의 경우 텍스트, 즉 문자열을
소수점 이하 숫자가 없는 수로 구문 분석을 하는 함수이며
parseFloat는 소숫점 아래 자리가 있는 수로 분석하죠
parseFloat에서 10을 입력하면 10.0으로 구문을 분석
parseInt와 parseFloat는 JavaScript에 내장된 함수이며
문자열을 입력으로 여러분이 전달하는
매개변수로 받아서
텍스트를 숫자로 변환해 줍니다
parseInt 대신 +를 사용하셔도 되는데 괄호는 없어도 됩니다
여기에 있는 +는 덧셈 연산자이고
문자열 앞에 있는 +는 문자열을 숫자로 전환합니다더 짧은 형식으로 변환해 주는 거죠
+를 쓸지parseInt를 쓸지는 여러분의 선택입니다
만약 숫자를 문자열로 변환하고자 하는 경우에는
.toString을 추가할 수 있습니다
이 역시 숫자와 결합된 내장 함수이며
숫자를 문자열로 변환해줍니다
37. 숫자 & 문자열 섞기
38. 함수로 코드 나누기
참고로, 템플릿 리터럴에서 이런 임베딩 구문을 사용할 때
전달하는 값이 숫자라고 해도
모두 문자열로 변환되게 됩니다
그래서 이 코드가 암묵적으로 toString을 호출하는 거죠
${userInput.value.(toString() ) } ( )<= 자리에 있다고 표현
function getUserNumberInput() {
return +(userInput.value); //parseInt 대신 + 로 대체 가능
}
function add () {
const enteredNumber = getUserNumberInput();
const calcDescription = `${currentResult} + ${enteredNumber}`;
currentResult += enteredNumber;
outputResult (currentResult, calcDescription) ;
}
이벤트 리스너에 함수를 추가하는 대신에
수동으로 호출을 했는데요 이는 함수가 실행될 때마다
이 로직을 아웃소싱하는 이 함수 역시 실행하게끔 하기 위해서입니다
특히 코드가 더 많거나
공유하려 하는 로직이 여러 줄일 때 사용하면 좋은 방법입니다
39. 모든 버튼들을 함수에 연결하기
저는 이 함수에서 사용되었던 매개변수에 관심이 있는데요,
이름은 아무거나 상관없습니다
더하기, 빼기 등이 포함된 텍스트가 되어야 합니다
function createAndWriteOutput(operator) { }
function createAndWriteOutput(operator, resultBefroCalc, calcNumber) {
const calcDescription = `${resultBefroCalc} ${operator} ${calcNumber}`;
outputResult (currentResult, calcDescription)
}
function add () {
const enteredNumber = getUserNumberInput();
const initialResult = currentResult
currentResult += enteredNumber;
createAndWriteOutput (‘ + ’,initialResult ,enteredNumber);
}
이런 모든 과정을 리팩터링이라고 부르는데
코드를 옮겨 더 명쾌하게 작성하는 방법이죠, 그리고 이 방법의
사용은 전적으로 선택 사항이지만
하지만 여러분의 프로그래머나 개발자로서 일상적 업무에서 필요할 때가 있을 테니
이 방법에 익숙해지는 게 좋습니다
반복하지 않아도 되고 로직을 나누지 않아도 되는
그런 좋은 코드를 작성하셔야 하니까요
여기서 계산기 로직 부분은 완료 이제 주석
40. 코드 주석 작업
// , /* */
특히 다른 사람과 코드를 공유할 때, 주석을 활용하시되
주석을 지나치게 다실 필요는 없습니다
중복되는 정보는 피하세요
너무 긴 주석을 쓰면 사람들이 읽지 않기 때문에
오히려 주석이 없을 때 보다 얻는 정보가 적어질 겁니다
그리고 너무 명백한 주석도 피하셔야 합니다
대신 코드를 더 빨리 이해하는 데 도움이 될
추가 정보를 제공하셔야겠죠
또는 코드에 대한 여러분의 생각을 짧게 공유하세요
41. 연산자 더 보기!
축약 연산자라고
불리기도 하는 것들이죠
예를 들어 변수에 새로운 값을 지정하고자 한다고 해봅시다
현재의 값에 1을 더한 값이죠 currentResult + 1
물론 1을 더할 필요는 없지만 상황이 그렇다고 가정을 하고요
currentResult + 1 대신 currentResult++를 사용하는 겁니다
뺄셈도 동일한 방식으로 가능합니다
currentResult--를 사용하시면 되겠죠
이는 곱셈과 나눗셈에는 적용이 되지 않는데, 그 이유는 뭘까요?
이유는 바로 1로 곱셈을 하거나
나눠도 같은 숫자가 되기 때문입니다
추가로 말씀드리자면 변수의 앞에서 --, 혹은
++를 사용하실 수도 있는데요
그렇게 하면 아주 약간의 차이점이 발생합니다
값을 바꾸기 위해서가 아니라
연산의 반환 유형에 대해 알고 싶을 때 사용하시면 되는데요
이렇게 변수 앞에 ++를 사용하는 경우, currentResult 값에 1이 더해지는데
이는 변수의 뒤에 ++를 붙였을 때와 같죠
하지만 변수의 앞에 ++, --를 붙이는 경우,
연산이 수정된 값을 반환하게 됩니다
그리고 이렇게 변수의 뒤에 ++,--을 붙이는 경우에는
이 연산이 수정 전 변수의 값을 반환하게 되죠
42. 코어 자료형 더 보기!
43. 배열 사용하기
let a = [1, 2, 3]
대괄호를 추가하면 배열을 생성할 수 있는데요
가독성을 높이기 위해 보통 공백을 넣지만, 필수는 아니고
쉼표는 반드시 필요합니다
console.log(logEntries[ ])
배열의 특정 요소에 액세스하려면
변수 이름 뒤에 대괄호를 추가해서
변수에 액세스할 수 있습니다 즉, 변수를 읽거나 얻고자 하는
위치, 변수의 뒤쪽에 대괄호를 추가하는 거죠
그리고 대괄호 내에는 인덱스, 즉 추출하고자 하는
요소의 위치를 추가해 주면 됩니다
배열, 혹은 배열의 인덱스는 0부터 시작을 합니다
44. 객체 생성하기
객체는 데이터를 함께 묶어 그룹화하는 데에 사용되며
중괄호를 통해 객체를 생성하게 되면
쉼표로 구분된 여러 키-값 쌍을 가질 수 있죠
const LogEntry = {};
여기에 예를 들어 operation 키를 추가할 수 있는데요
키의 이름은 여러분이 정하시면 됩니다 op, operation
뭐든 좋아요, 그리고 : 으로 분리시켜서 값을 추가합니다
값 역시 어떤 것이든 될 수 있는데
문자열, 숫자, 배열 다른 객체 등
객체 속 객체도 가능합니다
저는 operaion에 ADD라는 문자열을 저장하겠습니다
이게 일종의 식별자로 기능하게 될 텐데요
45. 객체 - 공통 구문 포착
지난 강의에서 객체 생성을 위한 올바른 구문을 배웠습니다.
const user = {
name: 'Max',
age: 30
};
몇 가지 중요한 점.
{} 를 사용하여 "데이터 그룹화"를 수행할 수 있습니다 - 닫히는 } 뒤에 세미콜론(;)이 사용됩니다. 함수에서는 이렇게 하지 않죠. 일반적으로 {} 가 등호 오른쪽에 있는 경우 {} 뒤에 세미콜론이 사용됩니다!
키-값 쌍은 세미콜론이 아닌 쉼표(,)로 구분됩니다. 객체 내부(즉 {} 사이)에 세미콜론을 쓰면 구문 오류입니다!
값은 등호(=)가 아니라 콜론(:)으로 키/프로퍼티에 할당됩니다. 객체 내부(즉 {} 사이)에 등호를 쓰면 구문 오류입니다!
즉 아래의 코드는 잘못된 것이며 오류가 발생할 겁니다.
const worstPossibleUser = {
name = 'Max';
age = 30;
};
46. 객체 데이터에 액세스하기
const LogEntry = {
operation : 'ADD',
prevResult : initialResult,
number: enteredNumber,
result: currentResult
};
console.log(LogEntry.operation);
컨트롤 + 스페이스바를 눌러도 ide 자동완성 메뉴를 띄워줌
객체 내의 데이터에 액세스하는 법을 보여 드리기 위함입니다
이 작업은 이미 보신 적이 있는 표기법을 이용해 할 수 있는데요
여기 객체의 이름인 logEntry를 입력한 뒤에
. 을 추가합니다 이렇게 작성함으로써 JavaScript에게
. 앞에 지정된 객체, 즉 여기에서는 logEntry가 되겠죠
객체에 데이터 조각을 의미하는 객체 내의 프로퍼티 중
하나로 액세스하도록 JavaScript에게 지시를 하게 되는 거죠
보시다시피 IDE가 이렇게 자동 완성 메뉴를 띄워 주는데
Ctrl + 스페이스바를 눌러도 메뉴가 뜰 겁니다
그러면 operation을 선택해 액세스를 하고
logEntry.operation을 출력할 수 있는데요
이제 새로 고침 후 5를 입력하면
여기 ADD가 출력되죠
이렇게 점 표기법을 통해 객체의 데이터로 접근이 가능해지는데요
키-값 쌍, 키 등도 프로퍼티라고 불리며
점 표기법인 . 에 프로퍼티 이름이나 키 이름 등을
입력하면 해당 프로퍼티로
액세스 할 수 있게 됩니다 전에 본 적이 있었던 내용이죠
지금으로서는 객체는
데이터의 그룹이고 값이 문자열, 숫자, 배열
다른 객체 등이 될 수 있는 키-값 쌍이 있으며
이 코드에서 했듯 데이터를 하드코딩할 수도 있고
혹은 이런 식으로 변수를 지정해
변수의 값이 이 키의 값으로 지정될 수도 있다는 점만
알아 두시면 될 것 같습니다
47. 객체를 사용하는 재사용 가능한 함수 추가하기
48. undefined, null & NaN
null, undefined, NaN입니다 이게 뭘까요?
이것들은 모두 특별한 값인데
null과 undefined는 값인 동시에 데이터 유형입니다
어떤 개념일까요?
Undefined는 초기화 되지 않은 변수의 기본값입니다
변수를 생성한 후에 등호로 값을 할당하지 않을 경우
이 변수는 undefined가 됩니다
그러니까 undefined는 아무것도 없음을
나타내는 값입니다
여기서 undefined를 직접 값으로 할당하면 안됩니다
=undefined를 입력하면 안된다는 겁니다
이는 값을 할당한 적이 없을 경우의 기본값일 뿐이기 때문입니다
null은 undefined와 유사한데 데이터가 없다는 의미입니다
null은 절대 기본값이 될 수 없습니다
해당 값을 사용하려면 무언가를 null로 설정해줘야 하죠
이는 변수를 재설정하거나 정리하고 싶을 때 자주 쓰게 되는데
예를 들어, 사용자 입력값이 있고 이를 재설정하려는 경우
이를 빈 문자열로 설정할 수도 있겠지만
null로 설정해서 현재 프로그램에서는
어떠한 값도 입력하지 않았으므로
이 값은 없어야 한다는 것을 명확히 알려줄 수도 있습니다
NaN의 개념이 무엇인지 살펴보자면 이는 일종의 오류 코드로
숫자가 포함되지 않은 무언가로 계산을 실행하는 경우
예를 들어, 텍스트 같은 것을 곱한다면
그 결과는 NaN이 됩니다
50. “defer” & “async”를 이용해 스크립트 올바르게 임포트하기
52. 마무리