본문 바로가기
배열(Array) (1) - 생성, 접근, length 2020. 3. 3. 배열은 참조타입 중 하나이며, 어떠한 데이터타입이든 모두 저장가능하다. 하지만 오류를 최소화 하기 위해 하나의 배열 안에는 같은 데이터타입을 유지하는 걸 권장한다. 배열 생성 var score = ["A", "B", "C", "D", "F"]; 배열은 대괄호([ ])로 묶는다. 배열을 할당 할 때, let과 const을 사용할 수 있다. 변수를 할당 할 때 let은 재할당이 가능하고, const는 재할당이 불가하다. 하지만 배열에서의 const는 변경이 가능하다. 여기서의 변경은 배열의 내용 변경을 말하며, 새로운 배열 혹은 다른 값으로 재할당은 불가하다. 배열 접근 배열 안의 요소(Element)에 접근하기 위해서는 인덱스(index)값으로 가져와야 한다. 인덱스는 0부터 센다(zero-indexed)..
호이스팅 - 변수, 함수 2020. 2. 29. 호이스팅(Hoisting)이란 변수의 선언을 유효 범위(Scope)의 최상단으로 끌어올리는 것을 말한다. 만약 변수가 함수 외부에 정의되어 있다면 전역 영역의 최상위로, 함수 내부에 정의되어 있다면 함수의 최상위로 변수가 끌어올려진다(호이스팅된다). 변수 호이스팅 console.log(a); // output: Uncaught ReferenceError: a is not defined 만약 아무것도 선언 되지 않은 상태에서 바로 a를 콘솔로 찍으면 ReferenceError가 뜬다. console.log(b); // output: undefined var b; 하지만 콘솔 밑에 바로 b를 선언하면 이번에는 에러가 아니라 undefined가 뜬다. 이는 변수 b를 아래에서 최상단으로 끌어왔기 때문에 변수가..
스코프(Scope) (2) - 함수 2020. 2. 28. 함수 스코프는 몇 가지 주의사항이 있다. 전 글에 있는 예문을 그대로 가져와 보겠다. function isLocal() { var local = "지역변수"; return `${local}는 로컬하다` } isLocal(); // output: 지역변수는 로컬하다 1. 함수는 서로의 스코프에 접근이 불가하다. function isLocal() { var local = "지역변수"; return `${local}는 로컬하다` } function getIsLocal() { isLocal(); console.log(local); } getIsLocal(); // output: Uncaught ReferenceError: local is not defined 2. 스코프 체인(Scope Chain): 함수가 다..
스코프(Scope) (1) - 전역, 지역(함수, 블록) 2020. 2. 27. 스코프(Scope)는 어떤 변수에 접근 혹은 참조 가능한 범위와 같다. 스코프는 전역 스코프(Global Scope), 지역 스코프(Local Scope)로 나뉜다. 이는 블록(Block)으로 나뉘는 경우가 대부분이다. 블록은 { }으로 감싸진 곳을 의미한다. 전역 스코프 전역 스코프는 블록({ })밖에 선언된 변수를 뜻한다. 이러한 변수를 전역변수(Global Variable)라고도 부른다. 블록 밖에서 선언되었기에, 블록 내부를 포함한 어느 곳에서든 접근 가능하다. var global = "전역변수"; function isGlobal() { return `${global}은 글로벌하다` } isGlobal(); // output: 전역변수는 글로벌하다 전역 스코프는 어디에서나 접근 가능한 장점이 있지..
함수(Function) (2) - 화살표(Arrow) 함수 2020. 2. 16. 화살표 함수(Arrow Function)는 자바스크립트 도서나 기초를 알려주는 국내 사이트에서는 볼 수 없었다. 하지만 Codecademy의 함수는 초반에는 국내에서도 익숙한 함수를 알려주다가, 중간부터는 화살표함수로 진행된다. 초반에 이에 익숙해지지 않아 많이 힘들었지만, react.js에서도 화살표 함수를 쓰기 때문에 미리 알아두면 좋을 것 같아 글을 작성해 본다. 가장 큰 차이점은 function이 없어진 점과, 함수의 식별자(identifier)를 바로 변수의 이름으로 지정한다는 것이다. 만약 별도의 매개변수가 없다면 공백으로 놔둬도 된다. const sayHello = ( ) => { return 'Hello World!'; } sayHello(); // output: Hello World!
함수(Function) (1) - 선언, 호출, 매개변수, 인자, return 2020. 2. 16. 자바스크립트의 핵심은 함수에 있다해도 과언이 아니다. 함수는 중복되는 코드를 하나로 만들고, 필요할 때마다 재사용(reusable)이 가능한 코드이다. 함수 선언 및 호출 함수 식별자는 해당 함수가 어떤 것인지 보기 좋게 이름 짓는 것이 좋다. 함수 매개변수(Parameter) 및 인자(Argument) 함수에는 매개변수(Parameter), 인자(Argument)가 있다. 매개변수는 함수를 선언할 때 주는 값이고, 인자는 함수를 호출할때 입력하는 실제 값이다. function addFunc(a, b){ console.log(a + b); } addFunc(3, 7); // output: 10 인자에 입력하는 값은 또 다른 변 수 일 수도 있다. 위의 함수를 아래와 같이 사용할 수도 있다. var x =..
연산자(Operators) (3) - 비교, 논리 관련 2020. 2. 15. 우리가 흔히 아는 연산자에는 +, -을 제외하고도 , = 등이 있다. 그 중 자바스크립트의 반복문, 조건문에서 빈번하게 사용되는 것이 이번 글에서 소개할 연산자들이다. 비교 연산자(Comparison Operators) 1. 보다 작은(Less than): 3. 작거나 같은(Less than or equal to): = 4. 같은(Is equal to): === 5. 같지 않은(Is Not equal to): !== 10 < 12 // output: true 'apple' === 'orange' // output: false ===은 비교하는 객체의 데이터타입과 내용이 같은지 비교하는 것이다 논리 연산자(Logical Operators) 논리 연산자는 boolean(true, false)값들과 쓰이며, ..
조건문(1) - if문 2020. 2. 7. 가장 대표적인 조건문(Conditional Statements)은 if문이다. 쉽게 말해 '초록불이면 직진, 빨간불이면 정지'라는 조건을 만들 수 있는 것이다. 조건문은 보통 논리연산자와 비교 연산자를 사용한다. (다른 글을 통해 설명할 예정이다) if문은 크게 if문, else문, else if문으로 나뉜다. if문 if (true) { console.log('해당 메세지가 출력됩니다.'); } // output: 해당 메세지가 출력됩니다. if ( 조건 ) { 조건이 참일 경우 실행할 내용 } - 조건이 참일 때 if문이 실행된다. - 조건에 바로 Boolean을 넣을 수도 있고, 혹은 아래처럼 비교연산자를 사용할 수도 있다. var a = 5; if ( a === 5 ) { console.log('..

티스토리툴바