독특한 자바스크립트 개념 정리: 스코프, 배열 메소드, 배열 도움함수

헷갈리는 자바스크립트 문법 정리하기🤔

Table of the Contents
1. 자바스크립트 스코프
1.1 var, let 범위
1.2 this 범위
2. 함수형 배열 메소드 3가지
2.1 map
2.2 reduce
2.3 filter
3. 배열 도움함수
3.1 concat과 join
3.2 slice, splice, split, substring, substr
3.3 전개연산자

1. 자바스크립트 스코프

1.1 var, let 범위

function testVar() {
   var x = 10;
   for (var i = 1; i <= 5; i++) {
      console.log(i + ' turn:');
      x += i;
      var y = i;
      console.log(x);
      console.log(y);
   }
   console.log('x: ' + x);
   console.log('i: ' + i); // var는 함수 범위
   console.log('y: ' + y);
   // i, y는 함수 범위로, for문을 벗어나 testVar()함수 상단으로 호이스팅 된다.
}
function testLet() {
   let x = 10;
   for (let i = 1; i <= 5; i++) {
      console.log(i + ' turn:');
      x += i;
      let y = i;
      console.log(x);
      console.log(y);
   }
   console.log('x: ' + x);
   // console.log('i: ' + i); // Error: i is not defined
   // console.log('y: ' + y); // Error: y is not define
   // let은 {}블록 범위
   // i, y는 for문을 빠져나오지 못했다.
}

1.2 this 범위

bon’s blog 글을 보고 공부🏓 ← 아래 원칙을 이해할 수 있는 코드 있음!!

🔥this는 현재 실행문맥이다. (누가 호출했는가?)

alert(this===window) // true, 호출자는 window
// 함수 호출
const caller = {
   f: function(){
      alert(this===window)
   },
}
caller.f() // false, 호출자는 caller 객체
// 메소드 호출
// 객체의 함수 호출

📍
생성자 함수(new 키워드로 새로운 객체 생성)
생성자 함수(new 키워드 없음. 일반 함수 실행과 동일하게 동작됨. 따라서, 함수 실행의 결과 값이 할당되므로, property 가져 올 수 없음)
📍
일반 객체: 그냥 할당하면, 레퍼런스 변수(객체와 같은 메모리 참조)
일반 객체(Object.assign({}, 객체이름)): 새로운 메모리 공간 할당
📍
생성자 함수 안에 또 다른 함수가 있는 경우

const testObj = {
   outerFunc: function() {
                 function innerFunc() {
                     console.log(this) // window
                 }
                 innerFunc()
              },
}
testObj.outerFunc()
// outerFunc의 호출자는 testObj. this는 testObj.
// innerFunc의 호출하는 것은 객체가 아니라 함수
// 따라서 innerFunc를 호출하는 문맥이 지정되지 않음.
// 비엄격모드에서는 window
// 엄격모드에서는는 undefined

위의 문제를 아래 3가지 방법으로 해결할 수 있다!
const that = this, bind, arrowFunction

function HungryConstThat(who){
   this.who = who;
   const foods = ['pizza', 'cola'];
   const that = this;
   foods.map(function(value, index){
      console.log(that.who + 'want to eat' + value);
   })
}
function HungryBind(who){
   this.who = who;
   const foods = ['pizza', 'cola'];
   foods.map(function(value, index){
      console.log(this.who + 'want to eat' + value);
   }.bind(this))
}
function HungryArrowFunction(who){
   this.who = who;
   const foods = ['pizza', 'cola']
   foods.map((value, index)=>{
      console.log(this.who + 'want to eat' + value);
   })
}
const soniaConstThat = new HungryConstThat('sonia');
const soniaBind = new HungryBind('sonia');
const soniaArrow = new HungryArrowFunction('sonia');

2. 함수형 배열 메소드 3가지

원래의 배열을 변경하지 않고,
함수 실행 결과값(새로운 배열)을 return

참고 공부자료: KevinHong — 자바스크립트 배열 메서드 reduce 100% 활용법

2.1 map

배열.map((value, index, 배열)=>{ 함수 내용; });
// return value마다 함수 내용이 적용된 배열

2.2 reduce

배열.reduce((누적value, 현재value, index, arr)=>{ 함수 내용; return 누적 value; }, 누적value의initialValue);
// return 최종 누적 value
* reduceRight 은 value를 오른쪽에서 왼쪽으로 순회한다.

2.3 filter

배열.filter((value, index, 배열)=>{ 조건; });
// return 조건을 통과한 배열

// reduce vs filter+map
var data = [1,2,3,4,5,6];
var reducer = function(accumulator, value){
   if(value%2!=0) accumulator.push(value*2);
   return accumulator;
}
var result1 = data.reduce(reducer, []); // 한번 순회, reducer 로직 분리
var result2 = data.filter(x=>x%2!=0).map(x=>x*2); // 두번 순회
// result1, result2 둘다 [2,6,10]

3. 배열 도움함수

3.1 concat 과 join

원래의 함수는 변경시키지 않으면서, 새로운 배열 return

var a='A', b='B', c='C';
var strConcat = a.concat(b); // AB
strConcat = strConcat.concat(c); // ABC
var strArr=[a, b, c];
var strJoin = strArr.join(""); // ABC
strJoin = strArr.join("and"); // AandBandC

3.2 slice 와 splice 와 split

// start부터 시작(포함됨), end는 끝이며 포함안됨
// slice(start[, end]) 기존 배열 안변함
// splice(start[, deleteCount[, item1[, item2[, ...]]]]) 기존 배열 변함
// split(separator[, limit])
// substring(start, end)
// substr(start, length)
var str = "I am Sonia"
var strArr = ["I", "am", "Sonia"]
var strSlice = str.slice(1, 2) //end는 포함 안됨 " "
var strArrSlice = strArr.slice(1, 2) // ['am']
console.log(str) // 원래 값 안변함
// 문자열에는 splice 적용안됨. 배열만 적용 가능
var strArrSplice = strArr.splice(0, 1)
console.log(strArrSplice) // ['I']
console.log(strArr) // splice로 잘린 애는 없음 ['am', 'Sonia']
strSplit = str.split(" ");
console.log(strSplit) // ["I", "am", "Sonia"]
console.log(str) // 안변함
strSubString = str.substring(3, 4)
console.log(strSubString) // "m" -- 4는 end index
console.log(str) // 안변함
strSubStr = str.substr(3, 4)
console.log(strSubStr) // "m So" -- 4는 자를 길이
console.log(str) // 안변함

3.3 전개연산자

객체의 복사 방법
배열 또는 객체를 하나하나 넘기는 방법

const arr1=[1,2]
const arr2=[3,4]
var arr=[arr1, arr2]
var arrSpreadOperator=[...arr1, ...arr2]
console.log(arr) // [ [ 1, 2 ], [ 3, 4 ] ]
console.log(arrSpreadOperator) // [ 1,2,3,4]
const Obj1={name:'sonia', age:'24'}
const Obj2={major:'computer'}
var Obj={Obj1, Obj2}
var ObjSpread={...Obj1, ...Obj2}
console.log(Obj) //{ Obj1:{ name:'sonia',age:'24' }, Obj2:{ major: 'computer' } }
console.log(ObjSpread) //{name:'sonia', age:'24', major:'computer'}