6일차에는 자바스크립트 핸드북으로 파트 1을 공부한 내용을 정리했다.
프로그래밍 언어들이 많은 이유
대표적인 이유로는 컴파일여부, 성능/안정성과 편의성에 Trade-off관계, 패러다임때문이다.
컴파일이란
프로그래밍 언어로 작성된 소스코드를 컴퓨터가 알아들을 수 있도록 번역해 주는 일이다.
컴파일을 할때는 컴파일언어와, 인터프리터 언어로 나뉜다.
컴파일 언어: 소스코드로 이루어진 프로그램이 실행되기 전에 기계 언어로 작성해둔 코드들을 전부 기계어로 바꿔두기 때문에 처음 실행시 컴파일 하는 시간이 필요하다. 또 번역하는 과정에서 문법을 검사하는 등의 별도의 처리를 거치기에 에러를 미리 마주해야하지만, 런타임에 (프로그램 실행 중간중간에) 번역하는 과정이 없고 실제 프로그램이 실행되는 동안에 문법오류 등 예상치 못한 에러를 마주할 확률이 적다.
(C, C++, C#, Java 등)
인터프리터 언어: 실행과 동시에 한 줄 한 줄 해석하고 실행한다. 중간언어로 해석하고 실행하기 때문에 별도의 컴파일이 필요없지만, 위에 언급된 컴파일언어의 장점에 해당하는 항목은 일반적으로 반대로 단점으로 작용된다.
(Python, JavaScript, Ruby 등)
Trade-off 관계는 하나를 얻으면 하나를 잃는 관계를 말한다.
프로그래밍 언어가 실행되는 환경에서 언어 자체적으로 더 많은 것들을 지원 해줄 수록 (메모리 관리, 타입 추론 등) 해당 언어로 작성된 프로그램들의 성능과 때로는 안정성이 "일반적"으로 떨어지게 되므로 성능과 개발 편의성은 Trade-off 관계가 성립한다.
프로그래밍 패러다임은 프로그래머에게 프로그래밍의 관점을 갖게 해 주고, 결정하는 역할을 한다.
문은 어떤 작업을 수행하는 문법 구조와 명령어를 의미한다.
세미 콜론으로 구분하며, 세미콜론 뒤에는 줄바꿈을 사용해 가독성을 높인다.
alert('Hello');
alert('World');세미콜론은 자동삽입되어 생략이 가능해졌지만
alert("에러가 발생합니다.")[1, 2].forEach(alert)위 코드처럼 alert 알림창에 뒤에 오는 반복문같은 경우 단일문으로 해석되어 에러가 발생한다. 예외사항이 발생할 수 있으므로 세미콜론은 일일히 찍어주는 편이 안전하다.
주석
주석은 프로그램을 실행시킬 때 동작하지 않으므로 기록하거나, 설명을 달거나, 코드를 비활성화 하는 용도로 쓰인다.
단축키는 ctrl + / 이다.
// 한줄 주석
/* */ 여러줄 주석
use strict를 통해 엄격모드를 활성화 시킬 수 있다.
"use strict";
// 이 코드는 모던한 방식으로 실행됩니다.
...변수 이름: 저장된 값을 식별 할 수 있는 고유의 이름이다.
변수 값: 변수에 저장된 값을 의미한다.
변수 할당: 변수에 값을 저장하는 행위이다.
변수 선언: 변수를 사용하기 위해 컴퓨터에 알리는 행위를 의미한다.
(키워드로는 let, const등이 있다.)
변수 참조: 변수에 할당된 값을 읽어오는것을 의미한다.
표현식이란 자바스크립트에서 어떤 값으로 평가되는 구절을 의미한다.
변수 명명 규칙
- 변수명에는 오직 문자와 숫자, 그리고 기호 $와 _만 들어갈 수 있다.
- 첫 글자는 숫자가 될 수 없다.
- let, class, return, function 등과 같은 예약어도 변수로 사용할 수 없다.
자료형
- 원시타입: 숫자형, 문자형, 불린형, null, undefined
- 참조타입: 객체형, 심볼형
type of 연산자
ex) typeof x, typeof(x)를 통해 피연산자의 자료형을 알려준다.
typeof undefined // "undefined"
typeof 0 // "number"
typeof 10n // "bigint"
typeof true // "boolean"
typeof "foo" // "string"
typeof Symbol("id") // "symbol"
typeof Math // "object" (1)
typeof null // "object" (2)
typeof alert // "function" (3)형변환
문자형으로 형 변환하기
let value = true;
alert(typeof value); // boolean
value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다.
alert(typeof value); // string숫자형으로 형 변환하기
let str = "123";
alert(typeof str); // string
let num = Number(str); // 문자열 "123"이 숫자 123으로 변환됩니다.
alert(typeof num); // number
let num2 = +str;
alert(typeof num2) // +기호로도 숫자로 변환된다.
alert( Number("123z") ); // NaN ("z"를 숫자로 변환하는 데 실패함, 문자열이 포함되면 숫자로 변환되지 않는다)불린형으로 형변환하기
alert( Boolean(1) ); // 숫자 1(true)
alert( Boolean(0) ); // 숫자 0(false)
alert( Boolean("hello") ); // 문자열(true)
alert( Boolean("") ); // 빈 문자열(false)자바스크립트 연산자 종류
- 덧셈 연산자 +
let x = 3 + 6
alert(x) // 9- 뺄셈 연산자 -
let x = 3 - 5
alert(x) // -2- 곱셈 연산자 *
let x = 5 * 3
alert(x) // 15- 나눗셈 연산자 /
let x = 10 / 2
alert(x) // 5- 나머지 연산자 %
alert( 5 % 2 ); // 5를 2로 나눈 후의 나머지인 1을 출력
alert( 8 % 3 ); // 8을 3으로 나눈 후의 나머지인 2를 출력- 거듭제곱 연산자 **
alert( 2 ** 2 ); // 4 (2 * 2)
alert( 2 ** 3 ); // 8 (2 * 2 * 2)
alert( 2 ** 4 ); // 16 (2 * 2 * 2 * 2)할당 연산자
let a = 1;
let b = 2;
let c = 3 - (a = b + 1);
alert( a ); // 3
alert( c ); // 0할당 연산자 체이닝
let a, b, c;
a = b = c = 2 + 2;
alert( a ); // 4
alert( b ); // 4
alert( c ); // 4복합 할당 연산자
let n = 2;
n += 5; // n은 7이 됩니다(n = n + 5와 동일).
n *= 2; // n은 14가 됩니다(n = n * 2와 동일).
alert( n ); // 14증감, 감소 연산자
++기호를 사용해 1씩 증가 시키거나,
--기호를 사용해 1씩 감소 시킬수 있다.
피연산자 앞에 올때는 counter++ (전위형)이라고 하고,
피연산자 뒤에 올때는 ++counter (후위형)이라고 한다.
let counter = 2;
counter++; // counter = counter + 1과 동일하게 동작합니다. 하지만 식은 더 짧습니다.
alert( counter ); // 3
let counter = 2;
counter--; // counter = counter - 1과 동일하게 동작합니다. 하지만 식은 더 짧습니다.
alert( counter ); // 1
// 증감, 감소 연산자를 통한 예제
var x = 10, y = 10;
document.write((++x - 3) + "<br>"); // x의 값을 우선 1 증가시킨 후에 3을 뺌.
document.write(x + "<br>"); // 11
document.write((y++ - 3) + "<br>"); // 먼저 y에서 3을 뺀 후에 y의 값을 1 증가시킴.
document.write(y); // 11
var x = 10;
var y = x-- + 5 + --x;
// x = 8, y = 23비트연산자
비트 연산자(bitwise operator)는 인수를 32비트 정수로 변환하여 이진 연산을 수행한다. 아래는 비트 연산시 쓰는 연산자 목록이다.
- 비트 AND ( & )
- 비트 OR ( | )
- 비트 XOR ( ^ )
- 비트 NOT ( ~ )
- 왼쪽 시프트(LEFT SHIFT) ( << )
- 오른쪽 시프트(RIGHT SHIFT) ( >> )
- 부호 없는 오른쪽 시프트(ZERO-FILL RIGHT SHIFT) ( >>> )
쉼표연산자
쉼표연산자는 코드를 짧게 쓰려는 의도로 가끔 사용된다. 쉼표 연산자 ,는 여러 표현식을 코드 한 줄에서 평가할 수 있게 해주며, 이때 표현식 각각이 모두 평가되지만, 마지막 표현식의 평가 결과만 반환되는 점에 유의해야 한다.
아래 예시처럼 여러 동작을 하나의 줄에서 처리하려는 복잡한 구조에서 사용된다.
let a = (1 + 2, 3 + 4);
alert( a ); // 7 (3 + 4의 결과)
// 한 줄에서 세 개의 연산이 수행됨
for (a = 1, b = 3, c = a * b; a < 10; a++) {
...
}비교연산자
불린형 반환
alert( 2 > 1 ); // true
alert( 2 == 1 ); // false
alert( 2 != 1 ); // true문자열 비교
문자열은 사전편집순(lexicographical)으로 비교된다.
alert( 'Z' > 'A' ); // true
alert( 'Glow' > 'Glee' ); // true
alert( 'Bee' > 'Be' ); // trueABC(abc)순서대로 뒤로 갈수록 크고, 문자열 길이가 긴게 크다고 판단된다.
일치연산자
동등연산자(equality operator) == 는
0과 false를 구분못하고,
빈 문자열일 때도 문제가 발생하기 때문에
alert( 0 == false ); // true
alert( '' == false ); // true일치 연산자(strict equality operator) ===를 사용해 형 변환 없이 값을 비교할 수 있다.
일치연산자로 비교할때 주의사항은 아래와 같다.
- 일치 연산자 ===를 제외한 비교 연산자의 피연산자에 undefined나 null이 오지 않도록 특별히 주의해야 한다.
- undefined나 null이 될 가능성이 있는 변수가 <, >, <=, >=의 명확한 의도를 갖고 있지 않은 이상피연산자가 되지 않도록 주의해야 한다. 만약 변수가 undefined나 null이 될 가능성이 있다고 판단되면, 이를 따로 처리하는 코드를 추가해야 한다.
|| (OR 연산자)
인수 중 하나라도 true이면 true를 반환하고, 그렇지 않으면 false를 반환한다.
alert( true || true ); // true
alert( false || true ); // true
alert( true || false ); // true
alert( false || false ); // false연산 과정에서 숫자 1은 true로, 숫자 0은 false로 바뀐다.
if (1 || 0) { // if( true || false ) 와 동일하게 동작합니다.
alert( 'truthy!' );
}
// 여러개를 체이닝해서 사용할수도 있다.
alert( 1 || 0 ); // 1 (1은 truthy임)
alert( null || 1 ); // 1 (1은 truthy임)
alert( null || 0 || 1 ); // 1 (1은 truthy임)
alert( undefined || null || 0 ); // 0 (모두 falsy이므로, 마지막 값을 반환함)&& (AND 연산자)
인수중 모든 조건에 맞아야 true를 반환하고 그렇지 않으면 false를 반환한다.
alert( true && true ); // true
alert( false && true ); // false
alert( true && false ); // false
alert( false && false ); // false! (NOT 연산자)
피연산자의 반대되는 값을 반환하며, 모든 논리연산자 중에 우선순위가 제일 높다.
alert( !true ); // false
alert( !0 ); // true
// !!를 연달아 사용해 값을 불린형으로 변환할 수 있다.
alert( !!"non-empty string" ); // true
alert( !!null ); // false6일차 공부를 마치며...
자바스크립트 기본 개념을 배우면서 기초를 확실히 잡기 위해 여러번 복습해서 읽는 중이다. 예제를 통해 직접 따라쳐봐야 헷갈리지 않고 확실하게 이해되는 것 같다.
