23_11_15 JS공부정리

[코딩애플] Part 1

 

 

1.호이스팅 : 변수선언과 할당이 한줄에 같이 있으면 변수 선언을 맨 윗줄로 옮기는 방식

-JS에선 위의 코드가 아래코드처럼 실행됨

function 함수(){

console.log('hello');

var 이름 = 'Kim';

 

}

function 함수(){

var 이름; //선언이 제일 위로 올라옴

console.log('hello');

이름 = 'Kim';

}

 

  console.log(이름);  // undefined (var 이름이 젤 위에 선언되기 때문)

  var 이름 = 'Kim';

  console.log(이름); // "Kim"

 

-변수선언시 여러개를 동시에 선언할 수 있음

  var 이름 = 'Kim', 나이 = 29 , 성별 = "남";

 

-전역변수 : window.변수

  window.나이 = 20;  //전역변수만들기

  console.log(window.나이);  //전역변수사용하기

  window.나이 = 30;  //전역변수변경하기

 

-let변수의 호이스팅(initialization해주지 않음)

함수();

function 함수() {

  console.log(안녕); //Error : let변수는 호이스팅되지만 선언시 undefined를 할당하지 않음

  let 안녕 = 'Hello!';

}

 

-전역변수와 지역변수에 관한 문제

let a = 1;

var b = 2;

window.a = 3;

window.b = 4;

console.log(a + b); //(1+4)

//var b = 2; 와 window.b = 4; 는 거의 동일한 기능을 하는 코드

//a는 let으로 1을 할당하고 전역변수로 3을 할당했음. => 가까운 변수부터 사용하여 1이 할당됨

 

 

백틱 문자열의 장점
1.중간에 엔터키 가능
2.중간에 변수넣기 가능 ${}

 

 

-ES6에선 함수뒤에 백틱``을 써도 함수가 실행됨( tagged literal )

()대신 ``를 사용

-``로 함수를 실행하는 이유 : 
`문자`를 해체분석할 수 있음
-단어 순서를 변경
-단어를 제거
-${변수} 위치를 옮기기

-해체분석기 파라미터 첫번째 : 문자들을 Array화 해줌
-해체분석기 파라미터 두번째부터 : 차례로 ${변수}들을 순서대로 가리킴

 

-문자들의 순서를 쉽게 바꿀 수 있음

let 변수 = `손흥민`;

let 문자 =`안녕하세요 저는 ${변수}`;

function 해체분석기(문자들,변수들,변수들2) {

    console.log(문자들[1] + 문자들 [0]); // 출력 : 입니다.안녕하세요

    console.log(변수들); // 출력 : 손흥민

    console.log(변수들2); // 출력 : undefined

}

해체분석기`안녕하세요${변수}입니다.`; // 출력 : 입니다.안녕하세요 손흥민 undefined

 

-변수가 0일때 다른 '다팔렸어요'를 출력하는 함수

var pants = 0;

var socks = 100;

`바지${pants} 양말${socks}`;

function 해체분석기(string, var1, var2) {

    if(var1 <= 0) {

        var1 = `다팔렸어요`

    }

    console.log(string[0] + var1 + string[1] + var2)

}

해체분석기`바지${pants} 양말${socks}`

 

- Spread Operator(...) : 괄호를 제거하는 문법 

var 어레이 = ['hello', 'world']

console.log(어레이); //['hello', 'world']

console.log(...어레이); //hello world

console.log('hello', 'world') //2번째 코드와 동일한 출력값이 나옴, []가 제거되는 것.

 

-문자의 경우

var string = 'hello';

console.log(...string); //h e l l o

console.log('h','e','l','l','o')  //위코드와 동일하게 출력.

 

-Spread Operator의 활용법 : 얕은복사, 배열합치기,객체합치기

-함수소괄호, 중괄호, 대괄호 안에서만 사용가능(그외엔 에러)

*reference data type : array, object (값을 할당하면 참조관계가 됨)

 

-배열얕은복사

var a = [1,2,3]

var b = [4,5]

var c = [...a]

console.log(c) // [1,2,3]

 

-배열합치기

var a = [1,2,3]

var b = [4,5]

var c = [...a, ...b]

console.log(c) // [1,2,3,4,5]

 

-객체 얕은복사

var o1 = {

    a : 1,

    b : 2

}

var o2 = {

    ...o1,

    c : 3

}

console.log(o2) //{a: 1, b: 2, c: 3}

 

-객체안의 값이 중복되는 경우

var o1 = {

    a : 1,

    b : 2

}

var o2 = {

    ...o1,

    a : 3

}

console.log(o2) //{ a: 3, b: 2}, object를 얕은 복사하다가 값이 중복되는 경우 뒤에있는 것을 우선시함

 

-배열각각의 요소를 함수 파라미터에 넣을 수 있음

function 더하기(a,b,c) {

    console.log(a + b + c)

}

더하기(...[10,20,30]); //60

 

 

-apply함수 : 다른 객체의 메서드를 끌어다가 쓸 수 있음

var person = {

    인사 : function() {

        console.log(this.name + '안녕')

    }

}

var person2 = {

    name : '손흥민'

}

person.인사.apply(person2) //손흥민안녕 (person객체의 인사메서드가 person2에서 실행됨.)

 

-apply와 call함수의 차이점

person.인사.apply(person2 ,[1,2]) //파라미터 입력시 뒤에다가 추가. apply는 array형태로 파라미터를 입력가능

person.인사.call(person2 ,1,2) //그 이외에는 기능 동일

 

-Spread Operator가 없었을때 사용했던 방식(apply)

function 더하기(a,b,c) {

    console.log(a + b + c)

}

var 어레이 = [10,20,30]

더하기(...어레이);

더하기.apply(undefined, 어레이) //배열 형태를 파라미터로 쓸 수 잇기 때문에 apply사용. 위 코드와 동일한 기능을함.

 

-함수의 파라미터에는 default값을 입력할 수 있음

function 더하기 (a, b = 10){

  console.log(a + b)

}

더하기(1); //11

 

-연산자도 사용가능

function 더하기 (a, b = 2*5){

  console.log(a + b)

}

더하기(1); //11

 

-변수도 사용가능

function 더하기 (a, b = a*2){

  console.log(a + b)

}

더하기(1); //3

 

-함수도 넣기 가능

function 임시함수(){

  return 10

}

function 더하기 (a, b = 임시함수() ){

  console.log(a + b)

}

더하기(3); //13

 

-arguments : 입력받은 파라미터를 유사배열(forEach못씀)로 반환하는 키워드

이렇게 반환해줌. 뒤에있는건 신경X

왜냐면 4번째 요소 선택해도 undefined나옴.

 

-아래와 같이 파라미터들을 배열로 받아서 활용가능(반복문 등,,)

function 함수(a,b,c){

  for (var i = 0; i < arguments.length; i++){

    console.log(arguments[i])

  }

}

함수(2,3,4);

 

-아래 포스팅에서 자세히 확인 가능

https://coding-jake.tistory.com/67