코어 자바스크립트에 대한 공부는 꾸준히 업로드 해왔던 자바스크립트로 하는 자료 구조와 알고리즘이라는 책을 통해 하고 있었지만 코드 스테이츠 프리 코스에서 배운 내용이 해당 책에 없다면 이것 또한 TIL을 해야 하지 않을까란 생각에 카테고리를 하나 만들었다!

 

제목에서도 알 수 있듯이 level 2 - 2에서 배운 내용은 스코프, 클로저, 객체 지향, 매개변수이다. 사실 클로저를 제외하면 엄청나게 생소한 내용은 아니었다. 학교를 다니며 C언어와 자바를 수강했기 때문에 자바의 클래스 문법에서 객체 지향 프로그래밍을 맛봤고 매개변수와 스코프는 어떠한 언어를 배우던 꼭 등장하는 개념이기 때문이다. 하지만 클로저라는 개념은 이번에 처음 알게 되었다.

 

말이 길어지니 일기장이 되가는 거 같다..

이만 각설하고 오늘의 TIL을 하러 가보자!

 

1. Scope

  1 - 1) 스코프란 변수 접근 규칙에 따른 유효 범위이다.

  1 - 2) 프로그래밍 언어마다 변수 접근 규칙이 다를 수도 있다.

  1 - 3) 자바스크립트에서 스코프는 변수나 상수를 선언하는 키워드인 let, var, const에 따라 달라진다!

 

  1 - 4) let, const : block scope

  let과 const는 block scope이며 유효 범위는 {}이다.

  

  1 - 5) var : function scope

  var는 function scope이며 유효 범위는 가장 가까운 함수이다.

  

  예시를 통해서 둘의 차이를 알아보자!

  

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
//block scope
function blockScope() {
  if (true) {
    let block = '이 변수는 if문 안에서 유효한 변수이다'
  }
  console.log(block)
}
 
blockScope() 
//console.log로 block을 콘솔에 출력할 수 없다!
//block은 if문 안에서 선언과 할당이 되었기 때문에
//{}밖에서는 사용할 수 없다!
 
//function scope
function funcScope() {
  if (true) {
    var func = '이 변수는 가장 가까운 함수에서 유효한 변수이다'
  }
  console.log(func)
}
 
funcScope() 
//이 변수는 가장 가까운 함수에서 유효한 변수이다
//func 변수는 var로 선언이 되어 해당 함수의 어디서든
//사용할 수 있는 변수가 되어 콘솔에 출력이 잘 된다.
 
 cs

 

  단순하게 생각하면 함수 내에서 항상 접근할 수 있는 var키워드가 더 좋아보이지만 이는 오히려 코드의 가독성을 떨어트릴 수 있다.

  따라서 변수 선언시에는 let 키워드를 사용하는 것을 추천한다.

 

 

 

  *여기서 잠깐! 그렇다면 global scope & 전역 변수와 local scope & 지역 변수는 무엇인가?

 

  global scope는 변수가 함수 바깥이나 중괄호 {} 바깥에 선언되었다면, 전역 스코프에 정의된다고 한다.

  이 설명은 자바스크립트에만 유효하다. Node.js에서는 전역 스코프를 다르게 정의하므로 여기서는 다루지 않겠다.

  

  반대로 local scope은 변수가 함수 안이나 중괄호 {}안에 선언된 경우이다.

  따라서 위 예제의 두 변수는 모두 지역변수이고 그러한 변수는 외부에서는 사용할 수가 없게 된다!

  그리고 두 변수는 함수 안에서 각각의 키워드에 따른 유효 범위를 또 가지게 되는 것이 block scope와 function scope인 것이다

  scope에 대한 TIL은 여기까지!

저작자표시 (새창열림)

'Programming Language > Javascript' 카테고리의 다른 글

Object Oriented Programming  (0) 2020.11.05
Closure  (0) 2020.11.04
2020/09/30 - JS - 반복문  (0) 2020.09.30
2020/09/18 - JS - 문자열과 관련 메소드  (0) 2020.09.18
2020/09/17 - JS - 비교 연산자, 논리 연산자, 조건문, Truthy & Falsy  (0) 2020.09.17

1. 반복문 : 동일하거나 비슷한 동작을 수행하기위해 동작 하나하나를 일일이 적는 것은 매우 비효율적이다.

 따라서 그러한 동작을 반복하도록 하기위한 반복문이 필요하다.

 

2. for문 : JS뿐만 아니라 다른 언어에서도 대표적으로 많이 쓰이는 반복문이다. 문법은 다음과 같다.

1
2
3
for (초기값; 조건; 단계) {
  // ... 반복문 본문 ...
}
 cs

 

좀 더 구체적인 예시인 배열의 모든 원소를 더하는 반복문을 작성해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
let arr = [1, 2, 3, 4, 5];
let sum = 0;
 
for (let i = 0; i < arr.length; i++) {
  sum += arr[i]
}
 
console.log(sum) // 15
 
//지금은 배열의 element가 5개라 일일이 더해줄 수도 있겠지만
//만약에 배열의 length가 100만이라고 생각하면 일일이 더해주는 것은
//매우 힘들 것이다.
//그렇기에 반복문을 활용하는 것이 현명하다.
 cs

 

3. while문 : 마찬가지로 많이 활용되는 반복문이다. 문법은 다음과 같다.

1
2
3
4
5
6
while (조건) {
  // 코드
  // '반복문 본문(body)'이라 불림
}
//조건이 true이면 실행
//조건이 false이면 실행 
 cs

 

마찬가지로 while을 이용해서 배열의 모든 원소를 더한 값을 구해보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
let i = 0;
let arr = [1, 2, 3, 4, 5]
let sum = 0;
 
while (i < 5) {
  sum += arr[i]
  i++
}
 
console.log(sum) // 15
console.log(i) // 5
 
//i가 5가되는 순간 조건이 false가 되므로 반복중단
//조건문과 마찬가지로 조건이 truthy라도 while문 내부의 코드가 동작함
 
 cs

 

4. break & continue : 반복문은 조건이 false면 실행이 중단되지만 만약 반복 도중에 반복문을 빠져나오고 싶거나

반복문안의 동작을 수행하지않고 다음 반복으로 넘어가고 싶을때 break와 continue를 활용할 수 있다.

 

4 - 1) break 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
let i = 0;
let arr = [1, 2, 3, 4, 5, 6, 7];
let sum = 0;
 
while (i < 7) {
  if (i === 5) {
    break;
  }
  sum += arr[i];
  i++;
}
 
console.log(sum); // 15
console.log(i); // 5
 
//break에 의해서 i가 5가되면 반복문을 중단함
//break가 없었다면 sum = 28이 되었겠지만
//break로 탈출했기때문에 sum은 15가 됨.
 cs

 

4 - 2 ) continue 예제

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
let i;
let arr = [1, 2, 3, 4, 5, 6, 7];
let sum = 0;
 
for (i = 0; i < arr.length; i++) {
  if (i === 5) {
    continue;
  } else {
    sum += arr[i]
  }
}
 
console.log(sum); // 22
 
//continue에 의해서 i가 5가되면 해당 반복을 스킵!
//continue가 없었다면 sum = 28이 되었겠지만
//continue로 i가 5일때는 i가 바로 6이되도록
//만들었기 때문에 sum = 1 + 2 + 3 + 4 + 5 + 7 = 22
//즉 6을 더하고 싶지 않았다고 생각하면 됨.
cs
저작자표시 (새창열림)

'Programming Language > Javascript' 카테고리의 다른 글

Closure  (0) 2020.11.04
Scope  (0) 2020.11.04
2020/09/18 - JS - 문자열과 관련 메소드  (0) 2020.09.18
2020/09/17 - JS - 비교 연산자, 논리 연산자, 조건문, Truthy & Falsy  (0) 2020.09.17
2020/09/15 - JS - 변수, 함수, 자료형  (0) 2020.09.15

1. 문자열 : 자바스크립트 자료형중 하나이다. 작은 따옴표, 큰 따옴표, 백틱으로 문자열을 표현할 수 있다.

1
2
3
4
let single = '작은 따옴표';
let Double = '큰 따옴표';
let backticks = `백틱`;
 
 cs

나머지 두 개와 달리 백틱에는 특별한 기능이 있다. 표현식을 ${…}로 감싸고 이를 백틱으로 감싼 문자열 중간에 넣어주면 해당 표현식을 문자열 중간에 쉽게 삽입할 수 있다. 이런 방식을 템플릿 리터럴(template literal)이라고 한다.

예시는 다음과 같다.

1
2
3
4
let number = 3;
console.log(`number의 할당된 수는 ${number}이다.`)
//number의 할당된 수는 3이다.
//탬플릿 리터럴
 cs

2. 문자열의 길이 : length라는 프로퍼티를 이용하면 문자열의 길이를 쉽게 알 수 있다.

1
2
3
4
let string = 'length'
console.log(string.length)
// length는 6글자니까 결과는 6!
 
 cs

3. 특정 글자 찾기 : 문자열에서도 마치 배열에서 인덱스를 통해 원소를 찾는 것과 같이 특정 글자에 접근할 수 있다.

1
2
3
let string = 'juyeop'
console.log(string[0]) // j
console.log(string[3]) // e
 cs

배열도 첫 원소의 인덱스 값이 0부터 시작하듯이 문자열의 첫 글자도 0부터 시작한다!

 

*주의 사항 : 어떤 위치던지 글자 하나를 바꾸려고 하면 에러가 남!

1
2
3
let string = 'juyeop'
// string[0] = w;
// 위처럼 문자 하나를 수정하려하면 에러가 발생한다!
 cs

4. 유용한 메소드

4 - 1 ) toLowerCase : 문자열을 소문자로 변환

4 - 2 ) toUpperCase : 문자열을 대문자로 변환

1
2
3
4
5
6
7
8
9
let string = 'juYeoP'
let lower = string.toLowerCase()
let upper = string.toUpperCase()
console.log(lower) //juyeop
console.log(upper) //JUYEOP
 
//문자 하나만 취급도 가능함!
let onlyTwoIndexUpper = lower[1].toUpperCase()
console.log(onlyTwoIndexUpper) //U
 cs

 

4 - 3 ) indexOf : 문자열에서 찾고자 하는 문자가 몇 번째 인덱스에 위치하는 지 알고자 할때!

1
2
3
4
let string = 'juYeoP good'
let lower = string.indexOf("g")
console.log(lower) //7
 
 cs

 

4 - 4 ) includes : 찾고자 하는 부분 문자열이 있는지 없는지 알고싶을 때! 반환 값은 true나 false이다!

1
2
3
let string = 'juYeoP good'
let lower = string.includes("x")
console.log(lower) //false
 cs

 

4 - 5 ) startsWith, endsWith : 문자열이 특정 부분 문자열로 시작하는지 또는 끝나는지 확인하고싶을 때!

                                                         마찬가지로 불린 값을 반환한다. 대소문자 구별에 주의하자

1
2
3
let string = 'juYeoP good'
let lower = string.startsWith("juy")
console.log(lower) //false
 cs

 

4 - 6 ) slice, substring, substr : 특정 문자열을 추출하는 메소드들이다. 각 메소드마다 차이점이 존재한다.

                                                            예시를 통해 알아보자.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
let string = 'juYeoP good'
let slice = string.slice(0, 2)
//index 0 부터 2개를 추출!
//마지막 매개변수가 2라서 2개가 아니고
//index번호 0번부터 2번 전까지 추출하라는 의미이다.
//그래서 2개라고 이해하도 무리가 없을 것 같다.
console.log(slice) //ju
 
let substring = string.substring(2, 0)
//slice와 거의 같다. 다른점은 시작 번호와 끝 번호가
//뒤바뀌어도 동작한다는 점!
console.log(substring) //ju
 
let substr = string.substr(0, 5)
//시작 번호 0번부터 5만큼의 길이를 출력!
//즉 0부터 시작해 5개를 출력하는 것과 같다
console.log(substr) //juYeo
 cs

 

*주의할 점 : substr는 브라우저 이외의 호스트 환경에서는 제대로 동작하지 않을 수 있다.

                      따라서 slice나 substring을 쓰는 것을 추천한다!!

 

저작자표시 (새창열림)

'Programming Language > Javascript' 카테고리의 다른 글

Closure  (0) 2020.11.04
Scope  (0) 2020.11.04
2020/09/30 - JS - 반복문  (0) 2020.09.30
2020/09/17 - JS - 비교 연산자, 논리 연산자, 조건문, Truthy & Falsy  (0) 2020.09.17
2020/09/15 - JS - 변수, 함수, 자료형  (0) 2020.09.15

1. 비교 연산자 : 크다(>), 작다(<), 크거나 같다(>=), 같다(===) 등 비교할 때 쓰는 연산자이다. Boolean 값을 반환한다.

                             반환이 된다는 것은 변수 등에 할당할 수 있다는 것을 의미한다.

1
2
console.log(1 > 2)
//콘솔에 false가 찍힘.
 cs

 

*주의 사항 : 동등 비교 연산자(==) 사용 시 다른 자료형임에도 true를 반환할 수도 있음!

                      따라서 일치 연산자(===)를 사용하는 것이 좋다.

                      일치 연산자를 좀 더 엄격한 동등 비교 연산자라고 생각하면 된다.

        마찬가지로 부등 연산자(!=)보다는 불일치 연산자(!==)를 사용할 것!

 

* 왜 동등 비교 연산자와 부등 연산자의 사용을 지양하라는 걸까?

       불명확한 비교는 추후에 에러를 발생시킬 수도 있기 때문

 

1
2
3
4
5
6
7
8
9
10
11
let zero = 0;
let False = false;
 
function notGoodSituation(zero, False) {
  if (zero == False) {
    return "동등 연산자를 사용하면 숫자 0과 불리안 false를 같다고 봅니다";
  }
}
 
let expected = notGoodSituation(zero, False)
console.log(expected) // 동등 연산자를 사용하면 숫자 0과 불리안 false를 같다고 봅니다
 cs

2. 논리 연산자 :  &&(AND), ||(OR), !(NOT)

                              피연산자로 불린값 뿐만 아니라 모든 타입의 값을 받을 수 있다.

                              그렇다면 만약 불린값이 아닌 다른 타입이 피연산자로 오면 논리 연산자는 어떤 식으로 판단하는 걸까?

                              결과부터 말하자면 Truthy한 값은 True로 처리되고, Falsy한 값은 False로 처리되는데 이 개념은

                              4번에서 구체적으로 살펴보도록 하자.

 

1
2
3
4
5
6
7
8
9
10
11
12
console.log(true || false) // 하나라도 true면 true
console.log(true || false) 
console.log(true || true) 
console.log(false || false) // 피연산자가 둘 다 false면 false
 
console.log(true && false) // 하나라도 false면 false
console.log(true && false) 
console.log(false && false) 
console.log(true && true) // 둘 다 true면 true
 
console.log(!true) // not연산자가 있으므로 false
console.log(!false) // not연산자가 있으므로 true
 cs

3. 조건문 : 조건에 따라 다른 행동을 취해야 할 때 사용한다.

3 - 1) if문 : 말 그대로 만약에 어떠한 조건이 참이면 해당 동작을 수행하고 거짓이라면 다른 동작을 수행하는 구문이다.

                    구구절절하게 설명하기보다 예시를 통해 이해하면 좋을 것 같다.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
//매개변수의 값이 50이상이면 true반환하고
//50보다 작으면 false를 반환하는 함수가 있다.
 
function isTrueUp50AndIsFalseUnder50(num) {
  if (num >= 50) {
//()안의 조건 num이 50 이상이면 true를 반환
    return true;
  } else if (num < 50) {
//그렇지 않고 조건 num이 50보다 작으면 false를 반환
    return false;
  } else {
//매개변수 num이 숫자형이 아닌 다른 자료형이 들어온다면 '숫자를 입력해주세요!'를 반환
    return '숫자를 입력해주세요!'
  }
}
 cs

 

if문을 통해 주어진 조건에 따라 다른 동작을 수행하는 것을 볼 수 있다. 꼭 어떤 값을 반환할 필요는 없다.

사용자가 주어진 조건에 따라 하고싶은 동작을 구현하면 된다. 위의 예시는 크게 3가지 동작을 수행하는데

몇 가지 동작을 수행할 것인지 결정하는 것은 개발자의 마음이다. 만약 2가지 동작을 수행하고 싶다면

중간에 구문인 else if 가 없어도 될 것이다.

 

 

3 - 2) '?' 조건부 연산자 : 조건부 연산자를 사용하면 if문을 더욱 간단하게 작성할 수 있다.

                                             문법은 다음과 같다 -> (평가 대상) ? : 참일 때 반환할 값 : 거짓일 때 반환할 값;

                                             마찬가지로 예시를 통해 좀 더 구체적으로 알아보자

 

1
2
3
4
5
6
7
let accessAllowed = (age > 18) ? true : false;
// (age > 18) => 평가대상
// ? 뒤 => 평가대상이 참이면 true 를 반환한다
// : 뒤 => 평가대상이 거짓이면 false를 반환한다
 
//만약 let age = 39 라면 이 때 accessAlloewd에 할당되는 값은 true가 될 것이다
//반환할 값은 무엇이든 가능하다 불리안 값이던, 어떤 변수던, 문자열이 될 수도 있다.
 cs

4. Truthy & Falsy : Truthy는 true로 처리될 수 있는 값이고 Falsy는 false로 처리될 수 있는 값이라고 이해하면 된다.

                              그렇다면 truthy는 true이고 falsy는 false인 것일까? 그렇진 않다. 원빈과 장동건 둘 다 잘생겼지만

                              둘이 같은 사람은 아닌 것처럼.. 그렇다면 어떤 것이 truthy한 값이고 falsy한 값인가?

                              자바스크립트에서 falsy한 값은 6개이고 나머지는 모두 truthy한 값이다. 때문에 6개만 외워두면 된다.

                              실제 코드를 통해 어떻게 처리 되는지 살펴보자.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//Falsy한 값 6가지
console.log(!NaN)
console.log(!0)
console.log(!undefined)
console.log(!null)
console.log(!'')
console.log(!false)
//모두 falsy한 값이므로 !연산자를 붙이면 콘솔에 true가 찍힘!
//그 외의 모든 것은 truthy이다
 
console.log(!"a")
console.log(!3)
console.log(![3, 4])
//모두 truthy 하므로 !연산자를 붙이면 콘솔에 false가 찍힘!
 cs

 

크롬 개발자 도구를 통해 위의 코드를 꼭 확인했으면 좋겠다.

그렇다면 만약 3번에서 배운 if문의 조건이 들어가는 곳에 truthy 한 값이 들어오거나 falsy한 값이 들어오면 어떻게 될까?

truthy는 true로 처리되고 falsy는 false로 처리되므로 조건이 truthy하면 참으로 인식해 참이 될때의 동작을 수행할 것이고

falsy하면 거짓으로 인식해 else 문의 동작이 수행될 것이다!

 

포스팅이 길어지므로 조건문과 조건부 연산자를 활용해 truthy와 falsy한 값이 조건으로 주어질 때의 예제는 직접 확인해보도록 하자!

저작자표시 (새창열림)

'Programming Language > Javascript' 카테고리의 다른 글

Closure  (0) 2020.11.04
Scope  (0) 2020.11.04
2020/09/30 - JS - 반복문  (0) 2020.09.30
2020/09/18 - JS - 문자열과 관련 메소드  (0) 2020.09.18
2020/09/15 - JS - 변수, 함수, 자료형  (0) 2020.09.15

1. (1) 변수의 정의 : 데이터를 저장할 때 쓰이는 '이름이 있는 저장소'.

1
2
3
let variable = 3;
//변수의 선언과 할당
// = -> '같다'의 의미가 아님, 어떠한 값을 할당하는 할당연산자!
 cs

 

1. (2) 카멜 표기법 : 단어를 차례로 나열하면서 첫 단어를 제외하고 각 단어의 첫 글자를 대문자로 작성.

1
2
let myName = 'juyeop';
//카멜표기법
 cs

 

1. (3) 바람직한 변수명 짓기

  • 사람이 읽을 수 있는 이름을 사용하기!
  • 줄임말이나 a, b, c와 같은 짧은 이름은 피하기!
  • 최대한 서술적이고 간결하게!
  • 자신만의 규칙이나 소속된 팀의 규칙을 따르기! 

2. (1) 함수의 정의 : 스크립트 내에서 특정 동작을 수행함.

1
2
3
4
5
6
7
8
function mySalary (monthPay) {
  return 12 * monthPay;
} 
//함수의 선언
//monthpay는 매개변수! 임의의 데이터를 함수 안에 전달하는 역할
 
let juyeopSalary = mySalary(5000000);
//함수의 호출(실행)하고 변수에 저장
 cs

 

2. (2) 함수 이름 짓기

  • 함수 이름은 가능한 간결하고 명확해야 함.
  • 함수가 어떤 동작을 하는지 설명할 수 있어야 함.
  • 함수는 특정 동작을 수행하기 때문에 접두어로 동사를 쓰는 것이 관습(하지만 팀 내에서 규칙이 있다면 예외)

 

2. (3) 함수를 다룰 때 주의 사항

  • 외부에서 함수 내부에 선언된 변수에는 접근할 수 없음!(함수 내부에 선언된 변수는 지역변수이기 때문)
  • 함수는 값을 반환할 수 있고 반환하지 않는 경우 undefined가 반환됨!
  • 함수 이름에 언급되어 있지 않은 동작을 수행하도록 작성하면 안 됨!

3. 자료형 : 자바스크립트에는 여덟 가지 기본 자료형이 있음.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
let number = 123;
//1. 숫자형
 
let string = "안녕하세요"
//2. 문자형
 
let bigInt = 3218371297847212837129847892798127489n;
//3. bigInt형
//매우 큰 숫자를 표현하기 위해
 
let bool = false;
//4. 불린형
//참과 거짓을 나타냄 1이냐 0이냐
 
let age = null;
//5. null
//아무것도 없음을 나타내는 null
 
let height = undefined;
//6. undefined
//값이 할당되지 않았음을 나타내는 undefined
 
let me = {
  name : "elliy",
  job : "developer",
  old : 36
}
//7. 객체형
//객체는 데이터 컬렉션이나 복잡한 개체(entity)를 표현
 
let symbol = Symbol("id");
//8. 심볼형
//객체의 고유한 식별자(unique identifier)를 만들 때 사용
 cs

'Programming Language > Javascript' 카테고리의 다른 글

Closure  (0) 2020.11.04
Scope  (0) 2020.11.04
2020/09/30 - JS - 반복문  (0) 2020.09.30
2020/09/18 - JS - 문자열과 관련 메소드  (0) 2020.09.18
2020/09/17 - JS - 비교 연산자, 논리 연산자, 조건문, Truthy & Falsy  (0) 2020.09.17

+ Recent posts

티스토리툴바