[바닐라코딩 | Javascript] - Part1 요약

1)onkeydown, textContent, value

HTML 요소들의 클래스명을 이용하여 각 클래스에 해당하는 요소들을 선택하고, 각각 header, input이라고 부르는 변수에 저장합니다.

 

const header = document.querySelector(".header");
const input = document.querySelector(".input");

 

키보드의 키를 누르는 이벤트(keydown)에 대한 정보를 구독하고, 해당 이벤트가 발생했을때 changeHeader라는 함수를 호출한다. changeHeader 함수가 호출되면, .header 요소의 텍스트 내용을 사용자가 입력한 입력칸의 내용으로 대체한다.

 

input.onkeydown = function changeHeader () {
header.textContent = input.value;
};

 

참고로 input.onkeydown은 input 객체의 property로서 onkeydown event 발생시 실행할 함수를 정의하였음.

아래는 유사한 사례로 onclick event를 a 객체의 property로 설정하였으며 input.value는 value 속성의 값이 출력된다.

<input class='input1' type="text" placeholder='여기다 입력하시오' value='안녕하세요'/>

<script>
let a = document.querySelector('.input1')
document.write(a.value)

a.onclick = function(){ 
  document.write(a.value)}
</script>

 

 

See the Pen Untitled by Yun-Ko (@Yun-Ko) on CodePen.

 

 

인라인 방식으로 HTML 태그의 속성으로 정의할 수도 있다. 예를 들면 아래와 같다. input 태그 요소의 속성으로 직접 입력하였음.

<input type="text" onkeydown="alertEvent()">

<script>
function alertEvent() {
  alert("깜짝이야");
}
</script>

 

 

2)변수

(1)정의

변수란 프로그램을 작성하는 과정에서 기본으로 주어지는 자바스크립트 사전에 등록되어 있지 않아 우리가 만든, 자바스크립트 프로그램이 이해하고 알아볼 수 있는 단어들을 의미합니다. 

 

(2) = (할당, 대입)

자바스크립트에서 =의 의미는 =를 기준으로 오른쪽에 위치한 값을 왼쪽의 변수에 대입/할당 한다는 의미입니다.

 

(3)identifiers

변수를 선언할때 지어주는 이름을 Identifier라고 부릅니다. 자바스크립트에서 Identifier는 몇 가지 규칙을 반드시 따라야합니다. 숫자, 알파벳, $, _가 사용될 수 있다. 단, 숫자로 시작할 수는 없고 Javascript Keyword(Reserved Words)는 Identifier가 될 수 없다.

 

let foo;  // valid
let _bar123;  // valid
let $1234337;  // valid
let 7seven;  // invalid
let function;  // invalid

 

(4)Reserved Words

자바스크립트 예약어에 포함되어 있는 단어들은 변수명(Identifier: 식별자)로 사용이 불가능합니다.

3)Boolean 

const o = new Boolean(true);  // 이렇게 만들어 사용하지 마세요.
const t = true; // 항상 이렇게 만들어 사용하세요.

4)null & defined

undefined라는 단어의 의미는 말 그대로, "정의되지 않음"이라는 뜻입니다. 예를 들면, 우리가 어떤 변수를 만들고 그 값을 정의해주지 않았을때 사용되곤 합니다. 값이 대입되지 않은 상태를 위해 많이 사용됩니다.

let k;
console.log(k); // undefined

 

 

위의 코드처럼 변수를 생성하고, 아무 값도 지정(정의)해주지 않으면 undefined라는 값이 대입됩니다.

아래 코드처럼 undefined를 명시적으로 대입해주는 코드는 잘 사용하지 않습니다.

let o = undefined;
console.log(o); // undefined

 

null이라는 값은undefined와는 다르게 의도적으로값이 없음을 표현하고 싶을때 대입해주곤 합니다.

let title = "Bootcamp";

 

위 title를 이용한 작업이 모두 종료되고, 더 이상 사용하지 않을 계획이라 title를 의도적으로 없다고 표현함

title = null;

 

5)Numbers

(1)숫자를 변수에 담기

var num = 1;

num이라는 변수를 생성하기 전까지는 자바스크립트에서 num이라는 단어는 인식되지 않는 명령어입니다. 하지만 우리가 num이라는 변수를 생성함으로 해서, 인식 가능한 단어로 바뀌었고 해당 단어가 의미하는 값은 1이 되었습니다.

(2)숫자 연산하기

var num2 = num * 2;

위 num * 2라는 연산을 먼저 실행한 후, 해당 값을 num2라는 변수에 담게됩니다. num이라는 변수는 위 예제에서 1이라는 값을 대입해놓았습니다.

(3)비교

아래와 같이 부등호를 이용하여 숫자의 크고 작음을 비교할 수 있습니다.

var result = 3 > 7;
console.log(result); // false

var result2 = 3 >= 1;
console.log(result2); // true

(4)증가시키기

a += 1;  // a = a + 1
a += 2;  // a = a + 2
a -= 1;  // a = a - 1
a *= 3;  // a = a * 3
a /= 2;  // a = a / 2 

a++;     // a = a + 1
a--;     // a = a - 1
a**      // 유효하지 않은 코드
a//      // 유효하지 않은 코드

 

 (5)같은 수 판별

아래와 같이 ===를 이용하여 같은 수인지에 대한 정보를 확인할 수 있습니다. ==나 !=는 사용하지 마시고, 항상 ===나 !==를 사용하세요. 

var one = 5;
var two = 5;
console.log(one === two); // true

 

(6)유효하지 않은 숫자 연산

var a = 0;
var b = 0;
var c = a / b;

console.log(c);

 

위 코드를 실행한다면, 콘솔에는 NaN이라는 값이 표기됩니다. NaN: "Not A Number"라는 의미를 가진 특수한 값입니다. 유효하지 않은 숫자 연산을 실행했을때 생성되곤 합니다. 만약 어떤 값이 NaN인지 판별하고 싶다면 아래와 같이 isNaN이라는 함수를 사용하여 아래와 같이 판별할 수 있습니다.

var a = isNaN(3);
console.log(a); // false

var b = 10;
var c = isNaN(b);
console.log(c); // false


var d = NaN;
var e = isNaN(d);
console.log(e); // true

(7)숫자 판별하기

자바스크립트에서 우리에게 주어지는 기능들 중 typeof라는 연산자가 있습니다. 이 연산자는 어떤 종류의 값인지를 판별할때 사용될 수 있습니다. 결과 값 형태는 문자열 형태이다.

var a = typeof 10;
console.log(a); // "number" <- 따옴표를 잘 기억하세요.

 

6)String(문자열)

(1)문자열 붙이기

+로 문자열을 붙일 수 있습니다. 

var s1 = "something";
var s2 = "else";
var result = s1 + s2;
console.log(result); // "somethingelse"

(2)문자열 비교

문자열을 ===로 같고 다름을 비교할 수 있습니다.

var s1 = "abc";
var s2 = "abc";
var result1 = s1 === s2; // s1과 s2가 같은지 확인하고 그 결과를 result1 변수에 담습니다.
console.log(result1); // true

var s3 = "abc "; // 유의: 문자열 끝자리에 공백이 붙어있습니다.
var s4 = "abc";
var result2 = s3 !== s4; // s3과 s4가 다른지 확인하고 그 결과를 result2 변수에 담습니다.
console.log(result2); // true

 

(3)문자열 길이

.length를 이용하여 모든 문자열은 그 길이에 대한 정보를 알 수 있습니다.

var str1 = "abc"; // 3개의 텍스트를 포함하고 있는 문자열
console.log(str1.length); // 3

var str2 = " "; // 공백 3개
console.log(str2.length); // 3

console.log("graph-ql".length); // 변수 할당하지 않고 바로 문자열 사용

(4)문자열 인덱스

문자열에서 아래와 같이 인덱스를 이용할 수 있습니다. 변수에 할당해도 되지만 바로 문자열에 사용 가능함. index 값도 문자열이다

var str = "abcdef";
console.log(str[0]); // "a"
console.log("cde"[2]); // "e"

 

(5)문자열 메서드

'6'.repeat(3);
'hi ken'.includes(' ke');
'what are you doing?'.startsWith('what ');
'I am doing FiNe'.endsWith('iNe');
'Are you sure?'.indexOf(' yo');
'Yeah I am sure'.slice(2, 5);
'I?doubt?that'.split('?');
'Why would you doubt my word?'.split('');
'You hAve BeEn DiSHonest'.toLowerCase();
'No wAy!'.toUpperCase();

7)Types(데이터의 종류)

 

(1)String Type (문자열)

 

문자열은 더 할 수 있습니다. 예) "a" + "b" === "ab" 

문자열은 유사배열입니다. Index를 이용해 각 문자열에 접근할 수 있습니다. 

.length 속성이 있습니다. 예) "abc".length === 3

 

(2)Number Type (숫자)

 

Infinity 혹은 -Infinity 등과 같이 무한대를 표현하는 숫자값도 있습니다. 

NaN이라는 값 또한 숫자입니다. "Not A Number"를 의미합니다. 

주로 숫자가 아닌 값을 숫자로 치환할때 의도치않게 자주 나타나는 값입니다. 예) Number("abc")

 

(3)Boolean Type

 

(4)Undefined Type

 

undefined라는 값이 있습니다. 

초기값이 할당되지 않은 변수나 매개변수 등은 모두 undefined 값을 기본값으로 합니다. 

객체에 없는 속성을 접근하는 경우, undefined 값이 결과로 도출됩니다

// 초기값이 할당되지 않은 변수
let a;
console.log(a); // undefined

// 객체에서 존재하지 않는 속성을 접근하는 경우
const something = {
  name: 'Ken'};
console.log(something.age); // undefined

 

 

(5)Null Type

 

(6)Object Type

 

일반 객체 뿐 아니라, 배열과 함수도 객체에 포함됩니다. 아래 typeof 연산자 결과 값 형태는 문자열 형태이다.

const person = {};          // 빈 객체 생성
person.name = 'ken';        // 객체 내 Key, Value 생성
console.log(person.name);   // 'ken'
console.log(person);        // { name: 'ken' }
console.log(typeof person); // 'object'

const list = [1, 2, 3];
console.log(typeof list);   // 'object'

function foo () {}
console.log(typeof foo);    // 'function'

 

 

7. Symbol Type (new in ES2015, the least of your concern)

 

8. Logical Operators(논리연산자)

 

(1)Logical NOT Operator

!를 이용해 표현합니다. ! 뒤에 오는 값을 true(Boolean)으로 변환할 수 있다면 false를 반환하고, 그렇지 않을 경우 true를 반환합니다.

 

자바스크립트의 모든 값들은 자료형에 따라 7가지로 나눌 수 있습니다. 자료형과 더불어 자바스크립트의 값들을 나누는 또 다른 기준이 한 가지 더 있습니다. 그것이 바로 Truthiness와 Falsiness입니다. 아래에 나열된 값들은 모두 Falsy입니다. 즉, false로 변환되는 값입니다.그 외의 값들은 모두 Truthy입니다. 즉, true로 변환되는 값입니다.

0
-0
false
undefined
null
""
''
``
NaN

(2)Logical OR Operator

||로 표현합니다. true나 false값이 아닌, 피연산자(operand) 값이 반환됩니다. 

연산 방식 연산자를 기준으로 왼쪽부터 Truthy 값을 찾습니다. 

Truthy 값을 찾은 경우, 연산을 중지하고 해당 값을 반환합니다. 

마지막까지 Truthy 값을 찾지 못한 경우, 마지막에 위치한 값을 반환합니다.

const empty = null; //false
const trueOrFalse = !0; //true
const str = "Vanillacoding"; //true
const result = (empty || trueOrFalse || str);
console.log(result); //true

 

(3)Logical AND Operator

&&로 표현합니다. true나 false값이 아닌, 피연산자(operand) 값이 반환됩니다. 

연산 방식 연산자를 기준으로 왼쪽부터 Falsy 값을 찾습니다.

Falsy 값을 찾은 경우, 연산을 중지하고 해당 값을 반환합니다. 

마지막까지 Falsy 값을 찾지 못한 경우, 마지막에 위치한 값을 반환합니다.

const a = !!"";
console.log(a); // false

const trueOrFalse = !null;
const zero = 0;
const str = "Vanillacoding";
console.log(trueOrFalse && zero && str); // 0

9. If(조건문) - 중첩 

else 대신 else if로 연결할 수도 음 

var something = true;
var moreSomething = true;

if (something) {
console.log("I am inside something");
if (moreSomething) {
console.log("I am inside moreSomething");
} else {
console.log("I never gets called.");
}
} else {
console.log("I never gets called either.");
}

10. Loops(반복문) - 실행순서, 반복문 중단(break), 반복 구문 중단(continue)

어떤 특정 패턴의 코드를 반복할때 반복문(Looping Statement)를 사용함

 

(1)실행순서 (1→2→4→3)

for (1번 파트; 2번 파트; 4번 파트) {
3번 파트
}

 

1번 파트 (Initialization)

for loop의 초기 구동 코드입니다. for loop의 실행이 시작되는 시점에 가장 먼저 실행되는 부분이며, 단 한번만 실행됩니다. 일반적으로 for loop에서 사용되는 변수 선언을 하는 용도로 가장 많이 사용합니다.

 

2번 파트 (Conditional)

for loop의 3번 파트(반복 구절)의 실행 여부를 결정하는 조건이 들어가는 부분입니다. 2번 파트의 조건이 성립하지 않는다면, for loop의 실행이 종료됩니다. 

 

3번 파트

반복하여 실행하는 로직을 써넣는 곳입니다.

 

4번 파트 (Update)

3번 파트(반복 구절)의 실행이 끝난 후에 실행되는 구절입니다.

3번 파트가 여러번 실행된다면, 4번 파트 또한 여러번 실행됩니다.

 

(2)반복문 중단하기 - break

 

break 실행문이 실행되어 for loop이 모두 종료되게 된 것입니다. break 구문은 반복문 전체를 종료함.

console.log('before for loop');
for (var i = 1; i < 11; i += 2) {
  if (i === 7) {
    break;
  }
  console.log(i);
}
console.log('after for loop');

 

n이랑 동일할 때 for 반복문 종료하고 아래 조건문 실행함. 

const slogan = "Progress, not perfection";
let result = null;

for (let i = 0; i < slogan.length; i++) {
  result = slogan[i];
  if (slogan[i] === "n") {
    break;
  }
}

if (result === "n") {
  alert("🎉");
}​

 

(3)반복 구문 종료하기 - continue

console.log('before for loop');
for (var i = 1; i < 11; i += 2) {
  if (i === 7) {
    continue;
  }
  console.log(i);
}
console.log('after for loop');

문자열에서 t,o,n은 result에 추가되지 않고 for문 종료됨. 이후 아래 if 조건문 실행함.

const slogan = "Progress, not perfection";
let result = "";

for (let i = 0; i < slogan.length; i++) {
  if (slogan[i] === "n" || slogan[i] === "o" || slogan[i] === "t") {
    continue;
  }

  result += slogan[i];
}

if (result === "Prgress,  perfeci") {
  alert("🎉");
}​

 

위 예제 코드의 경우, 콘솔에 1, 3, 5, 9가 나타납니다. 7일 경우에는 continue 구문이 실행되었기 때문에 반복 구문을 종료하게 되었습니다. 하지만 전체 반복문을 종료시킨 것은 아닙니다.

 

Loops - Starter Kit