2-1 끝말잇기 순서도 그리기
2-2 끝말잇기 구현하기와 주석
-
주석 표현하기 : 한 줄짜리 주석은 //로, 여러 줄의 주석은 /**/로 사용한다.
-
주석에 들어가면 좋은 내용
- 고차원 수준 아키텍처
- 함수 용례
- 당장 봐선 명확해 보이지 않는 해결 방법에 대한 설명
- 주석에 들어가면 좋지 않은 내용
-
주석에 들어가면 좋지 않은 내용
- '코드가 어떻게 동작하는지’와 '코드가 무엇을 하는지’에 대한 설명
- 코드를 간결하게 짤 수 없는 상황이나 코드 자체만으로도 어떤 일을 하는지 충분히 판단할 수 없는 경우에만 주석처리하기
<body>
<script>
const btn = document.querySelector('#button')
// document.querySelector('아이디')는 그 아이디의 태그를 가져온다.
btn.addEventListener('click', () => {
const word = document.querySelector('#word').textContent
// '.'은 '~의'라는 의미로도 볼 수 있다.
const input = document.querySelector('#input').value
})
</script>
</body>2-3 문자열과 인덱스
-
자바스크립트의 자료형 : 최신 ECMAScript 표준은 다음과 같은 8개의 자료형을 정의한다.
-
기본자료형(Primitive)인 일곱가지 데이터타입
1) Boolean : 논리적 요소를 나타내며 true, false 두가지 값을 가질 수 있다.
2) Null : 딱 한가지 값 Null(알 수 없는 값)을 가진다.
3) Undefined : 값을 할당하지 않은 변수는 Undefined값을 가진다.
4) Number : 정수, 부동 소수점 숫자 등의 숫자를 나타낼 때 사용한다.
5) String : 빈 문자열이나 글자들로 이뤄진 문자열을 나타낼 때 사용한다. 자바스크립트에선 따옴표로 묶여서 표현된다.
6) Symbol : Symbol은 유일하고 변경 불가능한 기본값(Primitive Value)으로 객체의 고유 식별자를 만들 때 사용한다.
7) 최근 채택된 'Biglnt'자료형도 있다. 길이에 상관없이 정수를 나타낼 수 있는 자료형이다. BigInt형 값은 정수 리터럴 끝에 n을 붙이면 만들 수 있다. -
별도로 Object가 있다.
Object는 객체로 속성들을 담고있는 가방으로 간단히 표현 될 수 있다. -
typeof 연산자는 피연산자의 자료형을 알려준다.
- typeof x 또는 typeof(x) 형태로 사용된다.
- 피연산자의 자료형을 문자열 형태로 반환한다.
- null의 typeof 연산은 Object로 나오는데 이는 언어상 오류이며 null은 객체가 아니다.
-
2-4 끝말잇기 구현하기2
<body>
<div id="word">제로초</div>
<div>
<input id="input" type="text" />
<button id="button">입력</button>
</div>
<div id="error"></div>
<script>
const btn = document.querySelector('#button')
btn.addEventListener('click', () => {
const word = document.querySelector('#word').textContent
const input = document.querySelector('#input').value
const lastIndex = word.length - 1
if (word[lastIndex] == input[0]){
document.querySelector('#word').textContent = input
document.querySelector('#error').textContent = ''
document.querySelector('#input').value = ''
// 빈 문자열을 넣어주면 아무것도 뜨지 않는다.
document.querySelector('#input').focus()
//focus() 함수는 입력창에 자동으로 커서가 클릭 될 수 있도록 도와준다.
} else{
document.querySelector('#error').textContent = '땡'
document.querySelector('#input').value = ''
document.querySelector('#input').focus()
}
})
</script>
</body>2-5 변수 값 수정과 상수
- 위 코드를 보면 document.querySelector('#word').textContent 등이 반복되게 된다.
코드는 줄일수록 좋지만 document.querySelector('#word').textContent를 word라고 쓰면
word = input이 된다. 그렇게되면 변수안의 값이 아닌 태그의 값이 수정되기 때문에 줄여줄 수 없다.
따라서 document.querySelector('#word')까지만 변수에 저장해서 줄여줄 수 있다.
// 위 코드를 줄인 코드
<script>
const btn = document.querySelector('#button')
btn.addEventListener('click', () => {
const wordTag = document.querySelector('#word')
const inputTag = document.querySelector('#input')
const errorTag = document.querySelector('#error')
const word = wordTag.textContent
const input = inputTag.value
const lastIndex = word.length - 1
if (word[lastIndex] == input[0]){
wordTag.textContent = input
errorTag.textContent = ''
inputTag.value = ''
inputTag.focus()
} else{
errorTag.textContent = '땡'
inputTag.value = ''
inputTag.focus()
}
})
</script>2-6 변수의 생명(블록 스코프)
-
변수의 생명은 속한 블록에서 시작하고 끝난다.
-
자바스크립트의 var은 함수 레벨 스코프를 따르고 있었다.
함수 레벨 스코프(Function-level scope)
함수 내에서 선언된 변수는 함수 내에서만 유효하며 함수 외부에서는 참조할 수 없다. 즉, 함수 내부에서 선언한 변수는 지역 변수이며 함수 외부에서 선언한 변수는 모두 전역 변수이다.var scope = 123;
{var scope = 456;}
console.log(scope); //456블록 레벨 스코프(Block-level scope)
모든 코드 블록(함수, if 문, for 문, while 문, try/catch 문 등) 내에서 선언된 변수는 코드 블록 내에서만 유효하며 코드 블록 외부에서는 참조할 수 없다. 즉, 코드 블록 내부에서 선언한 변수는 지역 변수이다. -
블록 레벨 스코프를 지원하기 위한 let키워드 탄생!
let scope = 123; // 전역변수
{
let scope = 456; // 지역변수
console.log(scope); //456
let oldvar = 456;
}
console.log(scope); // 123
console.log(oldvar); // ReferenceError: oldvar is not defined -
let 키워드로 선언된 변수는 블록 레벨 스코프로 중복 선언이 불가능하다.
-
var vs let vs const
-
변수 선언에는 기본적으로 const를 사용하고 let은 재할당이 필요한 경우에 한정해서 사용한다.
-
원시 값의 경우 가급적 상수를 사용한다. 그리고 객체를 재할당하는 경우는 생각보다 흔하지 않다. const 키워드를 사용하면 의도치않은 재할당을 방지해주기 때문에 보다 안전하다.
- ES6를 사용하면 var 키워드는 사용하지 않는다.
- 재할당이 필요한 경우에 한정해서 let을 사용한다. 그리고 변수의 scope는 최대한 좁게 만든다.
- 변경이 발생하지 않는(재할당이 필요 없는 상수) 원시 값과 객체에는 const 키워드를 사용한다.
-
2-7 강좌 마무리
- Dictionary : 는 데이터를 Key와 Value 쌍으로 저장할 수 있는 자료구조로 사실상 자바스크립트에서 Dictionary라는 자료형 이름은 없고 Object와 동일하다.
Key로 검색을 수행하고 Value로 값을 반환한다.
const dictObject = {}
// dictObject[Key] = Value
dictObject['banana'] = '바나나'
dictObject['apple'] = '사과'
dictObject['cherry'] = '체리'
console.log(dictObject)
// {banana: "바나나", apple: "사과", cherry: "체리"}- includes() : 는 배열이 특정 요소를 포함하고 있는지 판별하는 메서드다.
arr.includes(valueToFind, indexNumber)
// example (1)
[1,2,3].includes(2) //True : List[1,2,3] 안에 숫자 2가 포함되어있다.
[1,2,3].includes(2,2) // False : List[1,2,3]의 2번 index는 숫자 3이기 때문에 false이다.
[1,2,3].includes(2,1) // True : 1번 index는 숫자 2를 포함하고있다.
[1,2,3].includes(3,-1) // True : indexNumber에는 index를 표현할 수 있는 모든 표현이 허용된다.
// example (2)
let arr = ['a','b','c']
arr.includes('c', 3) //False : indexNumber가 변수의 index를 초과할 경우 false를 반환한다.
출처 :
1) https://ko.javascript.info/types
2) https://developer.mozilla.org/ko/docs/Web/JavaScript/Data_structures
3) https://poiemaweb.com/es6-block-scope
