javascript 기본 문법 정리

31 Jul 2019 | javascript

호이스팅

사전적 의미는 끌어올리다. 자바스크립트 실행시 변수선언과 함수선언을 끌어올립니다. 아래코드는 실행시 오류가 날것 같지만 실제로는 함수 a와 함수선언문이 올라가게 됩니다. 결국 var 변수, 함수 선언식을 사용한 함수의 선언부가 유효범위의 최상단으로 호이스팅이 되는 것입니다.

변수 ‘할당’이 함수 선언보다 우선 순위이고, 함수 선언이 변수 선언보다 우선 순위입니다. 함수 선언문과 변수 할당문이 존재할 경우, 변수 a 선언 -> 함수 a 선언 -> a에 값할당 순으로 실행됩니다.

// 실행전
console.log(a());
console.log(b());
console.log(c());

function a(){
    return 'a';
}

var b = function bb(){
    return 'bb';
}

var c = function(){
    return 'c';
}

// 실행후, 오류가 발생.. 변수만 선언되고 안에 할당된 값이 없기 떄문에 오류가 발생한다.

function a(){
    return 'a';
}

var b;
var c;

console.log(a());
console.log(b());
console.log(c());

b = function bb(){
    return 'bb';
}

c = function(){
    return 'c';
}

// 실행순서 맞춰보기

var myName = "hi";

function myName(){
    console.log("11111등");
}

function yourName(){
    console.log("2222등");
}

var yourName = "no!";

console.log(typeof myName);
console.log(typeof yourName);

// 실행순서는.. 변수선언, 함수, 변수에 값 할당 순으로 이루어집니다
var 변수;
var 변수2;

function 함수1(){
    //실행문
}
변수 = "값할당";

함수선언문, 함수표현식의 차이

기존에는 익명함수 표현식같은 경우에 property가 할당되지 않아 디버깅을 할 수 없었습니다. 그로 인해 기명함수 표현식을 사용했는데, 현재에는 대부분의 브라우저가 property가 할당되어 익명함수도 디버깅을 할 수 있게 되었습니다. 이제는 함수선언문을 지양하고 기명함수 표현식은 거이 사용하지 않습니다.

// 함수 선언문
function a(){
    return 'a';
}
// 기명함수 표현식
var b = function bb(){
    return 'bb';
}
// 익명함수 표현식
var c = function(){
    return 'c';
}

아래 코드는 실행결과가 어떻게 될까요? 맨위에 선언된 sum은 무시되고, 3만 두번 출력됩니다. 위에 선언된 sum은 정상적으로 작동하지 않습니다. 이런 문제들로 인해서 함수선언문을 사용해야 합니다.

function sum(a,b){
    return a+''+b;
}
sum(1,2);

function sum(a,b){
    return a+b;
}
sum(1,2);

스코프, 실행컨텍스트

스코프는 유효범위(변수) 입니다. 스코프는 함수가 정의될때 결정됩니다. 실행컨텍스트는 함수가 실행될 경우의 정보를 담고 있습니다. 실행컨텍스트에는 호이스팅, this 바인등의 정보가 담기게 됩니다.

Comment Read more

프론트엔드 개발 키워드

30 Jul 2019 | javascript frontend

프론트엔드 개발자로서 최소한 이정도 스킬은 있어야 한다는 글을 읽고 공부를 위해서 내용 정리를 해보았다.

A. 반드시 해야 하는 기술리스트

ES6
let, const, var / closures / classes / prototype / promise (fetch API, async / await) / arrow function / module(import/export) / template strings / spread operator
git / github
npm / yarn
Linux
WebPack
css(DISPLAY, POSITION, Z-INDEX, FLEX BOX / CSS GRID)
Framework ( REACT or Angular or EMBER or Vue )

B. 알면 좋은 기술

SVG, canvas
gulp, grunt
service worker(PWA)
TEST FRAMEWORK-Jasmine, mocha, protractor
Mobile Development

C. 몰라도 되는 기술

Old Version of Javascript
bootstrap

기술 로드맵 참고..

https://github.com/devJang/developer-roadmap

Comment Read more

ES6 문법, VUE-CLI 3버전 사용법

25 Jul 2019 | javascript vue-cli es6

ES6 문법

대표적인 4가지 문법입니다

화살표 함수
템플릿 리터럴
모듈
구조 분해와 확장문법

화살표 함수 ( Arrow Functions )

평소에도 가장 많이 사용하는 문법중 하나

// 기존문법 es5
function 함수명(){
    로직
}
// es6 문법
(매개변수값) => {
    실행로직
}
// 매개변수가 하나일 경우, 괄호생략가능
x => { 구현 }

// 매개변수가 여러개인 경우 소괄호 생략불가
(x,y) => { 구현 }

// 함수의 구현내용이 한줄의 return만 있을 경우는 return 과 소괄호 모두 생략가능
x => { return x * x }
x => x * x;

// 객체를 반환하는 경우는 소괄호를 사용한다
() => { return { a:1 }; }
() => ({ a:1 })

// 함수구현 내용이 여러줄일 경우는 생략불가 ^^
() => {           
  const x = 10;
  return x * x;
};

화살표 함수의 호출

화살표 함수는 익명 함수로만 사용할 수 있다. 따라서 화살표 함수를 호출하기 위해서는 함수 표현식을 사용한다

//es5 
var pow = function(x){ return x*x };
console.log(pow(10)); // result : 100

//es6, 엄청난 생략이 가능하다
const pow = x => x * x;
console.log(pow(10));

var arr = [1,2,3];
var pow = arr.map(function(x)){
    return x * x;
};

const arr = [1,2,3];
const pow = arr.map(x => x * x);

console.log(pow);

템플릿 리터럴 문법

ES6에서 템플릿 리터럴이라고 불리는 새로운 문자열 표기법을 도입하였다. 템플릿 리터럴은 일반 문자열과 비슷해보이지만, ‘ 또는 “ 같은 통상적인 따옴표 문자 대신 백틱문자 `를 사용한다

const template = `템플릿 리터럴은 '작은따옴표(single quotes)'과 "큰따옴표(double quotes)"를 혼용할 수 있다.`;

console.log(template);

const template = `<ul class="nav-items">
  <li><a href="#home">Home</a></li>
  <li><a href="#news">News</a></li>
  <li><a href="#contact">Contact</a></li>
  <li><a href="#about">About</a></li>
</ul>`;

console.log(template);

// + 연산자 없이 간단하게 사용가능

const first = 'Ung-mo';
const last = 'Lee';

// ES5: 문자열 연결
console.log('My name is ' + first + ' ' + last + '.');
// "My name is Ung-mo Lee."

// ES6: String Interpolation
console.log(`My name is ${first} ${last}.`);
// "My name is Ung-mo Lee."
// +로 구분지을 필요없이 ${...} 으로 감싸면 문자열내의 표현식은 문자열로 강제로 타입변환 된다.

console.log(`1 + 1 = ${1 + 1}`); 
// "1 + 1 = 2"

출처 : https://poiemaweb.com/

Comment Read more

빅데이터 관련 용어 정리

10 Jul 2019 | 용어정리 빅데이터

Comment Read more

java는 call by reference? call by value?

05 Jul 2019 | java

인터넷에서 회사면접에서 물어본 내용이라고 보았는데, 답변을 할 수 가 없었다. 누군가 물어보면 답변을 해주기 위해 내용을 정리해본다..

call by value, call by reference

개인적으로 자바책을 보면서, 기본 타입과 참조 타입의 차이에 관한 내용은 본적이 있지만 다른 언어를 접해보지 않아서 보지못한 내용일 수도 있는 거 같다. 찾아보니 c와 c++을 먼저 공부했다면 무조건 등장한다고 한다.
그럼 call by value는 어떻게 작동하는 것일까?
- 가장 일반적인 형태로, 값을 복사해오는 것이다.
- 결과값은 당연히 25가 나올것이다.

  public int add(int a, int b){
      return a + b;
  }
  
  int a = 10;
  int b = 15;
  System.out.println(add(a,b));

그럼 call by reference는?
- 자바의 참조타입을 공부했다면 알수있듯이, 참조하는 메모리 주소를 복사해오는 것이다. 어떻게 될까? 답은 a와 b의 값이 바뀐다.

그럼 java는 call by value인가? call by reference 인가?

그럼 a와 b의 실제 객체의 메모리 주소도 바뀐것일까?
여기 객체를 넘겨받아서, 새로운 객체로 변경하는 메서드 호출 코드가 있다.

public class CallByValue {
    public static void changeName(User user){
        user = new User("초보 개발자");
    }

    public static void main(String[] args){
        User human = new User("민간인..");
        changeName(human);
        System.out.println(human);
    }
}

// 결과값은, 당연히 민간인이다.

기존에, 객체를 변경하는 코드를 짜봤지만.. 결국 다른 객체로 변경이 되지 않는다. 자바는 기본자료형에 해당하는 변수값을 전달할 때는 값을 전달하고 참조자료형인 변수를 전달할 때는 메모리 참조주소값을 넘기는 것처럼 보인다.
간단히 설명하면, 기본형 타입 변수와 참조형 타입 변수가 있는데 call by value 방식으로 값을 전달한다.
결국, 자바는 call by value 방식으로 실제값을 복사하여 전달할수도 있고, 메모리 참조값을 전달 할 수 도 있다.
복사된 주소값을 받을 수는 있지만, 실제 참조하고 있는 객체(변수)를 변경할수는 없다.

참조

https://purple-dev.tistory.com/36
https://sleepyeyes.tistory.com/11

Comment Read more

큰일일수록 작게 시작하자

javascript 기본 문법 정리

호이스팅

함수선언문, 함수표현식의 차이

스코프, 실행컨텍스트

프론트엔드 개발 키워드

A. 반드시 해야 하는 기술리스트

B. 알면 좋은 기술

C. 몰라도 되는 기술

기술 로드맵 참고..

ES6 문법, VUE-CLI 3버전 사용법

ES6 문법

화살표 함수 ( Arrow Functions )

화살표 함수의 호출

템플릿 리터럴 문법

빅데이터 관련 용어 정리

java는 call by reference? call by value?

call by value, call by reference

그럼 java는 call by value인가? call by reference 인가?

참조