>wecode 사전모임 2주차 미션(javascript)

wecode 사전 모임 2주차 미션을 정리해봤다. 기초적이면서도 중요한 내용들이라 과거 생활코딩 등으로 배웠던 걸 복기하는 기회가 됐다.

1. javascript에서 var, let, const를 이용해 변수를 선언하고 각각의 차이점 조사하기

javascript에서 변수 선언은 대부분 var을 사용하고 있었다. 이번 계기로 여러 변수 선언이 있다는 걸 알고 배우게 됐다. 다음에 꼭 써먹어봐야지.

먼저 가장 많이 사용했던 var은 좋게 말하면 유연한 변수 선언이다. 나쁘게 말하면 줏대 없다. 예를들면

var name = "venn";
console.log(name); //venn

var name = "sora";
console.log(name); //sora

변수는 둘 다 name으로 같지만 먼저 선언한 값에 따라 곧바로 다르게 출력해 버린다. 비교적 코드가 간단할 때에는 별 상관없겠지만 만약 복잡해졌을 경우 난감한 상황이 생길 것 같다. 첫번째 선언으로 인해 만든 변수를 사용해서 코드를 이어나가는데, 중간에 두번째 선언을 했던 것을 까먹고 발견하지 못한다든가 순서를 바꾸기 애매한 경우 등 말이다.

이런 문제점이 많이 지적됐는지 ES6 이후 변수 선언 let과 const가 나왔다. 먼저 let으로 변수를 선언해보자.

let name = "venn";
console.log(name); 

let name = "sora";
console.log(name);

그러면 Uncaught SyntaxError: Identifier 'name' has already been declared

이러한 에러가 나온다. 이미 'name'이란 변수에는 "venn"이 선언됐는데 왜 또 선언하려는거냐고 따지는 것이다. const도 마찬가지다.

그렇다면 let과 const의 차이는? 이는 재할당의 가능 여부 즉 immutable다. let은 재할당이 가능한 반면 const는 재할당이 불가능하다. 불변객체에 대해서

직접 예를 들자면, let은

    let name = 'venn'
    console.log(name) // venn

    let name = 'sora'
    console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared

    name = 'moon'
    console.log(name) //moon

이렇게 재할당해주면 'name'이란 변수를 새롭게 사용할 수 있는 반면 const는

    const name = 'venn'
    console.log(name) // venn

    const name = 'sora'
    console.log(name) 
    // Uncaught SyntaxError: Identifier 'name' has already been declared

    name = 'moon'
    console.log(name) 
    //Uncaught TypeError: Assignment to constant variable.

이처럼 한 번 선언해 버리면 재할당할 수 없다. 뭔가 '한 번 const는 영원한 const!!!' 이런 느낌...

이 외에도 var과 나중에 나온 let, const를 구분하는 요인에는 '호이스팅'도 있다. var 변수 선언과 함수선언문에서만 호이스팅이 일어나고 let과 const는 호이스팅이 일어나지 않는다.

'호이스팅'이란 함수 안에 있는 선언들을 모두 끌어올려서 해당 함수 유효 범위의 최상단에 선언하는 것을 의미한다. 즉, 함수 내에서 아래쪽에 있는 내용들 중 필요한 내용을 위로 먼저 끌어다가 선언해버리는 것이다.

상황에 맞는 선언을 적재적소에 사용할 줄 아는 것도 중요한 것 같다.

2.template literal을 이용해 변수와 string을 동시에 작성하기

template literal이란 자바스크립트에서 문자열을 입력하는 방식이다. ES6부터 생긴 방식으로 백틱(back-tick) 기호(`)를 사용해 정의한다.

template literal은 기존 javascript와 달리 줄바꿈이 필요할때 /n과 +를 사용하지 않아도 된다는 장점이 있다. 텍스트의 재가공을 적게할 수 있다는 점에서 편리하다.

이와 함께 template literal은 문자열 중간에 변수를 바로 대입할 수 있다는 장점도 있다.

기존 javascript를 이용해서 문자열과 변수를 함께 작성했을 경우는 다음과 같다.

var name = 'venn';
var introduction = 'I am ' + name + '!';
console.log(introduction); 
// I am venn!

그렇다면 tempate literal이 출동한다면 어떨까.

var name = 'venn'
var introduction = `I am ${name}!`
console.log(introduction); 
// I am venn!

${}만 사용하면 작성이 쉬워진다. 작은 따옴표와 +등을 여러번 반복하지않아도 된다. 게다가 ${}에서 중괄호 안에서 간단한 연산도 가능하다고 하니 여러모로 유용하다.

3. for과 while을 이용한 반복문 작성

for과 while은 반목문의 대표 유형이다. 둘은 같은 반복문이지만 약간의 차이점이 있다. 쉽게 말하자면 for문은 시작과 끝이 확실히 정해져있는 경우에 사용하면 편하고 while문은 그렇지않은 경우에 유용하다.

이는 각자의 생긴 모습을 보면 쉽게 알 수 있다. for문은 for (시작;조건;끝;) {내용}이 구조로 이뤄져있다. i라는 변수를 만들고 i=0이라고 정한 뒤, i에 1씩 더해 특정 값에 다다르면 끝나는 방식이다. 예를들면 다음과 같다.

for (var i = 0; i < 3; i++) {
  console.log('사랑해');
} //사랑해사랑해사랑해

뭔가 미저리 같지만 이처럼 사랑해를 3번 써야한다는 것이 정해져있을 때 for문은 유용하다.

while문은 while (조건) {내용}으로 구성된다. for문이 횟수가 중요하다면 while은 조건에 방점이 찍힌 것으로, 조건식이 true일 경우 계속 반복되고 false가 되면 종료된다. 특정조건 달성이 중요할 때 사용하면 좋다. 예를들면 다음과 같다.

var i = 0;
while (i < 3) {
  console.log('사랑해');
  i++;
} //사랑해사랑해사랑해

4. if와 else를 이용한 조건문
if문은 특정 조건 만족 시 어떤 작업을 수행하고 싶을 때 사용하는 조건문이다. 지정한 조건이 참인 경우 명령문(statement)을 실행한다. 조건이 거짓인 경우 else if, else을 통해 다른 명령문이 실행 될 수 있습니다.

다음 예시는 if문을 이용해 만든 내 나이를 물어보는 프롬프트 명령문이다.

var age = prompt( '나의 나이는?', '' );
      if ( age < 31 ) {
        document.write ( '<p>이것보단 많을걸요?</p>' );
      } else if ( jbNum == 31 ) {
        document.write ( '<p>정답!</p>' );
      } else {
        document.write ( '<p>그렇게 늙어보이나요?ㅠ</p>' );
      };

5. array method 중 slice, splice, push, pop, filter, map을 활용한 함수

array method는 배열문을 만들 때 사용한다. 배열은 일종의 집합을 의미하는데, 중학교 시절 수학시간에 배웠던 원소나열법과 흡사하다. 다만 원소나열법이 집합 부호를 '{}'를 썼던 반면 array는 []를 쓴다.

array method와 관련된 연산은 상당히 많은 편인데 이번 미션은 그 중 slice, splice, push, pop, filter, map 등 6개 연산에 대해서만 다룬다.

배열 var a = [11, 12, 13, 14, 15];를 이용해서 차례로 관련 함수를 만들어봤다.

-slice : Array.slice()는 배열의 일부분(slice) 혹은 부분 배열(subarray)을 반환하는 연산이다. start와 end 값을 가진다. 이 메서드에서는 음수 인덱스를 쓸 수 있고, 그 경우 배열의 마지막 원소에서 상대적인 위치로 지정한다.

ex)

a.slice(0, 3); // 앞에서 첫번째부터 앞에서 4번째 전까지. [11, 12, 13]
a.slice(3); // 앞에서 4번째부터 [14, 15]
a.slice(1, -1); // 앞에서 두번째부터 뒤에서 두번째까지[12, 13, 14]
a.slice(-3, -2) // 뒤에서 4번째부터 뒤에서 3번째까지[13]

-splice : Array.splice는 배열을 자유롭게 수정할 수 있다. slice가 원본이 유지된다는 점과 다르다. 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경할 떄 사용한다. 첫번째 인자에 해당하는 원소부터 두번째 인자에 해당하는 원소의 숫자만큼의 값을 배열에서 제거한 후에 리턴한다. 그리고 세번째 인자부터 전달된 인자들을 첫번째 인자의 원소 뒤에 추가한다.
ex)

a.splice(1, 2); // [11, 14, 15]
a.splice(1, 2, 'a', 'b') // [11, a, b, 14, 15]

-push: 인자로 전달된 값을 배열에 추가하는 명령이다.
ex)

a.push(16, 17); //[11, 12, 13, 14, 15, 16, 17]

-pop: 배열의 마지막 요소를 제거한 후, 제거한 요소를 반환하는 명령이다.
ex)

a.pop(); //[11, 12, 13, 14]

-filter: 배열의 각 요소를 순회하며 콜백 함수를 실행하며 특정 조건에 맞는 요소만 모아 배열로 리턴한다. 특정 케이스만 필터링해서 추출할 때 유용하다.

ex)

a.filter(function (item, index, array) { 
return item < 13 ;
}); //[11, 12]

-map: 각 요소를 순회하며 callback 함수를 실행한다. 다만, callback에서 리턴 되는 값을 배열로 만들어낸다.
ex)

a.map(function(element){
    return element * element;
}); //[121, 144, 169, 196, 225]