[TIL-001] 20.07.20

1. Today's Todo

• 호이스팅 & 스코프
• let / var / const 개념과 비교
• dot notation / bracket notation / in 연산자
• Array.isArray / indexOf / includes
• push / pop / shift / unshift (배열의 요소 추가 및 삭제)

 

 

2. Achievement Goal

• 호이스팅 & 스코프 (O)
• let / var / const 개념과 비교 (X)
• dot notation / bracket notation / in 연산자 (O)
• Array.isArray / indexOf / includes (O)
• push / pop / shift / unshift (O)

 

 # 호이스팅 & 스코프

Hoisting(호이스팅) & Scope(스코프)

---

 

# dot notation / bracket notation (사용법)

let user = {
  firstName: 'Lee',
  lastName: 'Taeho',
  email: 'e991338120@gmail.com',
  city: 'incheon'
};

// dot notation				
user.firstName; // 'Lee'	
user.city; // 'incheon'	

// bracket notation
user['firstName']; // 'Lee'
user['city']; // 'incheon'	

bracket notaiton 안에 문자열 형식으로 전달 해야한다.
만약에 문자열 형식이 아니면 ReferenceError
user.city = user['city']; // true

 # dot notation / bracket notation (추가 / 삭제)

user['Job'] = 'Student'; // user객체에 key:Job, value:Student 추가 삽입 
user.isPublic = true; // user객체에 key:isPublic, value:true 불리언 추가 삽입  
user.tags = ['#객체안에', '#객체넣기'] // user객체에 key:tags, value:['#객체안에', '#객체넣기'] 추가 삽입
// {firstName: "Lee", lastName: "Taeho", email: "e991338120@gmail.com", city: "incheon", Job: "Student", …}

delete user.email;
// {firstName: "Lee", lastName: "Taeho", city: "incheon", Job: "Student", isPublic: true, …}

# in 연산자 (해당하는 키의 존재 여부 확인)

'email' in user; // true
'address' in user; // false

---

# Array.isArray (배열인지 아닌지 판단)

이외에 instanceof, constructor 배열을 판단 할 수 있는 메소드들이 있다. 

https://codedragon.tistory.com/6564

Array.isArray([1, 2, 3]);  // true
Array.isArray({foo: 123}); // false
Array.isArray('foobar');   // false
Array.isArray(undefined);  // false

 

# indexOf (특정 문자열의 위치를 찾아서 index 값 반환 )

arr.indexOf(searchValue[, fromIndex])

let words = ['Radagast', 'the', 'Brown'];

words.indexOf('the') // 1
words.indexOf('Radagast') // 0
words.indexOf('Brown') // 2
words.indexOf('brown') // -1 (대소문자를 구별하므로 조심해야 한다.)
words.indexOf('없는단어') // -1
words.indexOf('다른 것') // -1

// 있는지 없는지 검사 
words.indexOf('Brown') !== -1 // (있다면?)true 
words.indexOf('없는단어') !== -1 // (없다면?)false 

function hasElement(arr, element) { // 배열, 찾으려는엘리먼트
 let isPresent = arr.indexOf(element) !== -1;
 return isPresent;
}

 

str.indexOf(searchValue[, fromIndex])

let myStr = 'hello wide world!'; // length: 17
let myCapStr = 'Hello Wide world!'; // length: 17

console.log(myStr.indexOf("W"));
// output>  -1
console.log(myStr.indexOf("w"));
// output>  6
console.log(myCapStr.indexOf("w"));
// output>  11

const str = 'To be, or not to be, that is the question.';
let searchValue = 'e'
let count = 0;
let fromIndex = str.indexOf(searchValue);

while (fromIndex !== -1) {
  count++;
  fromIndex = str.indexOf(searchValue, fromIndex + 1);
}

console.log(count); 
// output>  4

 

# includes (배열이 특정 요소를 포함하는지 판별) includes는 인터넷익스플로어에서 호환이 안된다.

arr

let words = ['Radagast', 'the', 'Brown'];

word.includes('Brown'); // true
word.includes('없는것'); // false

string.includes( searchString, length )

'abzcd'.includes( 'z' ) // true
'abzcd'.includes( 'z', 2 ) // true
'abzcd'.includes( 'z', 3 ) // false
'abZcd'.includes( 'z', 3 ) // false

---

 

# push / pop / shift / unshift (배열의 요소 추가 및 삭제)

(1) .push() : 배열의 맨 끝에 요소 추가
let fruits = ["사과", "오렌지"];
fruits.push("배");
alert( fruits ); // 사과,오렌지,배

(2) .pop() : 배열 맨 끝에 요소를 제거, 제거한 요소를 반환
let fruits = ["사과", "오렌지", "배"];
alert( fruits.pop() ); // 배열에서 "배"를 제거하고 제거된 요소를 얼럿창에 띄웁니다.
alert( fruits ); // 사과,오렌지

(3).shift() : 배열 맨 앞에 요소 제거, 제거한 요소를 반환
let fruits = ["사과", "오렌지", "배"];
alert( fruits.shift() ); // 배열에서 "사과"를 제거하고 제거된 요소를 얼럿창 띄움
alert( fruits ); // 오렌지,배

(4).unshift() : 배열 맨 앞에 요소를 추가
let fruits = ["오렌지", "배"];
fruits.unshift('사과');
alert( fruits ); // 사과,오렌지,배

---

3. Tomorrow Todo

• let / var / const 개념과 비교
• mutable vs immutable
• slice 
• forEach
• map
• filter
• reduce