함수 스크립트 작성시 유사한 동작을 하는 코드가 여러 곳에서 필요할 때가 있다. 함수를 이용하면 중복 없이 유사한 동작을 하는 코드를 여러 번 호출할 수 있다. 함수 선언(함수 선언문) 함수 선언 방식을 이용하여 함수를 만들 수 있다. function showMsg() { alert('hi'); } // 파라미터가 있는 경우 function name(param1, param2) { // 본문 } 지역 변수 함수 내에서 선언한 변수를 지역 변수(local variable)라 칭하며 지역 변수는 함수 안에서만 접근할 수 있다. function showMsg() { let msg = 'hi'; alert(msg); } showMsg();// hi alert(msg);// error 외부 변수 함수 내부에서는 ..

if와 삼항연산자를 사용한 조건 처리 조건에 따라 다른 행동을 취해야 할 때에는, if문을 사용하거나 조건부 연산자 ?를 사용한다. if문 괄호안의 조건을 평가하여 해당 결과가 true라면 코드를 실행한다. let year = prompt('저는 몇년생일까요?', ''); if (year == 2001) alert('정답입니다.'); // 복수의 문을 실행하고 싶다면 중괄호로 코드블록을 감싼다 if (year == 2001) { alert('정답'); alert('입니다!'); } 코드의 가독성을 위해서는, 실행 구문이 한 줄 이더라도 중괄호를 사용해 감싸는 것을 추천한다. if문은 괄호 안의 표현식을 평가하고, 그 결과를 불린값으로 변환한다. => 0, 빈문자열, null, nudefined, NaN과..

상호작용 alert alert함수는 사용자가 확인 버튼을 누를 때 까지 메시지를 보여주는 창이 계속 떠있는다. 메시지가 있는 작은 창은 모달 창(modal window)이라고 부른다. 사용자는 확인 버튼을 누르기 전 까지 모달 창 바깥에 있는 버튼을 누른다던지 행동을 할 수 없다. alert("Hello"); propmt propmt는 두 개의 인수를 받아 입력필드, 확인 및 취소 버튼이 있는 모달 창을 띄워준다. 사용자가 입력한 필드에 기재한 문자열을 반환한다. 입력 취소의 경우 null을 반환한다. result = prompt(title, [default]); title : 사용자에게 보여줄 문자열 default : 입력 필드의 초깃값 (생략가능) IE환경에서는 두 번째 매개변수가 없는경우 undef..

script 자바스크립트 코드의 양이 많은 경우, 파일로 소분하여 하는것을 추천한다. 절대경로 및 상대경로를 사용하여 지정해줄 수 있다. 그리고 전체 URL을 사용할 수도 있다. 이유로는 브라우저가 스크립트를 다운받아 캐시에 저장하기 때문에, 여러 페이지에서 동일한 스크립트를 사용하는 경우, 캐시로 부터 스크립트를 가져와 사용하므로 트래픽 절약 및 웹페이지의 실제 속도가 빨라지기 때문이다. 코드 구조 문(statement)은 어떤 작업을 수행하는 문법 구조(syntax structure)와 명령어(command)를 의미한다. 이때 서로 다른 문은 세미콜론으로 구분하며, 줄바꿈이 있는경우 아래와 같이 세미콜론이 생략 가능하다. (세미콜론 자동 삽입) alert("안녕") alert("하세요") 그러나 이를..

자바스크립트란? 자바스크립트는 웹페이지에 생동감을 불어넣기 위해 만들어진 프로그래밍 언어다. 자바스크립트로 작성한 프로그램을 script라고 부르며, 스크립트는 웹페이지의 HTML 안에 작성할 수 있다. 이렇게 작성한 스크립트는 웹페이지를 불러올 때 자동으로 실행된다. 자바스크립트는 브라우저 뿐만 아니라 서버에서도 실행이 가능하며, 자바스크립트 엔진(JavaScript engine)이 들어있는 모든 디바이스에서 동작한다. 엔진의 종류와 사용처는 아래와 같다. V8 : Chrome, Opera SpiderMonkey : Firefox IE : 버전에 따라 Tradent, Chakra 브라우저에서 할 수 있는 일 모던 자바스크립트는 메모리나 CPU 같은 저수준 영역의 조작을 허용하지 않는다. Node.js ..

얕은 복사(Shallow copy) 원본 개체의 속성과 동일한 참조를 공유하는 복사 방법 '메모리 주소 값'을 복사한 것 얕은 복사를 사용할 경우 원본 데이터에 영향을 끼치므로 주의해야 한다. let arr = ["noodles", { list: ["eggs", "flour", "water"] }]; let copy = arr; console.log(copy) copy[1].list = ["rice flour", "water"]; console.log(arr[1].list); // Array [ "rice flour", "water" ] 스프레드 연산자 사용 const obj = { name: "otter", gender: "male" } const newObj = { ...obj } - 스프레드 연산자..

구조분해할당은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게하는 Javascript 표현식이다. 복사한 이후에 분해해준다는 의미로, 해당 과정에서 분해 대상이 수정, 파괴 되는것은 아니다. 배열 구조분해할당 let arr = [75, 50, 60, 100]; let [one, two, three] = arr; console.log(one); // 75 console.log(two); // 50 console.log(three); // 60 - 배열을 한번 분해해 새로운 변수에 담아준다 - 할당 연산자의 좌측엔 객체 프로퍼티와 같이 할당할 수 있는(assignables) 것이라면 어떤 것이든 올 수 있다 객체 구조분해할당 const obj = { name : "syong", gende..

JavaScript는 한 번에 하나의 기능만 수행하는 싱글 스레드 기반의 언어다. 때문에 동기적으로 동작한다. (코드가 작성된 순서대로 작업을 처리한다) 동기(Synchronous) : 하나의 작업이 종료될 때까지 다음 동작을 기다리는 실행 방식 console.log(1) console.log(2) console.log(3) // 1,2,3 비동기(Asynchronous) : 하나의 작업이 진행됨과 동시에 또 다른 작업도 함께 진행되는 방식 비동기는 프로그램의 응답성을 높이는데 도움을 준다. 자바스크립트는 예외적으로 비동기처리방식도 존재한다 console.log(1) setTimeout(() => { console.log(2) }, 2000) console.log(3) // 1,3,2 실생활과 연관지어 ..

호이스팅(Hoisting) Javascript는 코드를 실행하기 전 먼저 선언된 변수, 함수를 전역 환경에 담고 그 이후에 정리된 코드를 실행한다. 호이스팅은 함수, 변수의 선언이 마치 위로 끌어올려진 것처럼 동작하는 것을 말한다. (실제로 끌어올려지는 것은 아니다) 자바스크립트의 모든 선언에는 호이스팅이 일어난다. 변수의 선언 단계 변수는 선언 단계, 초기화 단계, 할당 단계를 거치게 된다 1. 선언단계(Declaration phase) : 선언한 변수를 식별자(변수명)가 담기는 객체에 할당하는 단계 : 초기화 전까지는 TDZ 상태이다. 2. 초기화 단계(Initialization phase) : 변수에 할당할 메모리 공간을 부여하는 단계 : 해당 단계에서 변수는 undefined로 초기화 된다 3. ..

스코프(Scope)란? Scope를 우리말로 번역하면 '범위'라는 뜻을 갖고 있다. JavaScript에서는 참조 대상 식별자(identifier)를 찾아내기 위한 규칙을 뜻한다. 쉽게 풀어서 해석하자면, 변수에 접근할 수 있는 범위라고 말할 수 있다. 스코프는 중첩이 가능하다. 스코프의 종류 블록 스코프(Block scope) : 또는 전역 스코프(Global scope) - 전역 스코프에 선언한 변수는 어느 곳에서든 해당 변수에 접근할 수 있다. var a = 10; function print(){ console.log(a) } print(); // 10 if () { var y = 0; } console.log(y); // 0 함수 스코프(Function-level scope) : 또는 지역 스코프..