반응형

모던 javascript 튜토리얼 30

if와 '?'를 사용한 조건 처리

if문 if(...)문은 괄호 안에 들어가는 조건을 평가하는데, 그 결과가 true이면 코드 블록이 실행됩니다. if (…) 문은 괄호 안의 표현식을 평가하고 그 결과를 불린값으로 변환합니다. 숫자 0, 빈 문자열"", null, undefined, NaN은 불린형으로 변환 시 모두 false가 됩니다. 이런 값들은 ‘falsy(거짓 같은)’ 값이라고 부릅니다. 이 외의 값은 불린형으로 변환시 true가 되므로 ‘truthy(참 같은)’ 값이라고 부릅니다. if문엔 else절을 붙일 수 있습니다. else뒤에 이어지는 코드 블록은 조건이 거짓일 때 실행됩니다. 유사하지만 약간씩 차이가 있는 조건 여러 개를 처리해야 할 때가 있습니다. 이때 else if를 사용할 수 있습니다. 조건부 연산자 ‘?’ 조건에..

비교 연산자

변수의 값을 어떤 값 또는 다른 변수와 비교할 때 사용하는 것이 비교 연산자(Cpmparison Operator)입니다. 불린형 반환 다른 연산자와 마찬가지로 비교 연산자 역시 값을 반환합니다. 반환 값은 불린형입니다. true가 반환되면, ‘긍정’, ‘참’, '사실’을 의미합니다. false가 반환되면, ‘부정’, ‘거짓’, '사실이 아님’을 의미합니다. 문자열 비교 자바스크립트는 '사전’순으로 문자열을 비교합니다. '사전편집(lexicographical)'순 이라고 불리기도 하는 이 기준을 적용하면 사전 뒤쪽의 문자열은 사전 앞쪽의 문자열보다 크다고 판단됩니다. 문자열 비교 시 적용되는 알고리즘은 다음과 같습니다. 두 문자열의 첫 글자를 비교합니다. 첫 번째 문자열의 첫 글자가 다른 문자열의 첫 글자..

기본 연산자와 수학

용어: ‘단항’, ‘이항’, ‘피연산자’ • 피연산자(operand) 는 연산자가 연산을 수행하는 대상입니다. 5 * 2에는 왼쪽 피연산자 5와 오른쪽 피연산자 2, 총 두 개의 피연산자가 있습니다. '피연산자’는 '인수(argument)'라는 용어로 불리기도 합니다. 피연산자를 하나만 받는 연산자는 단항(unary) 연산자 라고 부릅니다. 피연산자의 부호를 뒤집는 단항 마이너스 연산자 -는 단항 연산자의 대표적인 예입니다. let x = 1; x = -x; alert( x ); // -1, 단항 마이너스 연산자는 부호를 뒤집습니다. 두 개의 피연산자를 받는 연산자는 이항(binary) 연산자라고 부릅니다. 마이너스 연산자는 아래와 같이 이항 연산자로 쓸 수도 있습니다. let x = 1, y = 3; ..

형 변환

함수와 연산자에 전달되는 값은 대부분 적절한 자료형으로 자동 변환됩니다. 이런 과정을 "형 변환(type conversion)"이라고 합니다. 전달받은 값을 의도를 갖고 원하는 타입으로 변환(명시적 변환)해 주는 경우도 형 변환이라고 할 수 있습니다. 문자형으로 변환 문자형으로의 형 변환은 문자형의 값이 필요할 때 일어납니다. let value = true; alert(typeof value); // boolean value = String(value); // 변수 value엔 문자열 "true"가 저장됩니다. alert(typeof value); // string false는 문자열 "false"로, null은 문자열 "null"로 변환되는 것과 같이, 문자형으로의 변환은 대부분 예측 가능한 방식으로 ..

alert, prompt, confirm을 이용한 상호작용

브라우저는 사용자와 상호작용할 수 있는 세 가지 함수를 제공합니다. **alert**메시지를 보여줍니다. alert("Hello"); **prompt**사용자에게 텍스트를 입력하라는 메시지를 띄워줌과 동시에, 입력 필드를 함께 제공합니다. 확인을 누르면 prompt 함수는 사용자가 입력한 문자열을 반환하고, 취소 또는 Esc를 누르면 null을 반환합니다. result = prompt(title, [default]); **confirm**사용자가 확인 또는 취소 버튼을 누를 때까지 메시지가 창에 보여집니다. 사용자가 확인 버튼을 누르면 true를, 취소 버튼이나 Esc를 누르면 false를 반환합니다. let isBoss = confirm("당신이 주인인가요?"); alert( isBoss ); // 확..

변수와 상수, 자료형

var, let, const를 사용해 변수를 선언할 수 있습니다. 선언된 변수엔 데이터를 저장할 수 있죠. let – 모던한 변수 선언 키워드입니다. var – 오래된 변수 선언 키워드입니다. 잘 사용하지 않습니다. let과의 미묘한 차이점은 오래된 'var' 챕터에서 다루도록 하겠습니다. const – let과 비슷하지만, 변수의 값을 변경할 수 없습니다. 변수명은 변수가 담고 있는 것이 무엇인지 쉽게 알 수 있도록 지어져야 합니다. 아래는 변수 명명 시 참고하기 좋은 규칙입니다. userName 이나 shoppingCart처럼 사람이 읽을 수 있는 이름을 사용하세요. 무엇을 하고 있는지 명확히 알고 있지 않을 경우 외에는 줄임말이나 a, b, c와 같은 짧은 이름은 피하세요. 최대한 서술적이고 간결하..

엄격 모드

자바스크립트는 꽤 오랫동안 호환성 이슈 없이 발전해왔습니다. 기존의 기능을 변경하지 않으면서 새로운 기능이 추가되었죠. 덕분에 기존에 작성한 코드는 절대 망가지지 않는다는 장점이 있었습니다. 하지만 자바스크립트 창시자들이 했던 실수나 불완전한 결정이 언어 안에 영원히 박제된다는 단점도 생겼습니다. 이런 상황은 ECMAScript5(ES5)가 등장하기 전인 2009년까지 지속되었습니다. 그런데 새롭게 제정된 ES5에서는 새로운 기능이 추가되고 기존 기능 중 일부가 변경되었습니다. 기존 기능을 변경하였기 때문에 하위 호환성 문제가 생길 수 있겠죠? 그래서 변경사항 대부분은 ES5의 기본 모드에선 활성화되지 않도록 설계되었습니다. 대신 use strict라는 특별한 지시자를 사용해 엄격 모드(strict mo..

Hello, world(script)

script 태그 여기서 /path/to/script.js는 사이트의 루트에서부터 파일이 위치한 절대 경로를 나타냅니다. 현재 페이지에서의 상대 경로를 사용하는 것도 가능합니다. 같은 폴더 내에 있는 파일인 "script.js"를 src="script.js"로 참조하는 것처럼 말이죠. 물론 아래와 같이 URL 전체를 속성으로 사용할 수도 있습니다. 요약 웹 페이지에 자바스크립트 코드를 추가하기 위해 와 같이 삽입합니다.

매뉴얼과 명세서, 코드 에디터

명세서 ECMA-262 명세서(specification) 는 자바스크립트와 관련된 가장 심도 있고 상세한 정보를 담고 있는 공식 문서입니다. 이 명세서에서 자바스크립트라는 언어를 정의합니다. 매뉴얼 Mozilla 재단이 운영하는 MDN JavaScript Reference엔 다양한 예제와 정보가 있습니다. 특정 함수나 메서드에 대한 깊이 있는 정보를 얻고 싶다면 이 사이트가 제격입니다. 링크는 다음과 같습니다. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference 위 사이트에 들어가서 원하는 내용을 직접 검색하는 것도 좋지만, 가끔은 검색 엔진을 이용해 내용을 찾는 게 더 나을 때도 있습니다. Google 검색 엔진에 접속해 'MDN [원하..

자바스크립트란?

정의 자바스크립트는 ‘웹페이지에 생동감을 불어넣기 위해’ 만들어진 프로그래밍 언어입니다. 자바스크립트로 작성한 프로그램을 스크립트(script) 라고 부릅니다. 스크립트는 웹페이지의 HTML 안에 작성할 수 있는데, 웹페이지를 불러올 때 스크립트가 자동으로 실행됩니다. 스크립트는 특별한 준비나 컴파일 없이 보통의 문자 형태로 작성할 수 있고, 실행도 할 수 있습니다. 브라우저에서 할 수 있는 일 자바스크립트의 능력은 실행 환경에 상당한 영향을 받습니다. Node.js 환경에선 임의의 파일을 읽거나 쓰고, 네트워크 요청을 수행하는 함수를 지원합니다. 브라우저 환경에선 웹페이지 조작, 클라이언트와 서버의 상호작용에 관한 모든 일을 할 수 있습니다. 브라우저에서 자바스크립트로 할 수 있는 일은 다음과 같습니다..

반응형